import assert from "node:assert/strict";
import { layoutText } from "../src/canvas/layout.js";
import { graphemes, snapOffset, wordAt, hoverWordAt } from "../src/canvas/text.js";
import { textInteractionAt } from "../src/canvas/interaction.js";
import { contextTarget, hitTest, moveSelection, selectionRange, selectionRects } from "../src/canvas/selection.js";
import { lineSpans } from "../src/canvas/line-breaks.js";
import { rectIntersects, type Annotation, type Font, type Layout } from "../src/canvas/types.js";
const measure = (text: string, font: Font) => ({
  width: Array.from(text).length * font.size * 0.6,
  ascent: font.size * 0.9,
  descent: font.size * 0.3,
});
function verify(layout: Layout) {
  assert(Number.isFinite(layout.height));
  const boxes = layout.lines.flatMap((line) => line.overhead);
  for (const box of boxes) {
    assert(box.x >= 0 && box.x + box.width <= layout.width + 0.001);
    assert(box.y >= 0 && box.y + box.height < layout.height);
    for (const other of boxes) if (box !== other) assert(!rectIntersects(box, other), JSON.stringify({ box, other }));
    for (const line of layout.lines) for (const glyph of line.glyphs) assert(!rectIntersects(box, glyph));
  }
  for (const line of layout.lines)
    for (const feature of new Set(
      line.overhead.map((box) => `${box.annotation.placement ?? "above"}:${box.annotation.feature}`),
    )) {
      const members = line.overhead.filter(
        (box) => `${box.annotation.placement ?? "above"}:${box.annotation.feature}` === feature,
      );
      assert.equal(new Set(members.map((box) => box.layer)).size, 1, "A source has exactly one annotation row");
      assert.equal(new Set(members.map((box) => box.baseline)).size, 1, "Same-source labels share their baseline");
    }
  for (const line of layout.lines)
    for (const glyph of line.glyphs) {
      assert.equal(layout.text.slice(glyph.start, glyph.end), glyph.text);
      assert.equal(hitTest(layout, glyph.x + glyph.advance * 0.2, glyph.y + glyph.height / 2), glyph.start);
      assert.equal(hitTest(layout, glyph.x + glyph.advance * 0.8, glyph.y + glyph.height / 2), glyph.end);
    }
}
const text = "  她在北京学习中文。👩🏽‍💻 e\u0301\n\n一杯咖啡，两个朋友。\n最后一行";
for (const width of [30, 45, 80, 140, 320, 680]) {
  for (const count of [0, 1, 3, 7, 20]) {
    const units = graphemes(text).filter((unit) => !/[\r\n]/.test(unit.text));
    const annotations: Annotation[] = Array.from({ length: count }, (_, index) => {
      const start = units[index % units.length].start;
      return {
        id: String(index),
        feature: String(index % 3),
        start,
        end: Math.min(text.length, start + 10),
        text: index % 2 ? "a long overhead explanation" : "běi jīng",
        style: "overhead",
        color: "blue",
        fontSize: [10, 13, 30][index % 3],
        priority: index % 4,
      };
    });
    verify(layoutText({ text, width, annotations, measure }));
  }
}
// Exhaust all pairs of nested/adjacent source spans on a short paragraph.
let cases = 0;
for (const width of [36, 100, 280])
  for (let a = 0; a < 6; a++)
    for (let b = a + 1; b <= 6; b++)
      for (let c = 0; c < 6; c++)
        for (let d = c + 1; d <= 6; d++) {
          const annotations: Annotation[] = [
            {
              id: "a",
              feature: "same",
              start: a,
              end: b,
              text: "explanation one",
              fontSize: 11,
              style: "overhead",
              color: "red",
            },
            {
              id: "b",
              feature: "same",
              start: c,
              end: d,
              text: "另一层注解",
              fontSize: 23,
              style: "overhead",
              color: "green",
            },
          ];
          verify(layoutText({ text: "阅读中文的人", width, annotations, measure }));
          cases++;
        }
// Ordinary adjacent pinyin never alternates vertical positions. Source padding
// grows around the word, keeping its characters together rather than spreading
// the word's internal glyphs to make room for a pronunciation.
const pinyin: Annotation[] = ["cháng", "xiǎoyǔ", "zǒuchū", "dìtiě", "zhàn"].map((text, index) => ({
  id: String(index),
  feature: "pinyin",
  start: index * 2,
  end: index * 2 + 2,
  text,
  style: "overhead",
  color: "green",
}));
const aligned = layoutText({ text: "一场小雨走出地铁车站", width: 680, annotations: pinyin, measure });
verify(aligned);
assert.equal(aligned.lines.filter((line) => line.glyphs.length).length, 1);
assert.equal(new Set(aligned.lines[0].overhead.map((box) => box.baseline)).size, 1);
assert.equal(aligned.lines[0].overhead.length, pinyin.length);
for (const annotation of pinyin) {
  const glyphs = aligned.lines[0].glyphs.filter(
    (glyph) => glyph.start >= annotation.start && glyph.end <= annotation.end,
  );
  assert(Math.abs(glyphs[1].x - glyphs[0].x - glyphs[0].width) < 0.001);
}
// Long word explanations and sentence translations flow through physical text
// lines, with word/sentence sources on two fixed rows instead of a wrapped box
// creating more rows above a single line of source text.
const longWord = "a surprisingly long explanation with several complete words";
const longSentence =
  "The complete sentence has an even longer translation which asks the source text for more horizontal space.";
