"use client";

/**
 * TASK-0124 — "Extract records from text" dialog.
 *
 * Flow: the user pastes text or a markdown table into the textarea. As they
 * type (debounced) the dialog calls the server-side dry-run
 * (`.../extract/preview`) and renders the live column→property mapping
 * (matched columns + the unmatched `ignored` columns + the row count). "Apply"
 * streams the real extraction (SSE — `sendDbExtract`); the `done` frame
 * carries the created `recordIds` + `ignoredColumns`.
 *
 * The mapping is computed SERVER-side (the client never names properties by
 * position); the preview writes nothing and never touches the LLM.
 *
 * Pinned testids (tests/e2e/specs/ai-database.spec.ts — do not rename):
 *   db-ai-extract         the dialog
 *   db-ai-extract-text    the textarea
 *   db-ai-extract-hint    the "paste a markdown table" hint
 *   db-ai-extract-map     the live mapping preview
 *   db-ai-extract-ignored the unmatched-column chips
 *   db-ai-extract-apply   the Apply button
 *   db-ai-extract-done    the success summary (record count)
 *   db-ai-error-banner / db-ai-loading  (shared chrome)
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { CheckCheck, Loader2, Sparkles, Table2 } from "lucide-react";
import { useDbAiStream } from "@/hooks/use-db-ai-stream";
import { dbAiApi, type DbExtractPreview } from "@/lib/ai-database";
import type { DatabaseProperty } from "@/hooks/use-database";
import { DbAiDialog, DbAiErrorBanner, DbAiLoading } from "@/components/ai/db-ai-dialog";

export interface AiExtractDialogProps {
  open: boolean;
  workspaceId: string;
  databaseId: string;
  /** The database's properties (to show the matched property name/type). */
  properties: DatabaseProperty[];
  onClose: () => void;
}

const DEBOUNCE_MS = 400;
const MAX_TEXT_CHARS = 50_000;

