import React from 'react';
import type { SelfOperatedLedgerRow } from '../types';
import { formatMoney } from '../utils/ledger';

interface SelfLedgerTableProps {
  records: SelfOperatedLedgerRow[];
  selectedIds: Set<string>;
  onToggleRow: (id: string, checked: boolean) => void;
  onToggleAll: (checked: boolean) => void;
  onEdit: (record: SelfOperatedLedgerRow) => void;
  onDelete: (record: SelfOperatedLedgerRow) => void;
}

export function SelfLedgerTable({
  records,
  selectedIds,
  onToggleRow,
  onToggleAll,
  onEdit,
  onDelete,
}: SelfLedgerTableProps) {
  const allSelected = records.length > 0 && records.every((r) => selectedIds.has(r.id));

  if (!records.length) {
    return <div className="vm-empty" data-annotation-id="sob-table"><p>暂无符合条件的台账记录</p></div>;
  }

  return (
    <div className="vm-table-wrap ldb-table-wrap" data-annotation-id="sob-table">
      <table className="vm-table ldb-table sob-table">
        <thead>
          <tr>
            <th className="ldb-col-check sticky-col-left">
              <input type="checkbox" checked={allSelected} onChange={(e) => onToggleAll(e.target.checked)} aria-label="全选" />
            </th>
            <th>月份</th>
            <th>出车日期</th>
            <th>业务名称</th>
            <th>司机</th>
            <th>电话</th>
            <th>车辆承接方</th>
            <th>车牌号码</th>
            <th>品牌</th>
            <th>型号</th>
            <th className="ldb-col-money">单价</th>
            <th className="ldb-col-money">数量</th>
            <th className="ldb-col-money">金额</th>
            <th className="ldb-col-money">氢费</th>
            <th className="ldb-col-money">ETC费用</th>
            <th className="ldb-col-money">总成本</th>
            <th className="ldb-col-money">盈亏</th>
            <th>维护人</th>
            <th className="sticky-col-right ldb-col-actions">操作</th>
          </tr>
        </thead>
        <tbody>
          {records.map((row) => (
            <tr key={row.id}>
              <td className="ldb-col-check sticky-col-left">
                <input type="checkbox" checked={selectedIds.has(row.id)} onChange={(e) => onToggleRow(row.id, e.target.checked)} aria-label={`选择 ${row.plateNo}`} />
              </td>
              <td className="tabular-nums">{row.month}</td>
              <td className="tabular-nums">{row.dispatchDate}</td>
              <td className="ldb-col-name" title={row.businessName}>{row.businessName}</td>
              <td>{row.driver}</td>
              <td className="tabular-nums">{row.phone}</td>
              <td>{row.vehicleUndertaker}</td>
              <td className="tabular-nums">{row.plateNo}</td>
              <td>{row.brand}</td>
              <td title={row.model}>{row.model}</td>
              <td className="ldb-col-money tabular-nums">{formatMoney(row.unitPrice)}</td>
              <td className="ldb-col-money tabular-nums">{row.quantity}</td>
              <td className="ldb-col-money tabular-nums">{formatMoney(row.amount)}</td>
              <td className="ldb-col-money tabular-nums">{formatMoney(row.hydrogenFee)}</td>
              <td className="ldb-col-money tabular-nums">{formatMoney(row.etcFee)}</td>
              <td className="ldb-col-money tabular-nums">{formatMoney(row.totalCost)}</td>
              <td className={`ldb-col-money tabular-nums ${row.profitLoss >= 0 ? 'ldb-kpi-val--profit' : 'ldb-kpi-val--loss'}`}>{formatMoney(row.profitLoss)}</td>
              <td>{row.maintainerName}</td>
              <td className="sticky-col-right ldb-col-actions">
                <button type="button" className="vm-btn vm-btn-link" onClick={() => onEdit(row)}>编辑</button>
                <span className="ldb-action-sep" aria-hidden>|</span>
                <button type="button" className="vm-btn vm-btn-link ldb-link-danger" onClick={() => onDelete(row)}>删除</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
