import { fireEvent, render, screen, within } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";

import { Sidebar } from "./sidebar";

vi.mock("next/link", () => ({
  default: ({ href, children, ...props }: { href: string; children: React.ReactNode }) => (
    <a href={href} {...props}>
      {children}
    </a>
  ),
}));

vi.mock("next/navigation", () => ({
  usePathname: () => "/suppliers",
}));

vi.mock("./auth-provider", () => ({
  useAuth: () => ({
    user: { name: "Test User", email: "test@example.com" },
    logout: vi.fn(),
  }),
}));

vi.mock("next-themes", () => ({
  useTheme: () => ({
    theme: "light",
    setTheme: vi.fn(),
  }),
}));

describe("Sidebar", () => {
  it("does not show a separate supplier map navigation item", () => {
    render(<Sidebar />);

    expect(screen.getByText("Suppliers")).toBeInTheDocument();
    expect(screen.queryByText("Supplier Map")).not.toBeInTheDocument();
  });

  it("shows pricelist under the Other section", () => {
    render(<Sidebar />);

    const otherToggle = screen.getAllByRole("button", { name: /Other/i })[0];
    const managementToggle = screen.getAllByRole("button", { name: /Management/i })[0];

    fireEvent.click(otherToggle);
    fireEvent.click(managementToggle);

    const otherSection = otherToggle.parentElement;
    const managementSection = managementToggle.parentElement;

    expect(otherSection).not.toBeNull();
    expect(managementSection).not.toBeNull();

    expect(within(otherSection as HTMLElement).getByText("Pricelist")).toBeInTheDocument();
    expect(within(managementSection as HTMLElement).queryByText("Pricelist")).not.toBeInTheDocument();
  });
});