"use client";

/**
 * Insert dialog (opened from the slash menu / toolbar): a modal with tabs.
 *
 *   Image    — file picker → presigned upload (lib/api uploadFile) → image block
 *   Link     — url + title → bookmark block
 *   Table    — rows × cols → table block with the grid pre-created
 *   Database — new database (title) or choose an existing one
 */
import { useEffect, useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";
import { pageApi, uploadFile } from "@/lib/api";
import { useInsertBlock } from "@/hooks/use-blocks";
import { toast } from "@/stores/ui-store";
import { cn } from "@/lib/utils";
import { Field, Input } from "@/components/ui/form";

type Tab = "image" | "link" | "table" | "database";

const TABS: { id: Tab; label: string }[] = [
  { id: "image", label: "Image" },
  { id: "link", label: "Link" },
  { id: "table", label: "Table" },
  { id: "database", label: "Database" }
];

export interface InsertDialogProps {
  open: boolean;
  onClose: () => void;
  /** Tab shown first (defaults to image). */
  initialTab?: Tab;
  /** Insert after this block (parentId = that block's parent). */
  afterBlockId: string | null;
  parentId: string | null;
  pageId: string;
  /** TASK-0100 S5: the workspace the new database page is created in (the
   *  API's nested POST /workspaces/:workspaceId/pages needs it in the path). */
  workspaceId: string;
}

export function InsertDialog({ open, onClose, initialTab, afterBlockId, parentId, pageId, workspaceId }: InsertDialogProps) {
  const [tab, setTab] = useState<Tab>(initialTab ?? "image");
  const insertBlock = useInsertBlock(pageId);

  useEffect(() => {
    if (open) setTab(initialTab ?? "image");
  }, [open, initialTab]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[85] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} aria-hidden />
      <div
        role="dialog"
        aria-modal="true"
        aria-label="Insert"
        data-testid="insert-dialog"
        className="relative w-full max-w-md rounded-lg border border-border bg-card shadow-2xl"
      >
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <h2 className="text-base font-semibold">Insert</h2>
          <button
            type="button"
            onClick={onClose}
            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
            aria-label="Close insert dialog"
          >
            ✕
          </button>
        </div>

        <div role="tablist" aria-label="Insert type" className="flex gap-1 border-b border-border px-4 pt-3">
          {TABS.map((t) => (
            <button
              key={t.id}
              type="button"
              role="tab"
              aria-selected={tab === t.id}
              onClick={() => setTab(t.id)}
              className={cn(
                "rounded-t-md px-3 py-1.5 text-sm font-medium",
                tab === t.id ? "border border-b-0 border-border bg-background text-foreground" : "text-muted-foreground hover:text-foreground"
              )}
            >
              {t.label}
            </button>
          ))}
        </div>

        <div className="p-4">
          {tab === "image" ? (
            <ImageTab
              workspaceId={workspaceId}
              onInsert={async (src, caption) => {
                await insertBlock.mutateAsync({
                  parentId,
                  afterBlockId,
                  type: "image",
                  properties: { src, caption }
                });
                onClose();
              }}
            />
          ) : null}
          {tab === "link" ? (
            <LinkTab
              onInsert={async (url, title) => {
                await insertBlock.mutateAsync({
                  parentId,
                  afterBlockId,
                  type: "bookmark",
                  properties: { src: url, title }
                });
                onClose();
              }}
            />
          ) : null}
          {tab === "table" ? (
            <TableTab
              onInsert={async (rows, cols) => {
                await insertBlock.mutateAsync({
                  parentId,
                  afterBlockId,
                  type: "table",
                  properties: {
                    columns: Array.from({ length: cols }, (_, i) => ({
                      id: `col${i + 1}`,
                      type: "text",
                      width: 160,
                      label: `Column ${i + 1}`
                    })),
                    rows: Array.from({ length: rows }, () => Array(cols).fill(""))
                  }
                });
                onClose();
              }}
            />
          ) : null}
          {tab === "database" ? (
            <DatabaseTab
              pageId={pageId}
              parentId={parentId}
              workspaceId={workspaceId}
              onInsert={async (databaseId) => {
                await insertBlock.mutateAsync({
                  parentId,
                  afterBlockId,
                  type: "database",
                  properties: { databaseId }
                });
                onClose();
              }}
            />
          ) : null}
        </div>
      </div>
    </div>
  );
}

/* --------------------------------------------------------------- tabs */

