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

const { replace, pathname, performLogout } = vi.hoisted(() => ({
  replace: vi.fn(),
  pathname: { value: "/earnings" },
  performLogout: vi.fn(async (redirect: (path: string) => void) => {
    redirect("/login");
  }),
}));

vi.mock("next/navigation", () => ({
  usePathname: () => pathname.value,
  useRouter: () => ({ replace }),
}));

vi.mock("@/lib/auth/logout", () => ({
  performLogout,
}));

import Sidebar from "@/components/Sidebar";

describe("Sidebar", () => {
  it("renders the dashboard navigation and highlights the current path", () => {
    render(<Sidebar />);

    for (const label of ["الرئيسية", "مركباتي", "الأرباح", "حسابي", "التسويات", "الشكاوى"]) {
      expect(screen.getByRole("link", { name: label })).toBeInTheDocument();
    }
    expect(screen.getByRole("link", { name: "الأرباح" })).toHaveClass("text-[#FCD704]");
    expect(screen.getByRole("link", { name: "الأرباح" }).querySelector("i")).toHaveClass(
      "ri-bar-chart-2-fill",
    );
  });

  it("calls performLogout and redirects to login on logout", async () => {
    const user = userEvent.setup();
    render(<Sidebar />);

    await user.click(screen.getByRole("button", { name: "تسجيل الخروج" }));

    expect(performLogout).toHaveBeenCalledTimes(1);
    expect(replace).toHaveBeenCalledWith("/login");
  });
});