import { composeStories } from "@storybook/react"
import { expect, userEvent, waitFor } from "storybook/test"
import { test } from "vitest"

import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
import { mountStory } from "../mountStory.testHelpers.ts"
import { expectAgentDrivable } from "../testing/index.ts"
import * as stories from "./MarkdownView.stories.tsx"

const {
  AllStates,
  Playground,
  HostileMarkdown,
  Interactive,
  NestedLinkText,
  SameAsTheEditor,
} = composeStories(stories)

/**
 * The gap this component was built to close, as a red/green fact.
 *
 * `isReadOnly` on either editor leaves nine disabled buttons in a
 * `role="toolbar"` above the document — findable by a screen reader,
 * findable by an agent, and useless to both. A CSS `display: none`
 * in the consuming app was the workaround; an element that is not
 * there is the fix.
 */
test("there is no toolbar, not a hidden one", async () => {
  const { canvas } = await mountStory(Playground)

  await expect(canvas.queryAllByRole("toolbar")).toEqual([])

  await expect(canvas.queryAllByRole("button")).toEqual([])

  // The side the CSS workaround could never reach: the editor's
  // toolbar collapses into an overflow **menu** at narrow widths, so
  // "hide the toolbar" left a menu button behind.
  await expect(canvas.queryAllByRole("menu")).toEqual([])
})

/**
 * A reader, not a text field.
 *
 * The role is the difference between heading navigation and being
 * dropped into forms mode with the whole document read as one flat
 * string — and the headings are the reason it matters, so both are
 * asserted together.
 */
test("it is an article whose headings are headings", async () => {
  const { canvas } = await mountStory(Playground)

  const article = expectAgentDrivable(canvas, {
    name: "Description",
    role: "article",
  })

  await expect(article).toHaveAttribute(
    "contenteditable",
    "false",
  )

  // `findBy`, not `getBy`: CodeMirror draws its decorations after the
  // first paint, and with four browser windows sharing the runner the
  // second heading was not drawn yet when a synchronous query looked.
  await expect(
    await canvas.findByRole("heading", {
      name: "Rack move, phase two",
    }),
  ).toHaveAttribute("aria-level", "1")

  await expect(
    await canvas.findByRole("heading", {
      name: "Before the window",
    }),
  ).toHaveAttribute("aria-level", "2")

  await expectNoAxeViolations(article)
})

/**
 * The requirement that made this a component in the CodeMirror
 * subpath rather than a `react-markdown` reader in the barrel.
 *
 * Both surfaces get one string. The assertion is not "they look
 * similar" — it is that the constructs a second renderer would get
 * subtly wrong come out identical: the same table, the same cells,
 * the same task boxes, the same autolink.
 */
test("it renders what the editor renders", async () => {
  const { canvas } = await mountStory(SameAsTheEditor)

  // ⚠️ WAIT FOR THE COUNT, not for "a table".
  //
  // This test is the only one in the file that mounts a story with
  // BOTH surfaces, so it is the only one that has to wait for
  // CodeMirror. `MarkdownView` paints its table in the first commit;
  // CodeMirror parses and decorates the document afterwards. A
  // synchronous `getAllByRole("table")` therefore returned ONE table
  // on a slow runner, `editorTable` was `undefined`, and the failure
  // read "expected undefined to be defined" — which says nothing
  // about the real cause (CI, 2026-09-14).
  //
  // ⚠️ A bare `findAllByRole` does NOT fix it. `findAllBy*` retries
  // until the query matches AT LEAST ONE element, and one element is
  // exactly the broken state: the view's table is there from the
  // start. The count is the condition, so the count goes in the wait.
  const [viewTable, editorTable] = await waitFor(() => {
    const tables = canvas.getAllByRole("table")

    expect(tables).toHaveLength(2)

    return tables
  })

  const toCellText = (table: HTMLElement) =>
    Array.from(table.querySelectorAll("th, td")).map(
      (cell) => cell.textContent,
    )

  await expect(
    toCellText(viewTable as HTMLElement),
  ).toEqual(toCellText(editorTable as HTMLElement))

  // Three task boxes in each, and the first one ticked in each.
  // Same wait, same reason: CodeMirror's boxes arrive with its
  // decorations, so a count taken too early sees only the view's.
  const checkboxes = await waitFor(() => {
    const boxes: HTMLInputElement[] =
      canvas.getAllByRole("checkbox")

    expect(boxes).toHaveLength(6)

    return boxes
  })

  await expect(
    checkboxes.filter((checkbox) => checkbox.checked),
  ).toHaveLength(2)

  // The bare URL, autolinked on both sides with nothing typed
  // around it.
  await waitFor(() => {
    expect(
      canvas.getAllByText(
        "https://example.invalid/product?id=1234",
      ),
    ).toHaveLength(2)
  })
})

