import type {WeatherSky} from '@o2o/shared';
import {useSite} from '@site/lib/site-context';
import {useLiveWeather} from '@site/lib/use-live-weather';
import {useWeatherNotes} from '@site/lib/use-weather-note';
import {weatherBand, weatherMood} from '@site/lib/derive';
import {CloudIcon, RainIcon, SnowIcon, SunIcon} from './icons';

const MOOD_ICON = {
  맑음: SunIcon,
  흐림: CloudIcon,
  비: RainIcon,
  눈: SnowIcon,
} as const;

const OBSERVED = new Intl.DateTimeFormat('ko-KR', {
  timeZone: 'Asia/Seoul',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  hourCycle: 'h23',
});

function observed(iso: string): string | undefined {
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) return undefined;
  const parts = Object.fromEntries(OBSERVED.formatToParts(date).map((p) => [p.type, p.value]));
  return `${parts.month} ${parts.day}일 ${parts.hour}:${parts.minute} 관측`;
}

export function Weather() {
  const payload = useSite();
  const weather = useLiveWeather({
    initial: payload.local.weather,
    regionCode: payload.place.regionCode,
    latitude: payload.place.latitude,
    longitude: payload.place.longitude,
  });
  const mood = weatherMood(weather?.condition ?? '');
  const band = weatherBand(weather?.temperature ?? 0);
  const notes = payload.local.weather;
  const condition = (weather?.condition ?? '') as WeatherSky;
  const skyKey: WeatherSky = notes?.noteSets?.[condition] ? condition : mood;
  const [line, bandLine] = useWeatherNotes(
    notes?.noteSets?.[skyKey],
    notes?.notes?.[mood] ?? weather?.note,
    notes?.tempNoteSets?.[band],
    notes?.tempNotes?.[band],
  );
  if (!weather) return null;
  const Icon = MOOD_ICON[mood];
  const region = payload.place.addressLocality?.replace(/(시|군)$/, '');
  const at = observed(weather.observedAt);

  return (
    <section className="sec" id="weather" data-pg="home" aria-labelledby="weather-heading">
      <p className="kicker">Today</p>
      <h2 id="weather-heading">{region ? `지금 ${region}은` : '오늘의 날씨'}</h2>
      <div className="weather" data-band={band}>
        <Icon />
        <div className="t">
          <span className="deg">{Math.round(weather.temperature * 10) / 10}°</span>
          <span className="cond">{weather.condition}</span>
        </div>
        {at && <p className="obs">{at}</p>}
        {line && (
          <p id="wnote" key={line} className="note">
            {line}
          </p>
        )}
        <p className="band">
          <span>{band}</span>
          {bandLine && <em key={bandLine}>{bandLine}</em>}
        </p>
      </div>
    </section>
  );
}