import { spawn, type ChildProcess } from "node:child_process";
import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
import { dirname, join } from "node:path";
import { expect, it } from "vitest";
import { launchVerificationServer, runControlOmb, type VerificationServer } from "../control-omb.ts";
import { waitForExit } from "../../server/testing/cleanup.ts";
import { ensureUiBrowser } from "./control-omb-ui.ts";
import { fixtureApi, mountPreview, type MountedPreview } from "./preview-fixture.ts";
import { NOTICES } from "../../src/lib/notices.ts";

const enabled = process.env.OMB_UI_E2E === "1";
if (!enabled) console.log("skipping mobile code-block UI: set OMB_UI_E2E=1 for isolated browser qualification");

const snippets = [
  "  First plaintext block\n    Keep this indentation.\n\n",
  `const message = "${"a_long_value_".repeat(30)}";\nconsole.log(message);`,
  `unknown-language ${"unbroken".repeat(50)}\n  Preserve the second line.`,
  "No language was specified.\n  This belongs only to the fourth block.",
  "indented block\n  preserved second line",
];
const reply = [
  "These independent examples have their own controls.",
  `\`\`\`text\n${snippets[0]}\n\`\`\``,
  `\`\`\`typescript\n${snippets[1]}\n\`\`\``,
  `\`\`\`unrecognised-fixture-language\n${snippets[2]}\n\`\`\``,
  `\`\`\`\n${snippets[3]}\n\`\`\``,
  snippets[4].split("\n").map(line => `    ${line}`).join("\n"),
  "This neighboring prose must never be copied with a block.",
].join("\n\n");
const blocks = `Array.from(document.querySelectorAll('.chat-code-block')).filter(element => element.querySelector('pre') && element.querySelector('[data-code-plate]'))`;
// Each block's plate: Copy, then a menu with Wrap lines.
const COPY = `[data-code-plate] > button`;
const MENU = `[data-code-plate] button[aria-haspopup="menu"]`;

async function connect(url: string) {
  const socket = new WebSocket(url);
  const pending = new Map<number, { resolve(value: any): void; reject(error: Error): void }>();
  let next = 0;
  socket.addEventListener("message", event => {
    const value = JSON.parse(String(event.data));
    const waiting = pending.get(value.id);
    if (!waiting) return;
    pending.delete(value.id);
    if (value.error) waiting.reject(new Error(value.error.message));
    else waiting.resolve(value.result);
  });
  const rejectPending = () => {
    for (const waiting of pending.values()) waiting.reject(new Error("Fixture Chrome connection closed"));
    pending.clear();
  };
  socket.addEventListener("close", rejectPending);
  await new Promise<void>((resolve, reject) => {
    const timer = setTimeout(() => { socket.close(); reject(new Error("Fixture Chrome connection timed out")); }, 20_000);
    socket.addEventListener("open", () => { clearTimeout(timer); resolve(); }, { once: true });
    socket.addEventListener("error", () => { clearTimeout(timer); socket.close(); reject(new Error("Fixture Chrome connection failed")); }, { once: true });
  });
  return {
    close() { rejectPending(); socket.close(); },
    request(method: string, params: unknown = {}, sessionId?: string): Promise<any> {
      const id = ++next;
      return new Promise((resolve, reject) => {
        const timer = setTimeout(() => { pending.delete(id); reject(new Error(`Fixture Chrome ${method} timed out`)); }, 30_000);
        pending.set(id, { resolve(value) { clearTimeout(timer); resolve(value); }, reject(error) { clearTimeout(timer); reject(error); } });
        socket.send(JSON.stringify({ id, method, params, ...(sessionId ? { sessionId } : {}) }));
      });
    },
  };
}

