import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Modal } from '@/components/ui/Modal';

interface PathEditDialogProps {
  open: boolean;
  title: string;
  initialValue: string;
  onConfirm: (value: string) => void;
  onCancel: () => void;
}

export function PathEditDialog({ open, title, initialValue, onConfirm, onCancel }: PathEditDialogProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState(initialValue);

  // 对话框打开时重置输入值 — 此模式不会导致级联渲染
  // eslint-disable-next-line react-hooks/set-state-in-effect
  useEffect(() => { if (open) setValue(initialValue); }, [open, initialValue]);

  return (
    <Modal open={open} onClose={onCancel}>
      <h2 className="text-lg font-semibold mb-4">{title}</h2>
      <label className="text-sm mb-2 block">{t('dialog.pathLabel')}</label>
      <input
        type="text" autoFocus value={value}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => { if (e.key === 'Enter') onConfirm(value); }}
        className="w-full min-w-[400px] px-3 py-2 rounded border text-sm outline-none"
        style={{ backgroundColor: 'var(--app-list-bg)', color: 'var(--app-fg)', borderColor: 'var(--app-border)' }}
      />
      <div className="flex justify-end gap-2 mt-4">
        <button className="px-4 py-1.5 text-sm rounded border" style={{ borderColor: 'var(--app-border)' }} onClick={onCancel}>
          {t('dialog.cancel')}
        </button>
        <button className="px-4 py-1.5 text-sm rounded text-white" style={{ backgroundColor: '#2563eb' }} onClick={() => onConfirm(value)}>
          {t('dialog.confirm')}
        </button>
      </div>
    </Modal>
  );
}