import type { FieldConfig, WizardState } from '../DeidentifyPanel';
import { TECHNIQUES, TEMPLATES } from '../DeidentifyPanel';

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

export function Step3({ wizard, onChange }: Step3Props) {
  const updateField = (idx: number, key: keyof FieldConfig, value: string | boolean) => {
    const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, [key]: value } : f));
    onChange({ fields: updated });
  };

  const selectedFields = wizard.fields.filter((f) => f.selected);

  return (
    <div className="space-y-4">
      <div className="rounded border border-stroke overflow-hidden">
        <table className="w-full text-caption border-collapse">
          <thead>
            <tr className="bg-bg-elevated text-t3">
              <th className="px-3 py-2 text-left font-medium border-b border-stroke">필드명</th>
              <th className="px-3 py-2 text-left font-medium border-b border-stroke">
                데이터타입
              </th>
              <th className="px-3 py-2 text-left font-medium border-b border-stroke">
                선택된 기법
              </th>
              <th className="px-3 py-2 text-left font-medium border-b border-stroke">설정값</th>
            </tr>
          </thead>
          <tbody>
            {selectedFields.map((field) => {
              const globalIdx = wizard.fields.findIndex((f) => f.name === field.name);
              return (
                <tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
                  <td className="px-3 py-2">
                    <select
                      value={field.technique}
                      onChange={(e) => updateField(globalIdx, 'technique', e.target.value)}
                      className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                    >
                      {TECHNIQUES.map((t) => (
                        <option key={t} value={t}>
                          {t}
                        </option>
                      ))}
                    </select>
                  </td>
                  <td className="px-3 py-2">
                    <input
                      type="text"
                      value={field.configValue}
                      onChange={(e) => updateField(globalIdx, 'configValue', e.target.value)}
                      className="w-full px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
                    />
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      <div className="flex flex-wrap items-center gap-4 pt-1">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={wizard.saveAsTemplate}
            onChange={(e) => onChange({ saveAsTemplate: e.target.checked })}
            className="accent-cyan-500"
          />
          <span className="text-caption text-t2">템플릿으로 저장</span>
        </label>

        <div className="flex items-center gap-2">
          <span className="text-caption text-t3">이전 템플릿 적용:</span>
          <select
            value={wizard.applyTemplate}
            onChange={(e) => onChange({ applyTemplate: e.target.value })}
            className="px-2.5 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
          >
            <option value="">선택 안 함</option>
            {TEMPLATES.map((t) => (
              <option key={t} value={t}>
                {t}
              </option>
            ))}
          </select>
        </div>
      </div>
    </div>
  );
}
