import { formatCount, formatDateTime, formatDecimal } from './model';
import type { BatchRow } from './types';

interface BatchTableProps {
  batches: BatchRow[];
  batchFilter: string;
  onClearFilter: () => void;
  onSelectBatch: (batchId: string) => void;
}

export function BatchTable({ batches, batchFilter, onClearFilter, onSelectBatch }: BatchTableProps) {
  if (batches.length === 0) return null;

  return (
    <section className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
      <div className="px-3 py-2 bg-slate-50 flex items-center justify-between">
        <span className="text-[11px] font-bold text-slate-500">最近上传批次</span>
        {batchFilter && (
          <button onClick={onClearFilter} className="text-[10px] font-bold text-blue-500">取消筛选</button>
        )}
      </div>
      <div className="overflow-x-auto">
        <table className="w-full text-[11px]">
          <thead className="text-slate-400 font-bold bg-slate-50/40">
            <tr>
              <th className="px-3 py-2 text-left">导入时间</th>
              <th className="px-3 py-2 text-right">总数</th>
              <th className="px-3 py-2 text-right">内部</th>
              <th className="px-3 py-2 text-right">外部</th>
              <th className="px-3 py-2 text-right">电量(度)</th>
              <th className="px-3 py-2 text-right">费用(元)</th>
              <th className="px-3 py-2 text-right">批次</th>
            </tr>
          </thead>
          <tbody>
            {batches.map(batch => (
              <tr
                key={batch.batch_id}
                onClick={() => onSelectBatch(batch.batch_id)}
                className={`border-t border-slate-100 cursor-pointer transition-colors ${batchFilter === batch.batch_id ? 'bg-blue-50/40' : 'hover:bg-slate-50/60'}`}
              >
                <td className="px-3 py-2 text-slate-600 whitespace-nowrap">{formatDateTime(batch.imported_at, 19)}</td>
                <td className="px-3 py-2 text-right font-bold text-slate-700">{formatCount(batch.records)}</td>
                <td className="px-3 py-2 text-right text-blue-600 font-bold">{formatCount(batch.internal_count)}</td>
                <td className="px-3 py-2 text-right text-amber-600 font-bold">{formatCount(batch.external_count)}</td>
                <td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">{formatDecimal(batch.total_kwh, 1)}</td>
                <td className="px-3 py-2 text-right font-bold text-slate-600 tabular-nums">¥{formatDecimal(batch.total_fee, 2)}</td>
                <td className="px-3 py-2 text-right text-slate-300 font-mono text-[10px]">{batch.batch_id.slice(0, 12)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}