/**
 * Tests for the TeaIconsBackground component
 * @jest-environment jsdom
 */

import React from 'react';
import { render } from '@testing-library/react';
import TeaIconsBackground from '@/components/TeaIconsBackground';

// Mock next/image
jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: any) => {
    // eslint-disable-next-line @next/next/no-img-element
    return <img {...props} alt={props.alt} data-testid="tea-icon" />;
  },
}));

describe('TeaIconsBackground', () => {
  it('should render the background container', () => {
    const { container } = render(<TeaIconsBackground />);

    // Check for fixed positioning
    const fixedDiv = container.querySelector('.fixed');
    expect(fixedDiv).toBeInTheDocument();
  });

  it('should render all 35 tea icons', () => {
    const { getAllByTestId } = render(<TeaIconsBackground />);

    const icons = getAllByTestId('tea-icon');
    expect(icons).toHaveLength(35);
  });

  it('should render gradient background', () => {
    const { container } = render(<TeaIconsBackground />);

    const gradientDiv = container.querySelector('.bg-gradient-to-br');
    expect(gradientDiv).toBeInTheDocument();
  });

  it('should render overlay', () => {
    const { container } = render(<TeaIconsBackground />);

    const overlayDiv = container.querySelector('.bg-gradient-radial');
    expect(overlayDiv).toBeInTheDocument();
  });

  it('should apply animationKey to icon container when provided', () => {
    const animationKey = 12345;
    const { container } = render(<TeaIconsBackground animationKey={animationKey} />);

    // The icons container should be keyed
    const iconsContainer = container.querySelector('.opacity-\\[0\\.5\\]');
    expect(iconsContainer).toBeInTheDocument();
  });

  it('should render icons with correct alt texts', () => {
    const { getAllByAltText } = render(<TeaIconsBackground />);

    // Check for some expected alt texts
    const teapotGreen = getAllByAltText('Théière verte');
    const teaCup = getAllByAltText('Tasse de thé');
    const giftBox = getAllByAltText('Boîte cadeau');
    const teaLeaves = getAllByAltText('Feuilles de thé');
    const teapotPink = getAllByAltText('Théière rose');

    // Each icon type appears 7 times (7 rows × 1 per row approximately)
    expect(teapotGreen.length).toBeGreaterThan(0);
    expect(teaCup.length).toBeGreaterThan(0);
    expect(giftBox.length).toBeGreaterThan(0);
    expect(teaLeaves.length).toBeGreaterThan(0);
    expect(teapotPink.length).toBeGreaterThan(0);
  });

  it('should apply animate-float-gentle class to icons', () => {
    const { container } = render(<TeaIconsBackground />);

    const animatedIcons = container.querySelectorAll('.animate-float-gentle');
    expect(animatedIcons.length).toBe(35);
  });
});