"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import ReactMarkdown from "react-markdown";
import { AlertTriangle, Loader2, MessageSquareText, SendHorizonal, X } from "lucide-react";
import { askRag, AiPreStreamError, type RagSource } from "@/lib/ai";
import { cn } from "@/lib/utils";

/**
 * TASK-0125 — RAG workspace search UI (shared by the search-page card and the
 * `/ask` full-page route).
 *
 * One question input → the cited, streaming answer:
 *   - the FIRST SSE frame is `sources` (the server-side citations) — the
 *     `[n]` chips in the answer + the "Sources" list render from it, so they
 *     are deterministic and independent of the model's output;
 *   - the answer streams as markdown; the model's inline `[n]` markers are
 *     replaced with the matching citation chip (a real link);
 *   - each chip links to the source page/database (deep link by the workspace
 *     slug + the source's `pageId`/`databaseId`/`recordId`) and shows the
 *     source snippet on hover (title tooltip + the Sources row below).
 *
 * States: loading skeleton, empty ("No results — try different wording"),
 * error banner (TASK-0122 semantics: budget / provider / retryable), and the
 * streamed answer. A11y: the answer is an `aria-live` region; chips are real
 * links; the form submits on Enter. Mobile: the input + answer stack in the
 * same column (no fixed widths).
 */

interface AskAiSearchProps {
  /** The workspace ID (the RAG endpoint's path param). */
  workspaceId: string;
  /** The workspace slug (citation deep links navigate by slug). */
  workspaceSlug: string;
  /**
   * The search page's committed query — seeded into the input on first mount
   * (the card inherits the search context) and kept in sync until the user
   * types or asks.
   */
  initialQuery?: string;
  /** Compact (card) vs full (route) layout. */
  variant?: "card" | "page";
  /** Called with the question as soon as the user asks (URL shareability). */
  onAsk?: (q: string) => void;
}

type Status = "idle" | "loading" | "done" | "error";

/** Build the citation deep link for a source (slug-based, type-aware). */
function sourceHref(slug: string, s: RagSource): string | null {
  const enc = (id: string) => encodeURIComponent(id);
  if (s.type === "page") return s.pageId ? `/w/${enc(slug)}/page/${enc(s.pageId)}` : null;
  if (s.type === "database") return s.id ? `/w/${enc(slug)}/databases/${enc(s.id)}` : null;
  if (s.type === "record") return s.databaseId ? `/w/${enc(slug)}/databases/${enc(s.databaseId)}` : null;
  if (s.type === "block") return s.pageId ? `/w/${enc(slug)}/page/${enc(s.pageId)}` : null;
  return null;
}

/** Map a pre-stream / in-band error to a human banner (TASK-0122 semantics). */
function errorText(e: unknown): { title: string; hint?: string; retryable?: boolean } {
  if (e instanceof AiPreStreamError) {
    if (e.code === "AI_BUDGET_EXCEEDED" || e.status === 402) {
      return { title: "AI budget exhausted", hint: "Ask your workspace admin to raise the monthly AI limit." };
    }
    if (e.code === "RATE_LIMITED" || e.status === 429) {
      return {
        title: "AI call limit reached",
        hint: e.retryAfterSeconds ? `Try again in ${e.retryAfterSeconds}s.` : "Slow down a little and retry.",
        retryable: true
      };
    }
    if (e.code === "SEARCH_UNAVAILABLE" || e.status === 503) {
      return {
        title: "Search is temporarily unavailable",
        hint: "Your content may not be indexed yet — try again shortly.",
        retryable: true
      };
    }
    if (e.status === 404) return { title: "Workspace not found" };
    if (e.status === 403) return { title: "You do not have access to this workspace" };
  }
  const msg = e instanceof Error && e.message ? e.message : "Something went wrong.";
  return { title: "The AI request failed", hint: msg, retryable: true };
}

