import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';

export function CodingConversationRenameDialog({ title, onSave, onClose }: {
  title: string;
  onSave(title: string): Promise<void>;
  onClose(): void;
}) {
  const [draft, setDraft] = useState(title);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  return (
    <Dialog open onOpenChange={(open) => { if (!open && !saving) onClose(); }}>
      <DialogContent onOpenAutoFocus={(event) => {
        event.preventDefault();
        const input = document.getElementById('coding-rename-title') as HTMLInputElement | null;
        input?.focus();
        input?.select();
      }}>
        <form onSubmit={(event) => {
          event.preventDefault();
          if (!draft.trim() || saving) return;
          setSaving(true);
          setError(null);
          void onSave(draft.trim()).then(onClose).catch((reason) => {
            setError(reason instanceof Error ? reason.message : String(reason));
          }).finally(() => setSaving(false));
        }}>
          <DialogHeader>
            <DialogTitle>修改对话标题</DialogTitle>
            <DialogDescription>手动命名后，标题不会再自动更新。</DialogDescription>
          </DialogHeader>
          <Input id="coding-rename-title" className="my-4" value={draft} maxLength={200}
            aria-label="对话标题" disabled={saving} onChange={(event) => setDraft(event.target.value)} />
          {error && <p role="alert" className="mb-3 text-sm text-destructive">{error}</p>}
          <DialogFooter>
            <Button type="button" variant="outline" disabled={saving} onClick={onClose}>取消</Button>
            <Button type="submit" disabled={saving || !draft.trim()}>{saving ? '保存中…' : '保存'}</Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}