import type { OneshotConfig, ProcessMode, RepeatType, ScheduleConfig, WizardState } from '../DeidentifyPanel';
import { HOURS, WEEKDAYS } from '../DeidentifyPanel';

interface Step4Props {
  wizard: WizardState;
  onChange: (patch: Partial<WizardState>) => void;
}

export function Step4({ wizard, onChange }: Step4Props) {
  const handleScheduleChange = (key: keyof ScheduleConfig, value: string | boolean) => {
    onChange({ scheduleConfig: { ...wizard.scheduleConfig, [key]: value } });
  };
  const handleOneshotChange = (key: keyof OneshotConfig, value: string) => {
    onChange({ oneshotConfig: { ...wizard.oneshotConfig, [key]: value } });
  };

  return (
    <div className="space-y-4">
      <div className="space-y-3">
        {(
          [
            ['immediate', '즉시 처리', '지금 바로 데이터를 비식별화합니다.'],
            ['scheduled', '배치 처리 - 정기 스케줄링', '반복 일정에 따라 자동으로 처리합니다.'],
            ['oneshot', '배치 처리 - 일회성', '지정한 날짜/시간에 한 번 처리합니다.'],
          ] as [ProcessMode, string, string][]
        ).map(([val, label, desc]) => (
          <div key={val}>
            <label className="flex items-start gap-2.5 cursor-pointer">
              <input
                type="radio"
                name="processMode"
                value={val}
                checked={wizard.processMode === val}
                onChange={() => onChange({ processMode: val })}
                className="mt-0.5 accent-cyan-500"
              />
              <div>
                <span className="text-caption font-medium text-t1">{label}</span>
                <p className="text-label-2 text-t3 mt-0.5">{desc}</p>
              </div>
            </label>

            {val === 'scheduled' && wizard.processMode === 'scheduled' && (
              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
                <div className="flex items-center gap-3">
                  <label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
                  <select
                    value={wizard.scheduleConfig.hour}
                    onChange={(e) => handleScheduleChange('hour', e.target.value)}
                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                  >
                    {HOURS.map((h) => (
                      <option key={h} value={h}>
                        {h}
                      </option>
                    ))}
                  </select>
                </div>
                <div className="flex items-start gap-3">
                  <label className="text-caption text-t3 w-16 shrink-0 mt-1">반복</label>
                  <div className="flex flex-col gap-2">
                    {(
                      [
                        ['daily', '매일'],
                        ['weekly', '주 1회'],
                        ['monthly', '월 1회'],
                      ] as [RepeatType, string][]
                    ).map(([rt, rl]) => (
                      <div key={rt} className="flex items-center gap-2">
                        <input
                          type="radio"
                          name="repeatType"
                          value={rt}
                          checked={wizard.scheduleConfig.repeatType === rt}
                          onChange={() => handleScheduleChange('repeatType', rt)}
                          className="accent-cyan-500"
                        />
                        <span className="text-caption text-t1">{rl}</span>
                        {rt === 'weekly' && wizard.scheduleConfig.repeatType === 'weekly' && (
                          <select
                            value={wizard.scheduleConfig.weekday}
                            onChange={(e) => handleScheduleChange('weekday', e.target.value)}
                            className="ml-1 px-2 py-0.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                          >
                            {WEEKDAYS.map((d) => (
                              <option key={d} value={d}>
                                {d}요일
                              </option>
                            ))}
                          </select>
                        )}
                      </div>
                    ))}
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <label className="text-caption text-t3 w-16 shrink-0">시작일</label>
                  <input
                    type="date"
                    value={wizard.scheduleConfig.startDate}
                    onChange={(e) => handleScheduleChange('startDate', e.target.value)}
                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                  />
                </div>
                <div className="flex flex-col gap-1.5 mt-1">
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={wizard.scheduleConfig.notifyOnComplete}
                      onChange={(e) => handleScheduleChange('notifyOnComplete', e.target.checked)}
                      className="accent-cyan-500"
                    />
                    <span className="text-caption text-t2">처리 완료 시 이메일 알림</span>
                  </label>
                  <label className="flex items-center gap-2 cursor-pointer">
                    <input
                      type="checkbox"
                      checked={wizard.scheduleConfig.notifyOnError}
                      onChange={(e) => handleScheduleChange('notifyOnError', e.target.checked)}
                      className="accent-cyan-500"
                    />
                    <span className="text-caption text-t2">오류 발생 시 즉시 알림</span>
                  </label>
                </div>
              </div>
            )}

            {val === 'oneshot' && wizard.processMode === 'oneshot' && (
              <div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
                <div className="flex items-center gap-3">
                  <label className="text-caption text-t3 w-16 shrink-0">실행 날짜</label>
                  <input
                    type="date"
                    value={wizard.oneshotConfig.date}
                    onChange={(e) => handleOneshotChange('date', e.target.value)}
                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                  />
                </div>
                <div className="flex items-center gap-3">
                  <label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
                  <select
                    value={wizard.oneshotConfig.hour}
                    onChange={(e) => handleOneshotChange('hour', e.target.value)}
                    className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                  >
                    {HOURS.map((h) => (
                      <option key={h} value={h}>
                        {h}
                      </option>
                    ))}
                  </select>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}
