import { useTranslation } from 'react-i18next';
import { IconChevronDown, IconClose, IconPlus } from '../../components/ui/icons';

/*
 * §5B 전자결재(F028) 결재선 순차 지정 UI — WISE/UIWS ApprovalFormPage 결재선 편집 패턴.
 * ★ kintex 사용자 디렉터리 검색 엔드포인트 부재(07_work_api_gaps.md, MessagePage 동일 제약)
 *   → 결재자는 사용자 ID 직접 입력 + 표시명(선택). 단계는 배열 순서(stepNo=index+1)로 파생.
 */
export interface ApprovalLineDraft {
  approverId: string;
  approverName: string;
}

export function ApprovalLineEditor({
  lines,
  onChange,
  disabled,
}: {
  lines: ApprovalLineDraft[];
  onChange: (next: ApprovalLineDraft[]) => void;
  disabled?: boolean;
}) {
  const { t } = useTranslation();

  const patch = (idx: number, p: Partial<ApprovalLineDraft>) =>
    onChange(lines.map((l, i) => (i === idx ? { ...l, ...p } : l)));
  const add = () => onChange([...lines, { approverId: '', approverName: '' }]);
  const remove = (idx: number) => onChange(lines.filter((_, i) => i !== idx));
  const move = (idx: number, dir: -1 | 1) => {
    const j = idx + dir;
    if (j < 0 || j >= lines.length) return;
    const next = [...lines];
    [next[idx], next[j]] = [next[j], next[idx]];
    onChange(next);
  };

  return (
    <div className="kx-line-editor">
      {lines.length === 0 ? (
        <p className="kx-line-editor__empty">{t('approval.lineEditor.empty')}</p>
      ) : (
        <ol className="kx-line-editor__list">
          {lines.map((l, idx) => (
            <li className="kx-line-editor__row" key={idx}>
              <span className="kx-line-editor__step" aria-hidden="true">
                {t('approval.lineEditor.stepNo', { n: idx + 1 })}
              </span>
              <input
                className="kx-line-editor__id"
                value={l.approverId}
                disabled={disabled}
                placeholder={t('approval.lineEditor.idPlaceholder')}
                aria-label={t('approval.lineEditor.approverId', { n: idx + 1 })}
                onChange={(e) => patch(idx, { approverId: e.target.value })}
              />
              <input
                className="kx-line-editor__name"
                value={l.approverName}
                disabled={disabled}
                placeholder={t('approval.lineEditor.namePlaceholder')}
                aria-label={t('approval.lineEditor.approverName', { n: idx + 1 })}
                onChange={(e) => patch(idx, { approverName: e.target.value })}
              />
              <div className="kx-line-editor__ops">
                <button
                  type="button"
                  className="kx-line-editor__op"
                  disabled={disabled || idx === 0}
                  aria-label={t('approval.lineEditor.moveUp')}
                  onClick={() => move(idx, -1)}
                >
                  <span className="kx-line-editor__up" aria-hidden="true">
                    <IconChevronDown size={15} />
                  </span>
                </button>
                <button
                  type="button"
                  className="kx-line-editor__op"
                  disabled={disabled || idx === lines.length - 1}
                  aria-label={t('approval.lineEditor.moveDown')}
                  onClick={() => move(idx, 1)}
                >
                  <IconChevronDown size={15} />
                </button>
                <button
                  type="button"
                  className="kx-line-editor__op kx-line-editor__op--del"
                  disabled={disabled}
                  aria-label={t('approval.lineEditor.remove')}
                  onClick={() => remove(idx)}
                >
                  <IconClose size={14} />
                </button>
              </div>
            </li>
          ))}
        </ol>
      )}
      <button type="button" className="kx-line-editor__add" disabled={disabled} onClick={add}>
        <IconPlus size={15} /> {t('approval.lineEditor.add')}
      </button>
    </div>
  );
}
