"use client";

/**
 * TASK-0124 — "Generate database from a prompt" dialog.
 *
 * Flow: the user types a description → the dialog streams the generation
 * (SSE — `sendDbGenerate`) → on success the `done` frame carries the new
 * `databaseId`; the dialog toasts + (when embedded on a database page) offers
 * nothing to navigate to (the new database is a sibling — the sidebar
 * page-tree is invalidated so it appears there), then closes.
 *
 * Hidden for roles lacking EDIT (the server still enforces — 403).
 *
 * Pinned testids (tests/e2e/specs/ai-database.spec.ts — do not rename):
 *   db-ai-generate        the dialog
 *   db-ai-generate-prompt the prompt textarea
 *   db-ai-generate-btn    the Generate button
 *   db-ai-generate-done   the success summary (database name + counts)
 *   db-ai-error-banner / db-ai-loading  (shared chrome)
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { CheckCheck, Loader2, Sparkles } from "lucide-react";
import { useDbAiStream } from "@/hooks/use-db-ai-stream";
import { DbAiDialog, DbAiErrorBanner, DbAiLoading } from "@/components/ai/db-ai-dialog";

export interface AiGenerateDialogProps {
  open: boolean;
  workspaceId: string;
  /** Navigate to the new database after success (the page-tree route). */
  workspaceSlug?: string;
  onClose: () => void;
}

export function AiGenerateDialog({ open, workspaceId, workspaceSlug, onClose }: AiGenerateDialogProps) {
  const qc = useQueryClient();
  const router = useRouter();
  const [prompt, setPrompt] = useState("");
  const { phase, result, error, runGenerate } = useDbAiStream({ workspaceId });
  const lastPrompt = useRef("");

  // Reset the form when the dialog is (re)opened.
  useEffect(() => {
    if (open) setPrompt("");
  }, [open]);

  const invalid = prompt.trim().length === 0;

  const generate = useCallback(() => {
    lastPrompt.current = prompt.trim();
    void runGenerate(prompt.trim());
  }, [prompt, runGenerate]);

  const retry = useCallback(() => {
    void runGenerate(lastPrompt.current);
  }, [runGenerate]);

  const close = useCallback(() => {
    onClose();
  }, [onClose]);

  const done = phase === "done" && result?.done;
  const databaseId = done ? (result!.done as { databaseId?: string }).databaseId : undefined;
  const propCount = done ? (result!.done as { propertyIds?: string[] }).propertyIds?.length ?? 0 : 0;
  const recordCount = done ? (result!.done as { recordIds?: string[] }).recordIds?.length ?? 0 : 0;

  const invalidateTree = useCallback(() => {
    void qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "page-tree"] });
  }, [qc, workspaceId]);

  // Refresh the sidebar page-tree once the generation succeeds.
  useEffect(() => {
    if (phase === "done" && databaseId) invalidateTree();
  }, [phase, databaseId, invalidateTree]);

  const budget = error?.budget;
  const live =
    phase === "streaming"
      ? "AI is generating a database"
      : done
        ? `Database generated: ${propCount} properties, ${recordCount} sample records`
        : error
          ? `Error: ${error.message}`
          : "";

  return (
    <DbAiDialog
      open={open}
      title="Generate database"
      testId="db-ai-generate"
      onClose={close}
      live={live}
      footer={
        <>
          <span className="text-[11px] text-muted-foreground">
            Creates the database with AI-suggested properties + sample records.
          </span>
          <button
            type="button"
            data-testid="db-ai-generate-btn"
            onClick={generate}
            disabled={invalid || phase === "streaming"}
            className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
          >
            {phase === "streaming" ? (
              <Loader2 className="size-3.5 animate-spin" aria-hidden />
            ) : (
              <Sparkles className="size-3.5" aria-hidden />
            )}
            Generate
          </button>
        </>
      }
    >
      <label className="block text-xs font-medium text-muted-foreground" htmlFor="db-ai-generate-prompt">
        Describe the database to create
      </label>
      <textarea
        id="db-ai-generate-prompt"
        data-testid="db-ai-generate-prompt"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !invalid && phase !== "streaming") {
            e.preventDefault();
            generate();
          }
        }}
        rows={4}
        placeholder={'e.g. "a bug tracker with title, state, due date and assignee"'}
        maxLength={2000}
        className="w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary"
      />

      {phase === "streaming" ? <DbAiLoading text="Generating database…" /> : null}

      {phase === "error" && error ? (
        <DbAiErrorBanner
          code={error.code}
          message={error.message}
          budget={budget}
          retryable={error.retryable}
          onRetry={retry}
        />
      ) : null}

      {done ? (
        <div
          data-testid="db-ai-generate-done"
          role="status"
          className="flex items-center gap-2 rounded-md border border-green-300 bg-green-50 px-3 py-2 text-xs text-green-900 dark:border-green-800 dark:bg-green-950/40 dark:text-green-200"
        >
          <CheckCheck className="size-3.5 shrink-0" aria-hidden />
          <span className="min-w-0 flex-1">
            Database created with {propCount} properties and {recordCount} sample record{recordCount === 1 ? "" : "s"}. It now
            appears in the sidebar.
          </span>
          {workspaceSlug && databaseId ? (
            <button
              type="button"
              onClick={() => {
                onClose();
                router.push(`/w/${workspaceSlug}/databases/${databaseId}`);
              }}
              className="shrink-0 rounded border border-green-400 px-2 py-1 font-medium hover:bg-green-100 dark:hover:bg-green-900/40"
            >
              Open
            </button>
          ) : null}
        </div>
      ) : null}
    </DbAiDialog>
  );
}