(enabled ? it : it.skip)("keeps each mobile text/code block copyable, wrappable and reachable without hover", async () => {
  let fixture: VerificationServer | undefined;
  let preview: MountedPreview | undefined;
  let chrome: ChildProcess | undefined;
  let cdp: Awaited<ReturnType<typeof connect>> | undefined;
  let evidence: string | undefined;
  const receipts: Record<string, any> = { geometry: [], copied: [], wrapping: [], clipboard: "Chrome Clipboard API read/write after real pointer events; permission granted only to the isolated fixture origin; refusal stubbed afterward" };
  try {
    const tools = await ensureUiBrowser();
    if (!tools.chrome) throw new Error("This recipe needs the pinned Chrome for Testing");
    fixture = await launchVerificationServer({ ...process.env, FAKE_CLAUDE_REPLIES: JSON.stringify([reply]) });
    evidence = process.env.OMB_MOBILE_BLOCKS_EVIDENCE_DIR || join(process.env.OMB_UI_EVIDENCE_DIR || dirname(fixture.info.logPath), "mobile-code-blocks");
    mkdirSync(evidence, { recursive: true });
    const save = () => writeFileSync(join(evidence!, "receipt.json"), JSON.stringify(receipts, null, 2));
    const api = fixtureApi(fixture.info.url);
    await api("PATCH", "/api/config", { language: "en" });
    const { bots } = await api("GET", "/api/bots");
    for (const bot of bots.filter((bot: { defaultBot?: unknown }) => bot.defaultBot)) await api("PATCH", `/api/bots/${bot.id}`, { welcomed: true });
    const created = await runControlOmb(["new-bot", "--name", "Pepper", "--url", fixture.info.url]) as { bot: { id: string; activeTaskId: string } };
    preview = await mountPreview(fixture, { entry: "/scripts/testing/threads-preview.tsx", route: "/__mobile-blocks.html", title: "Isolated mobile code blocks", logLevel: "warn" });
    const profile = join(fixture.info.dataDir, "chrome");
    mkdirSync(profile, { recursive: true });
    // A hosted Linux runner has no mouse, so headless Chrome there reports no hover and no pointer. These settings give
    // the page a fine, hovering pointer on every host. Any touch-emulation call, even one that turns it off, swaps in the
    // host's own pointer again, so the desktop pass below runs before touch emulation is ever touched.
    const mouse = "--blink-settings=primaryPointerType=4,availablePointerTypes=4,primaryHoverType=2,availableHoverTypes=2";
    chrome = spawn(tools.chrome, ["--headless=new", "--no-sandbox", "--no-first-run", "--no-default-browser-check", "--disable-background-networking", "--password-store=basic", "--use-mock-keychain", mouse, "--remote-debugging-port=0", `--user-data-dir=${profile}`, "about:blank"], {
      env: { PATH: process.env.PATH, HOME: fixture.info.dataDir, USERPROFILE: fixture.info.dataDir, ...(process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {}) }, stdio: "ignore",
    });
    const portFile = join(profile, "DevToolsActivePort");
    await expect.poll(() => {
      if (chrome!.exitCode !== null || chrome!.signalCode !== null) throw new Error("Fixture Chrome exited before startup");
      return existsSync(portFile);
    }, { timeout: 30_000 }).toBe(true);
    const [port, endpoint] = readFileSync(portFile, "utf8").trim().split("\n");
    cdp = await connect(`ws://127.0.0.1:${port}${endpoint}`);
    const target = await cdp.request("Target.createTarget", { url: "about:blank" });
    const { sessionId } = await cdp.request("Target.attachToTarget", { targetId: target.targetId, flatten: true });
    const request = (method: string, params: unknown = {}) => cdp!.request(method, params, sessionId);
    const evaluate = async (expression: string) => {
      const response = await request("Runtime.evaluate", { expression, awaitPromise: true, returnByValue: true });
      if (response.exceptionDetails) throw new Error(response.exceptionDetails.exception?.description || response.exceptionDetails.text);
      return response.result.value;
    };
    const screenshot = async (name: string) => {
      const shot = await request("Page.captureScreenshot", { format: "png" });
      writeFileSync(join(evidence!, name), Buffer.from(shot.data, "base64"));
    };
    await request("Page.enable");
    await request("Runtime.enable");
    await request("Emulation.setDeviceMetricsOverride", { width: 1100, height: 900, deviceScaleFactor: 1, mobile: false });
    await cdp.request("Browser.grantPermissions", { origin: new URL(preview.previewUrl).origin, permissions: ["clipboardReadWrite", "clipboardSanitizedWrite"] });
    // The notices (the Boat card and the like) are not this test's subject, and on a phone one covers the last block.
    await request("Page.addScriptToEvaluateOnNewDocument", { source: `try { for (const notice of ${JSON.stringify(NOTICES)}) localStorage.setItem(notice, "1"); } catch {}` });
    await request("Page.navigate", { url: preview.previewUrl });
    await expect.poll(() => evaluate(`Boolean(document.querySelector('textarea[aria-label="Message Pepper"]'))`), { timeout: 120_000 }).toBe(true);
    await evaluate(`document.querySelector('textarea[aria-label="Message Pepper"]').focus()`);
    await request("Input.insertText", { text: "Show separate text and code examples" });
    await request("Input.dispatchKeyEvent", { type: "keyDown", key: "Enter", code: "Enter", windowsVirtualKeyCode: 13 });
    await request("Input.dispatchKeyEvent", { type: "keyUp", key: "Enter", code: "Enter", windowsVirtualKeyCode: 13 });
    const settled = await runControlOmb(["wait", "--bot", created.bot.id, "--task", created.bot.activeTaskId, "--timeout", "60", "--url", fixture.info.url]);
    receipts.settled = settled;
    await expect.poll(() => evaluate(`${blocks}.length`), { timeout: 30_000 }).toBe(snippets.length);
    await expect.poll(() => evaluate(`${blocks}[1].querySelector('pre')?.classList.contains('shiki')`), { timeout: 30_000 }).toBe(true);
    receipts.highlighted = true;
    await evaluate(`window.fixtureClipboardWrite = navigator.clipboard.writeText.bind(navigator.clipboard); true`);
    const geometry = () => evaluate(`(() => {
      const rect = element => { const r = element.getBoundingClientRect(); return { left:r.left, right:r.right, top:r.top, bottom:r.bottom, width:r.width, height:r.height }; };
      return { width:innerWidth, pageWidth:document.documentElement.scrollWidth, coarse:matchMedia('(pointer:coarse)').matches, hover:matchMedia('(hover:hover)').matches,
        blocks:${blocks}.map(card => ({ ...rect(card), plateOpacity:getComputedStyle(card.querySelector('[data-code-plate]')).opacity, buttons:Array.from(card.querySelectorAll('[data-code-plate] button')).map(button=>({ ...rect(button), label:button.getAttribute('aria-label') })) })) };
    })()`);
    const tapAt = async (point: { x: number; y: number }, touch: boolean) => {
      if (touch) {
        await request("Input.dispatchTouchEvent", { type: "touchStart", touchPoints: [point] });
        await request("Input.dispatchTouchEvent", { type: "touchEnd", touchPoints: [] });
      } else {
        await request("Input.dispatchMouseEvent", { type: "mousePressed", ...point, button: "left", clickCount: 1 });
        await request("Input.dispatchMouseEvent", { type: "mouseReleased", ...point, button: "left", clickCount: 1 });
      }
    };
    const tap = async (index: number, kind: "copy" | "menu", touch = true) => {
      const selector = kind === "copy" ? COPY : MENU;
      let position: { x: number; y: number; hit: boolean };
      await expect.poll(async () => {
        position = await evaluate(`(async () => { const card=${blocks}[${index}]; const button=card.querySelector(${JSON.stringify(selector)}); if(!button) throw new Error('Missing ${kind} control'); button.scrollIntoView({behavior:'instant',block:'center',inline:'nearest'}); await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve))); const before=button.getBoundingClientRect(); await new Promise(requestAnimationFrame); const r=button.getBoundingClientRect(); const x=r.left+r.width/2,y=r.top+r.height/2; const stable=Math.abs(before.x-r.x)<0.25&&Math.abs(before.y-r.y)<0.25; return {x,y,hit:stable&&button.contains(document.elementFromPoint(x,y))}; })()`);
        return position.hit;
      }, { timeout: 10_000 }).toBe(true);
      await tapAt({ x: position!.x, y: position!.y }, touch);
    };
    // Wrap lines lives in the block's menu, a sheet over the page.
    const toggleWrap = async (index: number) => {
      await tap(index, "menu");
      const wrapItem = `document.querySelector('[role="menu"] [data-menu-key="wrap"]')`;
      let point: { x: number; y: number } | null = null;
      await expect.poll(async () => {
        point = await evaluate(`(() => { const item=${wrapItem}; if(!item) return null; const r=item.getBoundingClientRect(); const x=r.left+r.width/2,y=r.top+r.height/2; return item.contains(document.elementFromPoint(x,y)) ? {x,y} : null; })()`);
        return point !== null;
      }, { timeout: 10_000 }).toBe(true);
      await tapAt(point!, true);
      await expect.poll(() => evaluate(`Boolean(${wrapItem})`), { timeout: 5_000 }).toBe(false);
    };
    for (const [width, height, touch] of [[1100, 900, false], [390, 844, true], [320, 740, true], [844, 390, true]] as const) {
      if (touch) await request("Emulation.setTouchEmulationEnabled", { enabled: true, maxTouchPoints: 1 });
      await request("Emulation.setDeviceMetricsOverride", { width, height, deviceScaleFactor: 1, mobile: touch });
      await evaluate(`new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)))`);
      await expect.poll(() => evaluate(`(async () => {
        const card=${blocks}[0]; card.scrollIntoView({behavior:'instant',block:'start'});
        await new Promise(resolve=>requestAnimationFrame(()=>requestAnimationFrame(resolve)));
        const before=card.getBoundingClientRect(); await new Promise(requestAnimationFrame);
        const after=card.getBoundingClientRect();
        return after.top>=0&&after.top<innerHeight/2&&Math.abs(before.top-after.top)<0.25;
      })()`), { timeout: 10_000 }).toBe(true);
      await expect.poll(() => evaluate("innerWidth")).toBe(width);
      // On touch the plates fade in; measure once they are fully shown.
      if (touch) await expect.poll(() => evaluate(`${blocks}.every(card => getComputedStyle(card.querySelector('[data-code-plate]')).opacity === '1')`), { timeout: 5_000 }).toBe(true);
      const layout = await geometry();
      receipts.geometry.push(layout);
      await screenshot(`${touch ? "touch" : "desktop"}-${width}.png`);
      save();
      expect(layout.pageWidth).toBeLessThanOrEqual(width);
      expect(layout.coarse).toBe(touch);
      expect(layout.hover).toBe(!touch);
      for (const card of layout.blocks) {
        expect(card.left).toBeGreaterThanOrEqual(0);
        expect(card.right).toBeLessThanOrEqual(width);
        // Without hover the plate is always shown, so nothing needs a hover to be reached.
        if (touch) expect(card.plateOpacity).toBe("1");
        expect(card.buttons.map((button: { label: string }) => button.label)).toEqual([expect.stringMatching(/^(?:Copy code|Copied to clipboard)$/), "More"]);
        for (const button of card.buttons) {
          expect(button.left).toBeGreaterThanOrEqual(card.left);
          expect(button.right).toBeLessThanOrEqual(card.right);
          if (touch) { expect(button.width).toBeGreaterThanOrEqual(44); expect(button.height).toBeGreaterThanOrEqual(44); }
        }
      }
      await tap(0, "copy", touch);
      await expect.poll(() => evaluate("navigator.clipboard.readText()")).toBe(snippets[0]);
    }
    await request("Emulation.setTouchEmulationEnabled", { enabled: true, maxTouchPoints: 1 });
    await request("Emulation.setDeviceMetricsOverride", { width: 390, height: 844, deviceScaleFactor: 1, mobile: true });
    for (let index = 0; index < snippets.length; index++) {
      await tap(index, "copy");
      await expect.poll(() => evaluate("navigator.clipboard.readText()")).toBe(snippets[index]);
      receipts.copied.push({ index, text: await evaluate("navigator.clipboard.readText()") });
    }
    const wraps = () => evaluate(`${blocks}.map(card => String(getComputedStyle(card.querySelector('pre')).whiteSpace === 'pre-wrap'))`);
    expect(await wraps()).toEqual(snippets.map(() => "false"));
    for (const index of [1, 2]) {
      await toggleWrap(index);
      await expect.poll(wraps).toEqual(snippets.map((_, at) => at === index ? "true" : "false"));
      const wrapped = await evaluate(`(() => { const card=${blocks}[${index}]; const pre=card.querySelector('pre'); return {whiteSpace:getComputedStyle(pre).whiteSpace,client:pre.clientWidth,scroll:pre.scrollWidth,text:pre.textContent}; })()`);
      expect(wrapped.whiteSpace).toBe("pre-wrap");
      expect(wrapped.scroll).toBeLessThanOrEqual(wrapped.client + 1);
      expect(wrapped.text).toBe(snippets[index]);
      receipts.wrapping.push({ index, ...wrapped });
      await tap(index, "copy");
      expect(await evaluate("navigator.clipboard.readText()")).toBe(snippets[index]);
      await screenshot(`wrapped-${index}.png`);
      await toggleWrap(index);
      await expect.poll(wraps).toEqual(snippets.map(() => "false"));
    }
    const feedbackLayout = () => evaluate(`(() => { const card=${blocks}[0]; const button=card.querySelector(${JSON.stringify(MENU)}); const c=card.getBoundingClientRect(), b=button.getBoundingClientRect(); return {height:c.height,buttonWidth:b.width,buttonHeight:b.height,left:b.left-c.left,top:b.top-c.top}; })()`);
    const beforeFeedback = await feedbackLayout();
    // Both ways to copy refuse: the clipboard API, and the legacy execCommand a phone on plain http falls back to.
    await evaluate(`Object.defineProperty(navigator.clipboard, 'writeText', { configurable:true,value:async()=>{throw new Error('fixture denial');} }); Object.defineProperty(document, 'execCommand', { configurable:true,value:()=>false }); true`);
    await tap(0, "copy");
    await expect.poll(() => evaluate(`${blocks}[0].querySelector('[role="status"]')?.textContent`)).toBe("Could not copy");
    expect(await feedbackLayout()).toEqual(beforeFeedback);
    receipts.failureFeedback = true;
    await evaluate(`Object.defineProperty(navigator.clipboard, 'writeText', { configurable:true,value:window.fixtureClipboardWrite }); delete document.execCommand; true`);
    await tap(0, "copy");
    await expect.poll(() => evaluate(`${blocks}[0].querySelector('[role="status"]')?.textContent`)).toBe("Copied to clipboard");
    expect(await feedbackLayout()).toEqual(beforeFeedback);
    receipts.successFeedback = true;
    await expect.poll(() => evaluate(`${blocks}[0].querySelector('[role="status"]')?.textContent ?? null`), { timeout: 5_000 }).toBe(null);
    expect(await feedbackLayout()).toEqual(beforeFeedback);
    receipts.feedbackLayoutStable = true;
    await request("Emulation.setTouchEmulationEnabled", { enabled: false });
    await request("Emulation.setDeviceMetricsOverride", { width: 1100, height: 900, deviceScaleFactor: 1, mobile: false });
    await evaluate(`${blocks}[0].querySelector(${JSON.stringify(COPY)}).focus(); true`);
    await request("Input.dispatchKeyEvent", { type:"keyDown", key:"Tab", code:"Tab", windowsVirtualKeyCode:9 });
    await request("Input.dispatchKeyEvent", { type:"keyUp", key:"Tab", code:"Tab", windowsVirtualKeyCode:9 });
    const focus = await evaluate(`(() => { const el=document.activeElement, style=getComputedStyle(el);return {label:el.getAttribute('aria-label'),visible:el.matches(':focus-visible'),ring:style.outlineStyle!=='none'||style.boxShadow!=='none'}; })()`);
    expect(focus.label).toBe("More");
    expect(focus.visible).toBe(true);
    expect(focus.ring).toBe(true);
    receipts.keyboardFocus = focus;
    receipts.completed = true;
    save();
    console.log(`Mobile code-block evidence: ${evidence}`);
  } finally {
    cdp?.close();
    if (chrome) await waitForExit(chrome, { signal: "SIGTERM" });
    const closed = await Promise.allSettled([preview?.close(), fixture?.close()]);
    if (evidence) {
      receipts.cleanup = { chromeExited: !chrome || chrome.exitCode !== null || chrome.signalCode !== null, serverExited: !fixture || fixture.child.exitCode !== null || fixture.child.signalCode !== null, dataRemoved: !fixture || !existsSync(fixture.info.dataDir) };
      writeFileSync(join(evidence, "receipt.json"), JSON.stringify(receipts, null, 2));
      expect(receipts.cleanup).toEqual({ chromeExited: true, serverExited: true, dataRemoved: true });
    }
    expect(closed.filter(result => result.status === "rejected")).toEqual([]);
  }
}, 360_000);