import React from 'react'
import { render, screen } from '../../../test-utils'
import StatsCard from '../StatsCard'

describe('Composant StatsCard', () => {
  const defaultProps = {
    title: 'Projets actifs',
    value: 42,
    icon: 'pi pi-building',
    color: 'primary' as const,
  }

  it('devrait afficher les informations de base', () => {
    render(<StatsCard {...defaultProps} />)
    
    expect(screen.getByText('Projets actifs')).toBeInTheDocument()
    expect(screen.getByText('42')).toBeInTheDocument()
    expect(document.querySelector('.pi-building')).toBeInTheDocument()
  })

  it('devrait formater les nombres avec des séparateurs', () => {
    render(<StatsCard {...defaultProps} value={1234567} />)
    
    // Le format peut varier selon la locale
    expect(screen.getByText(/1[,\s]?234[,\s]?567/)).toBeInTheDocument()
  })

  it('devrait afficher les valeurs string directement', () => {
    render(<StatsCard {...defaultProps} value="50 000 €" />)
    
    expect(screen.getByText('50 000 €')).toBeInTheDocument()
  })

  it('devrait afficher le sous-titre si fourni', () => {
    render(<StatsCard {...defaultProps} subtitle="En cours ce mois" />)
    
    expect(screen.getByText('En cours ce mois')).toBeInTheDocument()
  })

  it('devrait afficher la tendance positive', () => {
    render(
      <StatsCard 
        {...defaultProps} 
        trend={{ value: 15, isPositive: true }}
      />
    )
    
    expect(screen.getByText('+15%')).toBeInTheDocument()
    expect(screen.getByText('Augmentation ce mois')).toBeInTheDocument()
  })

  it('devrait afficher la tendance négative', () => {
    render(
      <StatsCard 
        {...defaultProps} 
        trend={{ value: 5, isPositive: false }}
      />
    )
    
    expect(screen.getByText('-5%')).toBeInTheDocument()
    expect(screen.getByText('Diminution ce mois')).toBeInTheDocument()
  })

  it('devrait appliquer la bonne couleur', () => {
    const colors = [
      { color: 'primary' as const, textClass: 'text-blue-500', bgClass: 'bg-blue-100' },
      { color: 'success' as const, textClass: 'text-green-500', bgClass: 'bg-green-100' },
      { color: 'info' as const, textClass: 'text-cyan-500', bgClass: 'bg-cyan-100' },
      { color: 'warning' as const, textClass: 'text-yellow-500', bgClass: 'bg-yellow-100' },
      { color: 'danger' as const, textClass: 'text-red-500', bgClass: 'bg-red-100' },
    ]

    colors.forEach(({ color, textClass, bgClass }) => {
      const { container } = render(<StatsCard {...defaultProps} color={color} />)
      
      const icon = container.querySelector(`.${defaultProps.icon.replace(' ', '.')}`)
      const iconContainer = icon?.parentElement
      
      expect(icon).toHaveClass(textClass)
      expect(iconContainer).toHaveClass(bgClass)
    })
  })

  it('devrait afficher l\'état de chargement', () => {
    render(<StatsCard {...defaultProps} loading={true} />)
    
    // Vérifier la présence des skeletons
    expect(screen.queryByText('Projets actifs')).not.toBeInTheDocument()
    expect(screen.queryByText('42')).not.toBeInTheDocument()
    
    // PrimeReact Skeleton crée des éléments avec data-pc-name="skeleton"
    const skeletons = document.querySelectorAll('[data-pc-name="skeleton"]')
    expect(skeletons.length).toBeGreaterThan(0)
  })

  it('devrait avoir une hauteur complète', () => {
    const { container } = render(<StatsCard {...defaultProps} />)
    
    const card = container.querySelector('[data-pc-name="card"]')
    expect(card).toHaveClass('h-full')
  })

  it('devrait gérer tous les types d\'icônes PrimeIcons', () => {
    const icons = ['pi pi-users', 'pi pi-euro', 'pi pi-exclamation-triangle']
    
    icons.forEach(icon => {
      const { container } = render(<StatsCard {...defaultProps} icon={icon} />)
      const iconElement = container.querySelector(`.${icon.split(' ').join('.')}`)
      expect(iconElement).toBeInTheDocument()
    })
  })

  it('devrait afficher correctement avec toutes les props', () => {
    render(
      <StatsCard
        title="Chiffre d'affaires"
        value="125 450 €"
        icon="pi pi-euro"
        color="success"
        subtitle="Total ce mois"
        trend={{ value: 8, isPositive: true }}
      />
    )
    
    expect(screen.getByText("Chiffre d'affaires")).toBeInTheDocument()
    expect(screen.getByText("125 450 €")).toBeInTheDocument()
    expect(screen.getByText("Total ce mois")).toBeInTheDocument()
    expect(screen.getByText("+8%")).toBeInTheDocument()
    expect(screen.getByText("Augmentation ce mois")).toBeInTheDocument()
    expect(document.querySelector('.pi-euro')).toBeInTheDocument()
  })
})