import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { MemoryRouter } from "react-router";
import { Bell, User } from "lucide-react";
import {
  SettingsDesktopNav,
  SettingsMobileGridNav,
  SettingsMobileSectionPill,
  type SettingsGridSection,
} from "../SettingsNavigation";

const sections: readonly SettingsGridSection[] = [
  { id: "profile", label: "Profile", icon: User, subtitle: "Name, avatar" },
  { id: "notifications", label: "Notifications", icon: Bell, subtitle: "Email & Discord" },
];

describe("SettingsNavigation link mode", () => {
  it("renders desktop nav entries as anchors built from buildHref", () => {
    render(
      <MemoryRouter>
        <SettingsDesktopNav
          sections={sections}
          activeSection="profile"
          buildHref={(id) => `/settings/${id}`}
        />
      </MemoryRouter>
    );

    expect(screen.getByRole("link", { name: "Profile" })).toHaveAttribute("href", "/settings/profile");
    expect(screen.getByRole("link", { name: "Notifications" })).toHaveAttribute(
      "href",
      "/settings/notifications"
    );
    expect(screen.getByRole("link", { name: "Profile" })).toHaveAttribute("aria-current", "page");
  });

  it("renders the mobile grid as anchors and the back pill as an anchor", () => {
    render(
      <MemoryRouter>
        <SettingsMobileGridNav sections={sections} buildHref={(id) => `/settings/${id}`} />
        <SettingsMobileSectionPill backHref="/settings" />
      </MemoryRouter>
    );

    expect(screen.getByRole("link", { name: /Profile/i })).toHaveAttribute("href", "/settings/profile");
    expect(screen.getByRole("link", { name: /back to all settings/i })).toHaveAttribute(
      "href",
      "/settings"
    );
  });
});

describe("SettingsNavigation button mode (league settings)", () => {
  it("still fires onSectionChange when no buildHref is provided", () => {
    const onSectionChange = vi.fn();
    render(
      <SettingsDesktopNav
        sections={sections}
        activeSection="profile"
        onSectionChange={onSectionChange}
      />
    );

    fireEvent.click(screen.getByRole("button", { name: "Notifications" }));
    expect(onSectionChange).toHaveBeenCalledWith("notifications");
  });
});