"use client"

import { useState, useEffect } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { useInView } from "react-intersection-observer"
import { useTranslations, useLocale } from 'next-intl'
import Link from "next/link"
import Image from "next/image"
import { ArrowRight } from "lucide-react"
import SectionLabel from "@/components/section-label"

interface StrategicProjectsProps {
  hideReadMore?: boolean
}

/** Affiche le texte avec "SAR 2" en rouge */
function withSar2Red(text: string) {
  const parts = text.split('SAR 2')
  if (parts.length === 1) return text
  return parts.map((part, i) => (
    <span key={i}>
      {part}
      {i < parts.length - 1 && <span className="text-red-600 font-semibold">SAR 2</span>}
    </span>
  ))
}

export default function StrategicProjects({ hideReadMore = false }: StrategicProjectsProps) {
  const t = useTranslations('strategicProjects')
  const tSar20 = useTranslations('sar20')
  const locale = useLocale()
  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 })
  const [currentImageIndex, setCurrentImageIndex] = useState(0)

  const images = [
    {
      src: "/sangomar_profond.jpg",
      alt: "Carte du champ pétrolier de Sangomar - Projets Stratégiques SAR"
    },
    {
      src: "/yyyyyyFPSO-LSS_Sangomar_Ok-902x1024.jpg.pagespeed.ic.4XEsUe7zHr.jpg",
      alt: "FPSO Leopold Sedar Senghor - Projet Sangomar"
    },
    {
      src: "/yayayaya.png",
      alt: "Équipe SAR sur site industriel - Projets Stratégiques"
    }
  ]

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prev) => (prev + 1) % images.length)
    }, 3000) // Change toutes les 3 secondes

    return () => clearInterval(interval)
  }, [images.length])

  return (
    <section ref={ref} className="pt-6 sm:pt-10 md:pt-14 lg:pt-16 pb-6 sm:pb-10 md:pb-14 lg:pb-16 bg-white overflow-hidden">
      <div className="px-3 sm:px-4 md:px-6">
        <div className="max-w-full sm:max-w-[98%] mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6 }}
          >
            <SectionLabel title={t('title')} size="small" />
          </motion.div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 mt-5 sm:mt-8 md:mt-10 lg:mt-12">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 sm:gap-6 md:gap-8 lg:gap-12 items-center">
          {/* Photo à gauche - Carousel */}
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="relative w-full min-w-0 rounded-lg sm:rounded-xl overflow-hidden shadow-xl sm:shadow-2xl order-2 lg:order-1 bg-gray-100 aspect-[4/3] min-h-[200px] sm:min-h-[240px]"
          >
            <AnimatePresence mode="wait">
              <motion.div
                key={currentImageIndex}
                initial={{ opacity: 0, scale: 1.05 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.95 }}
                transition={{ duration: 0.5 }}
                className="absolute inset-0"
              >
                <Image
                  src={images[currentImageIndex].src}
                  alt={images[currentImageIndex].alt}
                  fill
                  className="object-cover"
                  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 50vw"
                  priority={currentImageIndex === 0}
                />
              </motion.div>
            </AnimatePresence>
            
            {/* Indicateurs de carousel */}
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5 sm:gap-2 z-10">
              {images.map((_, index) => (
                <button
                  key={index}
                  onClick={() => setCurrentImageIndex(index)}
                  className={`h-1.5 sm:h-2 rounded-full transition-all duration-300 ${
                    index === currentImageIndex
                      ? 'w-6 sm:w-8 bg-white'
                      : 'w-1.5 sm:w-2 bg-white/50 hover:bg-white/75'
                  }`}
                  aria-label={`Aller à l'image ${index + 1}`}
                />
              ))}
            </div>
          </motion.div>
                      
          {/* Texte à droite */}
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            animate={inView ? { opacity: 1, x: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="space-y-4 sm:space-y-5 md:space-y-6 order-1 lg:order-2 min-w-0"
          >
            <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight break-words">
              {withSar2Red(tSar20('heroTitle'))}
            </h2>
            <div className="space-y-3 sm:space-y-4 text-gray-600 text-sm sm:text-base md:text-lg leading-relaxed text-left sm:text-justify">
              <p>{withSar2Red(tSar20('heroParagraph1'))}</p>
              <p>{withSar2Red(tSar20('heroParagraph2'))}</p>
              <p>{withSar2Red(tSar20('heroParagraph3'))}</p>
              <p>{withSar2Red(tSar20('heroParagraph4'))}</p>
            </div>

            {!hideReadMore && (
              <motion.div
                initial={{ opacity: 0 }}
                animate={inView ? { opacity: 1 } : {}}
                transition={{ duration: 0.6, delay: 0.7 }}
                className="pt-2 sm:pt-4"
              >
                <Link href={`/${locale}/projets/sar-2-0`}>
                  <motion.div
                    className="inline-flex items-center gap-2 text-primary font-semibold text-sm sm:text-base md:text-lg group"
                    whileHover={{ x: 5 }}
                    transition={{ type: "spring", stiffness: 400 }}
                  >
                    <span>{t('readMore')}</span>
                    <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform flex-shrink-0" />
                  </motion.div>
                </Link>
              </motion.div>
            )}
          </motion.div>
        </div>
      </div>
    </section>
  )
}