"use client";

import { useMemo } from "react";
import { AlertTriangle, BellRing, CloudSun, RefreshCw } from "lucide-react";
import { EmptyState } from "@/components/states/empty-state";
import { LoadingSkeleton } from "@/components/states/loading-skeleton";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useForecast } from "@/hooks/use-forecast";
import { useWarnings } from "@/hooks/use-warnings";
import { DEFAULT_STATION_ID } from "@/lib/constants";
import { useI18n } from "@/lib/i18n";
import { getProvinceForSelection } from "@/lib/provinces";
import { useWeatherStore } from "@/lib/store";
import { buildTomorrowWeatherBrief, buildWeatherBrief } from "@/lib/weather-brief";

export function WeatherBriefCard({ latitude, longitude, locationName }: { latitude?: number; longitude?: number; locationName: string }) {
  const { language, t } = useI18n();
  const { data: forecast, isPending, isError, refetch } = useForecast(latitude, longitude);
  const { data: warnings = [] } = useWarnings();
  const selectedStationId = useWeatherStore((state) => state.selectedStationId);
  const selectedLocation = useWeatherStore((state) => state.selectedLocation);
  const windSpeedUnit = useWeatherStore((state) => state.windSpeedUnit);
  const province = getProvinceForSelection(selectedLocation?.province, selectedStationId ?? DEFAULT_STATION_ID);

  const brief = useMemo(() => {
    if (!forecast) return null;
    return buildWeatherBrief({ forecast, warnings, province, countyTeryt: selectedLocation?.countyTeryt, locationName, language, windSpeedUnit });
  }, [forecast, language, locationName, province, selectedLocation?.countyTeryt, warnings, windSpeedUnit]);
  const tomorrowBrief = useMemo(() => {
    if (!forecast) return null;
    return buildTomorrowWeatherBrief({ forecast, warnings, province, countyTeryt: selectedLocation?.countyTeryt, locationName, language, windSpeedUnit });
  }, [forecast, language, locationName, province, selectedLocation?.countyTeryt, warnings, windSpeedUnit]);

  if (!Number.isFinite(latitude) || !Number.isFinite(longitude) || isPending) {
    return <LoadingSkeleton className="h-48" />;
  }

  if (isError || !forecast) {
    return (
      <Card className="flex min-h-40 flex-col items-center justify-center p-6 text-center">
        <p className="text-sm text-muted">{t("brief.error")}</p>
        <Button variant="glass" className="mt-4" onClick={() => refetch()}>
          <RefreshCw className="size-4" />
          {t("common.retry")}
        </Button>
      </Card>
    );
  }

  if (!brief) {
    return <EmptyState title={t("brief.emptyTitle")} description={t("brief.emptyDescription")} />;
  }

  const isWarning = brief.severity === "warning";

  return (
    <Card className="p-4 sm:p-5">
      <div className="flex items-start gap-3">
        <div className={isWarning ? "rounded-control border border-warning/30 bg-warning/10 p-2 text-warning" : "rounded-control border border-border/70 bg-surface-muted/70 p-2 text-accent"}>
          {isWarning ? <AlertTriangle className="size-4" aria-hidden="true" /> : <CloudSun className="size-4" aria-hidden="true" />}
        </div>
        <div className="min-w-0">
          <p className={isWarning ? "text-[0.68rem] font-semibold uppercase tracking-[0.16em] text-warning" : "section-kicker"}>
            {t("brief.label")}
          </p>
          <h2 className="mt-1 text-lg font-semibold tracking-tight">{brief.headline}</h2>
          <p className="mt-1 text-sm leading-6 text-muted">{t("brief.description", { location: locationName })}</p>
        </div>
      </div>

      <ul className="mt-4 space-y-2">
        {brief.body.slice(0, 4).map((line) => (
          <li key={line} className="rounded-card border border-border/60 bg-surface-muted/45 px-3 py-2 text-sm leading-6">
            {line}
          </li>
        ))}
      </ul>

      {tomorrowBrief && (
        <div className="mt-5 border-t border-border/65 pt-4">
          <p className="section-kicker">{t("brief.tomorrowLabel")}</p>
          <h3 className="mt-1 text-sm font-semibold">{tomorrowBrief.headline}</h3>
          <ul className="mt-3 space-y-2">
            {tomorrowBrief.body.slice(0, 3).map((line) => (
              <li key={line} className="rounded-card border border-border/60 bg-surface-muted/45 px-3 py-2 text-sm leading-6">
                {line}
              </li>
            ))}
          </ul>
        </div>
      )}

      <p className="mt-4 flex items-center gap-2 text-xs leading-5 text-muted">
        <BellRing className="size-3.5 text-accent" aria-hidden="true" />
        {t("brief.pushHint")}
      </p>
    </Card>
  );
}