import { describe, it, expect, beforeEach } from "vitest";
import { initPageHash } from "../scripts/init-page-hash.mjs";

function makePagination() {
  const top = document.createElement("div");
  top.id = "pagination-top";
  top.innerHTML = `
    <button data-page="1">1</button>
    <button data-page="2">2</button>
    <button data-page="3">3</button>
  `;
  const bottom = document.createElement("div");
  bottom.id = "pagination-bottom";
  bottom.innerHTML = `
    <button data-page="1">1</button>
    <button data-page="2">2</button>
    <button data-page="3">3</button>
  `;
  document.body.appendChild(top);
  document.body.appendChild(bottom);
  return { top, bottom };
}

describe("init-page-hash bridge", () => {
  beforeEach(() => {
    document.body.innerHTML = "";
    window.location.hash = "";
  });

  it("clicking a page button sets the hash and marks active", () => {
    const { top } = makePagination();
    initPageHash();
    const btn2 = top.querySelector('[data-page="2"]');
    btn2.click();
    expect(window.location.hash.includes("page=2")).toBe(true);
    // active reflection is async via event, but in jsdom we call reflect synchronously
    // so check class after the handler
    expect(btn2.classList.contains("is-active")).toBe(true);
    expect(btn2.getAttribute("aria-current")).toBe("page");
  });

  it("updates active when hash changes programmatically", () => {
    const { top } = makePagination();
    initPageHash();
    window.location.hash = "#page=3";
    // Trigger hashchange manually (jsdom may not dispatch automatically)
    window.dispatchEvent(new Event("hashchange"));
    const btn3 = top.querySelector('[data-page="3"]');
    expect(btn3.classList.contains("is-active")).toBe(true);
  });
});