import { useMemo, useState } from 'react';
import { ChevronRight, Download, RefreshCw } from 'lucide-react';
import { AnimatePresence, motion } from 'motion/react';
import * as XLSX from 'xlsx';
import TrendBadge from '../../TrendBadge';
import type { HydrogenDailyDetailCustomer, HydrogenDailyDetailStation, HydrogenDailyRow } from '../../types';
import type { DailyDetailState } from '../../HydrogenDaily';
import { SortableColumnHeader, sortBy, toggleSort, type SortDirection } from '../../components/SortableColumnHeader';

type DailySortKey = 'date' | 'price' | 'kg' | 'fee' | 'chainPct';

interface DailyDetailTableProps {
  rows: HydrogenDailyRow[];
  totalKg: number;
  totalFee: number;
  expanded: Set<string>;
  highlightedDate?: string | null;
  details: Record<string, DailyDetailState>;
  onToggle: (date: string) => void;
  onRetryDetail: (date: string) => void;
}

export function DailyDetailTable({
  rows,
  totalKg,
  totalFee,
  expanded,
  highlightedDate,
  details,
  onToggle,
  onRetryDetail,
}: DailyDetailTableProps) {
  const [sortKey, setSortKey] = useState<DailySortKey>('date');
  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
  const sortedRows = useMemo(() => sortBy(rows, sortKey, sortDirection, (row, key) => {
    if (key === 'price') return row.totalKg > 0 ? row.totalFee / row.totalKg : 0;
    return row[key === 'kg' ? 'totalKg' : key === 'fee' ? 'totalFee' : key];
  }), [rows, sortDirection, sortKey]);
  const changeSort = (nextKey: DailySortKey) => {
    const next = toggleSort(sortKey, sortDirection, nextKey);
    setSortKey(next.key);
    setSortDirection(next.direction);
  };
  return (
    <section className="overflow-hidden rounded-[14px] border border-slate-200/70 bg-white shadow-sm">
      <div className="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
        <h2 className="text-[14px] font-bold text-slate-800">
          每日加氢数据明细
          <span className="ml-1 text-[11px] font-normal text-slate-400">（日期 → 加氢站 → 客户 → 车辆/来源）</span>
        </h2>
        <div className="flex shrink-0 items-center gap-2">
          <span className="hidden text-[11px] font-medium text-slate-400 sm:inline">{rows.length} 天</span>
          <button
            type="button"
            onClick={() => exportDailyRows(rows, details)}
            className="inline-flex h-8 items-center gap-1.5 rounded-md border border-slate-200 bg-white px-2.5 text-[11px] font-semibold text-slate-600 hover:bg-slate-50"
          >
            <Download size={13} />导出 Excel
          </button>
        </div>
      </div>

      <div className="overflow-x-auto">
        <div className="min-w-[780px]">
          <div className="grid grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 bg-slate-50 px-3 py-2 text-[11px] font-medium text-slate-500">
            <span><SortableColumnHeader label="日期 / 加氢站" sortKey="date" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} /></span>
            <span className="text-right"><SortableColumnHeader label="单价 (元/Kg)" sortKey="price" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
            <span className="text-right"><SortableColumnHeader label="加氢量 (Kg)" sortKey="kg" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
            <span className="text-right"><SortableColumnHeader label="成本 / 环比" sortKey="fee" activeSortKey={sortKey} sortDirection={sortDirection} onSort={changeSort} align="right" /></span>
            <span className="text-right">站点余额</span>
          </div>
          <div className="grid grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 bg-blue-50/60 px-3 py-2 text-[12px] font-semibold text-blue-700">
            <span>合计</span>
            <span />
            <span className="text-right font-mono tabular-nums">{formatNumber(totalKg, 2)}</span>
            <span className="text-right font-mono tabular-nums">¥{formatNumber(totalFee, 0)}</span>
            <span className="text-right text-[10px] font-medium text-slate-400">以源表为准</span>
          </div>
          {sortedRows.map(row => {
            const open = expanded.has(row.date);
            const highlighted = highlightedDate === row.date;
            const abnormal = Math.abs(row.chainPct) >= 0.3;
            const background = highlighted
              ? 'bg-sky-50 ring-1 ring-inset ring-sky-200'
              : abnormal
                ? row.chainPct > 0 ? 'bg-emerald-50/35' : 'bg-red-50/35'
                : '';
            return (
              <div key={row.date} id={`hydrogen-daily-row-${row.date}`} className={`border-t border-slate-100 ${background}`}>
                <button
                  type="button"
                  onClick={() => onToggle(row.date)}
                  className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] gap-3 px-3 py-2.5 text-left transition-colors hover:bg-slate-50/60"
                >
                  <span className="flex items-center gap-1.5 text-[12px] font-semibold text-slate-700">
                    <ChevronRight size={14} className={`text-sky-600 transition-transform ${open ? 'rotate-90' : ''}`} />
                    <span className="font-mono tabular-nums">{row.date}</span>
                    <span className="text-[10px] font-normal text-slate-400">({row.stations.length} 个加氢站)</span>
                  </span>
                  <span className="text-right text-[12px] text-slate-300">—</span>
                  <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-800">{formatNumber(row.totalKg, 2)}</span>
                  <span className="text-right"><TrendBadge value={row.chainPct} /></span>
                  <span className="text-right text-[10px] text-slate-400">展开查看</span>
                </button>
                <AnimatePresence initial={false}>
                  {open ? (
                    <StationRows
                      date={row.date}
                      fallbackStations={row.stations}
                      detail={details[row.date]}
                      onRetry={() => onRetryDetail(row.date)}
                      sortKey={sortKey}
                      sortDirection={sortDirection}
                    />
                  ) : null}
                </AnimatePresence>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

interface StationRowsProps {
  date: string;
  fallbackStations: HydrogenDailyRow['stations'];
  detail?: DailyDetailState;
  onRetry: () => void;
  sortKey: DailySortKey;
  sortDirection: SortDirection;
}

function StationRows({ date, fallbackStations, detail, onRetry, sortKey, sortDirection }: StationRowsProps) {
  const [openStations, setOpenStations] = useState<Set<string>>(new Set());
  const [openCustomers, setOpenCustomers] = useState<Set<string>>(new Set());
  const stations = detail?.data?.stations;
  const sortedStations = useMemo(() => sortBy(stations ?? [], sortKey, sortDirection, (station, key) => dailyDetailValue(station, key)), [sortDirection, sortKey, stations]);

  const toggleStation = (station: HydrogenDailyDetailStation) => {
    const key = `${date}:${station.id}`;
    setOpenStations(previous => toggleSet(previous, key));
  };

  const toggleCustomer = (station: HydrogenDailyDetailStation, customer: HydrogenDailyDetailCustomer) => {
    const key = `${date}:${station.id}:${customer.id}:${customer.name}`;
    setOpenCustomers(previous => toggleSet(previous, key));
  };

  return (
    <motion.div
      initial={{ height: 0, opacity: 0 }}
      animate={{ height: 'auto', opacity: 1 }}
      exit={{ height: 0, opacity: 0 }}
      transition={{ duration: 0.15 }}
      className="overflow-hidden bg-slate-50/60"
    >
      {detail?.loading ? <DetailStatus label="正在读取客户和车辆明细" /> : null}
      {detail?.error ? (
        <div className="flex items-center justify-between px-9 py-3 text-[11px] text-rose-600">
          <span>明细读取失败，请重试。</span>
          <button type="button" onClick={onRetry} className="inline-flex items-center gap-1 font-semibold"><RefreshCw size={12} />重试</button>
        </div>
      ) : null}
      {!detail ? <DetailStatus label={`正在准备 ${fallbackStations.length} 个站点明细`} /> : null}
      {stations?.length === 0 ? (
        <div className="px-9 py-3 text-[11px] text-slate-400">当日无站点明细</div>
      ) : sortedStations.map((station, index) => {
        const stationKey = `${date}:${station.id}`;
        const stationOpen = openStations.has(stationKey);
        return (
          <div key={`${station.id}-${station.name}-${index}`} className="border-t border-slate-100 first:border-t-0">
            <button
              type="button"
              onClick={() => toggleStation(station)}
              className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] items-center gap-3 px-3 py-2 pl-9 text-left hover:bg-slate-100/80"
            >
              <div className="flex min-w-0 items-center gap-1.5">
                <ChevronRight size={13} className={`shrink-0 text-sky-600 transition-transform ${stationOpen ? 'rotate-90' : ''}`} />
                <div className="min-w-0">
                  <div className="truncate text-[12px] font-medium text-slate-700" title={station.name}>{station.name}</div>
                  <div className="mt-0.5 text-[10px] text-slate-400">{station.customers.length} 个客户 · {formatStationType(station.stationType)}</div>
                </div>
              </div>
              <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-600">{station.kg > 0 ? formatNumber(station.fee / station.kg, 2) : '—'}</span>
              <span className="text-right font-mono text-[12px] font-semibold tabular-nums text-slate-800">{formatNumber(station.kg, 2)}</span>
              <span className="text-right font-mono text-[11px] font-semibold tabular-nums text-emerald-700">¥{formatNumber(station.fee, 0)}</span>
              <span
                className={`text-right font-mono text-[10px] tabular-nums ${station.balance === null ? 'text-slate-400' : 'font-semibold text-slate-700'}`}
                title={station.balanceEffectiveTime ? `余额记录时间：${station.balanceEffectiveTime}` : '数据源暂无该站点余额记录'}
              >
                {station.balance === null ? '暂无记录' : `¥${formatNumber(station.balance, 2)}`}
              </span>
            </button>
            <AnimatePresence initial={false}>
              {stationOpen ? (
                <CustomerRows
                  date={date}
                  station={station}
                  openCustomers={openCustomers}
                  onToggle={customer => toggleCustomer(station, customer)}
                  sortKey={sortKey}
                  sortDirection={sortDirection}
                />
              ) : null}
            </AnimatePresence>
          </div>
        );
      })}
    </motion.div>
  );
}

function CustomerRows({
  date,
  station,
  openCustomers,
  onToggle,
  sortKey,
  sortDirection,
}: {
  date: string;
  station: HydrogenDailyDetailStation;
  openCustomers: Set<string>;
  onToggle: (customer: HydrogenDailyDetailCustomer) => void;
  sortKey: DailySortKey;
  sortDirection: SortDirection;
}) {
  const sortedCustomers = useMemo(() => sortBy(station.customers, sortKey, sortDirection, (customer, key) => dailyDetailValue(customer, key)), [sortDirection, sortKey, station.customers]);
  return (
    <motion.div
      initial={{ height: 0, opacity: 0 }}
      animate={{ height: 'auto', opacity: 1 }}
      exit={{ height: 0, opacity: 0 }}
      transition={{ duration: 0.15 }}
      className="overflow-hidden bg-white"
    >
      {sortedCustomers.map(customer => {
        const customerKey = `${date}:${station.id}:${customer.id}:${customer.name}`;
        const customerOpen = openCustomers.has(customerKey);
        return (
          <div key={customerKey} className="border-t border-slate-100">
            <button
              type="button"
              onClick={() => onToggle(customer)}
              className="grid w-full grid-cols-[minmax(250px,1fr)_110px_120px_110px_100px] items-center gap-3 px-3 py-2 pl-14 text-left hover:bg-sky-50/50"
            >
              <span className="flex min-w-0 items-center gap-1.5">
                <ChevronRight size={12} className={`shrink-0 text-slate-400 transition-transform ${customerOpen ? 'rotate-90' : ''}`} />
                <span className="truncate text-[11px] font-medium text-slate-700" title={customer.name}>{customer.name}</span>
                <span className="shrink-0 text-[10px] text-slate-400">{customer.vehicles.length} 条</span>
              </span>
              <span className="text-right text-[11px] text-slate-400">客户</span>
              <span className="text-right font-mono text-[11px] tabular-nums text-slate-700">{formatNumber(customer.kg, 2)}</span>
              <span className="text-right font-mono text-[11px] tabular-nums text-emerald-700">¥{formatNumber(customer.fee, 0)}</span>
              <span className="text-right text-[11px] text-slate-300">—</span>
            </button>
            <AnimatePresence initial={false}>
              {customerOpen ? <VehicleRows customer={customer} sortKey={sortKey} sortDirection={sortDirection} /> : null}
            </AnimatePresence>
          </div>
        );
      })}
    </motion.div>
  );
}

function VehicleRows({ customer, sortKey, sortDirection }: { customer: HydrogenDailyDetailCustomer; sortKey: DailySortKey; sortDirection: SortDirection }) {
  const sortedVehicles = useMemo(() => sortBy(customer.vehicles, sortKey, sortDirection, (vehicle, key) => dailyDetailValue(vehicle, key)), [customer.vehicles, sortDirection, sortKey]);
  return (
    <motion.div
      initial={{ height: 0, opacity: 0 }}
      animate={{ height: 'auto', opacity: 1 }}
      exit={{ height: 0, opacity: 0 }}
      transition={{ duration: 0.15 }}
      className="overflow-hidden bg-slate-50/80 px-3 py-1.5 pl-[74px]"
    >
      {sortedVehicles.map(vehicle => (
        <div key={vehicle.id} className="grid grid-cols-[minmax(176px,1fr)_110px_120px_110px_100px] items-center gap-3 border-t border-slate-100 py-1.5 first:border-t-0">
          <div className="flex min-w-0 items-center gap-2 text-[10px]">
            <span className="font-mono tabular-nums text-slate-400">{vehicle.time}</span>
            <span className="truncate font-semibold text-slate-700">{vehicle.plateNo}</span>
            <span className={`rounded px-1 py-0.5 font-medium ${vehicle.vehicleScope === 'lingniu' ? 'bg-blue-50 text-blue-600' : 'bg-amber-50 text-amber-700'}`}>
              {vehicle.vehicleScope === 'lingniu' ? '羚牛' : '外部'}
            </span>
          </div>
          <div className="flex min-w-0 justify-end gap-1 text-[9px]">
            <span className="max-w-[72px] truncate rounded bg-white px-1 py-0.5 text-slate-500" title={vehicle.source}>{vehicle.source}</span>
            <span className="rounded bg-white px-1 py-0.5 text-slate-500">{formatVerifyStatus(vehicle.verifyStatus)}</span>
          </div>
          <span className="text-right font-mono text-[10px] font-semibold tabular-nums text-slate-700">{formatNumber(vehicle.kg, 3)}</span>
          <span className="text-right font-mono text-[10px] tabular-nums text-emerald-700">¥{formatNumber(vehicle.fee, 2)}</span>
          <span className="text-right text-[10px] text-slate-300">—</span>
        </div>
      ))}
    </motion.div>
  );
}

function dailyDetailValue(
  row: HydrogenDailyDetailStation | HydrogenDailyDetailCustomer | HydrogenDailyDetailCustomer['vehicles'][number],
  key: DailySortKey,
) {
  if (key === 'date') return 'time' in row ? `${row.time} ${row.plateNo}` : 'name' in row ? row.name : '';
  if (key === 'price') return row.kg > 0 ? row.fee / row.kg : 0;
  if (key === 'chainPct') return row.kg;
  return row[key];
}

function DetailStatus({ label }: { label: string }) {
  return <div className="px-9 py-3 text-[11px] text-slate-400">{label}</div>;
}

function toggleSet(previous: Set<string>, key: string) {
  const next = new Set(previous);
  next.has(key) ? next.delete(key) : next.add(key);
  return next;
}

function formatVerifyStatus(value: string) {
  const normalized = value.toUpperCase();
  if (normalized === 'VERIFIED' || normalized === 'PASS') return '已核验';
  if (normalized === 'FAILED' || normalized === 'REJECT') return '异常';
  return '待核验';
}

function formatStationType(value: string) {
  const normalized = value.toLowerCase();
  if (normalized === 'self' || normalized === 'internal') return '自营站';
  if (normalized === 'external' || normalized === 'partner') return '合作站';
  return '加氢站';
}

function exportDailyRows(rows: HydrogenDailyRow[], details: Record<string, DailyDetailState>) {
  const workbook = XLSX.utils.book_new();
  const summaryRows = rows.flatMap(row => row.stations.length > 0
    ? row.stations.map(station => ({
      日期: row.date,
      加氢站: station.name,
      单价元每Kg: station.pricePerKg,
      加氢量Kg: station.kg,
      成本元: station.fee,
      日环比: row.chainPct,
    }))
    : [{ 日期: row.date, 加氢站: '', 单价元每Kg: 0, 加氢量Kg: row.totalKg, 成本元: row.totalFee, 日环比: row.chainPct }]);
  XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(summaryRows), '日报汇总');

  const recordRows = Object.values(details).flatMap(state => {
    if (!state.data) return [];
    return state.data.stations.flatMap(station => station.customers.flatMap(customer => (
      customer.vehicles.map(vehicle => ({
        日期: state.data?.date,
        时间: vehicle.time,
        加氢站: station.name,
        客户: customer.name,
        车牌: vehicle.plateNo,
        车辆归属: vehicle.vehicleScope === 'lingniu' ? '羚牛' : '外部',
        来源: vehicle.source,
        核验状态: formatVerifyStatus(vehicle.verifyStatus),
        单价元每Kg: vehicle.unitPrice,
        加氢量Kg: vehicle.kg,
        成本元: vehicle.fee,
      }))
    )));
  });
  if (recordRows.length > 0) XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(recordRows), '已下钻流水');
  const start = rows.at(-1)?.date ?? '开始';
  const end = rows[0]?.date ?? '结束';
  XLSX.writeFile(workbook, `氢能按日_${start}_${end}.xlsx`);
}

function formatNumber(value: number, digits: number): string {
  return value.toLocaleString('zh-CN', { minimumFractionDigits: digits, maximumFractionDigits: digits });
}