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

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

export function Step2({ wizard, onChange }: Step2Props) {
  const toggleField = (idx: number) => {
    const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, selected: !f.selected } : f));
    onChange({ fields: updated });
  };

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-3 gap-3">
        {[
          { label: '총 데이터 건수', value: '15,240건', color: 'text-t1' },
          { label: '중복', value: '0건', color: 'text-color-success' },
          { label: '누락값', value: '23건', color: 'text-color-caution' },
        ].map((stat) => (
          <div key={stat.label} className="p-3 rounded bg-bg-surface border border-stroke">
            <p className="text-label-2 text-t3 mb-1">{stat.label}</p>
            <p className={`text-body-2 font-semibold ${stat.color}`}>{stat.value}</p>
          </div>
        ))}
      </div>

      <div>
        <h4 className="text-caption font-medium text-t2 mb-2">스키마 분석 결과 — 포함 필드 선택</h4>
        <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 w-8">
                  <input
                    type="checkbox"
                    checked={wizard.fields.every((f) => f.selected)}
                    onChange={(e) =>
                      onChange({
                        fields: wizard.fields.map((f) => ({ ...f, selected: e.target.checked })),
                      })
                    }
                    className="accent-cyan-500"
                  />
                </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>
              {wizard.fields.map((field, idx) => (
                <tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
                  <td className="px-3 py-2">
                    <input
                      type="checkbox"
                      checked={field.selected}
                      onChange={() => toggleField(idx)}
                      className="accent-cyan-500"
                    />
                  </td>
                  <td className="px-3 py-2 font-medium text-t1">{field.name}</td>
                  <td className="px-3 py-2 text-t3">{field.dataType}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <p className="mt-1.5 text-label-2 text-t3">
          {wizard.fields.filter((f) => f.selected).length}개 선택됨 (전체 {wizard.fields.length}개)
        </p>
      </div>
    </div>
  );
}
