import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { CartItemList } from "@/components/cart/CartItemList";
import { useCartStore } from "@/hooks/useCartStore";
import { TooltipProvider } from "@/components/ui/tooltip";

// Mock the cart store
vi.mock("@/hooks/useCartStore", () => ({
  useCartStore: vi.fn(),
}));

describe("CartItemList Accessibility", () => {
  const mockItems = [
    {
      id: "1",
      name: "Test Produkt",
      price: 10,
      quantity: 2,
      image: "/test.jpg",
    },
  ];

  it("renders cart items with correct ARIA labels when quantity > 1", () => {
    (useCartStore as any).mockImplementation((selector: any) => {
      const state = {
        items: mockItems,
        removeFromCart: vi.fn(),
        updateQuantity: vi.fn(),
        addToCart: vi.fn(),
      };
      return selector ? selector(state) : state;
    });

    render(
      <TooltipProvider>
        <CartItemList />
      </TooltipProvider>
    );

    // Check for "Anzahl erhöhen"
    expect(screen.getByLabelText("Anzahl erhöhen")).toBeDefined();

    // Check for "Anzahl verringern" (since quantity > 1)
    expect(screen.getByLabelText("Anzahl verringern")).toBeDefined();

    // Check for "Produkt entfernen" (the CircleX button)
    expect(screen.getByLabelText("Produkt entfernen")).toBeDefined();
  });

  it("renders 'Produkt löschen' label when quantity is 1", () => {
    (useCartStore as any).mockImplementation((selector: any) => {
      const state = {
        items: [
          {
            id: "1",
            name: "Test Produkt",
            price: 10,
            quantity: 1,
            image: "/test.jpg",
          },
        ],
        removeFromCart: vi.fn(),
        updateQuantity: vi.fn(),
        addToCart: vi.fn(),
      };
      return selector ? selector(state) : state;
    });

    render(
      <TooltipProvider>
        <CartItemList />
      </TooltipProvider>
    );

    // Check for "Produkt löschen"
    expect(screen.getByLabelText("Produkt löschen")).toBeDefined();

    // "Anzahl verringern" should not be present
    expect(screen.queryByLabelText("Anzahl verringern")).toBeNull();
  });

  it("announces quantity changes via aria-live", () => {
    const updateQuantity = vi.fn();
    (useCartStore as any).mockImplementation((selector: any) => {
      const state = {
        items: mockItems,
        removeFromCart: vi.fn(),
        updateQuantity: updateQuantity,
        addToCart: vi.fn(),
      };
      return selector ? selector(state) : state;
    });

    render(
      <TooltipProvider>
        <CartItemList />
      </TooltipProvider>
    );

    const increaseButton = screen.getByLabelText("Anzahl erhöhen");
    fireEvent.click(increaseButton);

    expect(updateQuantity).toHaveBeenCalledWith("1", 3);
    expect(screen.getByRole("status")).toHaveTextContent("Anzahl von Test Produkt auf 3 aktualisiert");
  });
});