const flowing = layoutText({
  text: "一本书。",
  width: 90,
  annotations: [
    { id: "word", feature: "words", start: 1, end: 2, text: longWord, style: "overhead", color: "green", priority: 0 },
    {
      id: "sentence",
      feature: "sentences",
      start: 0,
      end: 4,
      text: longSentence,
      style: "overhead",
      color: "red",
      priority: 1,
    },
  ],
  measure,
});
verify(flowing);
for (const [feature, expected] of [
  ["words", longWord],
  ["sentences", longSentence],
]) {
  const boxes = flowing.lines.flatMap((line) => line.overhead).filter((box) => box.annotation.feature === feature);
  assert(boxes.length > 1, "Long labels use subsequent physical lines");
  assert.equal(boxes.flatMap((box) => box.lines).join(""), expected, "Wrapping retains all label content");
  assert.equal(new Set(boxes.map((box) => box.layer)).size, 1);
}
assert(flowing.height > layoutText({ text: "一本书。", width: 90, measure }).height * 4);
const mixed = layoutText({
  text: "阅读中文的人",
  width: 600,
  annotations: [
    { id: "small", feature: "words", start: 0, end: 2, text: "read", fontSize: 10, style: "overhead", color: "red" },
    { id: "large", feature: "words", start: 2, end: 4, text: "Chinese", fontSize: 30, style: "overhead", color: "red" },
  ],
  measure,
});
verify(mixed);
assert.equal(
  new Set(mixed.lines[0].overhead.map((box) => box.baseline)).size,
  1,
  "Mixed font sizes share a source baseline",
);
const shortAtWrap = layoutText({
  text: "阅读中",
  width: 30,
  annotations: [{ id: "short", feature: "words", start: 2, end: 3, text: "x", style: "overhead", color: "green" }],
  measure,
});
// Word glosses sit nearest the base; a sentence-only continuation must not
// reserve the absent word lane. Nested reservations center labels on the ink.
const frenchText = "Un libraire lui propose un café.\nIls parlent des voyages et des livres qu'ils aiment.";
const sentenceEnd = frenchText.indexOf("\n");
const frenchAnnotations: Annotation[] = [
  {
    id: "word",
    feature: "words",
    start: 0,
    end: 2,
    text: "a longer article gloss",
    style: "overhead",
    color: "blue",
    priority: 0,
  },
  {
    id: "sentence",
    feature: "sentences",
    start: 0,
    end: sentenceEnd,
    text: "A bookseller offers her a coffee.",
    style: "overhead",
    color: "brown",
    priority: 1,
  },
  {
    id: "next",
    feature: "sentences",
    start: sentenceEnd + 1,
    end: frenchText.length,
    text: "They talk about trips and books.",
    style: "overhead",
    color: "brown",
    priority: 1,
  },
];
const frenchLayout = layoutText({ text: frenchText, width: 1600, annotations: frenchAnnotations, measure });
verify(frenchLayout);
const firstFrench = frenchLayout.lines[0];
const wordBox = firstFrench.overhead.find((box) => box.annotation.id === "word")!;
const sentenceBox = firstFrench.overhead.find((box) => box.annotation.id === "sentence")!;
assert(wordBox.y > sentenceBox.y, "Word lane sits closer to source than sentence lane");
const firstInk = firstFrench.glyphs[0],
  lastInk = firstFrench.glyphs.findLast((glyph) => glyph.end === sentenceEnd)!;
assert(
  Math.abs(sentenceBox.x + sentenceBox.width / 2 - (firstInk.x + lastInk.x + lastInk.width) / 2) < 0.001,
  "Sentence label centers on source ink despite asymmetric word padding",
);
const secondFrench = frenchLayout.lines.find((line) => line.glyphs.some((glyph) => glyph.start === sentenceEnd + 1))!;
assert.equal(secondFrench.overhead.length, 1);
assert(
  Math.abs(secondFrench.y - secondFrench.overhead[0].y - secondFrench.overhead[0].height - 5) < 0.001,
  "A sentence-only line has no empty word lane",
);
const beforeFrench = layoutText({ text: frenchText, width: 1600, measure });
const afterFrench = layoutText({ text: frenchText, width: 1600, annotations: [], measure });
assert.deepEqual(afterFrench, beforeFrench, "Dismissed annotations release all horizontal and vertical reservations");
assert(
  shortAtWrap.lines.find((line) => line.glyphs.some((glyph) => glyph.start === 2))!.overhead.length,
  "A short annotation follows its wrapped source glyph",
);
const layout = layoutText({ text, width: 160, measure });
let selection = { anchor: 0, focus: 0 };
for (const unit of graphemes(text)) {
  selection = moveSelection(layout, selection, "ArrowRight", true);
  assert.equal(selection.focus, unit.end);
}
assert.equal(text.slice(selectionRange(selection).start, selectionRange(selection).end), text);
assert(selectionRects(layout, selection).length > 1);
assert.equal(snapOffset("👩🏽‍💻", 2), "👩🏽‍💻".length);
assert.equal(snapOffset("e\u0301", 1, -1), 0);
assert.equal(wordAt("北京的朋友", 1).end, 2);
assert.equal(layoutText({ text: "", width: 100, measure }).lines.length, 1);
assert.throws(() => layoutText({ text: "a", width: 0, measure }));
console.log(`PASS canvas: ${cases} exhaustive overlap cases, mixed heights, wrapping, Unicode, offsets and selection`);

