"use client";

import { useEffect, useMemo, useState } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { TrendingUp, Target, Thermometer, Hash, BarChart3, Crosshair } from "lucide-react";
import { buildDebRecentRankingRows } from "@/lib/deb-training-ranking";

type MetricPayload = {
  hit_rate: number;
  mae: number;
  total_days: number;
  brier_score?: number;
};

type DebWindowSummary = {
  start_date?: string | null;
  end_date?: string | null;
  samples?: number;
  hits?: number;
  hit_rate?: number | null;
  mae?: number | null;
  bias?: number | null;
  city_count?: number;
};

type DebHistoricalSummary = {
  city_count?: number;
  avg_hit_rate?: number | null;
  weighted_hit_rate?: number | null;
  avg_mae?: number | null;
  avg_days_per_city?: number;
  sample_days?: number;
  hits?: number;
};

type DebUsableRecentSummary = {
  window?: "recent_7d" | "recent_14d" | string;
  city_count?: number;
  samples?: number;
  hits?: number;
  hit_rate?: number | null;
  avg_mae?: number | null;
  recommendations?: {
    primary?: number;
    supporting?: number;
  };
};

type DebVersionSummary = {
  version?: string;
  samples?: number;
  mae?: number | null;
  rmse?: number | null;
  bias?: number | null;
  bucket_hit_rate?: number | null;
};

type DebSummaryPayload = {
  historical?: DebHistoricalSummary;
  usable_recent?: DebUsableRecentSummary;
  recent_7d?: DebWindowSummary;
  recent_14d?: DebWindowSummary;
  versions?: Record<string, DebVersionSummary>;
};

type DebRecentStrategy = {
  recent_7d?: DebWindowSummary;
  recent_14d?: DebWindowSummary;
  trust_tier?: "high" | "medium" | "low" | "insufficient" | string;
  recommendation?: "primary" | "supporting" | "context_only" | "insufficient" | string;
  bias_direction?: "under" | "over" | "neutral" | "unknown" | string;
  reason?: string;
};

type TrainingCity = {
  city_id: string;
  name: string;
  deb?: MetricPayload;
  deb_recent?: DebRecentStrategy | null;
  mu?: MetricPayload;
};

type TrainingAccuracyPayload = {
  accuracy: TrainingCity[];
  deb_summary?: DebSummaryPayload;
};

const STAT_CARD_CLASSES: Record<string, string> = {
  blue: "bg-blue-50 border-blue-200",
  emerald: "bg-emerald-50 border-emerald-200",
  amber: "bg-amber-50 border-amber-200",
  purple: "bg-purple-50 border-purple-200",
};
const STAT_ICON_CLASSES: Record<string, string> = {
  blue: "text-blue-600",
  emerald: "text-emerald-600",
  amber: "text-amber-600",
  purple: "text-purple-600",
};

function barColor(hr: number) {
  if (hr >= 65) return "#059669";
  if (hr >= 45) return "#d97706";
  return "#dc2626";
}

function trustBadgeClass(tier?: string) {
  if (tier === "high") return "border-emerald-200 bg-emerald-50 text-emerald-700";
  if (tier === "medium") return "border-amber-200 bg-amber-50 text-amber-700";
  if (tier === "low") return "border-rose-200 bg-rose-50 text-rose-700";
  return "border-slate-200 bg-slate-50 text-slate-500";
}

function trustLabel(tier: string | undefined, isEn: boolean) {
  if (tier === "high") return isEn ? "High" : "高";
  if (tier === "medium") return isEn ? "Medium" : "中";
  if (tier === "low") return isEn ? "Low" : "低";
  return isEn ? "Thin" : "少";
}

function recommendationLabel(value: string | undefined, isEn: boolean) {
  if (value === "primary") return isEn ? "Primary" : "主用";
  if (value === "supporting") return isEn ? "Support" : "辅助";
  if (value === "context_only") return isEn ? "Context" : "参考";
  return isEn ? "Insufficient" : "样本少";
}

const TRAINING_CACHE_KEY = "polyweather_training_accuracy_v1";
const TRAINING_CACHE_TTL_MS = 24 * 60 * 60 * 1000; // 24 hours

