"use client";

import { useCallback, useMemo, useState } from "react";
import type { HomepageSummary } from "yt-dlp-transcript-common/lib/homepageSummary";
import {
  DEFAULT_STATE,
  applyPreset,
  applyPatch,
  type ChartState,
  type PresetId,
} from "yt-dlp-transcript-common/lib/homepageChart";
import { topSite } from "yt-dlp-transcript-common/lib/homepageChartData";
import { ChartPanel } from "yt-dlp-transcript-common/components/charts/ChartPanel";
import { KpiHeader } from "./KpiHeader";
import { SiteGrid } from "./SiteGrid";
import { PresetBar } from "./PresetBar";
import { CustomizePanel } from "./CustomizePanel";

// The cross-site landing: headline KPIs, then one chart driven by named presets
// (with an inline Customize matrix for power users), then the site grid. All of
// it is one ChartState — presets set a full valid state; touching a control
// reconciles + recomputes which preset (or "custom") we're on.
export function HomeLanding({ summary }: { summary: HomepageSummary }) {
  const [state, setState] = useState<ChartState>(DEFAULT_STATE);

  const selectPreset = useCallback(
    (id: PresetId) => setState((p) => applyPreset(p, id)),
    [],
  );
  const patch = useCallback(
    (p: Partial<ChartState>) => setState((s) => applyPatch(s, p)),
    [],
  );
  const toggleSite = useCallback((siteId: string) => {
    setState((s) => {
      const next = new Set(s.hidden);
      if (next.has(siteId)) next.delete(siteId);
      else next.add(siteId);
      return applyPatch(s, { hidden: next });
    });
  }, []);
  // Click a line to isolate it (click again to clear).
  const selectSeries = useCallback((id: string) => {
    setState((s) => applyPatch(s, { soloId: s.soloId === id ? null : id }));
  }, []);

  const top = useMemo(() => topSite(summary, state), [summary, state]);

  return (
    <div className="flex flex-col gap-14 sm:gap-20">
      <div className="reveal" style={{ "--d": "120ms" } as React.CSSProperties}>
        <KpiHeader summary={summary} />
      </div>

      <section
        className="reveal flex flex-col gap-4"
        style={{ "--d": "200ms" } as React.CSSProperties}
      >
        <PresetBar active={state.preset} onSelect={selectPreset} />
        <div className="panel-instrument rounded-[var(--radius)] p-3 pt-4 sm:p-5">
          <ChartPanel
            summary={summary}
            state={state}
            onSelectSeries={selectSeries}
          />
        </div>
        <CustomizePanel
          state={state}
          onPatch={patch}
          topSiteLabel={top?.label ?? null}
        />
      </section>

      <section
        className="reveal"
        style={{ "--d": "280ms" } as React.CSSProperties}
      >
        <SiteGrid
          sites={summary.sites}
          metric={state.metric}
          breakdown={state.breakdown}
          hidden={state.hidden}
          onToggle={toggleSite}
        />
      </section>
    </div>
  );
}