import { useEffect, useCallback } from 'react'
import './App.css'
import { AppRouter } from './router'
import { useAppDispatch, useAppSelector } from './store'
import {
  createDefaultFolderThunk,
  loadFolderResults,
  setCurrentFolderHash,
  setBootstrapped,
  setPollingInterval,
  stopPolling
} from './store/documentSlice'

export default function App() {
  const dispatch = useAppDispatch()
  const { documents, bootstrapped, currentFolderHash, folderResults, hasPending, pollingInterval } = useAppSelector((state) => state.document)

  // Bootstrap au démarrage de l'application avec système de dossiers
  useEffect(() => {
    console.log('🔍 [APP] useEffect déclenché:', {
      documentsLength: documents.length,
      bootstrapped,
      currentFolderHash,
      folderResultsLength: folderResults.length,
      isDev: import.meta.env.DEV
    })

    // Récupérer le hash du dossier depuis l'URL
    const urlParams = new URLSearchParams(window.location.search)
    const urlFolderHash = urlParams.get('hash')

    console.log('🔍 [APP] Hash du dossier depuis URL:', urlFolderHash)

    const initializeFolder = async () => {
      try {
        let folderHash = urlFolderHash || currentFolderHash

        // Si pas de hash de dossier, créer le dossier par défaut
        if (!folderHash) {
          console.log('🚀 [APP] Création du dossier par défaut...')
          const result = await dispatch(createDefaultFolderThunk()).unwrap()
          folderHash = result.folderHash
          console.log('✅ [APP] Dossier par défaut créé:', folderHash)
        }

        // Charger les résultats du dossier
        console.log('📁 [APP] Chargement des résultats du dossier:', folderHash)
        await dispatch(loadFolderResults(folderHash)).unwrap()

        // Marquer le bootstrap comme terminé
        dispatch(setBootstrapped(true))
        console.log('🎉 [APP] Bootstrap terminé avec le dossier:', folderHash)
      } catch (error) {
        console.error('❌ [APP] Erreur lors de l\'initialisation du dossier:', error)
      }
    }

    // Ne pas refaire le bootstrap si déjà fait
    if (bootstrapped) {
      console.log('⏭️ [APP] Bootstrap déjà effectué, dossier:', currentFolderHash)
      return
    }

    initializeFolder()
  }, [dispatch, bootstrapped, currentFolderHash, folderResults.length])

  // Fonction pour démarrer le polling
  const startPolling = useCallback((folderHash: string) => {
    console.log('🔄 [APP] Démarrage du polling pour le dossier:', folderHash)

    const interval = setInterval(() => {
      console.log('🔄 [APP] Polling - Vérification des résultats...')
      dispatch(loadFolderResults(folderHash))
    }, 5000) // Polling toutes les 5 secondes

    dispatch(setPollingInterval(interval))
  }, [dispatch])

  // Fonction pour arrêter le polling
  const stopPollingCallback = useCallback(() => {
    console.log('⏹️ [APP] Arrêt du polling')
    dispatch(stopPolling())
  }, [dispatch])

  // Gestion du polling basé sur l'état hasPending
  useEffect(() => {
    if (hasPending && currentFolderHash && !pollingInterval) {
      startPolling(currentFolderHash)
    } else if (!hasPending && pollingInterval) {
      stopPollingCallback()
    }
  }, [hasPending, currentFolderHash, pollingInterval, startPolling, stopPollingCallback])

  // Nettoyage au démontage du composant
  useEffect(() => {
    return () => {
      if (pollingInterval) {
        clearInterval(pollingInterval)
      }
    }
  }, [pollingInterval])

  return <AppRouter />
}