// @vitest-environment happy-dom

import type { ReactNode } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";

import { createExtraSheet, mergeExtraSheetRange, updateExtraSheetCells } from "@/lib/guides/extra-sheet";
import type { PublicGuide } from "@/lib/guides/queries";

vi.mock("next/font/local", () => ({ default: () => ({ className: "font" }) }));
vi.mock("./guide-page-shell", () => ({
  GuidePageShell: ({ children }: { children: ReactNode }) => <main>{children}</main>,
  publicSectionTitle: (title: string) => title,
}));
vi.mock("./guide-image-export", () => ({
  GuideImageExport: ({ children }: { children: ReactNode }) => <aside data-export>{children}</aside>,
}));
vi.mock("./guide-export-branding", () => ({ GuideExportBranding: () => null }));

const { StructuredGuideShell } = await import("./structured-guide");

describe("extra sheet public rendering", () => {
  it("renders full merged bounds and vertical alignment in both the guide and export", () => {
    let sequence = 0;
    let sheet = createExtraSheet((prefix) => `${prefix}-${++sequence}`);
    sheet = mergeExtraSheetRange(sheet, { start: { row: 1, column: 1 }, end: { row: 2, column: 3 } });
    sheet = updateExtraSheetCells(sheet, [{ row: 1, column: 1 }], {
      value: "<p><strong>Merged text</strong></p>", alignment: "center", verticalAlignment: "middle", backgroundColor: "#123456",
    });
    const guide = {
      id: "guide", slug: "guide", coverUrl: "/cover.png", character: { splashImageUrl: null },
      availableSections: [{ id: "extra", slug: "notes", title: "Notes" }],
      extras: [{ id: "extra", slug: "notes", title: "Notes", rows: [{
        id: "row", heading: "Details", body: "", percent: null, highlights: [], catalogItems: [],
        imageUrl: null, backgroundColor: null, sheet,
      }] }],
    } as unknown as PublicGuide;
    const container = document.createElement("div");
    container.innerHTML = renderToStaticMarkup(<StructuredGuideShell guide={guide} section="notes" />);
    const tables = container.querySelectorAll("table");
    expect(tables).toHaveLength(2);
    for (const table of tables) {
      expect(table.querySelectorAll("col")).toHaveLength(3);
      expect(table.querySelectorAll("tbody tr")).toHaveLength(2);
      expect(table.querySelectorAll("td")).toHaveLength(1);
      const cell = table.querySelector("td")!;
      expect(cell.rowSpan).toBe(2);
      expect(cell.colSpan).toBe(3);
      expect(cell.style.verticalAlign).toBe("middle");
      expect(cell.style.textAlign).toBe("center");
      expect(cell.querySelector("strong")?.textContent).toBe("Merged text");
    }
  });
});