import { rangeOutline, rangeRects } from "../src/canvas/outline.js";
import { drawText, labelGuideSegments } from "../src/canvas/draw.js";
const fontCalls: string[] = [];
const mixedFonts = layoutText({
  text: "你好世界",
  width: 400,
  measure: (text, font) => {
    fontCalls.push(font.family);
    return measure(text, font);
  },
  annotations: [
    { ...pinyin[0], start: 0, end: 2, fontFamily: "serif", fontSize: 12 },
    { ...pinyin[1], start: 2, end: 4, fontFamily: "monospace", fontSize: 30 },
  ],
});
verify(mixedFonts);
assert(fontCalls.includes("serif") && fontCalls.includes("monospace"));
assert.equal(mixedFonts.lines[0].overhead[0].baseline, mixedFonts.lines[0].overhead[1].baseline);
const ink = layoutText({
  text: "你好",
  width: 100,
  measure,
  annotations: [{ ...pinyin[0], start: 0, end: 1, style: "color", color: "#112233" }],
});
const draws: { text: string; color: string }[] = [];
let rectangles = 0;
const context = {
  save() {},
  restore() {},
  translate() {},
  fillStyle: "",
  beginPath() {},
  rect() {},
  clip() {},
  globalAlpha: 1,
  font: "",
  fillRect() {
    rectangles++;
  },
  fillText(text: string) {
    draws.push({ text, color: this.fillStyle });
  },
} as unknown as CanvasRenderingContext2D;
drawText(context, ink);
assert.deepEqual(draws, [
  { text: "你", color: "#112233" },
  { text: "好", color: "#252923" },
]);
assert.equal(rectangles, 0, "Text color never draws a background");
draws.length = 0;
drawText(context, ink, { visible: () => false });
assert(
  draws.every((draw) => draw.color === "#252923"),
  "Reveal timing also controls source ink",
);
for (const width of [30, 80, 200, 500]) {
  const layout = layoutText({ text: "第一行阅读中文。\n第二行。\n第三行继续阅读。", width, measure });
  for (let start = 0; start < layout.text.length; start++)
    for (let end = start + 1; end <= layout.text.length; end++) {
      const path = rangeOutline(layout, { start, end });
      assert(!/NaN|Infinity/.test(path));
      assert.equal(
        (path.match(/M/g) ?? []).length,
        rangeRects(layout, { start, end }).length ? 1 : 0,
        "One contour across wrapped lines",
      );
      if (path) assert(path.endsWith("Z"));
    }
}
assert.equal(rangeOutline(ink, { start: 2, end: 2 }), "");
const sourceRects = rangeRects(mixedFonts, { start: 0, end: 4 });
assert.equal(sourceRects[0].y, mixedFonts.lines[0].glyphs[0].y, "Contours surround source, below overhead rows");
console.log("PASS source ink reveal, mixed annotation fonts and exhaustive multi-line contour geometry");

import { readingPages, readingWindow, pageAt } from "../src/canvas/pages.js";
const wrapSource =
  "Before. Le titre me séduisit: je les emportai chez moi, avec la permission de M. le conservateur; bien entendu, je les dévorai.";
const wrappedLabel: Annotation = {
  id: "wrapped-sentence",
  feature: "sentence",
  start: 8,
  end: wrapSource.length,
  text: "The title enticed me: I took them home, with the curator's permission; of course, I devoured them.",
  style: "overhead",
  color: "brown",
};
const centeredWrap = layoutText({ text: wrapSource, width: 380, measure, annotations: [wrappedLabel] });
verify(centeredWrap);
const labelBoxes = centeredWrap.lines.flatMap((l) => l.overhead);
assert(labelBoxes.length > 1, "Sentence translation wraps over source lines rather than sitting at its start");
assert(
  centeredWrap.lines.findIndex((l) => l.overhead.includes(labelBoxes[0])) * centeredWrap.width + labelBoxes[0].x >
    centeredWrap.lines[0].glyphs.find((g) => g.start === 8)!.x + 10,
  "Wrapped translation consumes left centering space",
);
const pageSource = Array.from({ length: 70 }, (_, i) => `A sentence number ${i} with a few words.`).join(" ");
let pageOffset = 0,
  visited = "";