/**
 * A link a reader can reach, which the editor's cannot be.
 *
 * The editor paints a `<span>` and translates a `mousedown` into a
 * navigation, because an anchor inside a `contenteditable` fights
 * the caret for the line. A document has no caret, so the link is an
 * anchor: in the tab order, with an address the browser will show,
 * copy and open.
 */
test("a link is a real anchor in the tab order", async () => {
  const { canvas } = await mountStory(Interactive)

  // Markdown decorations arrive after the editor's asynchronous parse.
  // Wait for the link before checking its accessibility and keyboard behavior.
  await canvas.findByRole("link", { name: "the runbook" })

  const link = expectAgentDrivable(canvas, {
    name: "the runbook",
    role: "link",
  })

  await expect(link.tagName).toBe("A")

  await expect(link).toHaveAttribute(
    "href",
    "https://example.invalid/runbook",
  )

  // `target="_blank"` without `noopener` hands the opened page a
  // live handle back into this one.
  await expect(link).toHaveAttribute(
    "rel",
    "noopener noreferrer",
  )

  // The document itself is not a tab stop — there is nothing in it
  // to operate — but every link in it is. Tab from the button above
  // lands on the first link rather than on the article.
  canvas.getByRole("button", { name: "Before" }).focus()

  await userEvent.tab()

  await expect(document.activeElement?.tagName).toBe("A")
})

/**
 * The answer to "is a checkbox interactive in a read-only view?",
 * asserted from both sides.
 *
 * Not offered by default, because two of the three surfaces this was
 * built for have nowhere to put a tick. Offered when the consumer
 * says where it goes, which is the same shape `onUploadImage` uses
 * on the editors.
 */
test("a checkbox is inert until a consumer says where the tick goes", async () => {
  const { canvas } = await mountStory(AllStates)

  const inert = await canvas.findByRole("checkbox", {
    name: "Photograph the current cabling",
  })

  await expect(inert).toBeDisabled()

  const tickable = canvas.getByRole("checkbox", {
    name: "Close the change record",
  })

  await expect(tickable).not.toBeDisabled()

  await userEvent.click(tickable)

  // The tick reaches the *markdown* and comes back as state, which
  // is the round trip that matters: the box is a view over the
  // document, and the document is what the consumer stores.
  await waitFor(async () => {
    await expect(
      canvas.getByRole("checkbox", {
        name: "Close the change record",
      }),
    ).toBeChecked()
  })
})

/**
 * The document this thing will actually be pointed at.
 *
 * Three separate claims, and each one used to be false or was one
 * refactor away from it: a `javascript:` URL is not a link, a
 * `<script>` is text, and a `data:text/html` is not an image.
 */
test("hostile markdown renders as characters, not as behaviour", async () => {
  const { canvas, canvasElement } =
    await mountStory(HostileMarkdown)

  // `findAllBy`: the links are CodeMirror decorations, drawn after the
  // first paint — the same race as the headings test above.
  const hrefs = (await canvas.findAllByRole("link")).map(
    (link: HTMLElement) => link.getAttribute("href"),
  )

  await expect(hrefs).toEqual([
    "https://example.invalid/runbook",
  ])

  await expect(
    canvasElement.querySelector('[href^="javascript:"]'),
  ).toBeNull()

  // The whole `[text](javascript:…)` construct is left as source, so
  // the reader can see what the file tried to do.
  await expect(canvasElement.textContent).toContain(
    "[Looks like a link](javascript:",
  )

  // A `<script>` in the source is characters. There is no
  // `innerHTML` in this subpath for it to be anything else.
  await expect(
    canvasElement.querySelector("script"),
  ).toBeNull()

  await expect(canvasElement.textContent).toContain(
    "<script>",
  )

  // `<img src=x onerror=…>` — the tag is text, so there is no
  // element to fail to load.
  await expect(
    canvasElement.querySelector("img[onerror]"),
  ).toBeNull()

  // The only image markdown in the document names a
  // `data:text/html` URL, which is not an image URL. `[src]` and not
  // `img`, because CodeMirror parks its own source-less
  // `.cm-widgetBuffer` spacer beside every widget.
  await expect(
    canvasElement.querySelector("img[src]"),
  ).toBeNull()

  await expectNoAxeViolations(canvasElement)
})

