"use client";

/**
 * TASK-0122 — Ask AI panel.
 *
 * A right-side drawer (desktop) / bottom sheet (mobile < 768 px) mounted at
 * the workspace shell, so every entry point (page header, block menu,
 * database header, search page, command palette) can open it with a
 * resource context. It is a thin view over `useAiStream` (the streaming
 * conversation hook) + `aiApi`.
 *
 * a11y (mirrors search-dialog.tsx): role="dialog" aria-modal, a focus trap
 * (Tab wraps inside), Escape closes, focus is restored to the trigger on
 * close, and a live region announces the streaming state to screen readers.
 *
 * Pinned e2e contract (tests/e2e/specs/ai.spec.ts — do not rename):
 *   ai-panel                 the drawer (role=dialog)
 *   ai-history-item          a conversation row in the history list
 *   ai-history-new           the "New chat" button
 *   ai-message-user          a user bubble
 *   ai-message-assistant     an assistant bubble
 *   ai-message-live          the in-flight assistant bubble (streaming)
 *   ai-tool-call             a tool-call card
 *   ai-error-banner          the error / budget banner
 *   ai-retry                 the banner's Retry button
 *   ai-input                 the composer input
 *   ai-send                  the send button
 *   ai-stop                  the stop button (visible while streaming)
 *   ai-close                 the close button
 */
import { useCallback, useEffect, useRef, useState } from "react";
import {
  AlertTriangle,
  Loader2,
  MessageSquarePlus,
  Pencil,
  RotateCcw,
  Sparkles,
  Square,
  Trash2,
  X
} from "lucide-react";
import { useWorkspace } from "@/hooks/use-workspace";
import { useAiStream, type AiBannerError } from "@/hooks/use-ai-stream";
import { useUiStore } from "@/stores/ui-store";
import { formatRelativeTime } from "@/lib/utils";
import type { AiMessage } from "@/lib/ai";

/* --------------------------------------------------------------- helpers */

/** Local (file-private) mobile breakpoint — mirrors form-responses-view. */
function useIsMobile(): boolean {
  const [match, setMatch] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 767px)");
    setMatch(mq.matches);
    const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);
  return match;
}

const budgetBanner = (b: AiBannerError): boolean =>
  b.code === "AI_BUDGET_EXCEEDED" || b.code === "AI_BUDGET_MONTHLY_EXCEEDED";

/* -------------------------------------------------------------- component */

