"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { ChevronLeft, ChevronRight, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

const news = [
  {
    title: "SAR atteint un nouveau record de production",
    summary:
      "La raffinerie a traité 1.5 million de tonnes de pétrole brut cette année, marquant une augmentation de 15% par rapport à l'année précédente.",
    date: "15 Janvier 2025",
    image: "/oil-refinery-production-facility-at-sunset.jpg",
    category: "Production",
  },
  {
    title: "Nouvelle certification ISO 45001 obtenue",
    summary:
      "SAR renforce son engagement en matière de santé et sécurité au travail avec l'obtention de la certification ISO 45001:2018.",
    date: "8 Janvier 2025",
    image: "/industrial-safety-certification-award-ceremony.jpg",
    category: "Certification",
  },
  {
    title: "Partenariat stratégique avec TotalEnergies",
    summary:
      "Un accord de coopération technique a été signé pour moderniser les installations de raffinage et améliorer l'efficacité énergétique.",
    date: "22 Décembre 2024",
    image: "/business-partnership-handshake-oil-industry.jpg",
    category: "Partenariat",
  },
  {
    title: "3269 jours sans accident avec arrêt",
    summary:
      "SAR célèbre un jalon historique en matière de sécurité, démontrant l'excellence de sa culture de prévention des risques.",
    date: "10 Décembre 2024",
    image: "/industrial-workers-safety-celebration.jpg",
    category: "Sécurité",
  },
]

export default function NewsCarousel() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [direction, setDirection] = useState(0)

  useEffect(() => {
    const timer = setInterval(() => {
      setDirection(1)
      setCurrentIndex((prev) => (prev + 1) % news.length)
    }, 6000)
    return () => clearInterval(timer)
  }, [])

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

  const paginate = (newDirection: number) => {
    setDirection(newDirection)
    setCurrentIndex((prev) => (prev + newDirection + news.length) % news.length)
  }

  const currentNews = news[currentIndex]

  return (
    <div className="relative h-[600px] flex items-center justify-center overflow-hidden rounded-2xl">
      <AnimatePresence initial={false} custom={direction}>
        <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.3 },
            scale: { duration: 0.4 },
          }}
          className="absolute w-full h-full"
        >
          <div className="relative w-full h-full rounded-2xl overflow-hidden group">
            {/* Background Image */}
            <motion.img
              src={currentNews.image}
              alt={currentNews.title}
              className="absolute inset-0 w-full h-full object-cover"
              initial={{ scale: 1.1 }}
              animate={{ scale: 1 }}
              transition={{ duration: 0.6 }}
            />

            {/* Dark Overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-black/20" />

            {/* Content */}
            <div className="absolute inset-0 flex flex-col justify-end p-8 sm:p-12">
              <motion.div
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.2 }}
                className="inline-block mb-4"
              >
                <span className="px-4 py-2 bg-primary text-white text-sm font-semibold rounded-full">
                  {currentNews.category}
                </span>
              </motion.div>

              <motion.h3
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.3 }}
                className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4 max-w-3xl"
              >
                {currentNews.title}
              </motion.h3>

              <motion.p
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.4 }}
                className="text-lg sm:text-xl text-white/90 mb-6 max-w-2xl"
              >
                {currentNews.summary}
              </motion.p>

              <motion.div
                initial={{ y: 30, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ delay: 0.5 }}
                className="flex items-center gap-6"
              >
                <span className="text-white/70 text-sm">{currentNews.date}</span>
                <Button variant="secondary" className="group/btn hover:bg-white hover:text-primary transition-all">
                  Voir plus
                  <ArrowRight className="ml-2 group-hover/btn:translate-x-1 transition-transform" size={18} />
                </Button>
              </motion.div>
            </div>
          </div>
        </motion.div>
      </AnimatePresence>

      {/* Navigation Buttons */}
      <button
        onClick={() => paginate(-1)}
        className="absolute left-4 z-10 p-3 bg-white/10 backdrop-blur-md rounded-full hover:bg-white/20 transition-all hover:scale-110 border border-white/20"
      >
        <ChevronLeft size={24} className="text-white" />
      </button>

      <button
        onClick={() => paginate(1)}
        className="absolute right-4 z-10 p-3 bg-white/10 backdrop-blur-md rounded-full hover:bg-white/20 transition-all hover:scale-110 border border-white/20"
      >
        <ChevronRight size={24} className="text-white" />
      </button>

      {/* Pagination Dots */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-10">
        {news.map((_, index) => (
          <button
            key={index}
            onClick={() => {
              setDirection(index > currentIndex ? 1 : -1)
              setCurrentIndex(index)
            }}
            className={`h-2 rounded-full transition-all ${
              index === currentIndex ? "bg-white w-8" : "bg-white/50 hover:bg-white/75 w-2"
            }`}
          />
        ))}
      </div>
    </div>
  )
}