"use client";

/**
 * TASK-0123 — the writing suggestion dialog (accept-diff).
 *
 * Flow: the caller (selection toolbar / block context menu) opens it with
 * `{ pageId, blockIds, action, language? }`. It streams the suggestion
 * (SSE — `sendWriting`), renders a per-block diff (word-level via
 * `@factory/editor`'s `wordDiff` for improve/rewrite/translate; the summary
 * text in place for summarize), then offers:
 *
 *   - Accept — apply ALL listed blocks (`writingApi.apply`), per-block
 *     failures are listed, never silently dropped;
 *   - Accept one — apply a single block (`blockIds: [id]`);
 *   - Discard — no API call (UI-only; the persisted suggestion stays for the
 *     cost ledger, per spec);
 *   - Rebase prompt — a per-block 409 (concurrent edit) offers a re-run.
 *
 * a11y (mirrors ai-panel.tsx): role="dialog" aria-modal, focus trap, Escape
 * closes (and aborts the stream), focus restored to the trigger, and an
 * aria-live region announces "N suggested edits" / the error.
 *
 * Pinned testids (tests/e2e/specs/ai-writing.spec.ts — do not rename):
 *   writing-diff            the dialog
 *   writing-diff-block      one block's diff card
 *   writing-accept          the Accept (all) button
 *   writing-accept-one-*    per-block Accept one (id = blockId)
 *   writing-discard         the Discard button
 *   writing-rebase-prompt   the per-block 409 rebase offer
 *   writing-error-banner    the error banner (TASK-0122 semantics)
 *   writing-loading         the shimmer placeholder while streaming
 */
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import {
  AlertTriangle,
  Check,
  CheckCheck,
  Loader2,
  RefreshCw,
  RotateCcw,
  Sparkles,
  X
} from "lucide-react";
import { wordDiff, type DiffSegment } from "@factory/editor";
import {
  AiPreStreamError,
  blockPlainText,
  sendWriting,
  writingApi,
  WRITING_LANGUAGES,
  type WritingAction,
  type WritingApplyResult,
  type WritingSuggestion
} from "@/lib/ai";
import type { Block } from "@/lib/types";
import { cn } from "@/lib/utils";

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

// blockPlainText lives in lib/ai.ts (imported below) so it is unit-testable
// without importing this React component.

const ACTION_LABEL: Record<WritingAction, string> = {
  summarize: "Summary",
  rewrite: "Rewrite",
  improve: "Improved writing",
  translate: "Translation"
};

function languageLabel(id: string): string {
  return WRITING_LANGUAGES.find((l) => l.id === id)?.label ?? id;
}

/** One diff card's word-level segments (same / del / add). */
function renderSegments(segs: DiffSegment[], keyPrefix: string) {
  return segs.map((s, i) => {
    const k = `${keyPrefix}-${i}`;
    if (s.type === "same") return <span key={k}>{s.text}</span>;
    if (s.type === "del")
      return (
        <span key={k} className="rounded-sm bg-red-100 text-red-700 line-through dark:bg-red-950/60 dark:text-red-300">
          {s.text}
        </span>
      );
    return (
      <span key={k} className="rounded-sm bg-green-100 text-green-800 dark:bg-green-950/60 dark:text-green-300">
        {s.text}
      </span>
    );
  });
}

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

export interface WritingDialogProps {
  open: boolean;
  workspaceId: string;
  pageId: string;
  /** The selected blocks (the diff's old side + the request). */
  blocks: Block[];
  action: WritingAction;
  language?: string;
  onClose: () => void;
}

interface FlowError {
  code: string;
  message: string;
  retryable?: boolean;
  retryAfterSeconds?: number;
}