for (let i = 0; pageOffset < pageSource.length && i < 200; i++) {
  const dynamic = layoutText({ text: pageSource, width: i % 2 ? 270 : 380, measure, breakAt: pageOffset });
  const ps = readingPages(dynamic, 180, pageOffset),
    current = ps[pageAt(ps, pageOffset)];
  assert.equal(current.start, pageOffset, "Reflow preserves the source page start");
  assert(current.end > pageOffset, "Next advances the source position");
  visited += pageSource.slice(pageOffset, current.end);
  pageOffset = current.end;
}
assert.equal(visited, pageSource, "Repeated resize and next loses or repeats no text");
draws.length = 0;
drawText(context, ink, { hover: { start: 0, end: 1 } });
assert.deepEqual(draws, [
  { text: "你", color: "#39745b" },
  { text: "好", color: "#252923" },
]);
for (const width of [60, 250, 600])
  for (const height of [80, 300, 600]) {
    const text = Array.from({ length: 100 }, (_, i) => `第${i}行，阅读👩🏽‍💻原文。`).join("\n");
    const layout = layoutText({ text, width, measure });
    const pages = readingPages(layout, height);
    assert(pages.length > 1);
    assert.equal(pages.map((page) => text.slice(page.start, page.end)).join(""), text);
    for (const [i, page] of pages.entries()) {
      assert.equal(pageAt(pages, page.start), i);
      assert.equal(pageAt(pages, page.end - 1), i);
      const window = readingWindow(layout, pages, i, "pages", page.top, height);
      assert.deepEqual(window.visible, { start: page.start, end: page.end });
      assert.equal(window.nearby.start, pages[Math.max(0, i - 1)].start);
      assert.equal(window.nearby.end, pages[Math.min(pages.length - 1, i + 1)].end);
      assert(window.nearby.end - window.nearby.start < text.length || pages.length <= 3);
    }
    const middle = pages[Math.floor(pages.length / 2)];
    const scroll = readingWindow(layout, pages, 0, "scroll", middle.top, height);
    assert(scroll.nearby.start <= scroll.visible.start && scroll.nearby.end >= scroll.visible.end);
    assert(scroll.nearby.start > 0 && scroll.nearby.end < text.length);
  }
const tallPages = readingPages(flowing, 30);
assert.equal(tallPages.map((page) => flowing.text.slice(page.start, page.end)).join(""), flowing.text);
assert(
  tallPages.every((page) => page.bottom > page.top),
  "Continuation labels stay with a source page",
);
console.log(
  "PASS hover glyph color, source-stable pages, neighboring-page windows, bounded scroll windows and annotation continuation",
);

// Intermediate rows and paragraph gaps share a quiet, full-width band.
for (const separator of ["\n\n", "\r\n\r\n", "\n  \n", "\n\n\n"]) {
  const text = "一个很长的段落需要换行，继续阅读。" + separator + "第二段落也需要换行。" + separator + "结束。";
  for (const width of [80, 200, 1000]) {
    const layout = layoutText({ text, width, measure });
    const path = rangeOutline(layout, { start: 0, end: text.length });
    assert.equal((path.match(/M/g) ?? []).length, 1, "One contour spans paragraphs");
    assert.equal((path.match(/Z/g) ?? []).length, 1);
    assert(!/NaN|Infinity/.test(path));
    assert((path.match(/Q/g) ?? []).length <= 8, "At most two end-row notches, irrespective of paragraph count");
    assert(path.includes(String(width - 1) + ","), "Intermediate rows use the full available width");
  }
}
console.log("PASS processing contours span paragraph gaps with bounded, rounded corners");

import { tooltipPosition } from "../src/canvas/tooltip-position.js";
for (const viewport of [
  { width: 1440, height: 1000 },
  { width: 320, height: 480 },
]) {
  const width = Math.min(300, viewport.width - 24),
    height = 120;
  for (const x of [0, 50, viewport.width - 10])
    for (const y of [0, 50, viewport.height - 20]) {
      const position = tooltipPosition({ x, y, width: 20, height: 30 }, width, height, viewport);
      assert(position.left >= 12 && position.left + width <= viewport.width - 12);
      assert(position.top >= 12 && position.top + height <= viewport.height - 12);
      assert(position.arrow >= 16 && position.arrow <= width - 16);
    }
}
assert.equal(
  tooltipPosition({ x: 100, y: 200, width: 50, height: 20 }, 200, 100, { width: 800, height: 600 }).side,
  "above",
);
assert.equal(
  tooltipPosition({ x: 100, y: 10, width: 50, height: 20 }, 200, 100, { width: 800, height: 600 }).side,
  "below",
);
const tooltipLayout = layoutText({
  text: "你好",
  width: 200,
  measure,
  annotations: [
    { id: "tip", feature: "tip", start: 0, end: 2, text: "A long tooltip", style: "tooltip", color: "#53796c" },
  ],
});
assert.equal(
  tooltipLayout.height,
  layoutText({ text: "你好", width: 200, measure }).height,
  "React tooltip never displaces canvas text",
);
assert.equal(tooltipLayout.lines[0].decorations.length, 0);
console.log("PASS tooltip flipping, viewport containment, arrow anchoring and unchanged canvas layout");

