"use client"

import { motion, useMotionValue, animate } from "framer-motion"
import { useLayoutEffect, useRef, useState, useEffect } from "react"
import { ChevronRight } from "lucide-react"
import type { ReactNode } from "react"

interface StatsBannerProps {
  items: ReactNode[]
  speed?: number
  direction?: "left" | "right"
  label?: string
}

export default function StatsBanner({
  items,
  speed = 30,
  direction = "right",
  label,
}: StatsBannerProps) {
  const firstSeriesRef = useRef<HTMLDivElement>(null)
  const [contentWidth, setContentWidth] = useState(0)
  const x = useMotionValue(0)

  // Mesurer la largeur de la première série (qui représente la largeur d'une série complète)
  useLayoutEffect(() => {
    const measureWidth = () => {
      if (firstSeriesRef.current) {
        const width = firstSeriesRef.current.offsetWidth
        if (width > 0) {
          setContentWidth(width)
        }
      }
    }

    // Mesurer après le rendu initial avec un petit délai pour s'assurer que tout est rendu
    const timeoutId = setTimeout(measureWidth, 0)

    // Re-mesurer en cas de redimensionnement
    const resizeObserver = new ResizeObserver(() => {
      measureWidth()
    })
    if (firstSeriesRef.current) {
      resizeObserver.observe(firstSeriesRef.current)
    }

    // Re-mesurer aussi sur le resize de la fenêtre
    window.addEventListener("resize", measureWidth)

    return () => {
      clearTimeout(timeoutId)
      resizeObserver.disconnect()
      window.removeEventListener("resize", measureWidth)
    }
  }, [items])

  // Animer le défilement avec la largeur mesurée
  // Pour direction "right", on commence hors écran à gauche (-contentWidth) et on va vers 0
  // Cela fait entrer les infos depuis la gauche et les fait défiler vers la droite
  useEffect(() => {
    if (contentWidth === 0) return

    if (direction === "right") {
      // Pour aller de gauche à droite : commencer hors écran à gauche et entrer dans l'écran
      // On commence à -contentWidth (première série hors écran) et on va vers 0
      x.set(-contentWidth)
      
      const controls = animate(x, 0, {
        duration: speed,
        repeat: Number.POSITIVE_INFINITY,
        ease: "linear",
      })

      return () => {
        controls.stop()
      }
    } else {
      // Pour aller de droite à gauche : commencer à 0 et aller vers -contentWidth
      x.set(0)
      
      const controls = animate(x, -contentWidth, {
        duration: speed,
        repeat: Number.POSITIVE_INFINITY,
        ease: "linear",
      })

      return () => {
        controls.stop()
      }
    }
  }, [contentWidth, speed, direction, x])

  // Fonction pour rendre une série d'items avec séparateurs
  const renderItemsSeries = (prefix: string, ref?: React.RefObject<HTMLDivElement | null>) => {
    return (
      <div ref={ref} className="inline-flex items-center">
        {items.map((item, index) => {
          return (
            <div key={`${prefix}-${index}`} className="flex items-center">
              <div className="px-6 sm:px-8 flex items-center gap-2 text-base sm:text-lg md:text-xl font-semibold text-white">
                {item}
              </div>
              <ChevronRight className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-white/80 mx-2" />
            </div>
          )
        })}
      </div>
    )
  }

  return (
    <div className="overflow-hidden whitespace-nowrap flex items-center">
      {/* Texte fixe label */}
      {label && (
        <div className="flex items-center shrink-0 px-4 sm:px-6">
          <span className="text-base sm:text-lg md:text-xl font-bold">{label}</span>
          {/* Trait vertical séparateur */}
          <div className="h-6 sm:h-8 w-px bg-white/60 mx-4 sm:mx-6"></div>
        </div>
      )}
      
      {/* Contenu défilant */}
      <div className="overflow-hidden whitespace-nowrap flex-1">
        <motion.div
          className="inline-flex items-center"
          style={{ x }}
        >
          {/* Première série pour continuité - avec ref pour mesurer */}
          {renderItemsSeries("first", firstSeriesRef)}
          {/* Deuxième série (dupliquée pour effet infini) */}
          {renderItemsSeries("second")}
        </motion.div>
      </div>
    </div>
  )
}