// @vitest-environment node

import { describe, expect, it, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";

// Mock all external dependencies for SSR
vi.mock("react-router-dom", () => ({
  Link: ({ to, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; children?: React.ReactNode }) => <a href={to} {...props}>{children}</a>,
  useNavigate: () => () => {},
}));

vi.mock("@/lib/router", () => ({
  Link: ({ to, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; children?: React.ReactNode }) => <a href={to} {...props}>{children}</a>,
  useNavigate: () => () => {},
}));

vi.mock("@tanstack/react-query", () => ({
  useQuery: () => ({ data: [], isLoading: false, isError: false }),
  useQueryClient: () => ({ invalidateQueries: () => {} }),
  useMutation: () => ({ mutate: () => {}, isPending: false }),
}));

vi.mock("@/context/BreadcrumbContext", () => ({
  useBreadcrumbs: () => ({ setBreadcrumbs: () => {} }),
}));

vi.mock("@/context/CompanyContext", () => ({
  useCompany: () => ({ selectedCompany: { id: "test", name: "Test Workspace", slug: "TST" } }),
}));

vi.mock("@/context/ToastContext", () => ({
  useToast: () => ({ pushToast: () => {} }),
}));

vi.mock("@/context/SidebarContext", () => ({
  useSidebar: () => ({ isMobile: false }),
}));

import { SkillBrowser } from "./SkillBrowser";

describe("SkillBrowser", () => {
  it("renders page title", () => {
    const html = renderToStaticMarkup(<SkillBrowser />);
    expect(html).toContain("Skills");
  });

  it("renders Browse tab content", () => {
    const html = renderToStaticMarkup(<SkillBrowser />);
    expect(html).toContain("Search skills");
  });

  it("renders Refresh registry button", () => {
    const html = renderToStaticMarkup(<SkillBrowser />);
    expect(html).toContain("Refresh registry");
  });

  it("renders tab labels", () => {
    const html = renderToStaticMarkup(<SkillBrowser />);
    expect(html).toContain("Browse");
    expect(html).toContain("Installed");
    expect(html).toContain("Trending");
  });
});