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

import { ProductBreadcrumbs } from "../product-breadcrumbs";

describe("ProductBreadcrumbs", () => {
  it("renders Home and category as links with the current item as text", () => {
    render(
      <ProductBreadcrumbs
        itemTitle="Vintage Tee"
        category={{ name: "Tops", slug: "tops" }}
      />,
    );

    const breadcrumbs = screen.getByRole("navigation", { name: "Breadcrumb" });
    const homeLink = within(breadcrumbs).getByRole("link", { name: "Home" });
    const categoryLink = within(breadcrumbs).getByRole("link", { name: "Tops" });
    const currentItem = within(breadcrumbs).getByText("Vintage Tee");

    expect(homeLink).toHaveAttribute("href", "/");
    expect(categoryLink).toHaveAttribute("href", "/items?category_slug=tops");
    expect(currentItem).toHaveAttribute("aria-current", "page");
    expect(currentItem.closest("a")).toBeNull();
  });

  it("renders only Home and the current item when category is missing", () => {
    render(<ProductBreadcrumbs itemTitle="Vintage Tee" category={null} />);

    const breadcrumbs = screen.getByRole("navigation", { name: "Breadcrumb" });

    expect(within(breadcrumbs).getByRole("link", { name: "Home" })).toHaveAttribute(
      "href",
      "/",
    );
    expect(within(breadcrumbs).getByText("Vintage Tee")).toHaveAttribute(
      "aria-current",
      "page",
    );
    expect(within(breadcrumbs).getAllByRole("link")).toHaveLength(1);
  });

  it("omits sparse category data instead of rendering a broken category crumb", () => {
    render(
      <ProductBreadcrumbs
        itemTitle="Vintage Jacket"
        category={{ name: "Outerwear", slug: "" }}
      />,
    );

    const breadcrumbs = screen.getByRole("navigation", { name: "Breadcrumb" });

    expect(within(breadcrumbs).queryByRole("link", { name: "Outerwear" })).toBeNull();
    expect(within(breadcrumbs).getByText("Vintage Jacket")).toHaveAttribute(
      "aria-current",
      "page",
    );
  });

  it("can render a category path when richer category data is available", () => {
    render(
      <ProductBreadcrumbs
        itemTitle="Vintage Tee"
        category={{ name: "Fallback", slug: "fallback" }}
        categoryPath={[
          { name: "Clothing", slug: "clothing" },
          { name: "Tops", slug: "tops" },
        ]}
      />,
    );

    const breadcrumbs = screen.getByRole("navigation", { name: "Breadcrumb" });

    expect(within(breadcrumbs).getByRole("link", { name: "Clothing" })).toHaveAttribute(
      "href",
      "/items?category_slug=clothing",
    );
    expect(within(breadcrumbs).getByRole("link", { name: "Tops" })).toHaveAttribute(
      "href",
      "/items?category_slug=tops",
    );
    expect(within(breadcrumbs).queryByRole("link", { name: "Fallback" })).toBeNull();
  });
});