import Blur from '../../../components/Blur';
import type { VehicleListItem } from '../types';

type DetailsProps = { vehicles: VehicleListItem[] };

function InventoryVehicleDetails({ vehicles, kind }: DetailsProps & { kind: 'abnormal' | 'pending' }) {
  const pending = kind === 'pending';
  const labels = pending ? ['合同编号', '客户名称（已脱敏）'] : ['异动类型', '具体工作', '申请人', '目标完成时间', '实际完成时间'];
  const details = (vehicle: VehicleListItem) => pending
    ? [vehicle.pendingDelivery?.contractNo || '未提供', vehicle.pendingDelivery?.customerName || '未提供']
    : [
        vehicle.abnormalMove?.type || '未提供',
        vehicle.abnormalMove?.work || '未提供',
        vehicle.abnormalMove?.applicant || '未提供',
        vehicle.abnormalMove?.targetCompletionTime || '未提供',
        vehicle.abnormalMove?.actualCompletionTime || (vehicle.abnormalMove?.status === '待结束' ? '未完成' : '未提供'),
      ];

  if (vehicles.length === 0) return <div className="py-14 text-center text-sm text-slate-500">暂无符合筛选条件的{pending ? '待交车' : '异动车辆'}</div>;

  return <>
    <p className="px-4 py-3 text-xs leading-5 text-slate-500">{pending ? '展示当前待交车任务的合同信息，客户名称已脱敏。' : '申请人取异动单创建人；未结束的异动显示“未完成”，缺失信息显示“未提供”。'}</p>
    <div className="space-y-3 px-3 pb-3 md:hidden">
      {vehicles.map(vehicle => <article key={vehicle.id} className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
        <h4 className="break-all font-mono text-base font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></h4>
        <p className="mt-1 text-xs text-slate-500">{vehicle.brandLabel || '—'} · {vehicle.type} · {vehicle.location === '其他' ? '对接中' : vehicle.location}</p>
        <dl className="mt-4 space-y-3 text-sm">
          {details(vehicle).map((value, index) => <div key={labels[index]} className="grid grid-cols-[6rem_minmax(0,1fr)] gap-2">
            <dt className="text-slate-500">{labels[index]}</dt>
            <dd className="whitespace-pre-wrap break-words font-medium text-slate-800 [overflow-wrap:anywhere]"><Blur>{value}</Blur></dd>
          </div>)}
        </dl>
      </article>)}
    </div>
    <div className="hidden overflow-x-auto md:block" tabIndex={0} role="region" aria-label={pending ? "待交车明细表" : "异动明细表，可横向滚动"}>
      <table className={`w-full ${pending ? "min-w-[700px]" : "min-w-[1160px]"} border-collapse text-left text-sm`}>
        <thead className="sticky top-0 z-20 bg-slate-700 text-white"><tr>
          {['车牌', '品牌', '车型', '所在地', ...labels].map(label => <th key={label} scope="col" className={`whitespace-nowrap p-3 ${label === "具体工作" ? "w-64" : ""}`}>{label}</th>)}
        </tr></thead>
        <tbody>{vehicles.map(vehicle => <tr key={vehicle.id} className="border-b border-slate-200 bg-white align-top">
          <td className="p-3 font-mono font-bold text-blue-700"><Blur>{vehicle.plateNumber || vehicle.vin || '—'}</Blur></td>
          <td className="p-3 text-slate-600">{vehicle.brandLabel || '—'}</td>
          <td className="p-3 text-slate-600">{vehicle.type}</td>
          <td className="p-3 text-slate-600">{vehicle.location === '其他' ? '对接中' : vehicle.location}</td>
          {details(vehicle).map((value, index) => <td key={labels[index]} className={`whitespace-pre-wrap break-words p-3 leading-6 text-slate-700 [overflow-wrap:anywhere] ${labels[index] === "具体工作" ? "min-w-56 max-w-72" : "min-w-28 max-w-48"}`}><Blur>{value}</Blur></td>)}
        </tr>)}</tbody>
      </table>
    </div>
  </>;
}

export function AbnormalVehicleDetails(props: DetailsProps) {
  return <InventoryVehicleDetails {...props} kind="abnormal" />;
}

export function PendingVehicleDetails(props: DetailsProps) {
  return <InventoryVehicleDetails {...props} kind="pending" />;
}