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

import { GuidePageShell } from "./guide-page-shell";

vi.mock("@/components/public/site-header", () => ({ SiteHeader: () => null }));
vi.mock("@/components/live-refresh", () => ({ LiveRefresh: () => null }));

const guide = {
  id: "test-guide",
  slug: "raiden",
  name: "Raiden",
  characterKey: "raiden-key",
  coverUrl: "/cover.png",
};
const sections = [
  { id: "weapon", slug: "weapon", title: "Weapon" },
  { id: "extra", slug: "rotation", title: "Rotation" },
];

describe("shared guide navigation", () => {
  it("gives comments the home button and guide tabs around their content", () => {
    const html = renderToStaticMarkup(
      <GuidePageShell guide={guide} sections={sections} section="comment">
        <section>Comment board</section>
      </GuidePageShell>,
    );

    expect(html).toMatch(/<a\b[^>]*aria-label="กลับหน้ารวม"[^>]*href="\/"/);
    expect(html).toMatch(/<a\b[^>]*aria-current="page"[^>]*href="\/raiden\/comment"/);
    expect(html).toContain('href="/raiden/weapon"');
    expect(html).toContain('href="/raiden/rotation"');
    expect(html).toContain("Weapons");
    expect(html).toContain("Rotation");
    expect(html).toContain("<section>Comment board</section>");
  });

  it("keeps overview active and includes a single comments link", () => {
    const html = renderToStaticMarkup(
      <GuidePageShell guide={guide} sections={sections}>Overview content</GuidePageShell>,
    );

    expect(html).toMatch(/<a\b[^>]*aria-current="page"[^>]*href="\/raiden"/);
    expect(html.match(/href="\/raiden\/comment"/g)).toHaveLength(1);
  });

  it("keeps preview links under admin and omits comments", () => {
    const html = renderToStaticMarkup(
      <GuidePageShell guide={guide} sections={sections} section="weapon" preview>
        Preview content
      </GuidePageShell>,
    );

    expect(html).toMatch(/<a\b[^>]*aria-label="กลับหน้าแก้ไข"[^>]*href="\/admin\/raiden-key"/);
    expect(html).toMatch(/<a\b[^>]*aria-current="page"[^>]*href="\/admin\/raiden-key\/preview\/weapon"/);
    expect(html).toContain('href="/admin/raiden-key/preview/rotation"');
    expect(html).not.toContain("/comment");
    expect(html).toContain("หน้านี้แสดงข้อมูลที่บันทึกล่าสุด");
  });
});