// Short source spans and their one-line overhead labels move together.
const welcome: Annotation = {
  id: "welcome",
  feature: "words",
  start: 8,
  end: 10,
  text: "huānyíng",
  style: "overhead",
  color: "green",
};
for (const width of [100, 140, 180]) {
  const layout = layoutText({ text: "星期六我们读书。欢迎来到书店。", width, annotations: [welcome], measure });
  const sourceRows = layout.lines.filter((line) => line.glyphs.some((g) => g.start >= 8 && g.end <= 10));
  assert.equal(sourceRows.length, 1, "Welcome stays on one physical line");
  const labelRow = layout.lines.find((line) => line.overhead.some((box) => box.annotation.id === "welcome"));
  assert.equal(labelRow, sourceRows[0], "Short overhead text stays with its source");
  for (const page of readingPages(layout, 60)) {
    for (const part of new Intl.Segmenter(undefined, { granularity: "word" }).segment(layout.text)) {
      if (part.isWordLike && part.segment.length <= 2)
        assert(
          !(page.end > part.index && page.end < part.index + part.segment.length),
          "Page doesn't cut a fitting source word",
        );
    }
  }
}
const replacements = layoutText({
  text: "我爱书店。",
  width: 300,
  measure,
  annotations: [
    { id: "r", feature: "r", start: 2, end: 4, text: "bookstore", style: "replace", color: "green" },
    { id: "b", feature: "b", start: 0, end: 1, text: "", style: "bold", color: "green" },
    { id: "i", feature: "i", start: 1, end: 2, text: "", style: "italic", color: "green" },
  ],
});
assert.equal(
  replacements.lines
    .flatMap((l) => l.glyphs)
    .map((g) => g.text)
    .join(""),
  "我爱bookstore。",
);
assert.equal(replacements.text, "我爱书店。", "Canonical copy/selection source is unchanged");
assert.equal(replacements.lines[0].glyphs[0].font?.weight, "bold");
assert.equal(replacements.lines[0].glyphs[1].font?.italic, true);
const replacement = replacements.lines[0].glyphs.find((g) => g.text === "bookstore")!;
assert.equal(hitTest(replacements, replacement.x + replacement.advance * 0.2, replacement.y + 2), 2);
assert.equal(hitTest(replacements, replacement.x + replacement.advance * 0.8, replacement.y + 2), 4);
const layeredOutline = layoutText({
  text: "阅读中文。欢迎继续阅读。",
  width: 100,
  measure,
  annotations: [
    {
      id: "lane",
      feature: "lane",
      start: 0,
      end: 12,
      text: "a long label that wraps over multiple lines",
      fontSize: 30,
      style: "overhead",
      color: "green",
    },
  ],
});
const paths = rangeOutline(layeredOutline, { start: 0, end: layeredOutline.text.length });
assert(!/NaN|Infinity/.test(paths));
assert.equal((paths.match(/M/g) ?? []).length, 1, "Overhead rows stay inside the broad contour");
console.log(
  "PASS word/label affinity, whole-word page boundaries, text replacement source mapping, bold/italic, and overhead-safe processing outlines",
);

const expanded = layoutText({
  text: "书。",
  width: 50,
  measure,
  annotations: [
    {
      id: "long-replacement",
      feature: "replace",
      start: 0,
      end: 1,
      text: "a very long explanation\nwith another line",
      style: "replace",
      color: "green",
    },
    { id: "bold-replacement", feature: "bold", start: 0, end: 1, text: "", style: "bold", color: "green" },
  ],
});
assert.equal(
  expanded.lines
    .flatMap((l) => l.glyphs)
    .map((g) => g.text)
    .join("")
    .replace(/\s/g, ""),
  "averylongexplanationwithanotherline。",
);
assert(
  expanded.lines
    .flatMap((l) => l.glyphs)
    .filter((g) => g.start === 0)
    .every((g) => g.font?.weight === "bold"),
);
assert(readingPages(expanded, 60).length > 1, "Expanded replacements can span physical pages");
const expandedPages = readingPages(expanded, 60);
assert(
  expandedPages.every((page) => page.end > page.start),
  "Replacement pages retain their shared source span",
);
assert.equal(pageAt(expandedPages, 0), 0, "Opening an expanded replacement starts on its first physical page");
console.log("PASS multiline and expanded replacements retain content and inherited typography");

