import { useEffect, useState } from 'react';
import { BadgeCheck, CarFront, FileText, ReceiptText, WalletCards } from 'lucide-react';
import { fetchEtcOverview, type EtcOverviewResponse } from './api';
import RotatingFooterHint from '../../components/RotatingFooterHint';
import { EmptyState, ErrorState, LoadingState, MetricTile, SurfaceCard } from '../../components/ui/surface';

function formatYuan(value: number) {
  return `¥${value.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`;
}

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

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

  if (error) return <ErrorState message="ETC 数据源暂时不可用，请稍后刷新。" />;
  if (!data) return <LoadingState label="正在核对 ETC 台账" />;

  if (!data.hasData) {
    return (
      <div className="flex flex-col gap-3">
        <EmptyState title="暂无 ETC 通行台账" description="当前账单和通行明细均未入库，接入后会自动展示统计数据。" />
        <RotatingFooterHint hints={['ETC 台账状态已按数据库实时核对', '待通行明细入库后自动生成统计']} />
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        <MetricTile icon={ReceiptText} label="通行明细" value={data.tollRecordCount.toLocaleString('zh-CN')} unit="笔" helper={data.latestTollTime ? `最新记录 ${data.latestTollTime}` : '暂无通行时间'} />
        <MetricTile icon={CarFront} label="涉及车辆" value={data.vehicleCount.toLocaleString('zh-CN')} unit="台" helper="按通行明细车牌去重" tone="emerald" />
        <MetricTile icon={WalletCards} label="通行费金额" value={formatYuan(data.totalAmount)} helper="通行费与服务费合计" tone="amber" />
        <MetricTile icon={FileText} label="ETC 账单" value={data.billCount.toLocaleString('zh-CN')} unit="张" helper={`应收 ${formatYuan(data.receivableAmount)} · 已收 ${formatYuan(data.paidAmount)}`} tone="slate" />
      </div>
      <SurfaceCard className="p-4">
        <div className="flex items-start gap-2 text-xs font-bold text-slate-500">
          <BadgeCheck size={17} className="mt-0.5 shrink-0 text-emerald-500" />
          <div>当前统计直接读取 ETC 通行明细与账单台账；金额、应收和已收均不做推算。</div>
        </div>
      </SurfaceCard>
      <RotatingFooterHint />
    </div>
  );
}