export function AskAiSearch({ workspaceId, workspaceSlug, initialQuery = "", variant = "card", onAsk }: AskAiSearchProps) {
  const [input, setInput] = useState(initialQuery);
  const [question, setQuestion] = useState("");
  const [status, setStatus] = useState<Status>("idle");
  const [answer, setAnswer] = useState("");
  const [sources, setSources] = useState<RagSource[]>([]);
  const [err, setErr] = useState<{ title: string; hint?: string; retryable?: boolean } | null>(null);
  const abortRef = useRef<AbortController | null>(null);

  // Keep the input seeded from the search query until the user types/asks.
  useEffect(() => {
    if (question === "") setInput(initialQuery);
  }, [initialQuery, question]);

  // Abort any in-flight stream on unmount (card removed / route left).
  useEffect(() => () => abortRef.current?.abort(), []);

  const ask = (q: string) => {
    const query = q.trim();
    if (!query || status === "loading" || !workspaceId) return;
    abortRef.current?.abort();
    const ac = new AbortController();
    abortRef.current = ac;
    setQuestion(query);
    setAnswer("");
    setSources([]);
    setErr(null);
    setStatus("loading");
    onAsk?.(query);

    askRag({
      workspaceId,
      query,
      signal: ac.signal,
      onFrame: (frame) => {
        if (frame.type === "sources") setSources(frame.sources ?? []);
        else if (frame.type === "delta") setAnswer((prev) => prev + frame.text);
      }
    })
      .then((res) => {
        setSources((prev) => (res.sources.length > 0 ? res.sources : prev));
        setAnswer((prev) => (prev || res.answer));
        if (res.reason === "error") {
          setErr({ title: res.error?.message ?? "The AI request failed", hint: res.error?.code, retryable: true });
        }
        setStatus(res.reason === "error" && !res.answer ? "error" : "done");
      })
      .catch((e: unknown) => {
        if (e instanceof Error && e.name === "AbortError") {
          setStatus((s) => (s === "loading" ? "idle" : s));
          return;
        }
        setErr(errorText(e));
        setStatus("error");
      });
  };

  const stop = () => abortRef.current?.abort();

  const hasAnswer = answer.trim().length > 0;

  // Render the streamed answer as markdown. The model's inline `[n]`
  // citation markers (the convention the mock + the RAG system prompt both
  // use) are rewritten into markdown links to the source's deep link and
  // rendered as citation chips; the `a` override chip-ifies ONLY the
  // hrefs we injected (a model-supplied link is rendered normally). The
  // Sources list below carries the same chips, so a model that skips inline
  // markers still yields links.
  const renderAnswer = () => {
    const injected = new Map<string, RagSource>();
    const md = answer.replace(/\[(\d+)\]/g, (tok, nStr: string) => {
      const n = Number(nStr);
      const s = sources.find((x) => x.n === n);
      if (!s) return tok;
      const href = sourceHref(workspaceSlug, s);
      if (!href) return tok;
      injected.set(href, s);
      return `[${n}](${href})`;
    });
    return (
      <div className="text-sm leading-relaxed">
        <ReactMarkdown
          components={{
            p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
            ul: ({ children }) => <ul className="mb-2 list-disc pl-5 last:mb-0">{children}</ul>,
            ol: ({ children }) => <ol className="mb-2 list-decimal pl-5 last:mb-0">{children}</ol>,
            li: ({ children }) => <li className="mb-0.5">{children}</li>,
            h1: ({ children }) => <h3 className="mb-1 mt-2 font-semibold">{children}</h3>,
            h2: ({ children }) => <h3 className="mb-1 mt-2 font-semibold">{children}</h3>,
            h3: ({ children }) => <h4 className="mb-1 mt-2 font-medium">{children}</h4>,
            blockquote: ({ children }) => (
              <blockquote className="mb-2 border-l-2 border-border pl-3 text-muted-foreground">{children}</blockquote>
            ),
            pre: ({ children }) => <pre className="mb-2 overflow-x-auto rounded bg-muted p-2 text-xs">{children}</pre>,
            code: ({ children }) => <code className="rounded bg-muted px-1 py-0.5 text-xs">{children}</code>,
            a: ({ href, children }) => {
              if (href) {
                const s = injected.get(href);
                if (s) {
                  return (
                    <Link
                      href={href}
                      data-testid={`ask-ai-chip-${s.n}`}
                      title={`${s.title} — ${s.snippet}`}
                      aria-label={`Citation ${s.n}: ${s.title}`}
                      className="mx-0.5 inline-block rounded bg-primary/10 px-1 text-[10px] font-medium text-primary no-underline hover:bg-primary/20"
                    >
                      [{s.n}]
                    </Link>
                  );
                }
                return (
                  <a href={href} target="_blank" rel="noreferrer" className="text-primary underline">
                    {children}
                  </a>
                );
              }
              return <>{children}</>;
            }
          }}
        >
          {md}
        </ReactMarkdown>
      </div>
    );
  };

  return (
    <div
      data-testid="ask-ai"
      className={cn(
        "w-full",
        variant === "page" ? "mx-auto max-w-3xl px-6 py-8" : "rounded-xl border border-border bg-card p-4 shadow-sm"
      )}
    >
      <div className={cn("mb-3 flex items-center gap-2", variant === "page" && "mb-5")}>
        <MessageSquareText className="size-4 text-primary" aria-hidden />
        <h2 className={cn("font-semibold", variant === "page" ? "text-xl" : "text-sm")}>Ask AI about this workspace</h2>
      </div>

      <div className={cn("relative", variant === "page" && "max-w-3xl")}>
        <input
          data-testid="ask-ai-input"
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault();
              ask(input);
            }
          }}
          placeholder='Ask AI about this workspace… e.g. "What is the launch code word?"'
          aria-label="Ask AI about this workspace"
          disabled={status === "loading"}
          className="w-full rounded-lg border border-input bg-background py-2.5 pl-3 pr-24 text-sm outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-60"
        />
        <div className="absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1">
          {status === "loading" ? (
            <button
              type="button"
              data-testid="ask-ai-stop"
              onClick={stop}
              className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1.5 text-xs hover:bg-accent"
            >
              <X className="size-3.5" aria-hidden /> Stop
            </button>
          ) : (
            <button
              type="button"
              data-testid="ask-ai-submit"
              onClick={() => ask(input)}
              disabled={!input.trim() || !workspaceId}
              className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
            >
              <SendHorizonal className="size-3.5" aria-hidden /> Ask
            </button>
          )}
        </div>
      </div>

      {status === "loading" && (
        <div
          className="mt-4 flex items-center gap-2 text-sm text-muted-foreground"
          role="status"
          data-testid="ask-ai-loading"
        >
          <Loader2 className="size-4 animate-spin" aria-hidden /> Retrieving workspace content and generating an answer…
        </div>
      )}

      {err !== null && status !== "loading" && (
        <div
          data-testid="ask-ai-error"
          role="alert"
          className="mt-4 flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2.5 text-sm"
        >
          <AlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" aria-hidden />
          <div>
            <p className="font-medium text-foreground">{err.title}</p>
            {err.hint ? <p className="mt-0.5 text-xs text-muted-foreground">{err.hint}</p> : null}
            {err.retryable ? <p className="mt-1 text-xs text-muted-foreground">Press Ask to retry.</p> : null}
          </div>
        </div>
      )}

      {status !== "loading" && err === null && !question && (
        <p className="mt-4 text-sm text-muted-foreground" data-testid="ask-ai-empty">
          Ask a question about anything in this workspace — pages, databases, records and comments.
        </p>
      )}

      {status !== "loading" && err === null && question && sources.length === 0 && !hasAnswer && (
        <div
          className="mt-4 rounded-md border border-border px-4 py-6 text-center text-sm text-muted-foreground"
          data-testid="ask-ai-empty"
        >
          No results — try different wording.
        </div>
      )}

      {hasAnswer && (
        <div
          data-testid="ask-ai-answer"
          aria-live="polite"
          className="mt-4 rounded-lg border border-border bg-card p-4"
        >
          {renderAnswer()}
          {status === "loading" ? (
            <span className="ml-0.5 inline-block h-3 w-1.5 animate-pulse bg-foreground/60 align-middle" aria-hidden />
          ) : null}
        </div>
      )}

      {sources.length > 0 && (
        <div className="mt-4" data-testid="ask-ai-sources">
          <h3 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
            <MessageSquareText className="size-3.5" aria-hidden /> Sources
          </h3>
          <ul className="space-y-1.5">
            {sources.map((s) => {
              const href = sourceHref(workspaceSlug, s);
              const row = (
                <>
                  <span className="rounded bg-primary/10 px-1 text-[10px] font-medium text-primary">[{s.n}]</span>
                  <span className="font-medium text-foreground">{s.title || "(untitled)"}</span>
                  <span className="text-xs text-muted-foreground">· {s.type}</span>
                  {s.snippet ? <span className="ml-1 truncate text-xs text-muted-foreground">— {s.snippet}</span> : null}
                </>
              );
              return (
                <li key={`${s.docId}-${s.n}`} data-testid={`ask-ai-source-${s.n}`} className="text-sm">
                  {href ? (
                    <Link href={href} className="hover:underline">
                      {row}
                    </Link>
                  ) : (
                    <span>{row}</span>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}