import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { BuyBox } from "@/components/productpage/BuyBox";

// Mock AddToCartButton to avoid complex dependencies
vi.mock("@/components/productpage/AddToCartButton", () => ({
  default: ({ product }: { product: any }) => (
    <button data-testid="add-to-cart">
      Add {product.quantity} of {product.name}
    </button>
  ),
}));

describe("BuyBox", () => {
  const mockProduct = {
    id: "123",
    name: "Test Product",
    price: 29.99,
    image: "/test.jpg",
  };

  it("renders quantity input but no subtotal when quantity is 1", () => {
    render(<BuyBox product={mockProduct} />);

    expect(screen.getByTestId("quantity-select")).toHaveTextContent("1");
    expect(screen.queryByText(/Summe:/)).toBeNull();
  });

  it("shows subtotal when quantity is increased", () => {
    render(<BuyBox product={mockProduct} />);

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

    expect(screen.getByTestId("quantity-select")).toHaveTextContent("2");
    expect(screen.getByText(/Summe:/)).toBeDefined();
    // 2 * 29.99 = 59.98
    // formatCurrency might add currency symbol, so we check for the value
    expect(screen.getByText(/59,98/)).toBeDefined();
  });

  it("updates AddToCartButton with correct quantity", () => {
    render(<BuyBox product={mockProduct} />);

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

    const addToCartButton = screen.getByTestId("add-to-cart");
    expect(addToCartButton).toHaveTextContent("Add 3 of Test Product");
  });
});