export function AiExtractDialog({ open, workspaceId, databaseId, properties, onClose }: AiExtractDialogProps) {
  const qc = useQueryClient();
  const [text, setText] = useState("");
  const [preview, setPreview] = useState<DbExtractPreview | null>(null);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const { phase, result, error, runExtract } = useDbAiStream({ workspaceId });
  const lastText = useRef("");
  const seq = useRef(0);

  // Reset on open.
  useEffect(() => {
    if (open) {
      setText("");
      setPreview(null);
      setPreviewError(null);
    }
  }, [open]);

  // Live mapping preview (debounced; the dry-run writes nothing, no LLM).
  useEffect(() => {
    if (!open) return;
    const trimmed = text.trim();
    if (trimmed.length === 0) {
      setPreview(null);
      setPreviewError(null);
      return;
    }
    const my = ++seq.current;
    const t = setTimeout(async () => {
      try {
        const p = await dbAiApi.previewExtract(workspaceId, { databaseId, text: trimmed });
        if (seq.current === my) {
          setPreview(p);
          setPreviewError(null);
        }
      } catch {
        if (seq.current === my) {
          setPreview(null);
          setPreviewError("Could not preview the mapping.");
        }
      }
    }, DEBOUNCE_MS);
    return () => clearTimeout(t);
  }, [open, text, workspaceId, databaseId]);

  const propertyById = useRef(new Map<string, DatabaseProperty>());
  propertyById.current = new Map(properties.map((p) => [p.id, p]));

  const oversize = text.length > MAX_TEXT_CHARS;
  const canApply = text.trim().length > 0 && !oversize && phase !== "streaming";

  const apply = useCallback(() => {
    lastText.current = text;
    void runExtract(databaseId, text);
  }, [text, databaseId, runExtract]);

  const retry = useCallback(() => {
    void runExtract(databaseId, lastText.current);
  }, [databaseId, runExtract]);

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

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

  const invalidateDb = useCallback(() => {
    void qc.invalidateQueries({ queryKey: ["database", databaseId] });
  }, [qc, databaseId]);

  useEffect(() => {
    if (phase === "done" && result?.done) invalidateDb();
  }, [phase, result, invalidateDb]);

  const budget = error?.budget;
  const live =
    phase === "streaming"
      ? "AI is extracting records"
      : done
        ? `Extracted ${recordCount} records`
        : error
          ? `Error: ${error.message}`
          : preview && preview.isTable
            ? `Preview: ${preview.mapped.length} columns mapped, ${preview.rowCount} rows, ${preview.ignored.length} unmatched`
            : "";

  return (
    <DbAiDialog
      open={open}
      title="Extract records from text"
      testId="db-ai-extract"
      onClose={close}
      live={live}
      footer={
        <>
          <span className="min-w-0 truncate text-[11px] text-muted-foreground">
            {oversize ? `Too long (${text.length}/${MAX_TEXT_CHARS})` : `${text.length}/${MAX_TEXT_CHARS} chars`}
          </span>
          <button
            type="button"
            data-testid="db-ai-extract-apply"
            onClick={apply}
            disabled={!canApply}
            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 />
            )}
            Apply
          </button>
        </>
      }
    >
      <div className="flex items-start gap-2 rounded-md border border-border bg-muted/30 px-3 py-2 text-[11px] text-muted-foreground">
        <Table2 className="mt-0.5 size-3.5 shrink-0" aria-hidden />
        <p data-testid="db-ai-extract-hint">
          Paste a <strong>markdown table</strong> (or plain text). Columns are matched to this database&apos;s
          properties by name; unmatched columns are listed and skipped.
        </p>
      </div>

      <textarea
        data-testid="db-ai-extract-text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={6}
        maxLength={MAX_TEXT_CHARS + 100}
        placeholder={"| Name | Score |\n| --- | --- |\n| Alice | 42 |"}
        aria-label="Text or markdown table to extract"
        className="w-full resize-none rounded-md border border-border bg-background px-3 py-2 font-mono text-xs outline-none focus:border-primary"
      />

      {previewError ? <p className="text-[11px] text-muted-foreground">{previewError}</p> : null}

      {preview && !previewError ? (
        <div data-testid="db-ai-extract-map" className="rounded-md border border-border">
          <div className="flex items-center justify-between border-b border-border px-3 py-1.5 text-[11px] text-muted-foreground">
            <span className="font-medium">Mapping preview</span>
            <span>
              {preview.isTable ? `${preview.rowCount} row${preview.rowCount === 1 ? "" : "s"}` : "no table detected"}
            </span>
          </div>
          {preview.isTable ? (
            <ul className="divide-y divide-border">
              {preview.columns.map((col) => {
                const match = preview.mapped.find((m) => m.column === col);
                const prop = match ? propertyById.current.get(match.propertyId) : undefined;
                return (
                  <li key={col} className="flex items-center justify-between gap-2 px-3 py-1 text-xs">
                    <span className="min-w-0 truncate">{col}</span>
                    {match ? (
                      <span className="shrink-0 rounded bg-green-100 px-1.5 py-0.5 text-[10px] text-green-800 dark:bg-green-950/60 dark:text-green-300">
                        → {prop?.name ?? match.propertyId}
                      </span>
                    ) : (
                      <span className="shrink-0 rounded bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-800 dark:bg-amber-950/60 dark:text-amber-300">
                        skipped
                      </span>
                    )}
                  </li>
                );
              })}
            </ul>
          ) : (
            <p className="px-3 py-2 text-[11px] text-muted-foreground">
              No markdown table found — the AI will parse the text into records.
            </p>
          )}
          {preview.ignored.length > 0 ? (
            <div data-testid="db-ai-extract-ignored" className="flex flex-wrap items-center gap-1 border-t border-border px-3 py-1.5">
              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
                Skipped:
              </span>
              {preview.ignored.map((c) => (
                <span key={c} className="rounded bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-800 dark:bg-amber-950/60 dark:text-amber-300">
                  {c}
                </span>
              ))}
            </div>
          ) : null}
        </div>
      ) : null}

      {phase === "streaming" ? <DbAiLoading text="Extracting records…" /> : 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-extract-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">
            Added {recordCount} record{recordCount === 1 ? "" : "s"}.
            {ignored.length > 0 ? ` Skipped ${ignored.length} unmatched column${ignored.length === 1 ? "" : "s"}.` : ""}
          </span>
        </div>
      ) : null}
    </DbAiDialog>
  );
}