import { render, screen } from "@testing-library/react";
import { vi, describe, it, expect } from "vitest";
import React from "react";
import { TooltipProvider } from "@/components/ui/tooltip";
import { DashboardHeader } from "@/components/dashboard/DashboardHeader";
import { SidebarProvider } from "@/components/ui/sidebar";
import { DashboardThemeProvider } from "@/components/dashboard/DashboardThemeProvider";

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

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

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

describe("DashboardHeader Accessibility", () => {
  it("renders status indicators with role='status' and tabIndex=0", () => {
    render(
      <TooltipProvider>
        <DashboardThemeProvider>
          <SidebarProvider>
            <DashboardHeader />
          </SidebarProvider>
        </DashboardThemeProvider>
      </TooltipProvider>
    );

    const statusIndicators = screen.getAllByRole("status");
    // We expect at least 5 indicators (Online, Umsatz, Bestellungen, Ausstehend, Geringer Bestand)
    // Plus any aria-live status from NavigationSearch (which might be 1)
    expect(statusIndicators.length).toBeGreaterThanOrEqual(5);

    const onlineIndicator = screen.getByTestId("presence-indicator");
    expect(onlineIndicator).toHaveAttribute("tabIndex", "0");
    expect(onlineIndicator).toHaveClass("focus-visible:ring-2");
  });

  it("contains the Benachrichtigungen button with an aria-label", () => {
    render(
      <TooltipProvider>
        <DashboardThemeProvider>
          <SidebarProvider>
            <DashboardHeader />
          </SidebarProvider>
        </DashboardThemeProvider>
      </TooltipProvider>
    );

    const bellButton = screen.getByLabelText(/Benachrichtigungen/i);
    expect(bellButton).toBeDefined();
  });

  it("contains the ThemeToggle with sr-only text", () => {
    render(
      <TooltipProvider>
        <DashboardThemeProvider>
          <SidebarProvider>
            <DashboardHeader />
          </SidebarProvider>
        </DashboardThemeProvider>
      </TooltipProvider>
    );

    const themeToggle = screen.getByText(/Theme umschalten/i);
    expect(themeToggle).toHaveClass("sr-only");
  });
});