"use client";

import { useEffect, useState } from "react";
import { Select } from "@/components/life/Controls";
import Icon from "@/components/ui/Icon";
import type { WeatherSummary } from "@/lib/api/climate";
import { useCitiesStore } from "@/store/cities";
import { useForecastStore } from "@/store/climate";

const SUMMARY: Record<WeatherSummary, [icon: string, label: string]> = {
  clear: ["sunny", "Clear"],
  partly_cloudy: ["partly_cloudy_day", "Partly cloudy"],
  fog: ["foggy", "Fog"],
  drizzle: ["rainy_light", "Drizzle"],
  rain: ["rainy", "Rain"],
  snow: ["weather_snowy", "Snow"],
  thunderstorm: ["thunderstorm", "Thunderstorms"],
  unknown: ["cloud", "No reading"],
};
export const look = (s: WeatherSummary) => SUMMARY[s] ?? SUMMARY.unknown;
export const deg = (n: number | null) => (n === null ? "--" : `${Math.round(n)}°`);
export const day = (iso: string, i: number) => (i === 0 ? "Today" : new Date(`${iso}T00:00`).toLocaleDateString("en", { weekday: "short" }));

/** City picker and a 7-day forecast. The provider can be down (503); the page then says so and offers a retry. */
export default function WeatherForecast() {
  const cities = useCitiesStore();
  const forecast = useForecastStore();
  const [cityId, setCityId] = useState<number | null>(null);

  useEffect(() => {
    if (cities.status === "idle") void cities.load();
  }, [cities.status, cities.load]);

  const city = cityId ?? cities.items[0]?.id ?? null;
  useEffect(() => {
    if (city !== null) void forecast.load(city);
  }, [city, forecast.load]);

  const f = forecast.item?.city.id === city ? forecast.item : null;
  const loading = forecast.status === "loading" || (city === null && cities.status !== "error");

  return (
    <div className="lf">
      <div className="lf-tools sv-tools">
        <Select
          label="City"
          value={city === null ? "" : String(city)}
          options={cities.items.map((c) => ({ value: String(c.id), label: c.name }))}
          onChange={(v) => setCityId(Number(v))}
          disabled={cities.items.length === 0}
        />
      </div>

      {forecast.status === "error" || cities.status === "error" ? (
        <div className="lf-notice" role="alert">
          <span>{forecast.errorStatus === 503 ? "Live weather is temporarily unavailable. Please try again in a few minutes." : (forecast.error ?? cities.error ?? "Something went wrong. Please try again.")}</span>
          <button type="button" className="btn btn-outline btn-sm" onClick={() => (city === null ? void cities.load() : void forecast.load(city))}>
            Try again
          </button>
        </div>
      ) : (
        <div className="cl-wx" aria-busy={loading} aria-live="polite">
          <div className="cl-now-card">
            {f?.current ? (
              <>
                <Icon name={look(f.current.summary)[0]} />
                <div>
                  <p className="cl-temp">{deg(f.current.temp_c)}</p>
                  <p className="cl-sum">
                    {look(f.current.summary)[1]} in {f.city.name}
                  </p>
                  <p className="cl-meta">
                    Humidity {f.current.humidity ?? "--"}%, wind {f.current.wind_speed_kmh === null ? "--" : Math.round(f.current.wind_speed_kmh)} km/h
                  </p>
                </div>
              </>
            ) : (
              <p className="cl-meta">{loading ? "Loading the forecast" : "No current reading for this city."}</p>
            )}
          </div>
          <ol className="cl-days" aria-label="7-day forecast">
            {(f?.daily ?? []).map((d, i) => (
              <li key={d.date}>
                <span className="cl-day">{day(d.date, i)}</span>
                <Icon name={look(d.summary)[0]} />
                <span className="sr-only">{look(d.summary)[1]}, </span>
                <span className="cl-range">
                  <b>{deg(d.temp_max_c)}</b> {deg(d.temp_min_c)}
                </span>
                {d.precipitation_probability !== null && d.precipitation_probability > 0 && <span className="cl-rain">{d.precipitation_probability}% rain</span>}
              </li>
            ))}
          </ol>
        </div>
      )}
    </div>
  );
}