function ImageTab({
  onInsert,
  workspaceId
}: {
  onInsert: (src: string, caption: string) => Promise<void>;
  /** Workspace the file lands in (sent as x-factory-workspace on the
   *  session/complete calls) — without it a multi-workspace user's upload
   *  silently routes to their FIRST workspace. */
  workspaceId?: string;
}) {
  const [file, setFile] = useState<File | null>(null);
  const [caption, setCaption] = useState("");
  const [uploading, setUploading] = useState(false);

  const submit = async () => {
    if (!file) {
      toast("error", "Choose an image file first");
      return;
    }
    setUploading(true);
    try {
      // lib/api: presigned upload session → PUT bytes → complete → FileMeta.url.
      const meta = await uploadFile(file, undefined, { workspaceId });
      // A quarantined (VIRUS_DETECTED) file has no signed URL — don't insert
      // a broken block; the files browser / block renders the red card.
      if (meta.status !== "ready" || !meta.url) {
        toast("error", "Upload was blocked by the virus scan — contact an admin");
        return;
      }
      await onInsert(meta.url, caption.trim());
    } catch (err) {
      toast("error", "Upload failed", err instanceof Error ? err.message : undefined);
    } finally {
      setUploading(false);
    }
  };

  return (
    <form
      className="space-y-3"
      onSubmit={(e) => {
        e.preventDefault();
        void submit();
      }}
    >
      <label className="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border p-6 text-sm text-muted-foreground hover:border-foreground/50">
        <span>{file ? file.name : "Click to choose an image"}</span>
        <span className="text-xs">PNG, JPG, GIF, WebP — up to 500 MB</span>
        <input
          type="file"
          accept="image/*"
          className="sr-only"
          onChange={(e) => setFile(e.target.files?.[0] ?? null)}
        />
      </label>
      <Field label="Caption (optional)" htmlFor="img-caption">
        <Input id="img-caption" value={caption} onChange={(e) => setCaption(e.target.value)} />
      </Field>
      <button
        type="submit"
        disabled={uploading || !file}
        className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
      >
        {uploading ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
        {uploading ? "Uploading…" : "Insert image"}
      </button>
    </form>
  );
}

function LinkTab({ onInsert }: { onInsert: (url: string, title: string) => Promise<void> }) {
  const [url, setUrl] = useState("");
  const [title, setTitle] = useState("");

  const submit = async () => {
    if (!/^https?:\/\//.test(url)) {
      toast("error", "Enter a valid http(s) URL");
      return;
    }
    await onInsert(url, title.trim() || url);
  };

  return (
    <form
      className="space-y-3"
      onSubmit={(e) => {
        e.preventDefault();
        void submit();
      }}
    >
      <Field label="URL" htmlFor="link-url" error={!/^https?:\/\//.test(url) && url ? "Must start with http(s)://" : undefined}>
        <Input id="link-url" type="url" placeholder="https://example.com" value={url} onChange={(e) => setUrl(e.target.value)} />
      </Field>
      <Field label="Title (optional)" htmlFor="link-title">
        <Input id="link-title" placeholder="Example page" value={title} onChange={(e) => setTitle(e.target.value)} />
      </Field>
      <button
        type="submit"
        disabled={!url}
        className="h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
      >
        Insert bookmark
      </button>
    </form>
  );
}

function TableTab({ onInsert }: { onInsert: (rows: number, cols: number) => Promise<void> }) {
  const [rows, setRows] = useState(3);
  const [cols, setCols] = useState(3);

  return (
    <form
      className="space-y-3"
      onSubmit={(e) => {
        e.preventDefault();
        void onInsert(Math.min(50, Math.max(1, rows)), Math.min(12, Math.max(1, cols)));
      }}
    >
      <div className="flex gap-3">
        <Field label="Rows" htmlFor="tbl-rows">
          <Input
            id="tbl-rows"
            type="number"
            min={1}
            max={50}
            value={rows}
            onChange={(e) => setRows(Number(e.target.value) || 1)}
          />
        </Field>
        <Field label="Columns" htmlFor="tbl-cols">
          <Input
            id="tbl-cols"
            type="number"
            min={1}
            max={12}
            value={cols}
            onChange={(e) => setCols(Number(e.target.value) || 1)}
          />
        </Field>
      </div>
      <button type="submit" className="h-9 w-full rounded-md bg-primary text-sm font-medium text-primary-foreground hover:opacity-90">
        Insert table
      </button>
    </form>
  );
}

function DatabaseTab({
  pageId,
  parentId,
  workspaceId,
  onInsert
}: {
  pageId: string;
  parentId: string | null;
  workspaceId: string;
  onInsert: (databaseId: string) => Promise<void>;
}) {
  const [title, setTitle] = useState("");
  const create = useMutation({
    mutationFn: async () => {
      // Create the database page, then wrap it in a database block. The
      // database itself is initialized server-side with default properties
      // (title) when the page is created with type=database.
      const page = await pageApi.create({ workspaceId, parentId, title, type: "database" });
      return page;
    }
  });

  const submit = async () => {
    if (title.trim().length < 1) {
      toast("error", "Give the database a name");
      return;
    }
    try {
      const page = await create.mutateAsync();
      // The block must reference the seeded Database row's id, NOT the page id:
      // `Database.id` is its own cuid (schema) and `GET /databases/:id` 404s for
      // a page id — the table view then renders nothing (verified in the
      // Phase-15 E2E diag). `page.service.create` returns the Database id as a
      // sibling of the page; fall back to the page id only if absent.
      await onInsert(page.databaseId ?? page.id);
    } catch (err) {
      toast("error", "Could not create database", err instanceof Error ? err.message : undefined);
    }
  };

  return (
    <form
      className="space-y-3"
      onSubmit={(e) => {
        e.preventDefault();
        void submit();
      }}
    >
      <Field label="Database name" htmlFor="db-title">
        <Input id="db-title" placeholder="Tasks" value={title} onChange={(e) => setTitle(e.target.value)} />
      </Field>
      <p className="text-xs text-muted-foreground">
        A new database page with a default Title property is created. Choose an existing database
        via “Convert → Database” on a page.
      </p>
      <button
        type="submit"
        disabled={create.isPending}
        className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-md bg-primary text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
      >
        {create.isPending ? <Loader2 className="size-4 animate-spin" aria-hidden /> : null}
        {create.isPending ? "Creating…" : "Create database"}
      </button>
    </form>
  );
}