import { useEffect, useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { initAnalytics, trackPageView } from '../services/analytics'

export default function CookieBanner() {
  const location = useLocation()

  const [consent, setConsent] = useState(() =>
    localStorage.getItem('cookieConsent')
  )

  const visible = consent === null

  // Si le consentement avait déjà été donné lors d'une précédente visite,
  // Analytics est initialisé au chargement de l'application.
  useEffect(() => {
    if (consent !== 'accepted') return

    initAnalytics()
    trackPageView(location.pathname + location.search)
  }, [consent, location.pathname, location.search])

  const handleChoice = (choice) => {
    localStorage.setItem('cookieConsent', choice)
    setConsent(choice)

    if (choice === 'accepted') {
      initAnalytics()
      trackPageView(location.pathname + location.search)
    }
  }

  if (!visible) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 px-4 py-4 bg-white border-t border-gray-200 shadow-lg">
      <div className="max-w-5xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">

        <div className="flex-1">
          <p className="text-sm font-semibold text-gray-800 mb-1">
            Gestion des cookies
          </p>

          <p className="text-xs text-gray-500 leading-relaxed">
            Les cookies strictement nécessaires au fonctionnement du site sont
            utilisés automatiquement. Avec votre accord, nous utilisons également
            Google Analytics afin de mesurer l'audience et améliorer le site. Vous
            pouvez accepter ou refuser ces cookies statistiques. Consultez notre{' '}
            <Link
              to="/confidentialite"
              className="text-[#006B6B] hover:underline"
            >
              politique de confidentialité
            </Link>.
          </p>
        </div>

        <div className="flex gap-2 flex-shrink-0 w-full sm:w-auto">
          <button
            type="button"
            onClick={() => handleChoice('refused')}
            className="flex-1 sm:flex-none border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
          >
            Refuser
          </button>

          <button
            type="button"
            onClick={() => handleChoice('accepted')}
            className="flex-1 sm:flex-none bg-[#006B6B] hover:bg-[#005959] text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
          >
            Accepter
          </button>
        </div>

      </div>
    </div>
  )
}