import { useEffect, useState } from 'react';
import { BatteryCharging, Gauge, Wallet, CalendarClock } from 'lucide-react';
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Cell, Tooltip, ReferenceLine } from 'recharts';
import { fetchElectricOverview, type ElectricOverviewResponse } from './api';
import RotatingFooterHint from '../../components/RotatingFooterHint';
import { ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

function fmtYuan(yuan: number) {
  return `¥${yuan.toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`;
}
function fmtKwh(kwh: number) {
  return `${kwh.toLocaleString('zh-CN', { maximumFractionDigits: 2 })} 度`;
}

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

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

  if (error) {
    return <ErrorState message={error} />;
  }
  if (!data) {
    return <LoadingState label="正在加载电能总览" />;
  }
  const k = data.kpi;
  const trendData = data.trend;
  // 当电能数据滞后（本月无数据走 fallback）时，柱图标题显示实际月份
  const trendMonthLabel = trendData[0]?.date.slice(0, 7);
  const currentMonth = new Date().toISOString().slice(0, 7);
  const chartTitle = trendMonthLabel && trendMonthLabel !== currentMonth
    ? `${trendMonthLabel} 每日充电`
    : '本月每日充电';
  const activeDays = trendData.filter(item => item.kwh > 0).length;
  const avgDailyKwh = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.kwh, 0) / activeDays : 0;
  const avgDailyFee = activeDays > 0 ? trendData.reduce((sum, item) => sum + item.fee, 0) / activeDays : 0;
  const peakDay = trendData.reduce<typeof trendData[number] | null>((best, item) => (!best || item.kwh > best.kwh ? item : best), null);
  const avgPrice = k.totalKwh > 0 ? k.totalFee / k.totalKwh : 0;
  const monthPrice = k.monthKwh > 0 ? k.monthFee / k.monthKwh : 0;

  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，手工导入每日更新
      </div>
      {/* 横向 mini KPI 头 */}
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricTile icon={Wallet} label="累计充电费" value={fmtYuan(k.totalFee)} helper={fmtKwh(k.totalKwh)} />
        <MetricTile icon={CalendarClock} label="本月充电费" value={fmtYuan(k.monthFee)} helper={fmtKwh(k.monthKwh)} tone="emerald" />
        <MetricTile icon={Gauge} label="累计均价" value={avgPrice.toFixed(2)} unit="元/度" helper={`本月 ${monthPrice.toFixed(2)} 元/度`} tone="amber" />
        <MetricTile icon={BatteryCharging} label="今日充电" value={k.todayKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} unit="度" helper={`${fmtYuan(k.todayFee)} · ${k.todayChainPct >= 0 ? '+' : ''}${(k.todayChainPct * 100).toFixed(1)}%`} tone={Math.abs(k.todayChainPct) >= 0.3 ? 'rose' : 'slate'} />
      </div>

      <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
        <SurfaceCard className="p-3">
          <div className="text-[11px] font-black text-slate-400">有效充电日</div>
          <div className="mt-1 text-xl font-black text-slate-900">{activeDays}<span className="ml-1 text-[11px] text-slate-400">天</span></div>
          <div className="mt-1 text-[11px] font-bold text-slate-500">日均 {avgDailyKwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度</div>
        </SurfaceCard>
        <SurfaceCard className="p-3">
          <div className="text-[11px] font-black text-slate-400">峰值日</div>
          <div className="mt-1 text-xl font-black text-blue-600">{peakDay ? peakDay.date.slice(5) : '—'}</div>
          <div className="mt-1 text-[11px] font-bold text-slate-500">{peakDay ? `${peakDay.kwh.toLocaleString('zh-CN', { maximumFractionDigits: 1 })} 度 · ${fmtYuan(peakDay.fee)}` : '暂无数据'}</div>
        </SurfaceCard>
        <SurfaceCard className="p-3">
          <div className="text-[11px] font-black text-slate-400">月度占比</div>
          <div className="mt-1 text-xl font-black text-emerald-600">{k.totalFee > 0 ? (k.monthFee / k.totalFee * 100).toFixed(1) : '0.0'}%</div>
          <div className="mt-1 text-[11px] font-bold text-slate-500">本月费用 / 累计费用</div>
        </SurfaceCard>
      </div>

      {/* 本月每日充电柱图 */}
      <SurfaceCard className="p-4">
        <div className="flex items-center justify-between mb-2">
          <span className="text-sm font-bold text-slate-700">{chartTitle}</span>
          <span className="text-[11px] text-slate-400 font-bold">时间单位：日 · 单位 元 · 均线为日均费用</span>
        </div>
        <ResponsiveContainer width="100%" height={160}>
          <BarChart data={trendData} margin={{ top: 8, right: 4, bottom: 0, left: 0 }}>
            <XAxis
              dataKey="date"
              tickFormatter={(v: string) => v.slice(5)}
              tick={{ fontSize: 10, fill: '#94a3b8' }}
              tickLine={false}
              axisLine={false}
              interval="preserveStartEnd"
              minTickGap={8}
            />
            <YAxis hide />
            <Tooltip
              formatter={(v) => [`¥${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 2 })}`, '充电费用']}
              labelFormatter={(d) => `日期 ${d}`}
              contentStyle={{ borderRadius: 12, fontSize: 12 }}
              cursor={{ fill: 'rgba(59, 130, 246, 0.06)' }}
            />
            {avgDailyFee > 0 && (
              <ReferenceLine
                y={avgDailyFee}
                stroke="#f59e0b"
                strokeDasharray="4 4"
                label={{ value: '均值', position: 'right', fill: '#d97706', fontSize: 10, fontWeight: 700 }}
              />
            )}
            <Bar dataKey="fee" radius={[4, 4, 0, 0]}>
              {trendData.map((_, i) => (
                <Cell key={i} fill="url(#electricBarGrad)" />
              ))}
            </Bar>
            <defs>
              <linearGradient id="electricBarGrad" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#3b82f6" />
                <stop offset="100%" stopColor="#22d3ee" />
              </linearGradient>
            </defs>
          </BarChart>
        </ResponsiveContainer>
      </SurfaceCard>
      <RotatingFooterHint />
    </div>
  );
}