/**
 * Selectable, which is most of what a reader does with a document.
 *
 * A `contenteditable="false"` surface can very easily be an
 * unselectable one — CodeMirror's own base theme is what makes it
 * not, and a theme rule here could take it away without anything
 * else noticing.
 */
test("the text can be selected", async () => {
  const { canvas } = await mountStory(Playground)

  const article = canvas.getByRole("article")

  await expect(
    getComputedStyle(article).userSelect,
  ).not.toBe("none")

  const range = document.createRange()

  range.selectNodeContents(article)

  const selection = window.getSelection()

  selection?.removeAllRanges()

  selection?.addRange(range)

  await expect(selection?.toString()).toContain(
    "Rack move, phase two",
  )
})

/**
 * The blast radius, as a red/green fact.
 *
 * ``[`file.md`](path)`` produced a zero-length `linkText` range.
 * `Decoration.mark` throws on an empty range, CodeMirror answers a
 * throwing view plugin by destroying it, and destroying it takes
 * **every** decoration in the document — so one link in one bullet
 * dropped the whole file to raw markdown.
 *
 * The unit tests in `livePreviewRanges.test.ts` pin the range. This
 * pins the consequence, which is the part a range assertion cannot
 * see: that the heading three lines above the bad link still
 * renders.
 */
test("inline markup in link text does not drop the document to raw source", async () => {
  const { canvas } = await mountStory(NestedLinkText)

  // The canary. This heading has nothing to do with links, and it
  // is what stopped rendering when the plugin died.
  await expect(
    await canvas.findByRole("heading", {
      name: "Where the fix landed",
    }),
  ).toHaveAttribute("aria-level", "2")

  // No raw source anywhere in the document.
  const article = canvas.getByRole("article")

  // The heading can paint before lower link decorations finish parsing.
  // Retry the complete contract rather than treating that partial paint
  // as the final document; all three source-marker assertions still apply.
  await waitFor(async () => {
    await expect(article.textContent).not.toContain("](")

    await expect(article.textContent).not.toContain("**")

    await expect(article.textContent).not.toContain("~~")
  })
})

/**
 * Each nesting, reachable as a link by the text a reader sees —
 * with the markers gone, since those are concealed in a document.
 */
test.each([
  ["a code span", "livePreviewRanges.ts"],
  ["strong", "the runbook"],
  ["emphasis", "the older note"],
  ["strikethrough", "the retired page"],
  ["a mix", "read this first"],
  ["no nesting at all", "the index"],
])(
  "link text through %s is a reachable anchor",
  async (_case, name) => {
    const { canvas } = await mountStory(NestedLinkText)

    // CodeMirror finishes its viewport decorations on a scheduled frame.
    // Wait for the accessible anchor rather than assuming mount means paint.
    const link = await waitFor(() =>
      expectAgentDrivable(canvas, {
        name,
        role: "link",
      }),
    )

    await expect(link.tagName).toBe("A")
  },
)

/**
 * Prose leading, not code leading.
 *
 * CodeMirror's base theme sets `line-height: 1.4` on the content,
 * which is right for a file of short lines you scan down and too
 * tight for wrapped paragraphs across a full measure. Docket's
 * owner read a task at 1.4 and called the page unreadable.
 *
 * Asserted as a ratio rather than a pixel count so the rule
 * survives a change to the base font size.
 */
test("the document is set at prose leading", async () => {
  const { canvas } = await mountStory(Playground)

  const article = canvas.getByRole("article")

  const { fontSize, lineHeight } = getComputedStyle(article)

  await expect(
    Number.parseFloat(lineHeight) /
      Number.parseFloat(fontSize),
  ).toBeGreaterThan(1.5)
})

/**
 * A monospace face at the same `font-size` as the prose around it
 * reads BIGGER than the prose — fixed advance width, taller
 * x-height — so a description whose nouns are all file names in
 * backticks comes out as a wall of emphasis nobody asked for.
 */
test("a code span is smaller than the prose it sits in", async () => {
  const { canvas } = await mountStory(Playground)

  const article = canvas.getByRole("article")

  // CodeMirror can finish its syntax decorations after the story mounts.
  // Wait for the measured span itself rather than capturing a stale null.
  await waitFor(() => {
    expect(
      article.querySelector(".cm-md-code"),
    ).not.toBeNull()
  })

  const code = article.querySelector(".cm-md-code")

  await expect(code).not.toBeNull()

  await expect(
    Number.parseFloat(
      getComputedStyle(code as Element).fontSize,
    ),
  ).toBeLessThan(
    Number.parseFloat(getComputedStyle(article).fontSize),
  )
})