import { useCallback, useEffect, useRef, useState } from 'react';
import RotatingFooterHint from '../../components/RotatingFooterHint';
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
import { DistributionCharts } from './hydrogen-overview/components/DistributionCharts';
import { HydrogenOverviewSkeleton } from './hydrogen-overview/components/HydrogenOverviewSkeleton';
import { InsightCards } from './hydrogen-overview/components/InsightCards';
import { KpiSection } from './hydrogen-overview/components/KpiSection';
import { MonthlyCharts } from './hydrogen-overview/components/MonthlyCharts';
import { OverviewHeader } from './hydrogen-overview/components/OverviewHeader';
import { RefreshOverlay } from './hydrogen-overview/components/RefreshOverlay';
import { CustomerSummaryTable, StationSummaryTable } from './hydrogen-overview/components/SummaryTables';
import { deriveOverviewMetrics, formatYuan as fmtYuan } from './hydrogen-overview/model';

export default function HydrogenOverview() {
  const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [year, setYear] = useState<number | null>(null);
  const [refreshing, setRefreshing] = useState(false);
  const [lastRefreshAt, setLastRefreshAt] = useState<number>(0);
  const refreshSeq = useRef(0);

  const load = useCallback(async (selectedYear: number | null, force: boolean) => {
    const seq = ++refreshSeq.current;
    setRefreshing(true);
    try {
      const d = await fetchHydrogenOverview(selectedYear ?? undefined, force);
      if (seq !== refreshSeq.current) return; // outdated
      setData(d);
      setError(null);
      setLastRefreshAt(Date.now());
    } catch (e) {
      if (seq !== refreshSeq.current) return;
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      if (seq === refreshSeq.current) setRefreshing(false);
    }
  }, []);

  // 初始加载 + 年份切换：用 force=false 命中热缓存
  useEffect(() => { void load(year, false); }, [year, load]);

  // 客户端兜底自动刷新：每 60s 静默拉一次（命中后端热缓存，几乎零成本）
  useEffect(() => {
    const t = setInterval(() => { void load(year, false); }, 60_000);
    return () => clearInterval(t);
  }, [year, load]);

  if (error && !data) {
    return <div className="bg-red-50 text-red-600 rounded-2xl border border-red-100 p-4 text-sm">加载失败：{error}</div>;
  }
  if (!data) {
    return <HydrogenOverviewSkeleton />;
  }

  const { kpi, top5, regions, monthly, customers, stations, availableYears, year: activeYear } = data;
  const {
    monthAvgKg,
    bestMonth,
    latestMonth,
    monthMomentum,
    top5Share,
    profitYield,
    stationAvgKg,
    monthlyDual,
  } = deriveOverviewMetrics(data);
  const yearProfitFmt = fmtYuan(kpi.yearProfit);
  const yearRevenueFmt = fmtYuan(kpi.yearRevenue);

  return (
    <div className="flex flex-col gap-3 relative">
      <OverviewHeader
        activeYear={activeYear}
        availableYears={availableYears}
        lastRefreshAt={lastRefreshAt}
        refreshing={refreshing}
        onSelectYear={setYear}
        onRefresh={() => void load(year, true)}
      />

      <KpiSection kpi={kpi} />

      <InsightCards
        monthAvgKg={monthAvgKg}
        bestMonth={bestMonth}
        latestMonth={latestMonth}
        monthMomentum={monthMomentum}
        top5Share={top5Share}
        profitYield={profitYield}
        stationAvgKg={stationAvgKg}
        stationCount={stations.length}
        yearProfitValue={yearProfitFmt.value}
        yearProfitUnit={yearProfitFmt.unit}
        yearRevenueValue={yearRevenueFmt.value}
        yearRevenueUnit={yearRevenueFmt.unit}
      />

      <MonthlyCharts activeYear={activeYear} monthly={monthly} monthlyDual={monthlyDual} />
      <DistributionCharts top5={top5} regions={regions} yearKg={kpi.yearKg} />
      <StationSummaryTable stations={stations} />
      <CustomerSummaryTable customers={customers} />

      <RotatingFooterHint />
      <RefreshOverlay refreshing={refreshing} hasData={Boolean(data)} />
    </div>
  );
}