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

type RenameDialogProps = {
  chatId: string;
  initialTitle: string;
  isOpen: boolean;
  onClose: () => void;
  onRename?: (chatId: string, newTitle: string) => Promise<Boolean>;
};

export function RenameDialog({
  chatId,
  initialTitle,
  onRename,
  isOpen,
  onClose,
}: RenameDialogProps) {
  const [newTitle, setNewTitle] = useState(initialTitle);

  const handleRename = () => {
    if (onRename && newTitle.trim()) {
      onRename(chatId, newTitle).then((val) => {
        if (val) onClose();
      });
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Rename Chat</DialogTitle>
          <DialogDescription>
            Change the title of this chat conversation
          </DialogDescription>
        </DialogHeader>
        <div className="flex gap-2">
          <Input
            value={newTitle}
            onChange={(e) => setNewTitle(e.target.value)}
            placeholder="New chat name"
          />
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={handleRename}>Save</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}