import { sharedPageSize } from "../src/canvas/page-size.js";
const localSize = { width: 900, height: 700 };
const reports = [
  { client: "wide", width: 900, height: 700, expiresAt: 200 },
  { client: "narrow", width: 480, height: 600, expiresAt: 150 },
  { client: "short", width: 800, height: 360, expiresAt: 200 },
  { client: "dead", width: 10, height: 10, expiresAt: 50 },
];
assert.deepEqual(sharedPageSize(localSize, reports, "wide", 100), { width: 480, height: 360 });
assert.deepEqual(sharedPageSize(localSize, reports, "wide", 160), { width: 800, height: 360 });
assert.deepEqual(sharedPageSize(localSize, reports, "wide", 200), localSize);
assert.deepEqual(
  sharedPageSize({ width: 1100, height: 800 }, [reports[0]], "wide", 100),
  { width: 1100, height: 800 },
  "Resize supersedes our earlier report",
);
const sharedSize = sharedPageSize(localSize, reports, "wide", 100);
const otherSize = sharedPageSize({ width: 480, height: 600 }, reports, "narrow", 100);
assert.deepEqual(sharedSize, otherSize);
const sharedText = "Un texte avec plusieurs phrases.\n\n".repeat(80);
const pageRanges = (size: typeof localSize) =>
  readingPages(layoutText({ text: sharedText, width: size.width, measure }), size.height).map(({ start, end }) => ({
    start,
    end,
  }));
assert.deepEqual(
  pageRanges(sharedSize),
  pageRanges(otherSize),
  "Different windows paginate to identical source ranges",
);
console.log("PASS smallest live viewport determines shared pages; expired and own stale reports don't constrain");

// Whitespace belongs to the source, even when it isn't drawn at a line edge.
for (const text of ["  one two  three\n\t  four five", "\t北京 欢迎 你\n　中文", "one   two", "   \n  "])
  for (const width of [20, 30, 47, 80, 300]) {
    const layout = layoutText({ text, width, measure });
    assert.equal(layout.text, text);
    for (const line of layout.lines) {
      assert(!/^\s/u.test(line.glyphs[0]?.text ?? ""), "No line begins with a drawn separator or indentation");
      for (const glyph of line.glyphs) assert.equal(text.slice(glyph.start, glyph.end), glyph.text);
    }
    const pages = readingPages(layout, 70);
    assert.equal(pages.map((page) => text.slice(page.start, page.end)).join(""), text, "Copy retains all whitespace");
  }
const indent = layoutText({ text: "  word", width: 100, measure });
assert.equal(indent.lines[0].glyphs[0].start, 2);
assert.equal(indent.lines[0].glyphs[0].x, 0);
const wrappedSeparator = layoutText({
  text: "one two",
  width: 60,
  measure,
  annotations: [
    { id: "spaced-span", feature: "words", start: 3, end: 7, text: "label", style: "overhead", color: "green" },
  ],
});
assert(wrappedSeparator.lines.length > 1);
assert(
  wrappedSeparator.lines.every((line) => !/^\s/u.test(line.glyphs[0]?.text ?? "")),
  "Annotation affinity cannot introduce a leading space",
);
console.log("PASS visual line-leading whitespace suppression preserves original offsets and page/copy content");

import { coalesceProcessing, type ProcessingRegion } from "../src/canvas/processing.js";
const pendingRegion = (feature: string, start: number, end: number): ProcessingRegion => ({
  feature,
  range: { start, end },
  label: `Preparing ${feature}`,
  color: feature === "pinyin" ? "#53796c" : "#526c86",
});
const pendingRegions = [
  pendingRegion("pinyin", 10, 15),
  pendingRegion("translation", 5, 10),
  pendingRegion("pinyin", 0, 5),
  pendingRegion("pinyin", 5, 10),
  pendingRegion("pinyin", 3, 7),
  pendingRegion("pinyin", 10, 15),
];
const unchangedRegions = JSON.stringify(pendingRegions);
assert.deepEqual(
  coalesceProcessing(pendingRegions, "a".repeat(30)),
  [pendingRegion("pinyin", 0, 15), pendingRegion("translation", 5, 10)],
  "Adjacent, overlapping and duplicate chunks join only within their annotator",
);
assert.equal(JSON.stringify(pendingRegions), unchangedRegions, "Coalescing never alters jobs or scheduler ranges");
assert.deepEqual(
  coalesceProcessing([pendingRegion("pinyin", 0, 3), pendingRegion("pinyin", 6, 9)], "one\n\n two"),
  [pendingRegion("pinyin", 0, 9)],
  "Paragraph separators don't create seams between pending regions",
);
assert.deepEqual(
  coalesceProcessing([pendingRegion("pinyin", 0, 3), pendingRegion("pinyin", 6, 9)], "oneXYZtwo"),
  [pendingRegion("pinyin", 0, 3), pendingRegion("pinyin", 6, 9)],
  "Completed intervening text splits the outline again",
);
assert.deepEqual(coalesceProcessing([pendingRegion("pinyin", 2, 2)], "one"), []);
console.log("PASS processing outlines coalesce by annotator without covering completed text or mutating work");

