import React from 'react';
import type { VehicleRecord } from '../types';
import {
  resolveVehicleModelParams,
  type VehicleModelParams,
} from '../utils/modelParams';
import { DetailParamField, DetailParamSection } from './DetailParamLayout';

interface DetailModelParamsTabProps {
  record: VehicleRecord;
}

function MaintenanceTable({ rows }: { rows: VehicleModelParams['maintenanceItems'] }) {
  return (
    <div className="vm-model-param-table-wrap">
      <table className="vm-model-param-table">
        <thead>
          <tr>
            <th>养护项目</th>
            <th>保养公里周期(KM)</th>
            <th>保养时间周期(月)</th>
            <th>工时费(元)</th>
            <th>材料费(元)</th>
            <th>合计(元)</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.id}>
              <td>{row.item}</td>
              <td>{row.kmCycle}</td>
              <td>{row.monthCycle}</td>
              <td>{row.labor}</td>
              <td>{row.material}</td>
              <td>{row.total}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function isEmptyValue(value: string): boolean {
  return value === '无' || value === '—' || value === '-';
}

export function DetailModelParamsTab({ record }: DetailModelParamsTabProps) {
  const params = resolveVehicleModelParams(record);

  return (
    <div className="vm-model-param-tab vm-model-param-tab--readonly" aria-readonly="true">
      <DetailParamSection title="基本情况">
        <div className="vm-model-param-grid">
          <DetailParamField label="品牌" value={params.brand} empty={isEmptyValue(params.brand)} />
          <DetailParamField label="型号" value={params.model} empty={isEmptyValue(params.model)} />
          <DetailParamField label="车型" value={params.vehicleModel} empty={isEmptyValue(params.vehicleModel)} />
          <DetailParamField label="公告型号" value={params.announcementModel} empty={isEmptyValue(params.announcementModel)} />
          <DetailParamField label="燃料种类" value={params.fuelType} />
          <DetailParamField label="车辆类型" value={params.vehicleType} empty={isEmptyValue(params.vehicleType)} />
          <DetailParamField label="车辆长度(mm)" value={params.lengthMm} />
          <DetailParamField label="车辆宽度(mm)" value={params.widthMm} />
          <DetailParamField label="车辆高度(mm)" value={params.heightMm} />
        </div>
      </DetailParamSection>

      <DetailParamSection title="轮轴情况">
        <div className="vm-model-param-grid vm-model-param-grid--2">
          <DetailParamField label="轮胎数量" value={params.tireCount} />
          <DetailParamField label="轮胎磨损费用" value={params.tireWearFee} />
        </div>
      </DetailParamSection>

      <DetailParamSection title="电气情况">
        <div className="vm-model-param-grid">
          <DetailParamField label="电池类型" value={params.batteryType} />
          <DetailParamField label="电池厂家" value={params.batteryVendor} />
          <DetailParamField label="总电量" value={params.totalPower} />
          <DetailParamField label="电池续航里程(KM)" value={params.batteryRangeKm} wide />
        </div>
      </DetailParamSection>

      <DetailParamSection title="供氢系统情况">
        <div className="vm-model-param-grid">
          <DetailParamField label="氢瓶容量" value={params.hydrogenCapacity} empty={isEmptyValue(params.hydrogenCapacity)} />
          <DetailParamField label="仪表盘显示模式" value={params.gaugeMode} empty={isEmptyValue(params.gaugeMode)} />
          <DetailParamField label="氢续航里程" value={params.hydrogenRangeKm} empty={isEmptyValue(params.hydrogenRangeKm)} />
        </div>
      </DetailParamSection>

      <DetailParamSection title="其他系统情况">
        <div className="vm-model-param-grid vm-model-param-grid--1">
          <DetailParamField label="冷机厂家" value={params.coldUnitVendor} wide />
        </div>
      </DetailParamSection>

      <DetailParamSection title="保养规则">
        <MaintenanceTable rows={params.maintenanceItems} />
      </DetailParamSection>
    </div>
  );
}
