import React from 'react'
import { render, screen } from '../../../test-utils'
import userEvent from '@testing-library/user-event'
import ChantiersList from '../ChantiersList'
import { ChantierRecent, StatutChantier } from '../../../types/btp'

const mockChantiers: ChantierRecent[] = [
  {
    id: '1',
    nom: 'Rénovation Bureau',
    client: 'Entreprise ABC',
    statut: StatutChantier.EN_COURS,
    dateDebut: '2024-01-15',
    montantPrevu: 45000,
  },
  {
    id: '2',
    nom: 'Construction Garage',
    client: 'Client XYZ',
    statut: StatutChantier.PLANIFIE,
    dateDebut: '2024-02-01',
    montantPrevu: 25000,
  },
  {
    id: '3',
    nom: 'Réparation Toiture',
    client: 'Mairie',
    statut: StatutChantier.TERMINE,
    dateDebut: '2024-01-01',
    montantPrevu: 15000,
  },
]

describe('Composant ChantiersList', () => {
  const mockOnViewAll = jest.fn()

  beforeEach(() => {
    jest.clearAllMocks()
  })

  it('devrait afficher la liste des chantiers', () => {
    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
    
    expect(screen.getByText('Chantiers récents')).toBeInTheDocument()
    expect(screen.getByText('Rénovation Bureau')).toBeInTheDocument()
    expect(screen.getByText('Construction Garage')).toBeInTheDocument()
    expect(screen.getByText('Réparation Toiture')).toBeInTheDocument()
  })

  it('devrait afficher les informations détaillées de chaque chantier', () => {
    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
    
    // Vérifier les noms des clients
    expect(screen.getByText('Entreprise ABC')).toBeInTheDocument()
    expect(screen.getByText('Client XYZ')).toBeInTheDocument()
    expect(screen.getByText('Mairie')).toBeInTheDocument()
    
    // Vérifier les montants formatés
    expect(screen.getByText('45 000 €')).toBeInTheDocument()
    expect(screen.getByText('25 000 €')).toBeInTheDocument()
    expect(screen.getByText('15 000 €')).toBeInTheDocument()
  })

  it('devrait afficher les statuts corrects avec les bonnes couleurs', () => {
    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
    
    expect(screen.getByText('En cours')).toBeInTheDocument()
    expect(screen.getByText('Planifié')).toBeInTheDocument()
    expect(screen.getByText('Terminé')).toBeInTheDocument()
  })

  it('devrait formater les dates correctement', () => {
    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
    
    // Vérifier que les dates sont au format français
    expect(screen.getByText('15/01/2024')).toBeInTheDocument()
    expect(screen.getByText('01/02/2024')).toBeInTheDocument()
    expect(screen.getByText('01/01/2024')).toBeInTheDocument()
  })

  it('devrait afficher le bouton "Voir tout" et le rendre cliquable', async () => {
    const user = userEvent.setup()
    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
    
    const viewAllButton = screen.getByText('Voir tout')
    expect(viewAllButton).toBeInTheDocument()
    
    await user.click(viewAllButton)
    expect(mockOnViewAll).toHaveBeenCalledTimes(1)
  })

  it('ne devrait pas afficher le bouton "Voir tout" si onViewAll n\'est pas fourni', () => {
    render(<ChantiersList chantiers={mockChantiers} />)
    
    expect(screen.queryByText('Voir tout')).not.toBeInTheDocument()
  })

  it('devrait afficher un message quand il n\'y a pas de chantiers', () => {
    render(<ChantiersList chantiers={[]} onViewAll={mockOnViewAll} />)
    
    expect(screen.getByText('Aucun chantier récent')).toBeInTheDocument()
  })

  it('devrait afficher l\'état de chargement', () => {
    render(<ChantiersList chantiers={[]} loading={true} />)
    
    // Vérifier que le titre n'est pas affiché en mode chargement
    expect(screen.queryByText('Chantiers récents')).not.toBeInTheDocument()
    
    // Vérifier la présence des skeletons
    const skeletons = document.querySelectorAll('[data-pc-name="skeleton"]')
    expect(skeletons.length).toBeGreaterThan(0)
  })

  it('devrait gérer tous les statuts de chantier', () => {
    const chantiersAvecTousStatuts: ChantierRecent[] = [
      {
        id: '1',
        nom: 'Chantier 1',
        client: 'Client 1',
        statut: StatutChantier.EN_COURS,
        dateDebut: '2024-01-01',
        montantPrevu: 1000,
      },
      {
        id: '2',
        nom: 'Chantier 2',
        client: 'Client 2',
        statut: StatutChantier.PLANIFIE,
        dateDebut: '2024-01-01',
        montantPrevu: 2000,
      },
      {
        id: '3',
        nom: 'Chantier 3',
        client: 'Client 3',
        statut: StatutChantier.TERMINE,
        dateDebut: '2024-01-01',
        montantPrevu: 3000,
      },
      {
        id: '4',
        nom: 'Chantier 4',
        client: 'Client 4',
        statut: StatutChantier.ANNULE,
        dateDebut: '2024-01-01',
        montantPrevu: 4000,
      },
      {
        id: '5',
        nom: 'Chantier 5',
        client: 'Client 5',
        statut: StatutChantier.SUSPENDU,
        dateDebut: '2024-01-01',
        montantPrevu: 5000,
      },
    ]

    render(<ChantiersList chantiers={chantiersAvecTousStatuts} />)
    
    expect(screen.getByText('En cours')).toBeInTheDocument()
    expect(screen.getByText('Planifié')).toBeInTheDocument()
    expect(screen.getByText('Terminé')).toBeInTheDocument()
    expect(screen.getByText('Annulé')).toBeInTheDocument()
    expect(screen.getByText('Suspendu')).toBeInTheDocument()
  })

  it('devrait gérer les montants manquants', () => {
    const chantiersAvecMontantManquant: ChantierRecent[] = [
      {
        id: '1',
        nom: 'Chantier sans montant',
        client: 'Client Test',
        statut: StatutChantier.EN_COURS,
        dateDebut: '2024-01-01',
        montantPrevu: undefined,
      },
    ]

    render(<ChantiersList chantiers={chantiersAvecMontantManquant} />)
    
    expect(screen.getByText('-')).toBeInTheDocument()
  })

  it('devrait avoir une structure de table responsive', () => {
    const { container } = render(<ChantiersList chantiers={mockChantiers} />)
    
    const dataTable = container.querySelector('[data-pc-name="datatable"]')
    expect(dataTable).toBeInTheDocument()
    
    // Vérifier que les en-têtes sont cachés
    expect(dataTable).toHaveAttribute('data-pc-section', 'wrapper')
  })

  it('devrait formater correctement les gros montants', () => {
    const chantiersAvecGrosMontants: ChantierRecent[] = [
      {
        id: '1',
        nom: 'Gros Chantier',
        client: 'Client VIP',
        statut: StatutChantier.EN_COURS,
        dateDebut: '2024-01-01',
        montantPrevu: 1234567,
      },
    ]

    render(<ChantiersList chantiers={chantiersAvecGrosMontants} />)
    
    // Vérifier que le montant est formaté avec des séparateurs
    expect(screen.getByText(/1[,\s]?234[,\s]?567 €/)).toBeInTheDocument()
  })
})