import type { ApiConfig, DbConfig, SourceType, WizardState } from '../DeidentifyPanel';

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

export function Step1({ wizard, onChange }: Step1Props) {
  const handleDbChange = (key: keyof DbConfig, value: string) => {
    onChange({ dbConfig: { ...wizard.dbConfig, [key]: value } });
  };
  const handleApiChange = (key: keyof ApiConfig, value: string) => {
    onChange({ apiConfig: { ...wizard.apiConfig, [key]: value } });
  };

  return (
    <div className="space-y-5">
      <div>
        <label className="block text-caption font-medium text-t2 mb-1">작업명 *</label>
        <input
          type="text"
          value={wizard.taskName}
          onChange={(e) => onChange({ taskName: e.target.value })}
          placeholder="작업 이름을 입력하세요"
          className="w-full px-3 py-2 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
        />
      </div>

      <div>
        <label className="block text-caption font-medium text-t2 mb-2">소스 유형 *</label>
        <div className="flex flex-col gap-2">
          {(
            [
              ['db', '데이터베이스 연결'],
              ['file', '파일 업로드'],
              ['api', 'API 호출'],
            ] as [SourceType, string][]
          ).map(([val, label]) => (
            <label key={val} className="flex items-center gap-2 cursor-pointer">
              <input
                type="radio"
                name="sourceType"
                value={val}
                checked={wizard.sourceType === val}
                onChange={() => onChange({ sourceType: val })}
                className="accent-cyan-500"
              />
              <span className="text-caption text-t1">{label}</span>
            </label>
          ))}
        </div>
      </div>

      {wizard.sourceType === 'db' && (
        <div className="grid grid-cols-2 gap-3 p-4 rounded bg-bg-surface border border-stroke">
          {(
            [
              ['host', '호스트', 'localhost'],
              ['port', '포트', '5432'],
              ['database', '데이터베이스', 'wing'],
              ['tableName', '테이블명', 'public.customers'],
            ] as [keyof DbConfig, string, string][]
          ).map(([key, labelText, placeholder]) => (
            <div key={key}>
              <label className="block text-label-2 text-t3 mb-1">{labelText}</label>
              <input
                type="text"
                value={wizard.dbConfig[key]}
                onChange={(e) => handleDbChange(key, e.target.value)}
                placeholder={placeholder}
                className="w-full px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
              />
            </div>
          ))}
        </div>
      )}

      {wizard.sourceType === 'file' && (
        <div className="p-8 rounded border-2 border-dashed border-stroke bg-bg-surface flex flex-col items-center gap-2 text-center">
          <svg className="w-8 h-8 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
            />
          </svg>
          <p className="text-caption text-t2">파일을 드래그하거나 클릭하여 업로드</p>
          <p className="text-label-2 text-t3">CSV, XLSX, JSON 지원 (최대 500MB)</p>
        </div>
      )}

      {wizard.sourceType === 'api' && (
        <div className="p-4 rounded bg-bg-surface border border-stroke space-y-3">
          <div>
            <label className="block text-label-2 text-t3 mb-1">API URL</label>
            <input
              type="text"
              value={wizard.apiConfig.url}
              onChange={(e) => handleApiChange('url', e.target.value)}
              placeholder="https://api.example.com/data"
              className="w-full px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
            />
          </div>
          <div>
            <label className="block text-label-2 text-t3 mb-1">메서드</label>
            <select
              value={wizard.apiConfig.method}
              onChange={(e) => handleApiChange('method', 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"
            >
              <option value="GET">GET</option>
              <option value="POST">POST</option>
            </select>
          </div>
        </div>
      )}
    </div>
  );
}
