import { useState, useCallback } from 'react';
import type { WizardState } from '../DeidentifyPanel';
import { INITIAL_WIZARD } from '../DeidentifyPanel';
import { StepIndicator } from './StepIndicator';
import { Step1 } from './Step1';
import { Step2 } from './Step2';
import { Step3 } from './Step3';
import { Step4 } from './Step4';
import { Step5 } from './Step5';

interface WizardModalProps {
  onClose: () => void;
  onSubmit: (wizard: WizardState) => void;
}

export function WizardModal({ onClose, onSubmit }: WizardModalProps) {
  const [wizard, setWizard] = useState<WizardState>(INITIAL_WIZARD);

  const patch = useCallback((update: Partial<WizardState>) => {
    setWizard((prev) => ({ ...prev, ...update }));
  }, []);

  const handleNext = () => {
    if (wizard.step < 5) patch({ step: wizard.step + 1 });
  };
  const handlePrev = () => {
    if (wizard.step > 1) patch({ step: wizard.step - 1 });
  };
  const handleSubmit = () => {
    onSubmit(wizard);
    onClose();
  };

  const canProceed = () => {
    if (wizard.step === 1) return wizard.taskName.trim().length > 0;
    if (wizard.step === 2) return wizard.fields.some((f) => f.selected);
    if (wizard.step === 5) return wizard.confirmed;
    return true;
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
      <div className="bg-bg-card border border-stroke rounded-lg shadow-2xl w-full max-w-4xl mx-4 flex flex-col max-h-[90vh]">
        {/* 모달 헤더 */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-stroke shrink-0">
          <h3 className="text-body-2 font-semibold text-t1">새 비식별화 작업</h3>
          <button
            onClick={onClose}
            className="p-1 rounded text-t3 hover:text-t1 hover:bg-bg-elevated transition-colors"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        {/* 단계 표시기 */}
        <StepIndicator current={wizard.step} />

        {/* 단계 내용 */}
        <div className="flex-1 overflow-auto px-6 py-5">
          {wizard.step === 1 && <Step1 wizard={wizard} onChange={patch} />}
          {wizard.step === 2 && <Step2 wizard={wizard} onChange={patch} />}
          {wizard.step === 3 && <Step3 wizard={wizard} onChange={patch} />}
          {wizard.step === 4 && <Step4 wizard={wizard} onChange={patch} />}
          {wizard.step === 5 && <Step5 wizard={wizard} onChange={patch} />}
        </div>

        {/* 푸터 버튼 */}
        <div className="flex items-center justify-between px-6 py-4 border-t border-stroke shrink-0">
          <button
            onClick={handlePrev}
            disabled={wizard.step === 1}
            className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
          >
            이전
          </button>
          <div className="flex items-center gap-2">
            <button
              onClick={onClose}
              className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
            >
              취소
            </button>
            {wizard.step < 5 ? (
              <button
                onClick={handleNext}
                disabled={!canProceed()}
                className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                다음
              </button>
            ) : (
              <button
                onClick={handleSubmit}
                disabled={!canProceed()}
                className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
              >
                처리 시작
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
