"use client";

/**
 * TASK-0124 — shared chrome for the three database-AI dialogs
 * (generate / extract / formula). Reuses the exact a11y + focus-trap +
 * error-banner + loading-skeleton semantics from `writing-diff.tsx`
 * (TASK-0123) so the database-AI surfaces are consistent with the writing
 * surfaces: role="dialog" aria-modal, focus trap, Escape closes (and aborts),
 * focus restored to the trigger, and an aria-live region announcing the
 * result / error.
 *
 * Pinned testids (do not rename): `db-ai-error-banner`, `db-ai-loading`.
 */
import { useCallback, useEffect, useRef } from "react";
import type { ReactNode } from "react";
import { AlertTriangle, Loader2, X } from "lucide-react";

export interface DbAiDialogProps {
  open: boolean;
  /** Dialog title (the header + aria-label). */
  title: string;
  testId: string;
  onClose: () => void;
  /** Body + footer content. */
  children: ReactNode;
  /** Optional footer row (the action buttons). */
  footer?: ReactNode;
  /** The loading skeleton caption (e.g. "Generating…"). */
  loadingText?: string;
  /** aria-live summary (announced, not just painted). */
  live: string;
}

export function DbAiDialog({ open, title, testId, onClose, children, footer, loadingText, live }: DbAiDialogProps) {
  const dialogRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);

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

  useEffect(() => {
    if (!open) return;
    const prev = document.activeElement as HTMLElement | null;
    triggerRef.current = prev;
    requestAnimationFrame(() => dialogRef.current?.querySelector<HTMLElement>("button, [tabindex], textarea, input")?.focus());
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.stopPropagation();
        close();
      } else if (e.key === "Tab" && dialogRef.current) {
        const focusables = dialogRef.current.querySelectorAll<HTMLElement>('button, [tabindex]:not([tabindex="-1"]), textarea, input');
        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, close]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[85] flex items-end justify-center sm:items-center" role="presentation">
      <div className="absolute inset-0 bg-black/30" aria-hidden onClick={close} />
      <div
        ref={dialogRef}
        data-testid={testId}
        role="dialog"
        aria-modal="true"
        aria-label={title}
        className="relative flex max-h-[85vh] w-full flex-col rounded-t-xl border border-border bg-background shadow-2xl sm:max-w-2xl sm:rounded-xl"
      >
        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5">
          <h2 className="text-sm font-semibold">{title}</h2>
          <button
            type="button"
            onClick={close}
            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
            aria-label="Close"
          >
            <X className="size-4" aria-hidden />
          </button>
        </div>

        <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">{children}</div>

        {footer ? <div className="flex shrink-0 items-center justify-between gap-2 border-t border-border p-3">{footer}</div> : null}

        <div className="sr-only" role="status" aria-live="polite">
          {live}
        </div>
      </div>
    </div>
  );
}

/** The canonical AI error banner (budget / rate-limit / validation / generic). */
export function DbAiErrorBanner({ code, message, budget, retryable, onRetry }: { code: string; message: string; budget?: boolean; retryable?: boolean; onRetry?: () => void }) {
  const heading = budget
    ? "Monthly AI budget reached"
    : code === "RATE_LIMITED"
      ? "Sending too fast"
      : code === "FORBIDDEN"
        ? "You don't have permission"
        : code === "AI_BUDGET_EXCEEDED" || code === "AI_BUDGET_MONTHLY_EXCEEDED"
          ? "Monthly AI budget reached"
          : "Something went wrong";
  return (
    <div
      data-testid="db-ai-error-banner"
      role="alert"
      className="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">{heading}</p>
        <p className="mt-0.5 break-words">{message}</p>
        {budget ? (
          <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}
        {code === "FORBIDDEN" ? (
          <p className="mt-1 text-[11px] opacity-80">You need edit access to this workspace to use AI. Ask an admin for access.</p>
        ) : null}
      </div>
      {retryable && onRetry ? (
        <button
          type="button"
          onClick={onRetry}
          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"
        >
          Retry
        </button>
      ) : null}
    </div>
  );
}

/** The streaming loading skeleton (the shimmer rows + a "Generating…" line). */
export function DbAiLoading({ text, rows = 3 }: { text?: string; rows?: number }) {
  return (
    <div data-testid="db-ai-loading" className="space-y-2" role="status">
      <p className="flex items-center gap-2 text-xs text-muted-foreground">
        <Loader2 className="size-3.5 animate-spin" aria-hidden /> {text ?? "Generating…"}
      </p>
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="animate-pulse rounded-md border border-border bg-muted/40 px-3 py-2.5">
          <div className="mb-2 h-2.5 w-1/3 rounded bg-foreground/10" />
          <div className="h-2.5 w-full rounded bg-foreground/10" />
          <div className="mt-1.5 h-2.5 w-2/3 rounded bg-foreground/10" />
        </div>
      ))}
    </div>
  );
}