// @vitest-environment jsdom
/**
 * CodeBlock — syntax-highlighting regression ("typing/pasting code is not
 * colorful").
 *
 * Contract under test:
 *   - DISPLAY mode renders Prism token spans (`<span class="token …">`) for a
 *     known language, so the block is colorful without any interaction;
 *   - EDIT mode overlays a transparent-text <textarea> on a live highlighted
 *     <pre>: typing (native input event) re-highlights the overlay
 *     immediately and queues the change (debounced batch save);
 *   - commit (blur → focusout in React 18) persists via saveNow with the
 *     current text and returns to the highlighted display;
 *   - plaintext stays raw (no token spans).
 *
 * The heavy sibling components of block-renderer (Tiptap inline editor,
 * database/file/form blocks) and the persistence hooks are stubbed at the
 * module boundary — only CodeBlock's own rendering + save contract is real.
 */
(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
import { act } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

const queueChange = vi.fn();
const saveNow = vi.fn(async () => {});

vi.mock("next/link", () => ({ default: (p: object) => p }));
vi.mock("@tanstack/react-query", () => ({
  useQuery: () => ({ data: undefined }),
  useInfiniteQuery: () => ({ data: undefined }),
  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
}));
vi.mock("@/lib/api", () => ({
  apiFetch: vi.fn(async () => ({ data: [] })),
  blockApi: { update: vi.fn(async () => ({})) },
  uploadFile: vi.fn(),
  isApiError: () => false,
}));
vi.mock("@/components/database/db-embedded", () => ({ DatabaseView: () => null }));
vi.mock("@/components/files/FileBlock", () => ({ FileBlock: () => null }));
vi.mock("@/components/form/form-renderer", () => ({ FormRenderer: () => null }));
vi.mock("@/components/editor/inline-editor", () => ({ InlineEditor: () => null }));
vi.mock("@/components/editor/block-save-queue", () => ({
  useBlockSaveQueue: () => ({ queueChange, saveNow }),
}));

import { CodeBlock } from "../block-renderer";
import type { Block } from "@/lib/types";

const CODE = 'const x = 42;\nfunction f() { return x; }';

function makeBlock(over: Partial<Block> = {}): Block {
  return {
    id: "blk_code_1",
    pageId: "page_1",
    parentId: null,
    type: "code",
    position: "a0",
    content: CODE,
    properties: { language: "javascript" },
    updatedAt: "2026-01-01T00:00:00.000Z",
    createdAt: "2026-01-01T00:00:00.000Z",
    ...over,
  };
}

let container: HTMLElement | null = null;
let root: Root | null = null;

function render(block: Block) {
  container = document.createElement("div");
  document.body.appendChild(container);
  root = createRoot(container);
  act(() => {
    root!.render(<CodeBlock block={block} />);
  });
}

afterEach(() => {
  act(() => root?.unmount());
  container?.remove();
  container = null;
  root = null;
  vi.clearAllMocks();
});

describe("CodeBlock (syntax highlighting)", () => {
  it("display mode renders Prism token spans (colorful without interaction)", () => {
    render(makeBlock());
    const code = container!.querySelector("pre code")!;
    expect(code, "expected a <pre><code> display").toBeTruthy();
    const spans = code!.querySelectorAll("span.token");
    expect(spans.length, "expected token spans, got plain text").toBeGreaterThan(0);
    expect(code!.querySelector('span.token.keyword')?.textContent).toBe("const");
    // The whole source is still readable as plain text.
    expect(code!.textContent).toContain("const x = 42;");
    // Not in edit mode yet.
    expect(container!.querySelector("textarea")).toBeNull();
  });

  it("display mode keeps plaintext raw (no token spans)", () => {
    render(makeBlock({ content: "just words", properties: { language: "plaintext" } }));
    const code = container!.querySelector("pre code")!;
    expect(code!.querySelector("span.token")).toBeNull();
    expect(code!.textContent).toBe("just words");
  });

  it("edit mode: typing re-highlights the overlay live and queues the change", () => {
    render(makeBlock());
    // Click the display <pre> to enter edit mode.
    const pre = container!.querySelector("pre")!;
    act(() => {
      pre!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
    });
    const ta = container!.querySelector("textarea")!;
    expect(ta, "expected edit-mode textarea").toBeTruthy();
    // The overlay <pre> behind the textarea already shows the highlighted
    // current text (live coloring before the first keystroke).
    const overlay = container!.querySelector("pre[aria-hidden] code")!;
    expect(overlay!.querySelectorAll("span.token").length).toBeGreaterThan(0);

    const newText = "let y = \"hi\"; // typed";
    const setNativeValue = Object.getOwnPropertyDescriptor(
      window.HTMLTextAreaElement.prototype,
      "value"
    )!.set!;
    act(() => {
      setNativeValue.call(ta, newText);
      ta!.dispatchEvent(new Event("input", { bubbles: true }));
    });
    // Live highlight picked up the new text (string + comment tokens).
    expect(overlay!.innerHTML).toContain("token string");
    expect(overlay!.innerHTML).toContain("token comment");
    // The change was queued for the debounced batch save.
    expect(queueChange).toHaveBeenCalledWith("blk_code_1", newText);
  });

  it("commit on blur persists via saveNow and returns to the highlighted display", () => {
    render(makeBlock());
    const pre = container!.querySelector("pre")!;
    act(() => pre!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
    const ta = container!.querySelector("textarea")!;

    const setNativeValue = Object.getOwnPropertyDescriptor(
      window.HTMLTextAreaElement.prototype,
      "value"
    )!.set!;
    act(() => {
      setNativeValue.call(ta, "const z = 7;");
      ta!.dispatchEvent(new Event("input", { bubbles: true }));
    });
    // React 18 maps onBlur to the native focusout event.
    act(() => {
      ta!.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
    });
    expect(saveNow).toHaveBeenCalledWith("blk_code_1", "const z = 7;");
    // Back in display mode (textarea gone), still highlighted.
    expect(container!.querySelector("textarea")).toBeNull();
    const code = container!.querySelector("pre code")!;
    expect(code!.querySelectorAll("span.token").length).toBeGreaterThan(0);
  });

  it("Escape commits from the editor (no blur needed)", () => {
    render(makeBlock());
    const pre = container!.querySelector("pre")!;
    act(() => pre!.dispatchEvent(new MouseEvent("click", { bubbles: true })));
    const ta = container!.querySelector("textarea")!;
    act(() => {
      ta!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
    });
    expect(saveNow).toHaveBeenCalledTimes(1);
    expect(saveNow).toHaveBeenCalledWith("blk_code_1", CODE);
  });
});