import { FileSpreadsheet } from 'lucide-react';
import { formatDateTime, formatFixed, KIND_LABEL, KIND_STYLE } from './model';
import type { ListItem } from './types';

interface RecordTableProps {
  items: ListItem[];
}

export function RecordTable({ items }: RecordTableProps) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-[11px]">
        <thead className="bg-slate-50/40 text-slate-400 font-bold">
          <tr>
            <th className="px-3 py-2 text-left whitespace-nowrap">充电时间</th>
            <th className="px-3 py-2 text-left whitespace-nowrap">车牌</th>
            <th className="px-3 py-2 text-center whitespace-nowrap">分类</th>
            <th className="px-3 py-2 text-left">电站 / 终端</th>
            <th className="px-3 py-2 text-right whitespace-nowrap">电量(度)</th>
            <th className="px-3 py-2 text-right whitespace-nowrap">费用(元)</th>
            <th className="px-3 py-2 text-right whitespace-nowrap">时长(分)</th>
            <th className="px-3 py-2 text-left whitespace-nowrap">订单编号</th>
          </tr>
        </thead>
        <tbody>
          {items.map(item => (
            <tr key={item.id} className="border-t border-slate-100 hover:bg-slate-50/60">
              <td className="px-3 py-2 text-slate-600 whitespace-nowrap font-mono">{formatDateTime(item.start_time, 16)}</td>
              <td className="px-3 py-2 font-bold text-slate-700 font-mono whitespace-nowrap">{item.plate || item.judged_plate || <span className="text-slate-300">—</span>}</td>
              <td className="px-3 py-2 text-center">
                <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold border ${KIND_STYLE[item.vehicle_kind]}`}>
                  {KIND_LABEL[item.vehicle_kind]}
                </span>
              </td>
              <td className="px-3 py-2 text-slate-600 truncate max-w-xs">{item.station_name || '—'}{item.terminal_name ? ` · ${item.terminal_name}` : ''}</td>
              <td className="px-3 py-2 text-right text-slate-700 font-bold tabular-nums">{formatFixed(item.kwh, 2)}</td>
              <td className="px-3 py-2 text-right text-slate-700 font-bold tabular-nums">{formatFixed(item.fee, 2)}</td>
              <td className="px-3 py-2 text-right text-slate-500 tabular-nums">{item.duration_min ?? '—'}</td>
              <td className="px-3 py-2 text-slate-400 font-mono text-[10px]">{item.order_no}</td>
            </tr>
          ))}
          {items.length === 0 && (
            <tr>
              <td colSpan={8} className="px-3 py-8 text-center text-slate-300 text-[11px] font-bold">
                <FileSpreadsheet size={18} className="mx-auto mb-2 text-slate-200" />
                尚无记录，先上传一份 xlsx 试试
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}