import { screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import AppRoutes from "../routes";
import { renderWithProviders } from "../test/testHelpers";
import { ClientLayout } from "./ClientLayout";

describe("ClientLayout", () => {
  it("uses the main app style header shell and scrolling main viewport", () => {
    const { container } = renderWithProviders(<ClientLayout />);

    const header = container.querySelector("header");
    expect(header).toHaveClass("h-[75px]");
    expect(header).toHaveClass("bg-navbar-background");

    const headerInner = header?.firstElementChild;
    expect(headerInner).toHaveClass("w-full");
    expect(headerInner).toHaveClass("max-w-7xl");
    expect(headerInner).toHaveClass("mx-auto");

    const main = container.querySelector("main");
    expect(main).toHaveClass("flex-1");
    expect(main).toHaveClass("overflow-auto");
    expect(main).not.toHaveClass("max-w-7xl");
    expect(main).not.toHaveClass("mx-auto");

    const contentWrapper = main?.firstElementChild;
    expect(contentWrapper).toHaveClass("mx-auto");
    expect(contentWrapper).toHaveClass("w-full");
    expect(contentWrapper).toHaveClass("max-w-7xl");
    expect(contentWrapper).toHaveClass("px-4");
    expect(contentWrapper).toHaveClass("sm:px-6");
  });

  it("redirects unauthenticated client routes to the login page", async () => {
    renderWithProviders(<AppRoutes />, {
      route: "/tablo/tablo-1",
      testUser: undefined,
    });

    expect(await screen.findByTestId("auth-card-shell")).toBeInTheDocument();
    expect(await screen.findByRole("button", { name: "Connexion" })).toBeInTheDocument();
  });
});
