import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { ProductCard } from '@/components/storefront/ProductCard'

vi.mock('next/link', () => ({
  default: ({ href, children, className }: any) => (
    <a href={href} className={className}>{children}</a>
  ),
}))

const baseProduct = {
  id: 'prod-1',
  title: 'Maglietta Blu',
  slug: 'maglietta-blu',
  basePrice: 2999,
  currency: 'EUR',
  images: [{ url: '/uploads/prod-1/photo.jpg', altText: 'Maglietta blu' }],
}

describe('ProductCard', () => {
  it('renders the product title', () => {
    render(<ProductCard product={baseProduct} />)
    expect(screen.getByText('Maglietta Blu')).toBeTruthy()
  })

  it('formats price correctly (cents → euros with 2 decimals)', () => {
    render(<ProductCard product={baseProduct} />)
    expect(screen.getByText(/29\.99/)).toBeTruthy()
  })

  it('shows the currency', () => {
    render(<ProductCard product={baseProduct} />)
    expect(screen.getByText(/EUR/)).toBeTruthy()
  })

  it('links to the correct product URL', () => {
    const { container } = render(<ProductCard product={baseProduct} />)
    const link = container.querySelector('a')
    expect(link?.getAttribute('href')).toBe('/products/maglietta-blu')
  })

  it('renders the product image when images are present', () => {
    render(<ProductCard product={baseProduct} />)
    const img = screen.getByRole('img')
    expect(img.getAttribute('src')).toBe('/uploads/prod-1/photo.jpg')
  })

  it('uses altText when provided', () => {
    render(<ProductCard product={baseProduct} />)
    expect(screen.getByRole('img').getAttribute('alt')).toBe('Maglietta blu')
  })

  it('falls back to product title as alt text when altText is null', () => {
    const product = {
      ...baseProduct,
      images: [{ url: '/img.jpg', altText: null }],
    }
    render(<ProductCard product={product} />)
    expect(screen.getByRole('img').getAttribute('alt')).toBe('Maglietta Blu')
  })

  it('shows "No image" placeholder when images array is empty', () => {
    render(<ProductCard product={{ ...baseProduct, images: [] }} />)
    expect(screen.getByText('No image')).toBeTruthy()
  })

  it('does not render img tag when no images', () => {
    render(<ProductCard product={{ ...baseProduct, images: [] }} />)
    expect(screen.queryByRole('img')).toBeNull()
  })

  it('formats price = 0 correctly', () => {
    render(<ProductCard product={{ ...baseProduct, basePrice: 0 }} />)
    expect(screen.getByText(/0\.00/)).toBeTruthy()
  })
})