import React from 'react';
import { VEHICLE_CLASS_OPTIONS } from '../data/constants';

const FIELD_CONFIG = {
  idFront: [
    { key: 'name', label: '姓名', required: true },
    { key: 'idNumber', label: '身份证号', required: true },
  ],
  idBack: [{ key: 'validPeriod', label: '有效期限', required: true }],
  licenseFront: [
    { key: 'name', label: '姓名', required: true },
    { key: 'licenseNumber', label: '证号', required: true },
    { key: 'vehicleClass', label: '准驾车型', required: true, inputType: 'select', options: VEHICLE_CLASS_OPTIONS },
    { key: 'validPeriod', label: '有效期限', required: true },
  ],
  qualification: [
    { key: 'name', label: '姓名', required: true },
    { key: 'gender', label: '性别', required: false },
    { key: 'birthDate', label: '出生日期', required: false },
    { key: 'nationality', label: '国籍', required: false },
    { key: 'address', label: '住址', required: false },
    { key: 'certNumber', label: '证号', required: true },
    { key: 'vehicleClass', label: '准驾车型', required: true },
    { key: 'category', label: '从业资格类别', required: true },
    { key: 'initialIssueDate', label: '初次领证日期', required: true },
    { key: 'validFrom', label: '有效起始日期', required: true },
    { key: 'validPeriod', label: '有效期限', required: true },
  ],
};

export const CERT_FIELD_LABELS = Object.fromEntries(
  Object.values(FIELD_CONFIG)
    .flat()
    .map((f) => [f.key, f.label]),
);

export function getCertFieldLabel(key) {
  return CERT_FIELD_LABELS[key] || key;
}

export default function OCRResultForm({ certType, data, onChange, errors = {} }) {
  const fields = FIELD_CONFIG[certType];
  if (!fields) return null;

  return (
    <div className="dt-ocr-form">
      {fields.map((f) => (
        <div className="dt-form-group" key={f.key}>
          <label className="dt-label">
            {f.label}
            {f.required && <span style={{ color: '#F53F3F' }}> *</span>}
          </label>
          {f.inputType === 'select' ? (
            <select
              className={`dt-input dt-select ${errors[f.key] ? 'error' : ''}`}
              value={data[f.key] || ''}
              onChange={(e) => onChange(f.key, e.target.value)}
            >
              <option value="">请选择{f.label}</option>
              {(f.options || []).map((code) => (
                <option key={code} value={code}>
                  {code}
                </option>
              ))}
            </select>
          ) : (
            <input
              className={`dt-input ${errors[f.key] ? 'error' : ''}`}
              value={data[f.key] || ''}
              onChange={(e) => onChange(f.key, e.target.value)}
            />
          )}
          {errors[f.key] && <div className="dt-field-error">{errors[f.key]}</div>}
        </div>
      ))}
    </div>
  );
}

export function ManualCertificateForm({ certType, data, onChange, errors = {} }) {
  return (
    <div>
      <div className="dt-manual-tip">请根据证件原件准确填写，相关信息将用于本次交车核验。</div>
      <OCRResultForm certType={certType} data={data} onChange={onChange} errors={errors} />
    </div>
  );
}
