import React from 'react';

const TRAINING_PHASES = [
  { id: 'prep', label: '身份与须知', steps: [1, 2] },
  { id: 'verify', label: '资质与培训', steps: [3, 4, 5] },
  { id: 'confirm', label: '签署与提车', steps: [6, 7, 8] },
];

function getPhaseStatus(phase, currentStep) {
  const maxStep = Math.max(...phase.steps);
  const minStep = Math.min(...phase.steps);
  if (currentStep > maxStep) return 'done';
  if (currentStep >= minStep && currentStep <= maxStep) return 'active';
  return 'pending';
}

function TrainingPhaseBar({ currentStep }) {
  return (
    <div className="dt-phase-bar" role="list" aria-label="培训阶段">
      {TRAINING_PHASES.map((phase, index) => {
        const status = getPhaseStatus(phase, currentStep);
        return (
          <React.Fragment key={phase.id}>
            {index > 0 && (
              <div
                className={`dt-phase-connector ${status === 'done' || status === 'active' ? 'done' : ''}`}
              />
            )}
            <div className={`dt-phase-item dt-phase-item--${status}`} role="listitem">
              <span className="dt-phase-icon">
                {status === 'done' ? '✓' : index + 1}
              </span>
              <span className="dt-phase-label">{phase.label}</span>
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

export function TrainingStepHeader({
  currentStep,
  totalSteps = 8,
  stepNames,
  stepDetailHint = '',
}) {
  const isComplete = currentStep >= totalSteps;
  const progressPercent = (currentStep / totalSteps) * 100;

  return (
    <div className={`dt-step-header ${isComplete ? 'dt-step-header--complete' : ''}`}>
      <div className="dt-step-indicator">
        <span className="dt-step-text">{isComplete ? '培训已完成' : '培训进度'}</span>
        <span className="dt-step-count">
          步骤 {currentStep}/{totalSteps}
        </span>
      </div>

      <TrainingPhaseBar currentStep={currentStep} />

      <div className="dt-progress-bar" aria-hidden="true">
        <div
          className="dt-progress-fill"
          style={{ width: `${progressPercent}%` }}
        />
      </div>

      <div className="dt-step-meta">
        <span className="dt-step-name">{stepNames[currentStep - 1]}</span>
        {stepDetailHint ? (
          <span className="dt-step-detail-hint">{stepDetailHint}</span>
        ) : null}
      </div>
    </div>
  );
}

export function DriverTrainingLayout({
  currentStep,
  totalSteps = 8,
  stepNames,
  stepDetailHint,
  children,
  footer,
  embedded = false,
  immersive = false,
}) {
  return (
    <div
      className={`driver-training-app${embedded ? ' driver-training-app--embedded' : ''}${immersive ? ' driver-training-app--signature-immersive' : ''}`}
    >
      <div className="dt-page">
        {!embedded && (
          <header className="dt-header">
            <div className="dt-header-bar">
              <h1 className="dt-header-title">司机安全培训</h1>
            </div>
          </header>
        )}
        <div className={`dt-content${immersive ? ' dt-content--signature-immersive' : ''}`}>
          {!immersive ? (
            <TrainingStepHeader
              currentStep={currentStep}
              totalSteps={totalSteps}
              stepNames={stepNames}
              stepDetailHint={stepDetailHint}
            />
          ) : null}
          {children}
        </div>
        {footer && <div className={`dt-footer${immersive ? ' dt-footer--signature-immersive' : ''}`}>{footer}</div>}
      </div>
    </div>
  );
}
