import React from 'react';

import { formatNow } from '../utils/formatDateTime';

const DECLARATION =
  '本人确认所提交的身份及驾驶证件信息真实有效，已完整阅读安全培训文档并观看安全培训视频，已知悉氢能车辆驾驶及应急处置要求，并确认由本人执行本次提车。';

export default function Step6Signature({ state, updateState, completeStep, renderPart = 'all' }) {
  const { step6, step3, trainingTask } = state;
  const checked = step6.checked;

  const driverName = step3.certificates?.idFront?.fields?.name || '—';
  const idLast4 = (step3.certificates?.idFront?.fields?.idNumber || '****').slice(-4);
  const vehicleClass = step3.certificates?.licenseFront?.fields?.vehicleClass || '—';

  const content = (
    <div className="dt-card dt-step6-card">
      <h2 className="dt-card-title">签字确认</h2>

      <section className="dt-step6-section">
        <h3 className="dt-step6-section-title">① 阅读声明</h3>
        <div className="dt-step6-declaration">{DECLARATION}</div>
      </section>

      <section className="dt-step6-section">
        <h3 className="dt-step6-section-title">② 核对信息</h3>
        <div className="dt-info-list dt-step6-info">
          <div className="dt-info-item dt-info-item--highlight">
            <span className="label">司机姓名</span>
            <span>{driverName}</span>
          </div>
          <div className="dt-info-item dt-info-item--highlight">
            <span className="label">当前车辆</span>
            <span>{trainingTask.vehiclePlate}</span>
          </div>
          <div className="dt-info-item">
            <span className="label">身份证后四位</span>
            <span>{idLast4}</span>
          </div>
          <div className="dt-info-item">
            <span className="label">驾驶证准驾车型</span>
            <span>{vehicleClass}</span>
          </div>
          <div className="dt-info-item">
            <span className="label">培训完成时间</span>
            <span>{formatNow()}</span>
          </div>
        </div>
      </section>

      <label className="dt-checkbox-row">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => {
            updateState((prev) => ({ ...prev, step6: { ...prev.step6, checked: e.target.checked } }));
          }}
        />
        <span>本人确认以上信息及签名真实有效。</span>
      </label>
    </div>
  );

  const footer = (
    <>
      {!checked ? <div className="dt-footer-hint">请勾选「本人确认以上信息及签名真实有效」</div> : null}
      <button
        type="button"
        className={`dt-btn-primary ${checked ? 'dt-btn-primary--ready' : ''}`}
        disabled={!checked}
        onClick={() => completeStep(6)}
      >
        下一步：手写签名
      </button>
    </>
  );

  if (renderPart === 'content') return content;
  if (renderPart === 'footer') return footer;
  return (
    <>
      {content}
      {footer}
    </>
  );
}
