"use client";
import * as React from "react";
import { useRouter } from "next/navigation";
import { Archive, Check } from "lucide-react";
import { archiveProject, selectProject } from "@/actions/projects";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Alert } from "@/components/ui/alert";
import { Input } from "@/components/ui/input";
import { Field, Label } from "@/components/ui/label";

/** Makes the project the current one (cookie) and refreshes the dashboard. */
export function SelectProjectButton({ projectId, size = "xs", variant = "outline", children }: { projectId: string } & Pick<ButtonProps, "size" | "variant" | "children">) {
  const router = useRouter();
  const [pending, startTransition] = React.useTransition();
  return (
    <Button
      size={size}
      variant={variant}
      loading={pending}
      onClick={() =>
        startTransition(async () => {
          await selectProject(projectId);
          router.refresh();
        })
      }
    >
      {children ?? (
        <>
          <Check /> Select
        </>
      )}
    </Button>
  );
}

export function ArchiveProjectButton({ projectId, name, disabled, disabledReason }: { projectId: string; name: string; disabled?: boolean; disabledReason?: string }) {
  const router = useRouter();
  const [open, setOpen] = React.useState(false);
  const [confirmName, setConfirmName] = React.useState("");
  const [error, setError] = React.useState<string | null>(null);
  const [pending, startTransition] = React.useTransition();

  return (
    <>
      <div className="flex flex-col items-start gap-1.5">
        <Button variant="danger" size="sm" disabled={disabled} onClick={() => setOpen(true)}>
          <Archive /> Archive project
        </Button>
        {disabled && disabledReason ? <p className="text-[12px] text-fg-subtle">{disabledReason}</p> : null}
      </div>
      <Dialog
        open={open}
        onOpenChange={(o) => {
          if (!pending) {
            setOpen(o);
            setError(null);
            setConfirmName("");
          }
        }}
      >
        <DialogContent size="sm">
          <DialogHeader>
            <DialogTitle>Archive {name}?</DialogTitle>
            <DialogDescription>
              Archived projects disappear from the dashboard and their API keys stop authenticating. Request history is kept for your plan&apos;s retention window. Contact support to restore an archived project.
            </DialogDescription>
          </DialogHeader>
          {error ? <Alert variant="danger">{error}</Alert> : null}
          <Field>
            <Label htmlFor="archive-confirm">
              Type <span className="font-mono">{name}</span> to confirm
            </Label>
            <Input id="archive-confirm" value={confirmName} onChange={(e) => setConfirmName(e.target.value)} autoComplete="off" autoFocus />
          </Field>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)} disabled={pending}>
              Cancel
            </Button>
            <Button
              variant="danger"
              disabled={confirmName.trim() !== name}
              loading={pending}
              onClick={() =>
                startTransition(async () => {
                  const res = await archiveProject(projectId);
                  if (!res.ok) {
                    setError(res.error);
                    return;
                  }
                  setOpen(false);
                  router.push("/dashboard/projects");
                  router.refresh();
                })
              }
            >
              Archive project
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}