import type { ProcessMode, WizardState } from '../DeidentifyPanel';

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

export function Step5({ wizard, onChange }: Step5Props) {
  const selectedCount = wizard.fields.filter((f) => f.selected).length;
  const ruleCount = wizard.fields.filter((f) => f.selected && f.technique !== '유지').length;

  const processModeLabel: Record<ProcessMode, string> = {
    immediate: '즉시 처리',
    scheduled: `배치 - 정기 (${wizard.scheduleConfig.hour} / ${wizard.scheduleConfig.repeatType === 'daily' ? '매일' : wizard.scheduleConfig.repeatType === 'weekly' ? `주1회 ${wizard.scheduleConfig.weekday}요일` : '월1회'})`,
    oneshot: `배치 - 일회성 (${wizard.oneshotConfig.date} ${wizard.oneshotConfig.hour})`,
  };

  const summaryRows = [
    { label: '작업명', value: wizard.taskName || '(미입력)' },
    {
      label: '소스',
      value:
        wizard.sourceType === 'db'
          ? `DB: ${wizard.dbConfig.database}.${wizard.dbConfig.tableName}`
          : wizard.sourceType === 'file'
            ? '파일 업로드'
            : `API: ${wizard.apiConfig.url}`,
    },
    { label: '데이터 건수', value: '15,240건' },
    { label: '선택 필드 수', value: `${selectedCount}개` },
    { label: '비식별화 규칙 수', value: `${ruleCount}개` },
    { label: '처리 방식', value: processModeLabel[wizard.processMode] },
    { label: '예상 처리시간', value: '약 3~5분' },
  ];

  return (
    <div className="space-y-4">
      <div className="rounded border border-stroke overflow-hidden">
        <table className="w-full text-caption border-collapse">
          <tbody>
            {summaryRows.map(({ label, value }) => (
              <tr key={label} className="border-b border-stroke last:border-b-0">
                <td className="px-4 py-2.5 text-t3 bg-bg-elevated w-36 font-medium">{label}</td>
                <td className="px-4 py-2.5 text-t1">{value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <label className="flex items-center gap-2 cursor-pointer p-3 rounded border border-stroke bg-bg-surface">
        <input
          type="checkbox"
          checked={wizard.confirmed}
          onChange={(e) => onChange({ confirmed: e.target.checked })}
          className="accent-cyan-500"
        />
        <span className="text-caption text-t1 font-medium">위 정보를 확인했습니다.</span>
      </label>
    </div>
  );
}
