import React from 'react';
import type { VehicleRecord } from '../types';
import { displayUILabel, isShanghaiPlate, resolveProjectDelivery } from '../utils/vehicle';
import { DetailExpireField } from './DetailExpireField';
import { DetailInlineEditField } from './DetailInlineEditField';
import { DetailParamField, DetailParamSection } from './DetailParamLayout';
import { InspectExpireCell } from './InspectExpireCell';
import { StatusTag } from './StatusTag';

interface DetailBasicInfoTabProps {
  record: VehicleRecord;
  onOpenLicenseEdit?: (record: VehicleRecord) => void;
  onSaveField?: (recordId: string, patch: Partial<VehicleRecord>) => void;
}

export function DetailBasicInfoTab({
  record,
  onOpenLicenseEdit,
  onSaveField,
}: DetailBasicInfoTabProps) {
  const project = resolveProjectDelivery(record, '无');
  const shanghaiPlate = isShanghaiPlate(record.plateNo);
  const handleLicenseEdit = () => onOpenLicenseEdit?.(record);

  return (
    <div className="vm-model-param-tab vm-model-param-tab--readonly">
      <DetailParamSection title="档案信息">
        <div className="vm-model-param-grid">
          <DetailParamField
            label="出厂年份"
            actionable
            value={(
              <DetailInlineEditField
                value={record.year}
                editType="year"
                onSave={(year) => onSaveField?.(record.id, { year })}
              />
            )}
          />
          <DetailParamField
            label="采购入库日期"
            actionable
            value={(
              <DetailInlineEditField
                value={record.purchaseDate}
                editType="date"
                onSave={(purchaseDate) => onSaveField?.(record.id, { purchaseDate })}
              />
            )}
          />
          <DetailParamField
            label="强制报废日期"
            value={<DetailExpireField date={record.scrapDate} onClickNotUploaded={handleLicenseEdit} />}
          />
          {shanghaiPlate && (
            <DetailParamField
              label="下次等级评定时间"
              value={<DetailExpireField date={record.ratingTime} onClickNotUploaded={handleLicenseEdit} />}
            />
          )}
        </div>
      </DetailParamSection>

      <DetailParamSection title="业务信息">
        <div className="vm-model-param-grid">
          <DetailParamField
            label="运营状态"
            value={<StatusTag label={record.operateStatus} tone="green" />}
          />
          <DetailParamField label="项目名称" value={project.projectName} empty={project.projectName === '无'} />
          <DetailParamField label="合同编码" value={project.contractNo} empty={project.contractNo === '无'} />
          <DetailParamField label="企业名称" value={project.companyName} empty={project.companyName === '无'} />
        </div>
      </DetailParamSection>

      <DetailParamSection title="证照信息">
        <div className="vm-model-param-grid">
          <DetailParamField
            label="车辆状态"
            value={<StatusTag label={record.vehicleStatus} tone="blue" />}
          />
          <DetailParamField
            label="证照状态"
            value={(
              <StatusTag
                label={record.licenseStatus}
                tone={record.licenseStatus === '异常' ? 'red' : 'green'}
              />
            )}
          />
          <DetailParamField
            label="行驶证有效期"
            value={(
              <InspectExpireCell
                expireDate={record.inspectExpire}
                onClickNotUploaded={handleLicenseEdit}
                alwaysShowRemainder
              />
            )}
          />
        </div>
      </DetailParamSection>

      <DetailParamSection title="保险与出库">
        <div className="vm-model-param-grid">
          <DetailParamField
            label="保险状态"
            value={(
              <StatusTag
                label={record.insuranceStatus}
                tone={record.insuranceStatus === '异常' ? 'red' : 'green'}
              />
            )}
          />
          <DetailParamField
            label="出库状态"
            value={displayUILabel(record.outStatus)}
            empty={displayUILabel(record.outStatus) === '无'}
          />
        </div>
      </DetailParamSection>

      <DetailParamSection title="资产状况">
        <div className="vm-model-param-grid">
          <DetailParamField
            label="车辆来源"
            value={<StatusTag label={record.vehicleSource} tone="blue" />}
          />
          <DetailParamField
            label="登记所有权"
            value={displayUILabel(record.ownership)}
            empty={displayUILabel(record.ownership) === '无'}
          />
          <DetailParamField
            label="运营公司"
            value={displayUILabel(record.operateCompany)}
            empty={displayUILabel(record.operateCompany) === '无'}
          />
          <DetailParamField
            label="租赁公司"
            value={displayUILabel(record.leaseCompany)}
            empty={displayUILabel(record.leaseCompany) === '无'}
          />
        </div>
      </DetailParamSection>
    </div>
  );
}
