import { fireEvent, screen } from "@testing-library/react";
import { Layout } from "@ui/components/Layout";
import { beforeEach } from "vitest";
import { renderWithProviders } from "../utils/testHelpers";

describe("Layout", () => {
  beforeEach(() => {
    localStorage.setItem("xtablo-onboarding-completed", "true");
  });

  it("renders the layout with children", () => {
    const { container } = renderWithProviders(<Layout />);

    // Check if the mobile menu button is present
    expect(container.querySelector("button.md\\:hidden")).toBeInTheDocument();
  });

  it("has a menu button that can be clicked", () => {
    const { container } = renderWithProviders(<Layout />);

    // Get the menu button
    const menuButton = container.querySelector("button.md\\:hidden");
    expect(menuButton).toBeInTheDocument();

    // Click the menu button - should not throw
    fireEvent.click(menuButton!);
    expect(menuButton).toBeInTheDocument();
  });

  it.skip("toggles mobile menu when menu button is clicked", () => {
    renderWithProviders(<Layout />);

    const menuButton = screen.getByRole("button", { name: /menu/i });
    const navigation = screen.getByRole("navigation", { name: "Main navigation" });
    const navParent = navigation.parentElement;

    // Initially should be hidden on mobile (has -translate-x-full)
    expect(navParent).toHaveClass("-translate-x-full");

    // Click to open
    fireEvent.click(menuButton);
    expect(navParent).toHaveClass("translate-x-0");

    // Click to close
    fireEvent.click(menuButton);
    expect(navParent).toHaveClass("-translate-x-full");
  });

  it("renders the side navigation", () => {
    renderWithProviders(<Layout />);

    // Check if the side navigation is present
    expect(screen.getByRole("navigation", { name: "Main navigation" })).toBeInTheDocument();
  });

  it("renders main content area with Outlet", () => {
    const { container } = renderWithProviders(<Layout />);

    // Check if main element exists
    const main = container.querySelector("main");
    expect(main).toBeInTheDocument();
    expect(main).toHaveClass("flex-1", "overflow-auto");
  });

  it.skip("menu button has responsive positioning", () => {
    renderWithProviders(<Layout />);

    const menuButton = screen.getByRole("button", { name: /menu/i });

    // Should have mobile-only visibility and fixed positioning
    expect(menuButton).toHaveClass("fixed", "z-50", "md:hidden");
  });

  it("side navigation has responsive behavior", () => {
    renderWithProviders(<Layout />);

    const navigation = screen.getByRole("navigation", { name: "Main navigation" });
    const navParent = navigation.parentElement;

    // Should have transition and mobile/desktop behavior
    expect(navParent).toHaveClass("fixed", "md:relative", "transition-all");
  });
});