export function AiPanel() {
  const open = useUiStore((s) => s.aiPanelOpen);
  const context = useUiStore((s) => s.aiPanelContext);
  const setOpen = useUiStore((s) => s.setAiPanel);
  const slug = useUiStore((s) => s.searchWorkspaceSlug);
  const { data: workspace } = useWorkspace(slug);

  const isMobile = useIsMobile();
  const ai = useAiStream(workspace?.id ?? null, context);

  const [draft, setDraft] = useState("");
  const [historyOpen, setHistoryOpen] = useState(true);
  /** Inline rename (the row id being edited) + its draft text. */
  const [renameId, setRenameId] = useState<string | null>(null);
  const [renameDraft, setRenameDraft] = useState("");
  /** Delete confirm (spec: "delete with confirm dialog"). */
  const [deleteId, setDeleteId] = useState<string | null>(null);

  const panelRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const scrollRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);

  /* ------------------------------------------------------------ reset */
  useEffect(() => {
    if (open) {
      setDraft("");
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [open]);

  /* ------------------------------------------------------ focus + keys */

  const close = useCallback(() => {
    ai.stop();
    setOpen(false);
    requestAnimationFrame(() => {
      triggerRef.current?.focus();
      triggerRef.current = null;
    });
  }, [ai, setOpen]);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        if (deleteId) {
          setDeleteId(null); // the confirm dialog takes the first Escape
        } else {
          close();
        }
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, close, deleteId]);

  // Focus trap (Tab wraps inside the panel).
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Tab") return;
      const panel = panelRef.current;
      if (!panel) return;
      const focusables = panel.querySelectorAll<HTMLElement>('button, textarea, input, [tabindex]:not([tabindex="-1"])');
      if (focusables.length === 0) return;
      const first = focusables[0];
      const last = focusables[focusables.length - 1];
      if (!first || !last) return;
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  // Record the last focused element (the trigger) so close() can restore it.
  useEffect(() => {
    if (!open) return;
    const prev = document.activeElement as HTMLElement | null;
    triggerRef.current = prev;
  }, [open]);

  // Auto-scroll to the newest message / live bubble.
  useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [ai.messages.length, ai.live?.content, ai.pendingUser, open]);

  /* ----------------------------------------------------------- actions */

  const doSend = useCallback(() => {
    const text = draft.trim();
    if (!text || ai.streaming) return;
    setDraft("");
    void ai.send(text);
  }, [draft, ai]);

  if (!open) return null;

  const noWorkspace = !workspace?.id;

  const renderErrorBanner = () => {
    if (!ai.banner) return null;
    const b = ai.banner;
    const showRetry = b.retryable && !ai.streaming;
    return (
      <div
        data-testid="ai-error-banner"
        role="alert"
        className="mx-3 mt-2 flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
      >
        <AlertTriangle className="mt-0.5 size-3.5 shrink-0" aria-hidden />
        <div className="min-w-0 flex-1">
          <p className="font-medium">
            {budgetBanner(b) ? "Monthly AI budget reached" : b.code === "RATE_LIMITED" ? "Sending too fast" : "Something went wrong"}
          </p>
          <p className="mt-0.5 break-words">{b.message}</p>
          {budgetBanner(b) ? (
            <p className="mt-1 text-[11px] opacity-80">
              Your workspace has hit its monthly token limit. Ask an admin to raise it in Settings → AI.
            </p>
          ) : null}
        </div>
        {showRetry ? (
          <button
            type="button"
            data-testid="ai-retry"
            onClick={() => void ai.retry()}
            className="inline-flex shrink-0 items-center gap-1 rounded border border-amber-400 px-2 py-1 font-medium hover:bg-amber-100 dark:hover:bg-amber-900/40"
          >
            <RotateCcw className="size-3" aria-hidden />
            Retry
          </button>
        ) : null}
      </div>
    );
  };

  const renderMessage = (m: AiMessage, live = false) => {
    const isUser = m.role === "user";
    const id = live ? "ai-message-live" : isUser ? "ai-message-user" : "ai-message-assistant";
    return (
      <div
        key={live ? "live" : m.id}
        data-testid={id}
        className={isUser ? "flex justify-end" : "flex justify-start"}
      >
        <div
          className={
            "max-w-[85%] whitespace-pre-wrap break-words rounded-lg px-3 py-2 text-sm " +
            (isUser
              ? "bg-primary text-primary-foreground"
              : "border border-border bg-muted/40 text-foreground")
          }
        >
          {m.content}
          {live ? <span className="ml-0.5 inline-block h-3 w-1.5 animate-pulse bg-foreground/60 align-middle" aria-hidden /> : null}
        </div>
      </div>
    );
  };

  const showComposer = !noWorkspace;

  return (
    <div className="fixed inset-0 z-[80] flex justify-end" role="presentation">
      <div className="absolute inset-0 bg-black/20" aria-hidden onClick={close} />
      <div
        ref={panelRef}
        data-testid="ai-panel"
        role="dialog"
        aria-modal="true"
        aria-label="Ask AI"
        className={
          "relative flex flex-col bg-background shadow-2xl " +
          (isMobile
            ? "inset-x-0 bottom-0 max-h-[85vh] rounded-t-xl border-t border-border"
            : "inset-y-0 right-0 w-[420px] border-l border-border")
        }
      >
        {/* Header */}
        <div className="flex shrink-0 items-center justify-between border-b border-border px-3 py-2.5">
          <div className="flex min-w-0 items-center gap-2">
            <Sparkles className="size-4 shrink-0 text-primary" aria-hidden />
            <h2 className="text-sm font-semibold">Ask AI</h2>
            {/* Context badge: the bound resource title (page/database). */}
            {context?.label ? (
              <span
                data-testid="ai-context-badge"
                className="max-w-[45%] truncate rounded-full border border-border bg-muted/60 px-2 py-0.5 text-[10px] text-muted-foreground"
                title={context.label}
              >
                {context.label}
              </span>
            ) : null}
          </div>
          <div className="flex items-center gap-1">
            <button
              type="button"
              data-testid="ai-history-new"
              onClick={ai.startNew}
              className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs text-foreground/80 hover:bg-accent hover:text-foreground"
              aria-label="Start a new chat"
            >
              <MessageSquarePlus className="size-3.5" aria-hidden /> New
            </button>
            <button
              type="button"
              data-testid="ai-close"
              onClick={close}
              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
              aria-label="Close Ask AI"
            >
              <X className="size-4" aria-hidden />
            </button>
          </div>
        </div>

        {/* History (collapsed list at the top) */}
        <div className="shrink-0 border-b border-border">
          <button
            type="button"
            onClick={() => setHistoryOpen((v) => !v)}
            aria-expanded={historyOpen}
            className="flex w-full items-center justify-between px-3 py-1.5 text-[11px] uppercase tracking-wide text-muted-foreground hover:bg-accent"
          >
            <span>Conversations</span>
            <span aria-hidden>{historyOpen ? "▾" : "▸"}</span>
          </button>
          {historyOpen ? (
            <div className="max-h-32 overflow-y-auto px-1 pb-1">
              {ai.conversations.length === 0 ? (
                <p className="px-2 py-1 text-xs text-muted-foreground">No conversations yet.</p>
              ) : (
                <ul>
                  {ai.conversations.map((c) => (
                    <li key={c.id} className="group flex items-center gap-1">
                      {renameId === c.id ? (
                        <input
                          data-testid="ai-history-rename"
                          autoFocus
                          value={renameDraft}
                          onChange={(e) => setRenameDraft(e.target.value)}
                          onBlur={() => {
                            void ai.renameConversation(c.id, renameDraft);
                            setRenameId(null);
                          }}
                          onKeyDown={(e) => {
                            if (e.key === "Enter") {
                              e.preventDefault();
                              void ai.renameConversation(c.id, renameDraft);
                              setRenameId(null);
                            } else if (e.key === "Escape") {
                              e.stopPropagation();
                              setRenameId(null);
                            }
                          }}
                          aria-label="Rename conversation"
                          className="min-w-0 flex-1 rounded-md border border-primary bg-background px-2 py-1 text-xs outline-none"
                        />
                      ) : (
                        <button
                          type="button"
                          data-testid="ai-history-item"
                          onClick={() => void ai.openConversation(c.id)}
                          onDoubleClick={() => {
                            setRenameId(c.id);
                            setRenameDraft(c.title ?? "");
                          }}
                          className={
                            "min-w-0 flex-1 truncate rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent " +
                            (ai.activeId === c.id ? "bg-accent font-medium" : "text-foreground/90")
                          }
                          aria-current={ai.activeId === c.id ? "true" : undefined}
                        >
                          {c.title?.trim() ? c.title : "New chat"}
                          <span className="ml-1 text-[10px] text-muted-foreground">{formatRelativeTime(c.updatedAt)}</span>
                        </button>
                      )}
                      <button
                        type="button"
                        onClick={() => {
                          setRenameId(c.id);
                          setRenameDraft(c.title ?? "");
                        }}
                        className="rounded p-1 text-muted-foreground opacity-0 hover:bg-accent hover:text-foreground group-hover:opacity-100"
                        aria-label={`Rename conversation ${c.title ?? "new"}`}
                      >
                        <Pencil className="size-3" aria-hidden />
                      </button>
                      <button
                        type="button"
                        data-testid="ai-history-delete"
                        onClick={() => setDeleteId(c.id)}
                        className="rounded p-1 text-muted-foreground opacity-0 hover:bg-accent hover:text-foreground group-hover:opacity-100"
                        aria-label={`Delete conversation ${c.title ?? "new"}`}
                      >
                        <Trash2 className="size-3" aria-hidden />
                      </button>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ) : null}
        </div>

        {/* Messages */}
        <div ref={scrollRef} className="min-h-0 flex-1 space-y-2 overflow-y-auto p-3">
          {noWorkspace ? (
            <p className="text-xs text-muted-foreground" role="status">
              Open a workspace to ask questions.
            </p>
          ) : ai.messagesLoading ? (
            <p className="flex items-center gap-2 text-xs text-muted-foreground" role="status">
              <Loader2 className="size-3.5 animate-spin" aria-hidden /> Loading…
            </p>
          ) : ai.messages.length === 0 && !ai.live && !ai.pendingUser ? (
            <div className="mt-10 text-center text-xs text-muted-foreground">
              <Sparkles className="mx-auto mb-2 size-6" aria-hidden />
              <p>Ask anything about this workspace.</p>
              <p className="mt-1">AI answers cite the pages and databases you link.</p>
            </div>
          ) : (
            <>
              {ai.messages.map((m) => renderMessage(m))}
              {ai.pendingUser ? renderMessage({ id: ai.pendingUser.id, role: "user", content: ai.pendingUser.content, createdAt: "" }) : null}
              {ai.live && ai.live.content !== "" ? (
                renderMessage(
                  { id: "live", role: "assistant", content: ai.live.content, createdAt: "" },
                  true
                )
              ) : ai.live && ai.live.content === "" && ai.streaming ? (
                <div data-testid="ai-message-live" className="flex justify-start">
                  <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
                    <Loader2 className="size-3.5 animate-spin" aria-hidden /> Thinking…
                  </div>
                </div>
              ) : null}
              {ai.live && ai.live.toolCalls.length > 0 ? (
                <div className="space-y-1">
                  {ai.live.toolCalls.map((t) => (
                    <div
                      key={t.id}
                      data-testid="ai-tool-call"
                      className="flex items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-[11px] text-muted-foreground"
                    >
                      <Sparkles className="size-3" aria-hidden />
                      <span className="font-mono">{t.name}</span>
                      <span className="truncate" aria-hidden>
                        {JSON.stringify(t.arguments)}
                      </span>
                    </div>
                  ))}
                </div>
              ) : null}
            </>
          )}
        </div>

        {/* Error banner */}
        {renderErrorBanner()}

        {/* Delete confirm (spec: "delete with confirm dialog") — a nested
            dialog inside the panel (shares its focus trap). */}
        {deleteId ? (
          <div
            data-testid="ai-delete-confirm"
            role="alertdialog"
            aria-label="Delete conversation?"
            className="absolute inset-0 z-10 flex items-center justify-center bg-black/30 p-6"
          >
            <div className="w-full max-w-xs rounded-lg border border-border bg-background p-4 shadow-xl">
              <p className="text-sm font-medium">Delete this conversation?</p>
              <p className="mt-1 text-xs text-muted-foreground">
                The messages will be soft-deleted (purged after 30 days). This cannot be undone from the UI.
              </p>
              <div className="mt-3 flex justify-end gap-2">
                <button
                  type="button"
                  onClick={() => setDeleteId(null)}
                  className="rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  data-testid="ai-delete-confirm-yes"
                  autoFocus
                  onClick={() => {
                    const id = deleteId;
                    setDeleteId(null);
                    void ai.removeConversation(id);
                  }}
                  className="rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:opacity-90"
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        ) : null}

        {/* Screen-reader streaming state */}
        <div className="sr-only" role="status" aria-live="polite">
          {ai.streaming ? "AI is replying" : ai.banner ? "Error: " + ai.banner.message : ""}
        </div>

        {/* Composer */}
        {showComposer ? (
          <div className="shrink-0 border-t border-border p-2.5">
            {context && (context.pageId || context.databaseId) ? (
              <p className="mb-1.5 truncate px-1 text-[10px] text-muted-foreground" data-testid="ai-context-note">
                <Sparkles className="mr-0.5 inline size-2.5" aria-hidden />
                {context.databaseId ? "Answering about this database" : "Answering about this page"}
                {context.label ? ` — ${context.label}` : ""}
              </p>
            ) : null}
            <div className="flex items-end gap-2">
              <textarea
                ref={inputRef}
                data-testid="ai-input"
                value={draft}
                onChange={(e) => setDraft(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    doSend();
                  }
                }}
                rows={2}
                placeholder="Ask anything…  (Enter to send, Shift+Enter for a new line)"
                aria-label="Ask AI message"
                className="min-h-[52px] w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus:border-primary"
              />
              {ai.streaming ? (
                <button
                  type="button"
                  data-testid="ai-stop"
                  onClick={ai.stop}
                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90"
                  aria-label="Stop generating"
                >
                  <Square className="size-4" aria-hidden />
                </button>
              ) : (
                <button
                  type="button"
                  data-testid="ai-send"
                  onClick={doSend}
                  disabled={!draft.trim()}
                  className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-40"
                  aria-label="Send message"
                >
                  <Sparkles className="size-4" aria-hidden />
                </button>
              )}
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}