"use client"

import { motion, AnimatePresence } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { useState, useEffect } from "react"
import { useTranslations } from 'next-intl'
import SectionLabel from "@/components/section-label"

interface TimelineEvent {
  year: string
  eventKey: string
}

export default function Timeline() {
  const t = useTranslations('timeline')
  const [ref, inView] = useInView({ triggerOnce: false, threshold: 0.1 })
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState(0)
  const [itemsPerView, setItemsPerView] = useState(3) // Initialiser à 3 pour desktop

  const events: TimelineEvent[] = [
    { year: "1961", eventKey: "1961" },
    { year: "1963", eventKey: "1963" },
    { year: "1964", eventKey: "1964" },
    { year: "1983", eventKey: "1983" },
    { year: "2004", eventKey: "2004" },
    { year: "2009", eventKey: "2009" },
    { year: "2016", eventKey: "2016" },
    { year: "2022", eventKey: "2022" },
    { year: "2025", eventKey: "2025" },
  ]

  // Responsive itemsPerView: 1 mobile, 2 tablette, 3 desktop
  useEffect(() => {
    const updateItemsPerView = () => {
      if (window.innerWidth < 640) {
        setItemsPerView(1)      // Mobile (< sm)
      } else if (window.innerWidth < 1280) {
        setItemsPerView(2)      // Tablette / petit desktop (sm → xl)
      } else {
        setItemsPerView(3)      // Grand desktop (xl+)
      }
    }
    updateItemsPerView()
    window.addEventListener('resize', updateItemsPerView)
    return () => window.removeEventListener('resize', updateItemsPerView)
  }, [])

  const totalSlides = Math.ceil(events.length / itemsPerView)

  // Le defilement ne s'interrompt que hors du champ de vision : inutile de
  // faire tourner un minuteur sur une section que personne ne regarde.
  useEffect(() => {
    if (!inView) return

    const interval = setInterval(() => {
      setDirection(1)
      setCurrentIndex((prev) => (prev + 1) % totalSlides)
    }, 6000) // 6 secondes pour ralentir le carousel

    return () => clearInterval(interval)
  }, [inView, totalSlides])

  const visibleEvents = events.slice(currentIndex * itemsPerView, (currentIndex + 1) * itemsPerView)

  const slideVariants = {
    enter: (direction: number) => ({
      x: direction > 0 ? 1000 : -1000,
      opacity: 0,
    }),
    center: {
      zIndex: 1,
      x: 0,
      opacity: 1,
    },
    exit: (direction: number) => ({
      zIndex: 0,
      x: direction < 0 ? 1000 : -1000,
      opacity: 0,
    }),
  }

  return (
    <section className="pt-8 sm:pt-12 md:pt-16 pb-6 sm:pb-8 bg-white overflow-hidden relative" ref={ref}>
      {/* Image de fond */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: "url('/media/hero/DJI_0642.jpg')",
        }}
      />
      {/* Voile rouge, même intensité que le hero */}
      <div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-primary/10 to-primary/20" />

      <div className="px-2 sm:px-4 lg:px-6 relative z-10">
        <div className="max-w-[98%] mx-auto">
          <SectionLabel title={t('title')} size="small" variant="overline" />
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8 sm:mt-12 md:mt-16 relative z-10">
        {/* Le survol ne met plus le defilement en pause : la section avance au
            meme rythme pour tout le monde. */}
        <div className="relative">
          {/* Main Timeline Container */}
          <div className="relative py-8 min-h-[500px] flex flex-col justify-center sm:block">

            {/* Carousel Container */}
            <div className="relative overflow-visible pt-4 pb-4">
              <AnimatePresence initial={false} custom={direction} mode="wait">
                <motion.div
                  key={currentIndex}
                  custom={direction}
                  variants={slideVariants}
                  initial="enter"
                  animate="center"
                  exit="exit"
                  transition={{
                    x: { type: "spring", stiffness: 300, damping: 30 },
                    opacity: { duration: 0.2 },
                  }}
                  className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-6 xl:gap-8"
                >
                  {visibleEvents.slice(0, 3).map((event, index) => {
                    const isEven = index % 2 === 0

                    return (
                      <motion.div
                        key={`${currentIndex}-${index}`}
                        className="relative"
                        initial={{ opacity: 0, y: 50 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: index * 0.15, duration: 0.6 }}
                      >
                        {/* Connection Line - Hidden on mobile */}
                        <motion.div
                          className={`hidden sm:block absolute left-1/2 -translate-x-1/2 w-0.5 ${
                            // Trait raccourci d'un quart : il partait de la
                            // pastille et courait presque jusqu'au texte.
                            isEven
                              ? "top-0 h-16 sm:h-24 md:h-28"
                              : "bottom-0 h-16 sm:h-24 md:h-28"
                          } bg-gradient-to-b from-white via-white/80 to-transparent`}
                          initial={{ scaleY: 0 }}
                          animate={{ scaleY: 1 }}
                          transition={{ delay: index * 0.15 + 0.3, duration: 0.5 }}
                          style={{ transformOrigin: isEven ? "top" : "bottom" }}
                        />

                        {/* Pastille de l'annee. Elle ne s'anime plus : ni
                            l'entree en vrille, ni le halo qui pulsait sans fin
                            autour d'elle. Une date est un reperage, pas un
                            signal d'alerte. */}
                        <div
                          className={`absolute left-1/2 -translate-x-1/2 ${
                            isEven ? "-top-10 sm:-top-10 md:-top-12" : "-bottom-10 sm:-bottom-10 md:-bottom-12"
                          } z-20`}
                        >
                          <div className="w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-full bg-gradient-to-br from-accent to-accent/80 border sm:border-2 border-white shadow-2xl flex items-center justify-center backdrop-blur-sm">
                            <span className="text-white font-bold text-xs sm:text-sm">{event.year}</span>
                          </div>
                        </div>

                        {/* Event Card */}
                        <motion.div
                          className={`bg-white border-2 border-gray-200 shadow-sm p-3 sm:p-6 md:p-8 transition-shadow duration-300 hover:shadow-md ${
                            isEven
                              ? "mt-10 mb-4 sm:mt-20 md:mt-24 sm:mb-0"
                              : "mt-4 mb-10 sm:mt-0 md:mt-0 sm:mb-20 md:mb-24"
                          }`}
                        >
                          <div className="mb-3">
                            <h3 className="text-xs font-semibold uppercase tracking-widest text-gray-400">
                              {t(`events.${event.eventKey}.title`)}
                            </h3>
                            <div className="h-0.5 w-10 bg-primary/70 rounded-full mt-1 mb-3" aria-hidden />
                          </div>

                          <p className="text-gray-600 leading-relaxed text-xs sm:text-sm">
                            {t(`events.${event.eventKey}.description`)}
                          </p>
                        </motion.div>
                      </motion.div>
                    )
                  })}
                </motion.div>
              </AnimatePresence>
            </div>

          </div>
        </div>
      </div>
    </section>
  )
}