import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
import { render } from "solid-js/web";
import type { JSX } from "solid-js";

import PageContainer from "./PageContainer";

function mount(comp: () => JSX.Element): HTMLDivElement {
  const container = document.createElement("div");
  document.body.appendChild(container);
  render(() => comp(), container);
  return container;
}

beforeEach(() => {
  document.body.innerHTML = "";
});

afterEach(() => {
  document.body.innerHTML = "";
});

describe("PageContainer", () => {
  it("renders children", () => {
    mount(() => <PageContainer><p>Test content</p></PageContainer>);
    expect(document.body.textContent).toContain("Test content");
  });

  it("applies max-width and centered layout classes", () => {
    mount(() => <PageContainer><p>X</p></PageContainer>);
    const container = document.querySelector(".max-w-7xl")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("max-w-7xl");
    expect(container.className).toContain("mx-auto");
  });

  it("applies responsive horizontal padding classes", () => {
    mount(() => <PageContainer><p>X</p></PageContainer>);
    const container = document.querySelector(".px-4")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("px-4");
    expect(container.className).toContain("md:px-6");
    expect(container.className).toContain("lg:px-8");
  });

  it("applies w-full class", () => {
    mount(() => <PageContainer><p>X</p></PageContainer>);
    const container = document.querySelector(".w-full")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("w-full");
  });

  it("merges custom class prop", () => {
    mount(() => (
      <PageContainer class="my-custom-class"><p>X</p></PageContainer>
    ));
    const container = document.querySelector(".my-custom-class")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("my-custom-class");
  });

  it("applies vertical padding from py prop", () => {
    mount(() => (
      <PageContainer py="py-12"><p>X</p></PageContainer>
    ));
    const container = document.querySelector(".py-12")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("py-12");
  });

  it("applies both py and custom class", () => {
    mount(() => (
      <PageContainer py="py-8" class="custom"><p>X</p></PageContainer>
    ));
    const container = document.querySelector(".custom")!;
    expect(container).toBeTruthy();
    expect(container.className).toContain("py-8");
    expect(container.className).toContain("custom");
  });
});

describe("useAuth", () => {
  it("returns isAuthenticated as false by default", async () => {
    const { useAuth } = await import("./useAuth");
    const auth = useAuth();
    expect(auth.isAuthenticated).toBe(false);
  });

  it("returns null user by default", async () => {
    const { useAuth } = await import("./useAuth");
    const auth = useAuth();
    expect(auth.user).toBe(null);
  });

  it("provides signIn and signOut methods", async () => {
    const { useAuth } = await import("./useAuth");
    const auth = useAuth();
    expect(typeof auth.signIn).toBe("function");
    expect(typeof auth.signOut).toBe("function");
  });
});
