"use client";

/**
 * CreateDialog — "New" menu: create a page or a database.
 *
 *  - Page: POST /workspaces/:id/pages (useCreatePage), navigate to the new
 *    page (/w/:slug/page/:id).
 *  - Database: POST /databases (useCreateDatabase) with a title (+ optional
 *    icon); the database is linked to a page automatically by the API. When
 *    opened from a page (pageId given), the database block is embedded into
 *    that page (the core insert flow already does this via InsertDialog —
 *    this dialog is the sidebar/"New" entry point).
 */
import { useState } from "react";
import { useRouter } from "next/navigation";
import { Database as DatabaseIcon, FileText, Loader2, PenTool } from "lucide-react";
import { toast } from "@/stores/ui-store";
import { useCreatePage } from "@/hooks/use-pages";
import { useCreateDatabase } from "@/hooks/use-database";
import { Dialog, DialogFooter } from "@/components/dialogs/dialog";

type Kind = "page" | "database" | "whiteboard";

export interface CreateDialogProps {
  open: boolean;
  workspaceId: string;
  /** Workspace slug for navigation. */
  workspaceSlug: string;
  /** When set, a database can be embedded into this page. */
  pageId?: string | null;
  onClose: () => void;
}

export function CreateDialog({ open, workspaceId, workspaceSlug, pageId, onClose }: CreateDialogProps) {
  const router = useRouter();
  const [kind, setKind] = useState<Kind>("page");
  const [title, setTitle] = useState("");
  const [icon, setIcon] = useState("");

  const createPage = useCreatePage(workspaceId);
  const createDatabase = useCreateDatabase();
  const busy = createPage.isPending || createDatabase.isPending;

  const reset = () => {
    setTitle("");
    setIcon("");
  };

  const submit = () => {
    if (!title.trim() && kind === "page") return;
    if (kind === "database") {
      createDatabase.mutate(
        {
          title: title.trim() || "Untitled database",
          icon: icon || undefined,
          pageId: pageId ?? null
        },
        {
          onSuccess: (db) => {
            onClose();
            reset();
            if (db.pageId) router.push(`/w/${workspaceSlug}/page/${db.pageId}`);
            else toast("success", "Database created", db.title);
          },
          onError: (e) => toast("error", "Create failed", (e as Error).message)
        }
      );
      return;
    }
    // page and whiteboard both go through useCreatePage (the server sets the kind).
    createPage.mutate(
      { parentId: null, title: title.trim(), type: kind === "whiteboard" ? "whiteboard" : undefined },
      {
        onSuccess: (page) => {
          onClose();
          reset();
          router.push(`/w/${workspaceSlug}/page/${page.id}`);
        },
        onError: (e) => toast("error", "Create failed", (e as Error).message)
      }
    );
  };

  return (
    <Dialog
      open={open}
      title="Create new"
      description="Add a page, whiteboard, or database to this workspace."
      onClose={() => {
        onClose();
        reset();
      }}
      footer={
        <DialogFooter
          onCancel={() => {
            onClose();
            reset();
          }}
          onAction={submit}
          actionLabel={kind === "page" ? "Create page" : kind === "whiteboard" ? "Create whiteboard" : "Create database"}
          busy={busy}
          disabled={kind === "database" && !title.trim()}
        />
      }
    >
      <div className="space-y-3">
        {/* kind picker */}
        <div className="grid grid-cols-3 gap-2">
          <button
            type="button"
            className={
              "flex items-center gap-2 rounded-md border p-2.5 text-sm " +
              (kind === "page" ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted")
            }
            onClick={() => setKind("page")}
          >
            <FileText className="size-4" aria-hidden /> Page
          </button>
          <button
            type="button"
            className={
              "flex items-center gap-2 rounded-md border p-2.5 text-sm " +
              (kind === "whiteboard" ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted")
            }
            onClick={() => setKind("whiteboard")}
          >
            <PenTool className="size-4" aria-hidden /> Whiteboard
          </button>
          <button
            type="button"
            className={
              "flex items-center gap-2 rounded-md border p-2.5 text-sm " +
              (kind === "database" ? "border-primary bg-primary/10 text-primary" : "border-border hover:bg-muted")
            }
            onClick={() => setKind("database")}
          >
            <DatabaseIcon className="size-4" aria-hidden /> Database
          </button>
        </div>

        {/* icon (databases only) */}
        {kind === "database" && (
          <div>
            <label className="mb-1 block text-xs text-muted-foreground">Icon (emoji)</label>
            <div className="flex items-center gap-2">
              <span className="text-2xl" aria-hidden>
                {icon || "📊"}
              </span>
              <input
                className="flex-1 rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
                value={icon}
                maxLength={4}
                placeholder="📊"
                onChange={(e) => setIcon(e.target.value)}
              />
            </div>
          </div>
        )}

        {/* title */}
        <div>
          <label className="mb-1 block text-xs text-muted-foreground">Name</label>
          <input
            autoFocus
            className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
            placeholder={kind === "page" ? "Untitled" : kind === "whiteboard" ? "Untitled whiteboard" : "Untitled database"}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && submit()}
          />
        </div>

        {kind === "database" && pageId && (
          <p className="text-xs text-muted-foreground">
            The database will be embedded at the top of the current page.
          </p>
        )}
        {busy && (
          <p className="inline-flex items-center gap-1 text-xs text-muted-foreground">
            <Loader2 className="size-3 animate-spin" aria-hidden /> Creating…
          </p>
        )}
      </div>
    </Dialog>
  );
}