function readTrainingCache(): TrainingAccuracyPayload | null {
  try {
    const raw = localStorage.getItem(TRAINING_CACHE_KEY);
    if (!raw) return null;
    const cached = JSON.parse(raw);
    if (cached.ts && Date.now() - cached.ts < TRAINING_CACHE_TTL_MS) {
      if (Array.isArray(cached.data)) return { accuracy: cached.data };
      if (cached.data && Array.isArray(cached.data.accuracy)) return cached.data;
    }
  } catch { /* ignore */ }
  return null;
}

function writeTrainingCache(data: TrainingAccuracyPayload) {
  try {
    localStorage.setItem(TRAINING_CACHE_KEY, JSON.stringify({ ts: Date.now(), data }));
  } catch { /* ignore */ }
}

export function TrainingDashboard({ isEn }: { isEn: boolean }) {
  const [payload, setPayload] = useState<TrainingAccuracyPayload | null>(() => readTrainingCache());

  useEffect(() => {
    let cancelled = false;
    fetch("/api/ops/training/accuracy", { cache: "no-store", headers: { Accept: "application/json" } })
      .then(async (res) => {
        if (!res.ok) return null;
        return res.json() as Promise<TrainingAccuracyPayload>;
      })
      .then((nextPayload) => {
        if (cancelled || !nextPayload?.accuracy) return;
        const filtered = nextPayload.accuracy.filter((c) => (c.deb || c.mu) && ((c.deb?.total_days ?? 0) + (c.mu?.total_days ?? 0)) >= 5);
        const next = { ...nextPayload, accuracy: filtered };
        setPayload(next);
        writeTrainingCache(next);
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  const data = payload?.accuracy ?? null;
  const debSummary = payload?.deb_summary;
  const debSorted = useMemo(() => (data || []).filter((c) => c.deb).sort((a, b) => (b.deb?.hit_rate ?? 0) - (a.deb?.hit_rate ?? 0)), [data]);
  const debRecentRanked = useMemo(() => buildDebRecentRankingRows(data || []), [data]);
  const debRecentRankIndex = useMemo(
    () => new Map(debRecentRanked.map((row, index) => [row.cityId, index])),
    [debRecentRanked],
  );
  const muSorted = useMemo(() => (data || []).filter((c) => c.mu).sort((a, b) => (b.mu?.hit_rate ?? 0) - (a.mu?.hit_rate ?? 0)), [data]);

  const debStats = useMemo(() => {
    if (!debSorted.length) return null;
    const avgHit = debSorted.reduce((s, c) => s + (c.deb?.hit_rate ?? 0), 0) / debSorted.length;
    const avgMae = debSorted.reduce((s, c) => s + (c.deb?.mae ?? 0), 0) / debSorted.length;
    const avgDays = Math.round(debSorted.reduce((s, c) => s + (c.deb?.total_days ?? 0), 0) / Math.max(debSorted.length, 1));
    return {
      avgHit: debSummary?.historical?.avg_hit_rate ?? avgHit,
      avgMae: debSummary?.historical?.avg_mae ?? avgMae,
      avgDays: debSummary?.historical?.avg_days_per_city ?? avgDays,
      cities: debSummary?.historical?.city_count ?? debSorted.length,
      sampleDays: debSummary?.historical?.sample_days,
      weightedHit: debSummary?.historical?.weighted_hit_rate,
      usableRecent: debSummary?.usable_recent,
    };
  }, [debSorted, debSummary]);

  const muStats = useMemo(() => {
    if (!muSorted.length) return null;
    const avgHit = muSorted.reduce((s, c) => s + (c.mu?.hit_rate ?? 0), 0) / muSorted.length;
    const avgMae = muSorted.reduce((s, c) => s + (c.mu?.mae ?? 0), 0) / muSorted.length;
    const avgBrier = muSorted.reduce((s, c) => s + (c.mu?.brier_score ?? 0), 0) / muSorted.length;
    const avgDays = Math.round(muSorted.reduce((s, c) => s + (c.mu?.total_days ?? 0), 0) / Math.max(muSorted.length, 1));
    return { avgHit, avgMae, avgBrier, avgDays, cities: muSorted.length };
  }, [muSorted]);

  const debHitChart = useMemo(
    () => debRecentRanked.slice(0, 18).map((c) => ({ name: c.name, value: c.hitRate })),
    [debRecentRanked],
  );
  const debMaeChart = useMemo(
    () => [...debRecentRanked]
      .sort((a, b) => {
        if (a.usableScore !== b.usableScore) return b.usableScore - a.usableScore;
        if (a.trustScore !== b.trustScore) return b.trustScore - a.trustScore;
        return a.mae - b.mae;
      })
      .slice(0, 18)
      .map((c) => ({ name: c.name, value: c.mae })),
    [debRecentRanked],
  );
  const muHitChart = useMemo(
    () => muSorted.slice(0, 18).map((c) => ({ name: c.name, value: Number((c.mu?.hit_rate ?? 0).toFixed(1)) })),
    [muSorted],
  );
  const muBrierChart = useMemo(
    () => [...muSorted].sort((a, b) => (a.mu?.brier_score ?? 99) - (b.mu?.brier_score ?? 99)).slice(0, 18).map((c) => ({ name: c.name, value: Number((c.mu?.brier_score ?? 0).toFixed(3)) })),
    [muSorted],
  );
  const debVersionRows = useMemo(() => {
    const versions = debSummary?.versions || {};
    return [
      { key: "deb_v1_raw", label: isEn ? "Raw DEB" : "原始 DEB" },
      { key: "deb_v1_recent_bias_corrected", label: isEn ? "Mean Bias" : "均值偏差" },
      { key: "deb_v2_bucket_calibrated", label: isEn ? "Bucket v2" : "桶校准 v2" },
      { key: "deb_v3_guarded_calibrated", label: isEn ? "Guarded v3" : "保护 v3" },
    ].map(({ key, label }) => ({ key, label, value: versions[key] })).filter((row) => row.value);
  }, [debSummary?.versions, isEn]);

  const formatPct = (value: number | null | undefined) => value == null ? "--" : `${value.toFixed(1)}%`;
  const formatMaybeDeg = (value: number | null | undefined, digits = 1) => value == null ? "--" : `${value.toFixed(digits)}°`;
  const usableWindowLabel = (window?: string) => {
    if (window === "recent_14d") return isEn ? "Usable 14d" : "可用近14天";
    return isEn ? "Usable 7d" : "可用近7天";
  };

  return (
    <div className="h-full overflow-auto bg-[#f5f7fa]">
      <div className="p-4">
        <h1 className="text-lg font-black text-slate-900 flex items-center gap-2 mb-1">
          <BarChart3 size={18} className="text-blue-600" />
          {isEn ? "Model Training Accuracy" : "模型训练准确率"}
        </h1>
        <p className="text-xs text-slate-500 mb-4">
          {isEn
            ? "DEB temperature forecast vs. Probability Mu calibration — per-city backtesting metrics."
            : "DEB 气温预报 与 概率 μ 校准 — 各城市回测指标。"}
        </p>

        {/* ── DEB Section ── */}
        {debStats && (
          <>
            <h2 className="text-sm font-black text-slate-800 flex items-center gap-1.5 mb-2">
              <Thermometer size={14} className="text-amber-600" />
              {isEn ? "DEB Temperature Forecast" : "DEB 气温预报"}
            </h2>
            <div className="grid grid-cols-2 gap-2 mb-3 md:grid-cols-3 xl:grid-cols-6">
              {[
                { icon: Hash, label: isEn ? "Cities" : "城市数", value: debStats.cities, tone: "blue" },
                { icon: Target, label: usableWindowLabel(debStats.usableRecent?.window), value: formatPct(debStats.usableRecent?.hit_rate), tone: "emerald" },
                { icon: TrendingUp, label: isEn ? "Recent 7d" : "近7天", value: formatPct(debSummary?.recent_7d?.hit_rate), tone: "emerald" },
                { icon: TrendingUp, label: isEn ? "Recent 14d" : "近14天", value: formatPct(debSummary?.recent_14d?.hit_rate), tone: "purple" },
                { icon: Thermometer, label: isEn ? "Avg Error" : "平均误差", value: `${debStats.avgMae.toFixed(1)}°`, tone: "amber" },
                { icon: Hash, label: isEn ? "Samples" : "样本天数", value: (debStats.sampleDays ?? debStats.avgDays).toLocaleString(), tone: "blue" },
              ].map(({ icon: Icon, label, value, tone }) => (
                <div key={label} className={`flex items-center gap-3 rounded-lg border ${STAT_CARD_CLASSES[tone]} p-3`}>
                  <Icon size={20} className={STAT_ICON_CLASSES[tone]} />
                  <div>
                    <div className="text-[11px] font-bold uppercase text-slate-500">{label}</div>
                    <div className="font-mono text-lg font-black text-slate-900">{String(value)}</div>
                  </div>
                </div>
              ))}
            </div>
            {debVersionRows.length ? (
              <div className="mb-3 grid grid-cols-1 gap-2 md:grid-cols-3">
                {debVersionRows.map((row) => {
                  const bucketRate = row.value?.bucket_hit_rate == null ? null : row.value.bucket_hit_rate * 100;
                  return (
                    <div key={row.key} className="rounded-lg border border-slate-200 bg-white px-3 py-2">
                      <div className="flex items-center justify-between gap-3">
                        <span className="text-[11px] font-black uppercase text-slate-500">{row.label}</span>
                        <span className="font-mono text-sm font-black text-slate-900">{formatPct(bucketRate)}</span>
                      </div>
                      <div className="mt-1 flex items-center justify-between text-[11px] text-slate-500">
                        <span>{isEn ? "MAE" : "误差"} {formatMaybeDeg(row.value?.mae, 2)}</span>
                        <span>{isEn ? "Samples" : "样本"} {row.value?.samples ?? 0}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : null}
            <div className="grid grid-cols-2 gap-3 mb-4">
              <ChartCard title={isEn ? "Usable Recent Hit Rate by City" : "可用近期命中率 by 城市"}>
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={debHitChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
                    <XAxis type="number" domain={[0, 100]} tick={{ fontSize: 11, fill: "#64748b" }} tickFormatter={(v) => `${v}%`} />
                    <YAxis dataKey="name" type="category" tick={{ fontSize: 11, fill: "#334155" }} width={52} />
                    <Tooltip contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }} formatter={(v: unknown) => [`${Number(v)}%`, isEn ? "Hit Rate" : "命中率"]} />
                    <Bar dataKey="value" radius={[0, 3, 3, 0]} fill="#2563eb" barSize={14} />
                  </BarChart>
                </ResponsiveContainer>
              </ChartCard>
              <ChartCard title={isEn ? "Usable Recent Error by City (lower = better)" : "可用近期误差 by 城市（越低越好）"}>
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={debMaeChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
                    <XAxis type="number" tick={{ fontSize: 11, fill: "#64748b" }} tickFormatter={(v) => `${v}°`} />
                    <YAxis dataKey="name" type="category" tick={{ fontSize: 11, fill: "#334155" }} width={52} />
                    <Tooltip contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }} formatter={(v: unknown) => [`${Number(v)}°`, isEn ? "Error" : "误差"]} />
                    <Bar dataKey="value" radius={[0, 3, 3, 0]} fill="#7c3aed" barSize={14} />
                  </BarChart>
                </ResponsiveContainer>
              </ChartCard>
            </div>
          </>
        )}

        {/* ── Mu Section ── */}
        {muStats && (
          <>
            <h2 className="text-sm font-black text-slate-800 flex items-center gap-1.5 mb-2">
              <Crosshair size={14} className="text-emerald-600" />
              {isEn ? "Probability Mu Calibration" : "概率 μ 校准"}
            </h2>
            <div className="grid grid-cols-4 gap-2 mb-3">
              {[
                { icon: Hash, label: isEn ? "Cities" : "城市数", value: muStats.cities, tone: "blue" },
                { icon: Target, label: isEn ? "Avg Hit" : "平均命中", value: `${muStats.avgHit.toFixed(1)}%`, tone: "emerald" },
                { icon: Thermometer, label: isEn ? "Avg Error" : "平均误差", value: `${muStats.avgMae.toFixed(2)}°`, tone: "amber" },
                { icon: Crosshair, label: isEn ? "Avg Brier" : "平均 Brier", value: muStats.avgBrier.toFixed(4), tone: "purple" },
              ].map(({ icon: Icon, label, value, tone }) => (
                <div key={label} className={`flex items-center gap-3 rounded-lg border ${STAT_CARD_CLASSES[tone]} p-3`}>
                  <Icon size={20} className={STAT_ICON_CLASSES[tone]} />
                  <div>
                    <div className="text-[11px] font-bold uppercase text-slate-500">{label}</div>
                    <div className="font-mono text-lg font-black text-slate-900">{String(value)}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="grid grid-cols-2 gap-3 mb-4">
              <ChartCard title={isEn ? "Prob Hit Rate by City" : "概率命中率 by 城市"}>
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={muHitChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
                    <XAxis type="number" domain={[0, 100]} tick={{ fontSize: 11, fill: "#64748b" }} tickFormatter={(v) => `${v}%`} />
                    <YAxis dataKey="name" type="category" tick={{ fontSize: 11, fill: "#334155" }} width={52} />
                    <Tooltip contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }} formatter={(v: unknown) => [`${Number(v)}%`, isEn ? "Hit Rate" : "命中率"]} />
                    <Bar dataKey="value" radius={[0, 3, 3, 0]} fill="#059669" barSize={14} />
                  </BarChart>
                </ResponsiveContainer>
              </ChartCard>
              <ChartCard title={isEn ? "Brier Score by City (lower = better)" : "Brier 评分 by 城市（越低越好）"}>
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={muBrierChart} layout="vertical" margin={{ top: 0, right: 16, left: 48, bottom: 0 }}>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" horizontal={false} />
                    <XAxis type="number" tick={{ fontSize: 11, fill: "#64748b" }} tickFormatter={(v) => `${Number(v).toFixed(2)}`} />
                    <YAxis dataKey="name" type="category" tick={{ fontSize: 11, fill: "#334155" }} width={52} />
                    <Tooltip contentStyle={{ borderRadius: 6, border: "1px solid #e2e8f0", fontSize: 12 }} formatter={(v: unknown) => [`${Number(v).toFixed(4)}`, "Brier"]} />
                    <Bar dataKey="value" radius={[0, 3, 3, 0]} fill="#d97706" barSize={14} />
                  </BarChart>
                </ResponsiveContainer>
              </ChartCard>
            </div>
          </>
        )}

        {/* ── Combined Table ── */}
        <div className="overflow-x-auto rounded-lg border border-slate-200 bg-white">
          <table className="min-w-[960px] w-full text-[12px] border-collapse">
            <thead>
              <tr className="border-b border-slate-200 bg-[#f8f9fa] text-left">
                <th className="w-10 px-3 py-2 text-center text-[11px] font-black text-slate-400">#</th>
                <th className="px-3 py-2 text-[11px] font-black uppercase text-slate-500">{isEn ? "City" : "城市"}</th>
                <th className="px-2 py-2 text-left text-[11px] font-black uppercase text-slate-500">{isEn ? "DEB Trust" : "DEB 信任"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "7d" : "7天"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "14d" : "14天"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "DEB Hit" : "DEB 命中"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "DEB Error" : "DEB 误差"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "μ Hit" : "μ 命中"}</th>
                <th className="px-2 py-2 text-right text-[11px] font-black uppercase text-slate-500">Brier</th>
                <th className="px-3 py-2 text-right text-[11px] font-black uppercase text-slate-500">{isEn ? "Days" : "天数"}</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {debSorted.length || muSorted.length ? (
                (() => {
                  const cities = new Map<string, { deb?: MetricPayload; debRecent?: DebRecentStrategy | null; mu?: MetricPayload; name: string }>();
                  for (const c of debSorted) cities.set(c.city_id, { deb: c.deb, debRecent: c.deb_recent, mu: c.mu, name: c.name });
                  for (const c of muSorted) {
                    const existing = cities.get(c.city_id);
                    if (existing) existing.mu = c.mu;
                    else cities.set(c.city_id, { deb: c.deb, debRecent: c.deb_recent, mu: c.mu, name: c.name });
                  }
                  const merged = [...cities.entries()]
                    .sort((a, b) => {
                      const aDebRank = debRecentRankIndex.get(a[0]) ?? 9999;
                      const bDebRank = debRecentRankIndex.get(b[0]) ?? 9999;
                      if (aDebRank !== bDebRank) return aDebRank - bDebRank;
                      const aMax = Math.max(a[1].deb?.hit_rate ?? 0, a[1].mu?.hit_rate ?? 0);
                      const bMax = Math.max(b[1].deb?.hit_rate ?? 0, b[1].mu?.hit_rate ?? 0);
                      return bMax - aMax;
                    })
                    .slice(0, 30);
                  return merged.map(([cityId, { deb, debRecent, mu, name }], i) => {
                    const debHit = deb?.hit_rate ?? 0;
                    const muHit = mu?.hit_rate ?? 0;
                    const brier = mu?.brier_score;
                    const recent7 = debRecent?.recent_7d?.hit_rate;
                    const recent14 = debRecent?.recent_14d?.hit_rate;
                    return (
                      <tr key={cityId} className="hover:bg-slate-50 transition-colors">
                        <td className="px-3 py-2 text-center text-[12px] font-mono text-slate-400">{i + 1}</td>
                        <td className="px-3 py-2 font-semibold text-slate-800 capitalize">{name}</td>
                        <td className="px-2 py-2">
                          {debRecent ? (
                            <span
                              className={`inline-flex min-w-[4rem] items-center justify-center rounded border px-2 py-0.5 text-[10px] font-black uppercase ${trustBadgeClass(debRecent.trust_tier)}`}
                              title={debRecent.reason}
                            >
                              {trustLabel(debRecent.trust_tier, isEn)} · {recommendationLabel(debRecent.recommendation, isEn)}
                            </span>
                          ) : (
                            <span className="text-slate-400">--</span>
                          )}
                        </td>
                        <td className="px-2 py-2 text-right font-mono text-slate-600">{recent7 == null ? "--" : `${recent7.toFixed(0)}%`}</td>
                        <td className="px-2 py-2 text-right font-mono text-slate-600">{recent14 == null ? "--" : `${recent14.toFixed(0)}%`}</td>
                        <td className="px-2 py-2 text-right font-mono font-bold" style={{ color: barColor(debHit) }}>
                          {deb ? `${debHit.toFixed(0)}%` : "--"}
                        </td>
                        <td className="px-2 py-2 text-right font-mono text-slate-600">{deb ? `${deb.mae.toFixed(1)}°` : "--"}</td>
                        <td className="px-2 py-2 text-right font-mono font-bold" style={{ color: barColor(muHit) }}>
                          {mu ? `${muHit.toFixed(0)}%` : "--"}
                        </td>
                        <td className="px-2 py-2 text-right font-mono text-slate-600">{brier != null ? brier.toFixed(4) : "--"}</td>
                        <td className="px-3 py-2 text-right text-slate-400">{(deb?.total_days ?? 0) + (mu?.total_days ?? 0)}</td>
                      </tr>
                    );
                  });
                })()
              ) : (
                <tr>
                  <td colSpan={10} className="px-4 py-12 text-center text-slate-400">
                    {data === null ? (isEn ? "Loading..." : "加载中...") : (isEn ? "No training data" : "暂无训练数据")}
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <p className="mt-3 text-center text-[11px] text-slate-400">
          {isEn
            ? "DEB = temperature forecast accuracy. μ = probability calibration. Brier = lower is better. Updated daily."
            : "DEB = 气温预报准确率。μ = 概率校准。Brier = 越低越好。每日更新。"}
        </p>
      </div>
    </div>
  );
}

function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-slate-200 bg-white p-3">
      <h3 className="mb-2 text-[12px] font-black uppercase text-slate-500">{title}</h3>
      <div className="h-72">{children}</div>
    </div>
  );
}