// Line breaking and word targeting are different Unicode operations. Chinese
// closing punctuation must stay with preceding ink even when pinyin padding
// causes a wrap; opening punctuation must stay with what follows it.
assert.deepEqual(lineSpans("hello world"), [
  { start: 0, end: 6 },
  { start: 6, end: 11 },
]);
assert.deepEqual(lineSpans("hello\u00a0world"), [{ start: 0, end: 11 }], "Nonbreaking spaces remain unbreakable");
assert(!lineSpans("北京。朋友").some((span) => span.end === 2), "No legal break immediately before the period");
assert(
  !lineSpans("北京（朋友）").some((span) => span.end === 3),
  "No legal break immediately after an opening bracket",
);
assert(lineSpans("👩🏽‍💻朋友").every((span) => span.start === 0 || span.start >= "👩🏽‍💻".length));
const punctuated = "林雨走出地铁站，发现街角有一家新书店。门口的木牌上写着：（欢迎进来，慢慢读书。）";
for (const width of [45, 70, 100, 130, 210]) {
  for (const annotations of [
    [],
    [
      {
        id: "sign",
        feature: "pinyin",
        start: 22,
        end: 24,
        text: "a very long pronunciation",
        style: "overhead",
        color: "green",
      },
      { id: "shop", feature: "pinyin", start: 16, end: 18, text: "shūdiàn", style: "overhead", color: "green" },
    ] as Annotation[],
  ]) {
    const result = layoutText({ text: punctuated, width, annotations, measure });
    verify(result);
    for (const line of result.lines.filter((line) => line.glyphs.length)) {
      assert(!/^[。，、）]/u.test(line.glyphs[0].text), `Closing punctuation begins a line at width ${width}`);
      assert(!/[（]$/u.test(line.glyphs.at(-1)!.text), `Opening punctuation ends a line at width ${width}`);
    }
    assert.equal(
      result.lines
        .flatMap((line) => line.glyphs)
        .map((glyph) => glyph.text)
        .join(""),
      punctuated,
    );
  }
}
const latinPunctuation = layoutText({ text: "A short (French word), and another word.", width: 130, measure });
for (const line of latinPunctuation.lines.filter((line) => line.glyphs.length)) {
  assert(!/^[.,)]/u.test(line.glyphs[0].text));
  assert.notEqual(line.glyphs.at(-1)!.text, "(");
}
const annotationPunctuation = layoutText({
  text: "中文",
  width: 60,
  measure,
  annotations: [
    {
      id: "punctuated-label",
      feature: "gloss",
      start: 0,
      end: 2,
      text: "读书。中文，朋友。",
      style: "overhead",
      color: "green",
    },
  ],
});
verify(annotationPunctuation);
assert(annotationPunctuation.lines.flatMap((line) => line.overhead).every((box) => !/^[。，]/u.test(box.lines[0])));
verify(
  layoutText({
    text: "书。中文，友",
    width: 100,
    measure,
    annotations: [
      {
        id: "word-label",
        feature: "gloss",
        start: 0,
        end: 1,
        text: "explanation one",
        fontSize: 11,
        style: "overhead",
        color: "green",
      },
      {
        id: "punctuation-label",
        feature: "gloss",
        start: 1,
        end: 2,
        text: "another explanation",
        fontSize: 23,
        style: "overhead",
        color: "green",
      },
    ],
  }),
);
assert.deepEqual(contextTarget({ anchor: 8, focus: 2 }, { start: 3, end: 5 }, true), {
  range: { start: 2, end: 8 },
  kind: "selection",
});
assert.deepEqual(contextTarget({ anchor: 2, focus: 8 }, { start: 12, end: 15 }, false), {
  range: { start: 12, end: 15 },
  kind: "word",
});
assert.equal(contextTarget({ anchor: 3, focus: 3 }, null, false), null);
console.log(
  "PASS Unicode line-breaking opportunities, Chinese/Latin punctuation with overhead reservations, and context-menu selection targets",
);

