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

import { PortfolioCategoryFilter } from "@/components/site/portfolio-category-filter";
import type { PortfolioCategoryView } from "@/lib/portfolio";

function category(overrides: Partial<PortfolioCategoryView> = {}): PortfolioCategoryView {
  return {
    id: overrides.id ?? "c1",
    slug: overrides.slug ?? "branding",
    name: overrides.name ?? { ar: "الهوية", en: "Branding", de: "Branding" },
    description: overrides.description ?? { ar: "", en: "", de: "" },
    sortOrder: overrides.sortOrder ?? 0,
    isActive: overrides.isActive ?? true,
  };
}

describe("PortfolioCategoryFilter", () => {
  const categories = [
    category({ id: "c1", slug: "branding", name: { ar: "الهوية", en: "Branding", de: "Marke" } }),
    category({ id: "c2", slug: "web", name: { ar: "ويب", en: "Web", de: "Web" } }),
  ];

  it("renders the all-projects link and one link per category", () => {
    render(
      <PortfolioCategoryFilter
        locale="en"
        defaultLocale="de"
        categories={categories}
        allLabel="All"
      />,
    );
    const links = screen.getAllByRole("link");
    expect(links).toHaveLength(3);
    expect(screen.getByRole("link", { name: "All" })).toHaveAttribute("href", "/en/portfolio");
    expect(screen.getByRole("link", { name: "Branding" })).toHaveAttribute(
      "href",
      "/en/portfolio/category/branding",
    );
  });

  it("uses localized labels for the active locale", () => {
    render(
      <PortfolioCategoryFilter
        locale="de"
        defaultLocale="de"
        categories={categories}
        allLabel="Alle"
      />,
    );
    // German locale on the default locale -> unprefixed paths and German labels
    expect(screen.getByRole("link", { name: "Marke" })).toHaveAttribute(
      "href",
      "/portfolio/category/branding",
    );
    expect(screen.getByRole("link", { name: "Alle" })).toHaveAttribute("href", "/portfolio");
  });

  it("highlights the active category", () => {
    render(
      <PortfolioCategoryFilter
        locale="en"
        defaultLocale="de"
        categories={categories}
        allLabel="All"
        activeCategorySlug="web"
      />,
    );
    const active = screen.getByRole("link", { name: "Web" });
    expect(active).toHaveClass("bg-primary");
  });
});
