import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it } from "vitest";
import { Workbench } from "../../src/components/Workbench";

describe("Diff Tools workbench", () => {
  it("renders exact newline metadata and both result layouts", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    expect(screen.getByText("Browser-local")).toBeVisible();
    expect(await screen.findByText(/substantive change row/u)).toBeVisible();
    expect(screen.getAllByText("CRLF").length).toBeGreaterThan(0);
    await user.click(screen.getByRole("tab", { name: "Side by side" }));
    expect(
      screen.getByRole("table", { name: "Side-by-side differences" }),
    ).toBeVisible();
  });

  it("keeps exact large numbers in the RFC 6902 artifact", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByRole("tab", { name: /JSON Semantic/u }));
    fireEvent.change(screen.getByTestId("left-editor"), {
      target: { value: '{"n":1}' },
    });
    fireEvent.change(screen.getByTestId("right-editor"), {
      target: { value: '{"n":9007199254740993123456789}' },
    });
    await user.click(screen.getByRole("button", { name: "Compare now" }));
    await waitFor(() =>
      expect(screen.getByText(/1 substantive change row/u)).toBeVisible(),
    );
    await user.click(screen.getByRole("tab", { name: "Patches" }));
    expect(
      (screen.getByTestId("json-patch") as HTMLTextAreaElement).value,
    ).toContain("9007199254740993123456789");
  });

  it("keeps the last successful XML result visible beside an error", async () => {
    const user = userEvent.setup();
    render(<Workbench />);
    await user.click(screen.getByRole("tab", { name: /XML Namespace-aware/u }));
    expect(await screen.findByText(/substantive change row/u)).toBeVisible();
    const verdict = screen.getByText("Different", { exact: true });
    fireEvent.change(screen.getByTestId("left-editor"), {
      target: { value: "<!DOCTYPE x><x/>" },
    });
    await user.click(screen.getByRole("button", { name: "Compare now" }));
    expect(await screen.findByText("xml.doctype-rejected")).toBeVisible();
    expect(verdict).toBeVisible();
  });
});