import { comfortHearts, formatClock, formatCoords, formatTemp, placeLabel, precipOutlook, type Units } from "@/lib/display";
import { pixelLabel } from "@/lib/styles";
import type { Place, WeatherReport } from "@/lib/weather/types";
import { AlertsBanner } from "./AlertsBanner";
import { ConditionsGrid } from "./ConditionsGrid";
import { ForecastPanel, type ForecastView } from "./forecast/ForecastPanel";
import { HeartMeter, SkyIcon } from "./PixelArt";
import { Slot } from "./Slot";

/** Everything shown once a report has loaded: alerts, hero, conditions, forecast. */
export function WeatherView({ report, place, units, forecastView, onForecastViewChange, providerLabel, maxDaysOnPlan }: {
  report: WeatherReport;
  place: Place;
  units: Units;
  forecastView: ForecastView;
  onForecastViewChange: (view: ForecastView) => void;
  providerLabel: string;
  maxDaysOnPlan: number;
}) {
  const { current, daily } = report;
  const today = daily[0];
  const outlook = precipOutlook(report.hourly, report.timeZone);

  return (
    <div className="flex flex-col gap-6">
      <AlertsBanner alerts={report.alerts} source={report.alertSource} timeZone={report.timeZone} />

      {/* Hero: stacks cleanly on phones, side-by-side from sm up */}
      <Slot
        as="section"
        className="[--cut:22px]"
        innerClassName="grid items-center gap-5 p-6 sm:grid-cols-[auto_1fr] sm:gap-7 sm:px-8 sm:py-7"
      >
        <div className="grid aspect-square w-[132px] place-items-center justify-self-center border border-gold-dim bg-black bg-radial-[circle_at_50%_45%] from-gold-bright/12 to-transparent to-65% sm:w-[168px] sm:justify-self-start">
          <SkyIcon
            condition={current.condition}
            isDay={current.isDay}
            size={132}
            className="h-auto w-[100px] animate-float motion-reduce:animate-none sm:w-[132px]"
          />
        </div>

        <div className="min-w-0">
          <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
            <h2 className="font-display text-lg font-medium tracking-[0.03em] text-ink sm:text-xl">
              {placeLabel(place)}
            </h2>
            <p className={pixelLabel}>
              Local {formatClock(report.fetchedAt, report.timeZone)} · {formatCoords(place.lat, place.lon)}
            </p>
          </div>

          <p className="mt-1 font-display text-[clamp(4.5rem,16vw,7rem)] leading-[0.95] font-medium tracking-[-0.02em] text-gold-bright">
            {formatTemp(current.tempC, units)}
          </p>
          <p className="mt-1.5 text-lg first-letter:uppercase">
            {current.description}
            {today && (
              <span className="text-stone">
                {" "}· High {formatTemp(today.highC, units)}, low {formatTemp(today.lowC, units)}
              </span>
            )}
          </p>
          {outlook && <p className="mt-1 text-sm text-teal">{outlook}</p>}
          <div className="mt-4 flex items-center gap-3 border-t border-gold-dim/40 pt-3">
            <HeartMeter hearts={comfortHearts(current)} />
            <span className={pixelLabel}>Comfort</span>
          </div>
        </div>
      </Slot>

      <ConditionsGrid report={report} units={units} />

      <ForecastPanel
        report={report}
        units={units}
        view={forecastView}
        onViewChange={onForecastViewChange}
        providerLabel={providerLabel}
        maxDaysOnPlan={maxDaysOnPlan}
      />
    </div>
  );
}