// @vitest-environment node

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

vi.mock("react-router-dom", () => ({
  Link: ({ to, children, ...props }: { to: string; children: React.ReactNode; [k: string]: unknown }) => (
    <a href={to} {...props}>{children}</a>
  ),
  useParams: () => ({ skillId: "test-source%2Ftest-skill" }),
  useNavigate: () => () => {},
}));

vi.mock("@tanstack/react-query", () => ({
  useQuery: ({ queryKey }: { queryKey: unknown[] }) => {
    if (
      Array.isArray(queryKey) &&
      (queryKey[3] === "versions" || String(queryKey[queryKey.length - 1]) === "versions")
    ) {
      return { data: [], isLoading: false, isError: false };
    }
    return {
      data: {
        id: "test-source/test-skill",
        name: "Test Skill",
        description: "A test description",
        sourceId: "test-source",
        category: "testing",
        activeVersionId: null,
        removedAt: null,
        averageRating: 4.2,
        ratingCount: 10,
      },
      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" } }),
}));

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

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

import { SkillDetail } from "./SkillDetail";

describe("SkillDetail", () => {
  it("renders skill name heading", () => {
    const html = renderToStaticMarkup(<SkillDetail />);
    expect(html).toContain("Test Skill");
  });

  it("renders source badge", () => {
    const html = renderToStaticMarkup(<SkillDetail />);
    expect(html).toContain("test-source");
  });

  it("renders back link to Skills", () => {
    const html = renderToStaticMarkup(<SkillDetail />);
    expect(html).toContain("Skills");
  });

  it("renders overview tab with rating", () => {
    const html = renderToStaticMarkup(<SkillDetail />);
    expect(html).toContain("4.2");
    expect(html).toContain("Average rating");
  });
});
