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

import React from 'react';
import { render, screen } from '@testing-library/react';
import { StatCard } from '@/components/ui/StatCard';

describe('StatCard', () => {
  it('should render with title and value', () => {
    render(<StatCard title="Total Tickets" value={150} />);

    expect(screen.getByText('Total Tickets')).toBeInTheDocument();
    expect(screen.getByText('150')).toBeInTheDocument();
  });

  it('should render string values', () => {
    render(<StatCard title="Status" value="Active" />);

    expect(screen.getByText('Status')).toBeInTheDocument();
    expect(screen.getByText('Active')).toBeInTheDocument();
  });

  it('should render with icon', () => {
    const TestIcon = () => <svg data-testid="test-icon" />;
    render(<StatCard title="Users" value={42} icon={<TestIcon />} />);

    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
  });

  it('should render subtitle when provided', () => {
    render(<StatCard title="Revenue" value="$1,234" subtitle="Last 30 days" />);

    expect(screen.getByText('Last 30 days')).toBeInTheDocument();
  });

  it('should have white background for card', () => {
    const { container } = render(<StatCard title="Test" value={100} />);

    const card = container.firstChild;
    expect(card).toHaveClass('bg-white');
  });

  it('should apply blue color to value text by default', () => {
    const { container } = render(<StatCard title="Test" value={100} />);

    // The value text should have blue color
    const valueText = container.querySelector('.text-blue-600');
    expect(valueText).toBeInTheDocument();
  });

  it('should apply green color to value text', () => {
    const { container } = render(<StatCard title="Test" value={100} color="green" />);

    const valueText = container.querySelector('.text-green-600');
    expect(valueText).toBeInTheDocument();
  });

  it('should apply yellow color to value text', () => {
    const { container } = render(<StatCard title="Test" value={100} color="yellow" />);

    const valueText = container.querySelector('.text-yellow-600');
    expect(valueText).toBeInTheDocument();
  });

  it('should apply red color to value text', () => {
    const { container } = render(<StatCard title="Test" value={100} color="red" />);

    const valueText = container.querySelector('.text-red-600');
    expect(valueText).toBeInTheDocument();
  });

  it('should apply purple color to value text', () => {
    const { container } = render(<StatCard title="Test" value={100} color="purple" />);

    const valueText = container.querySelector('.text-purple-600');
    expect(valueText).toBeInTheDocument();
  });

  it('should apply custom className', () => {
    const { container } = render(<StatCard title="Test" value={100} className="custom-class" />);

    const card = container.firstChild;
    expect(card).toHaveClass('custom-class');
  });

  it('should render formatted numbers with French locale', () => {
    render(<StatCard title="Large Number" value={1000000} />);

    // French locale uses non-breaking space as thousands separator
    // The exact format may vary, so we just check the number is present
    const valueElement = screen.getByText(/1.*000.*000/);
    expect(valueElement).toBeInTheDocument();
  });
});