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

// Mock use-mobile module BEFORE any component imports
vi.mock("@/hooks/useMobile", () => ({
  useIsMobile: vi.fn(() => false),
}));

// Mock next/navigation
vi.mock("next/navigation", () => ({
  usePathname: vi.fn(() => "/dashboard/products/overview"),
}));

// Import components AFTER mocks are set up
import { DashboardSidebar } from "@/components/dashboard/DashboardSidebar";
import { SidebarProvider } from "@/components/ui/sidebar";

describe("DashboardSidebar Active State", () => {
  it("highlights the active link based on the current pathname", () => {
    render(
      <SidebarProvider>
        <DashboardSidebar />
      </SidebarProvider>
    );

    const activeLink = screen.getByRole("link", { name: /Produkte/i });

    // Since the Link is the child of SidebarMenuButton with asChild,
    // the data-active attribute is passed down to the Link itself.
    expect(activeLink).toHaveAttribute("data-active", "true");
    expect(activeLink).toHaveAttribute("aria-current", "page");

    // Verify the parent category is also highlighted
    // "Katalog" is a button (CollapsibleTrigger)
    const parentButton = screen.getByRole("button", { name: /Katalog/i });
    expect(parentButton).toHaveAttribute("data-active", "true");
  });

  it("does not highlight links that do not match the current pathname", () => {
    render(
      <SidebarProvider>
        <DashboardSidebar />
      </SidebarProvider>
    );

    const inactiveLink = screen.getByRole("link", { name: /Kategorien/i });
    expect(inactiveLink).toHaveAttribute("data-active", "false");
    expect(inactiveLink).not.toHaveAttribute("aria-current");
  });
});