import { useEffect, useState } from 'react';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, PieChart, Pie, Tooltip, LabelList } from 'recharts';
import { fetchHydrogenOverview, type HydrogenOverviewResponse } from './api';
import RotatingFooterHint from '../../components/RotatingFooterHint';

interface YAxisTickProps {
  x?: number;
  y?: number;
  index?: number;
  payload?: { value: string };
}

function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
  return (
    <g transform={`translate(${x},${y})`}>
      <circle cx={-172} cy={0} r={9} fill="#3b82f6" />
      <text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
        {index + 1}
      </text>
      <text x={-154} y={4} textAnchor="start" fontSize={11} fill="#475569">
        {payload?.value}
      </text>
    </g>
  );
}

const REGION_COLORS = [
  '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
  '#10b981', '#ef4444', '#6366f1', '#14b8a6',
  '#94a3b8',
];


export default function HydrogenOverview() {
  const [data, setData] = useState<HydrogenOverviewResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchHydrogenOverview()
      .then(d => { if (!cancelled) setData(d); })
      .catch(e => { if (!cancelled) setError(e instanceof Error ? e.message : String(e)); });
    return () => { cancelled = true; };
  }, []);

  if (error) {
    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 k = data.kpi;
  const top5 = data.top5;
  const regions = data.regions;
  return (
    <div className="flex flex-col gap-3">
      <div className="bg-white rounded-xl border border-slate-100 px-3 py-1.5 text-[11px] text-slate-400">
        数据自 2025-01-01 起，每 1 分钟更新
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Top5 加氢站 */}
        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
          <div className="flex items-center justify-between mb-3">
            <span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
            <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
          </div>
          <ResponsiveContainer width="100%" height={260}>
            <BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
              <XAxis type="number" hide />
              <YAxis
                type="category"
                dataKey="name"
                width={188}
                tick={<RankYAxisTick />}
                tickLine={false}
                axisLine={false}
              />
              <Tooltip
                formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
                contentStyle={{ borderRadius: 12, fontSize: 12 }}
              />
              <Bar dataKey="kg" radius={[6, 6, 6, 6]}>
                {top5.map((_, i) => (
                  <Cell key={i} fill={`url(#topBarGrad)`} />
                ))}
                <LabelList
                  dataKey="kg"
                  position="right"
                  formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
                  fill="#475569"
                  fontSize={11}
                  fontWeight={700}
                />
              </Bar>
              <defs>
                <linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
                  <stop offset="0%" stopColor="#3b82f6" />
                  <stop offset="100%" stopColor="#22d3ee" />
                </linearGradient>
              </defs>
            </BarChart>
          </ResponsiveContainer>
        </div>
        {/* 区域占比环 */}
        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 flex flex-col gap-2">
          <span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
          <div className="flex items-center gap-2">
            <div className="relative w-1/2 h-[200px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={regions}
                    dataKey="kg"
                    nameKey="region"
                    innerRadius={48}
                    outerRadius={80}
                    paddingAngle={1}
                  >
                    {regions.map((_, i) => (
                      <Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
                </PieChart>
              </ResponsiveContainer>
              <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                <div className="text-[10px] text-slate-400 font-bold">年合计</div>
                <div className="text-base font-bold text-slate-700 leading-tight">{(k.yearKg / 1000).toFixed(2)}T</div>
              </div>
            </div>
            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
              {regions.map((r, i) => (
                <div key={r.region} className="flex items-center gap-1.5">
                  <span className="w-2 h-2 rounded-full" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
                  <span className="text-slate-600">{r.region}</span>
                  <span className="text-slate-400 ml-auto font-bold">{(r.share * 100).toFixed(1)}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <RotatingFooterHint />
    </div>
  );
}

function HydrogenOverviewSkeleton() {
  return (
    <div className="flex flex-col gap-3 animate-pulse">
      {/* 顶部说明条 */}
      <div className="bg-white rounded-xl border border-slate-100 px-3 py-2">
        <div className="h-3 w-44 bg-slate-100 rounded" />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {/* Top5 占位 */}
        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4">
          <div className="flex items-center justify-between mb-3">
            <div className="h-4 w-32 bg-slate-100 rounded" />
            <div className="h-3 w-12 bg-slate-100 rounded" />
          </div>
          <div className="space-y-3">
            {[100, 78, 56, 40, 28].map((w, i) => (
              <div key={i} className="flex items-center gap-3">
                <div className="w-5 h-5 rounded-full bg-slate-200" />
                <div className="h-3 w-32 bg-slate-100 rounded" />
                <div className="flex-1 h-4 rounded-md bg-gradient-to-r from-slate-200 to-slate-100" style={{ maxWidth: `${w}%` }} />
                <div className="h-3 w-12 bg-slate-100 rounded" />
              </div>
            ))}
          </div>
        </div>

        {/* 区域占比环 占位 */}
        <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 flex flex-col gap-3">
          <div className="h-4 w-28 bg-slate-100 rounded" />
          <div className="flex items-center gap-3">
            <div className="w-1/2 h-[200px] flex items-center justify-center">
              <div className="w-32 h-32 rounded-full border-[18px] border-slate-100" />
            </div>
            <div className="flex-1 space-y-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} className="flex items-center gap-2">
                  <div className="w-2 h-2 rounded-full bg-slate-200" />
                  <div className="h-3 w-16 bg-slate-100 rounded" />
                  <div className="h-3 w-10 bg-slate-100 rounded ml-auto" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="text-center text-[11px] text-slate-400 font-bold flex items-center justify-center gap-1.5">
        <span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
        正在加载氢能总览…
      </div>
    </div>
  );
}