export function WritingDialog({ open, workspaceId, pageId, blocks, action, language, onClose }: WritingDialogProps) {
  const qc = useQueryClient();
  const [status, setStatus] = useState<"idle" | "streaming" | "done" | "error">("idle");
  const [suggestion, setSuggestion] = useState<WritingSuggestion | null>(null);
  const [suggestionId, setSuggestionId] = useState<string | null>(null);
  const [notes, setNotes] = useState<string>("");
  const [error, setError] = useState<FlowError | null>(null);
  const [applyResults, setApplyResults] = useState<WritingApplyResult[] | null>(null);
  const [applying, setApplying] = useState(false);
  const [rebaseIds, setRebaseIds] = useState<Set<string>>(new Set());

  const dialogRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLElement | null>(null);
  const abortRef = useRef<AbortController | null>(null);

  const blockById = useMemo(() => new Map(blocks.map((b) => [b.id, b])), [blocks]);

  /* ----------------------------------------------------------- the run */

  const run = useCallback(
    async (ids: string[]) => {
      setStatus("streaming");
      setSuggestion(null);
      setSuggestionId(null);
      setNotes("");
      setError(null);
      setApplyResults(null);
      setRebaseIds(new Set());
      const controller = new AbortController();
      abortRef.current = controller;
      try {
        const res = await sendWriting({
          workspaceId,
          pageId,
          blockIds: ids,
          action,
          ...(language ? { language } : {}),
          signal: controller.signal
        });
        if (res.reason === "aborted") {
          setStatus("idle");
          return;
        }
        if (res.reason !== "ok" || !res.suggestion) {
          setStatus("error");
          setError({ code: "AI_STREAM_ERROR", message: "The suggestion stream ended unexpectedly." });
          return;
        }
        setSuggestion(res.suggestion);
        setSuggestionId(res.suggestionId ?? null);
        setNotes(res.notes ?? "");
        setStatus("done");
      } catch (err) {
        if (err instanceof AiPreStreamError) {
          setStatus("error");
          setError({
            code: err.code,
            message: err.message,
            retryable: err.retryAfterSeconds != null,
            retryAfterSeconds: err.retryAfterSeconds
          });
        } else {
          setStatus("error");
          setError({ code: "NETWORK_ERROR", message: "Could not reach the server." });
        }
      } finally {
        abortRef.current = null;
      }
    },
    [workspaceId, pageId, action, language]
  );

  // Kick off the stream when opened (and reset on parameter change).
  useEffect(() => {
    if (!open) return;
    const ids = blocks.map((b) => b.id);
    if (ids.length > 0) void run(ids);
    return () => abortRef.current?.abort();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open, pageId, action, language]);

  /* ------------------------------------------------- close + focus trap */

  const close = useCallback(() => {
    abortRef.current?.abort();
    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]")?.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"])');
        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]);

  /* ------------------------------------------------------------- apply */

  const invalidate = useCallback(() => {
    void qc.invalidateQueries({ queryKey: ["pages", pageId, "blocks"] });
  }, [qc, pageId]);

  const apply = useCallback(
    async (onlyBlockId?: string) => {
      if (!suggestionId || applying) return;
      setApplying(true);
      setApplyResults(null);
      try {
        const res = await writingApi.apply(workspaceId, {
          suggestionId,
          ...(onlyBlockId ? { blockIds: [onlyBlockId] } : {})
        });
        setApplyResults(res.results);
        invalidate();
        const failed = res.results.filter((r) => r.status === "failed");
        if (failed.length === 0) {
          // all applied — the dialog can go (Discard is the other exit).
          close();
        }
      } catch (err) {
        const e = err as { code?: string; message?: string };
        setError({ code: e.code ?? "APPLY_ERROR", message: e.message ?? "Apply failed." });
      } finally {
        setApplying(false);
      }
    },
    [suggestionId, applying, workspaceId, invalidate, close]
  );

  /** The rebase path: a 409 means the block moved on — drop it from the
   *  selection, re-run the suggestion for the rest (fresh versions). */
  const rebase = useCallback(
    (blockId: string) => {
      setRebaseIds((s) => {
        const next = new Set(s);
        next.delete(blockId);
        return next;
      });
      const remaining = blocks.map((b) => b.id).filter((id) => id !== blockId);
      if (remaining.length === 0) {
        close();
        return;
      }
      // refresh the local blocks first (the conflicting one moved) so the
      // re-run diffs against the CURRENT text.
      void qc.invalidateQueries({ queryKey: ["pages", pageId, "blocks"] });
      void run(remaining);
    },
    [blocks, pageId, run, close, qc]
  );

  if (!open) return null;

  const conflictIds = new Set((applyResults ?? []).filter((r) => r.status === "failed" && r.code === "CONFLICT").map((r) => r.blockId));
  const nonConflictFailures = (applyResults ?? []).filter((r) => r.status === "failed" && r.code !== "CONFLICT");
  const budgetError = error && (error.code === "AI_BUDGET_EXCEEDED" || error.code === "AI_BUDGET_MONTHLY_EXCEEDED");

  const streaming = status === "streaming";
  const showDiff = status === "done" && suggestion && suggestion.blocks.length > 0;

  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="writing-diff"
        role="dialog"
        aria-modal="true"
        aria-label={`AI ${ACTION_LABEL[action]}`}
        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"
      >
        {/* Header */}
        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 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">
              {ACTION_LABEL[action]}
              {action === "translate" && language ? <span className="ml-1 text-xs font-normal text-muted-foreground">→ {languageLabel(language)}</span> : null}
            </h2>
            <span className="rounded-full border border-border bg-muted/60 px-2 py-0.5 text-[10px] text-muted-foreground">
              {blocks.length} block{blocks.length === 1 ? "" : "s"}
            </span>
          </div>
          <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>

        {/* Body */}
        <div className="min-h-0 flex-1 space-y-3 overflow-y-auto p-4">
          {streaming ? (
            <div data-testid="writing-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 /> Generating…
              </p>
              {blocks.slice(0, 4).map((b) => (
                <div key={b.id} 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>
          ) : null}

          {status === "error" && error ? (
            <div
              data-testid="writing-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">
                  {budgetError
                    ? "Monthly AI budget reached"
                    : error.code === "RATE_LIMITED"
                      ? "Sending too fast"
                      : error.code === "PAYLOAD_TOO_LARGE"
                        ? "Selection too large"
                        : "Something went wrong"}
                </p>
                <p className="mt-0.5 break-words">{error.message}</p>
                {budgetError ? (
                  <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>
              {error.retryable ? (
                <button
                  type="button"
                  onClick={() => void run(blocks.map((b) => b.id))}
                  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>
          ) : null}

          {notes ? (
            <p className="rounded-md border border-border bg-muted/30 px-3 py-1.5 text-[11px] text-muted-foreground">{notes}</p>
          ) : null}

          {showDiff ? (
            <div className="space-y-3" data-testid="writing-diff-list">
              {suggestion!.blocks.map((sb) => {
                const old = blockPlainText(blockById.get(sb.blockId)?.content ?? "");
                const isConflict = conflictIds.has(sb.blockId);
                const isRebasing = rebaseIds.has(sb.blockId);
                return (
                  <div key={sb.blockId} data-testid="writing-diff-block" className="rounded-md border border-border bg-background">
                    <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
                      <span className="truncate text-[11px] text-muted-foreground">
                        {sb.blockId.slice(0, 8)}
                        {isConflict ? <span className="ml-2 text-red-600">changed by someone else</span> : null}
                      </span>
                      {!streaming && !isConflict && !isRebasing ? (
                        <button
                          type="button"
                          data-testid={`writing-accept-one-${sb.blockId}`}
                          onClick={() => void apply(sb.blockId)}
                          disabled={applying}
                          className="inline-flex items-center gap-1 rounded border border-border px-2 py-0.5 text-[11px] hover:bg-accent disabled:opacity-40"
                        >
                          <Check className="size-3" aria-hidden /> Accept one
                        </button>
                      ) : null}
                    </div>
                    <div className="px-3 py-2 text-sm">
                      {isConflict ? (
                        <div data-testid="writing-rebase-prompt" className="space-y-2 rounded-md border border-amber-300 bg-amber-50 p-2.5 text-xs text-amber-900 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200">
                          <p className="font-medium">
                            This block was edited by someone else since the suggestion was made.
                          </p>
                          <div className="flex gap-2">
                            <button
                              type="button"
                              data-testid={`writing-rebase-${sb.blockId}`}
                              onClick={() => void rebase(sb.blockId)}
                              className="inline-flex 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"
                            >
                              <RefreshCw className="size-3" aria-hidden /> Rebase &amp; retry the rest
                            </button>
                            <button
                              type="button"
                              onClick={() => setRebaseIds((s) => new Set(s).add(sb.blockId))}
                              className="rounded border border-border px-2 py-1 hover:bg-accent"
                            >
                              Skip this block
                            </button>
                          </div>
                        </div>
                      ) : isRebasing ? (
                        <p className="text-xs text-muted-foreground">Skipped (rebasing the rest).</p>
                      ) : action === "summarize" ? (
                        /* summarize: the summary in place of the span (no word diff). */
                        <p className="whitespace-pre-wrap break-words text-foreground">{sb.newText}</p>
                      ) : (
                        <p className="whitespace-pre-wrap break-words">{renderSegments(wordDiff(old, sb.newText), sb.blockId)}</p>
                      )}
                    </div>
                  </div>
                );
              })}

              {nonConflictFailures.length > 0 ? (
                <div role="alert" className="space-y-1 rounded-md border border-red-300 bg-red-50 p-2.5 text-xs text-red-900 dark:border-red-800 dark:bg-red-950/40 dark:text-red-200">
                  <p className="font-medium">Some blocks could not be applied:</p>
                  <ul className="list-inside list-disc">
                    {nonConflictFailures.map((r) => (
                      <li key={r.blockId}>
                        {r.blockId.slice(0, 8)} — {r.message ?? r.code}
                      </li>
                    ))}
                  </ul>
                </div>
              ) : null}
            </div>
          ) : null}

          {status === "done" && suggestion && suggestion.blocks.length === 0 ? (
            <p className="text-xs text-muted-foreground">The model returned no edits for this selection.</p>
          ) : null}
        </div>

        {/* aria-live summary (the diff is announced, not just painted) */}
        <div className="sr-only" role="status" aria-live="polite">
          {streaming
            ? "AI is writing a suggestion"
            : showDiff
              ? `${suggestion!.blocks.length} suggested edit${suggestion!.blocks.length === 1 ? "" : "s"} ready to accept`
              : error
                ? `Error: ${error.message}`
                : ""}
        </div>

        {/* Footer (pinned on mobile — the Accept bar sticks to the sheet). */}
        <div className="flex shrink-0 items-center justify-between gap-2 border-t border-border p-3">
          <button
            type="button"
            data-testid="writing-discard"
            onClick={close}
            disabled={applying || streaming}
            className="inline-flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs hover:bg-accent disabled:opacity-40"
          >
            <X className="size-3.5" aria-hidden /> Discard
          </button>
          <div className="flex items-center gap-2">
            {applying ? (
              <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
                <Loader2 className="size-3.5 animate-spin" aria-hidden /> Applying…
              </span>
            ) : null}
            <button
              type="button"
              data-testid="writing-accept"
              onClick={() => void apply()}
              disabled={!showDiff || applying || streaming || (showDiff && conflictIds.size > 0)}
              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"
            >
              <CheckCheck className="size-3.5" aria-hidden /> Accept
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}