// The same label kind may sit above or below, with one fixed lane per
// source/side. Neither labels nor their source reservations collide.
for (const width of [40, 90, 180, 500]) {
  const paired = layoutText({
    text: "书店欢迎朋友。\n我们一起读书。",
    width,
    measure,
    annotations: [
      {
        ...pinyin[0],
        id: "above-a",
        feature: "words",
        start: 0,
        end: 2,
        text: "bookshop",
        placement: "above",
        fontSize: 12,
      },
      {
        ...pinyin[0],
        id: "above-b",
        feature: "words",
        start: 2,
        end: 4,
        text: "welcomes",
        placement: "above",
        fontSize: 18,
      },
      {
        ...pinyin[0],
        id: "below-a",
        feature: "words",
        start: 0,
        end: 2,
        text: "a place with books and friends",
        placement: "below",
        fontSize: 14,
      },
      {
        ...pinyin[0],
        id: "below-b",
        feature: "sentences",
        start: 0,
        end: 7,
        text: "The bookshop welcomes friends.",
        placement: "below",
        fontSize: 22,
      },
    ],
  });
  verify(paired);
  for (const line of paired.lines) {
    for (const box of line.overhead) {
      if (box.annotation.placement === "below") {
        assert(box.y >= line.y + (line.glyphs[0]?.height ?? 0));
        assert(box.y + box.height <= line.y + line.height);
      } else assert(box.y + box.height < line.y);
      assert.deepEqual(
        textInteractionAt(paired, box.x + box.width / 2, box.y + box.height / 2, () => true),
        {
          kind: "label",
          range: { start: box.annotation.start, end: box.annotation.end },
        },
      );
      assert.equal(
        textInteractionAt(paired, box.x + box.width / 2, box.y + box.height / 2, () => false),
        null,
        "Hidden labels are not interactive",
      );
    }
  }
  const pages = readingPages(paired, 150);
  for (const box of paired.lines.flatMap((line) => line.overhead))
    assert(
      pages.some((page) => box.y >= page.top && box.y + box.height <= page.bottom),
      "Both label sides belong to their source page",
    );
}
const targetText = "北京，l’ami! 你好。";
assert.deepEqual(hoverWordAt(targetText, 0), { start: 0, end: 2 });
assert.equal(hoverWordAt(targetText, 2), null);
assert.equal(hoverWordAt(targetText, 8), null);
assert.equal(hoverWordAt(targetText, 9), null);
assert.deepEqual(hoverWordAt(targetText, 4), { start: 3, end: 8 });
const hoverLayout = layoutText({ text: "北京，朋友。", width: 300, measure });
for (const glyph of hoverLayout.lines.flatMap((line) => line.glyphs)) {
  const hit = textInteractionAt(hoverLayout, glyph.x + glyph.width / 2, glyph.y + glyph.height / 2, () => true);
  assert.equal(hit?.kind ?? null, /\p{P}/u.test(glyph.text) ? null : "word");
}
// Guide tolerance follows source font size, rather than screen pixels. A long
// gloss marks the source projection; normal word-sized labels stay unadorned.
const guideLayout = layoutText({
  text: "书店",
  width: 500,
  measure,
  annotations: [{ ...pinyin[0], start: 0, end: 2, text: "a surprisingly long bookshop gloss" }],
});
const guideBox = guideLayout.lines[0].overhead[0];
assert(guideBox.guide);
assert.equal(guideBox.guide.start, guideLayout.lines[0].glyphs[0].x);
assert.equal(guideBox.guide.end, guideLayout.lines[0].glyphs.at(-1)!.x + guideLayout.lines[0].glyphs.at(-1)!.width);
const guides = labelGuideSegments(guideBox);
assert.equal(guides.length, 2);
for (const guide of guides) {
  assert(
    guide.end < guideBox.x || guide.start > guideBox.x + guideBox.width,
    "Alignment brackets never cross label text",
  );
  assert.equal(guide.y, guideBox.y + guideBox.height / 2);
  assert(guide.cap > 0, "Above-text brackets point toward their source");
}
assert(
  labelGuideSegments({ ...guideBox, annotation: { ...guideBox.annotation, placement: "below" } }).every(
    (guide) => guide.cap < 0,
  ),
);
const shortGuide = layoutText({
  text: "书店",
  width: 500,
  measure,
  annotations: [{ ...pinyin[0], start: 0, end: 2, text: "shop" }],
});
assert.equal(shortGuide.lines[0].overhead[0].guide, undefined);
assert.deepEqual(labelGuideSegments(shortGuide.lines[0].overhead[0]), []);
draws.length = 0;
drawText(context, hoverLayout, { hover: { start: 0, end: 6 } });
assert(
  draws.filter((item) => /\p{P}/u.test(item.text)).every((item) => item.color === "#252923"),
  "Reference emphasis leaves punctuation unchanged",
);
console.log(
  "PASS above/below fixed lanes, source-page containment, isolated label hover, Unicode word targeting and font-relative alignment guides",
);

// A sidebar reference is fallback emphasis. It must never mask the current
// source pointer when the old panel remains hovered or disappears mid-request.
const multipleRows = layoutText({ text: "北京。\n朋友。\n书店。\n读书。", width: 200, measure });
for (const range of [
  { start: 4, end: 6 },
  { start: 8, end: 10 },
  { start: 12, end: 14 },
]) {
  draws.length = 0;
  drawText(context, multipleRows, { hover: range, emphasis: { start: 0, end: 2 } });
  const expected = Array.from(multipleRows.text.slice(range.start, range.end));
  assert.deepEqual(
    draws.filter((item) => item.color === "#39745b").map((item) => item.text),
    expected,
    "Source hover on every row takes priority over an unrelated sidebar reference",
  );
}
draws.length = 0;
drawText(context, multipleRows, { emphasis: { start: 0, end: 2 } });
assert.deepEqual(
  draws.filter((item) => item.color === "#39745b").map((item) => item.text),
  ["北", "京"],
  "Sidebar reference still emphasizes source while the pointer is outside the canvas",
);
console.log("PASS current source pointer takes priority over stale sidebar references across multiple rows");