import { EditorView } from "@codemirror/view";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";

import { DiffView } from "../src/client/DiffView.js";

function leftPaneSelection(): { from: number; to: number } | null {
  const pane = document.querySelector(".diff-host .cm-editor");
  if (pane === null) {
    return null;
  }
  const view = EditorView.findFromDOM(pane as HTMLElement);
  if (view === null) {
    return null;
  }
  const { from, to } = view.state.selection.main;
  return { from, to };
}

describe("DiffView", () => {
  it("keeps Markdown and raw HTML as inert editor text", () => {
    render(
      <DiffView
        before={'# title\n<img src="https://example.com/private.png" onerror="alert(1)">'}
        after={'# title\n<script>alert("x")</script>'}
        beforeLabel="清洗前"
        afterLabel="清洗后"
      />,
    );

    expect(screen.getByRole("region", { name: "清洗前与清洗后对比" })).toBeInTheDocument();
    expect(document.querySelector("img")).toBeNull();
    expect(document.querySelector("script")).toBeNull();
  });

  it("keeps long unchanged sections available in the full document view", () => {
    const before = Array.from({ length: 30 }, (_, index) => `line ${index + 1}`);
    const after = [...before];
    after[14] = "changed line 15";

    render(
      <DiffView
        before={before.join("\n")}
        after={after.join("\n")}
        beforeLabel="清洗前"
        afterLabel="清洗后"
      />,
    );

    expect(document.querySelector(".cm-collapsedLines")).toBeNull();
    expect(document.querySelector(".cm-mergeView")).toBeInTheDocument();
  });

  it("re-applies the focus selection after the compared texts change", () => {
    const longText = (mark: string) =>
      Array.from({ length: 30 }, (_, index) => (index === 14 ? mark : `line ${index + 1}`)).join("\n");

    const { rerender } = render(
      <DiffView before={longText("old")} after={longText("new")} beforeLabel="清洗前" afterLabel="清洗后" />,
    );

    rerender(
      <DiffView
        before={longText("old")}
        after={longText("new")}
        beforeLabel="Modifier 1 执行前"
        afterLabel="Modifier 1 执行后"
        focusRange={{ start: 58, end: 61 }}
      />,
    );
    rerender(
      <DiffView
        before={longText("stage before")}
        after={longText("stage after")}
        beforeLabel="Modifier 2 执行前"
        afterLabel="Modifier 2 执行后"
        focusRange={{ start: 58, end: 71 }}
      />,
    );

    expect(
      screen.getByRole("region", { name: "Modifier 2 执行前与Modifier 2 执行后对比" }),
    ).toBeInTheDocument();
    expect(leftPaneSelection()).toEqual({ from: 58, to: 71 });
  });
});