"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { ProjectForm } from "./project-form";

export function CreateProjectDialog({ defaultOpen, trigger, redirectToDetail = true }: { defaultOpen?: boolean; trigger?: React.ReactNode; redirectToDetail?: boolean }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(Boolean(defaultOpen));
  return (
    <Dialog
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        // Drop ?new=1 from the URL when the dialog closes so a refresh does not reopen it.
        if (!o && defaultOpen) router.replace("/dashboard/projects");
      }}
    >
      <DialogTrigger asChild>
        {trigger ?? (
          <Button variant="primary">
            <Plus /> New project
          </Button>
        )}
      </DialogTrigger>
      <DialogContent size="lg" className="max-h-[calc(100dvh-2rem)] overflow-y-auto scrollbar-thin">
        <DialogHeader>
          <DialogTitle>Create project</DialogTitle>
          <DialogDescription>Projects isolate keys, usage, logs and limits. The new project becomes your current one.</DialogDescription>
        </DialogHeader>
        <ProjectForm
          mode="create"
          onCancel={() => setOpen(false)}
          onSuccess={(id) => {
            setOpen(false);
            if (redirectToDetail) router.push(`/dashboard/projects/${id}`);
            router.refresh();
          }}
        />
      </DialogContent>
    </Dialog>
  );
}