"use client";

import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight } from "lucide-react";

export default function Hero({ dict, images }: { dict: any, images?: any[] }) {
  const [currentSlide, setCurrentSlide] = useState(0);
  const [direction, setDirection] = useState(1);
  const [isHovered, setIsHovered] = useState(false);

  const slides = images && images.length > 0 ? images.map((img, i) => ({
    id: img.id,
    image: img.url,
    alt: img.title || "K-Creation Slide",
    link: "#products"
  })) : [
    {
      id: 1,
      image: "/uploads/banners/new-banner1.png",
      alt: "K-Creation Solutions",
      link: "#products"
    },
    {
      id: 2,
      image: "/uploads/banners/new-banner2.png",
      alt: "K-Creation Équipements",
      link: "#products"
    }
  ];

  useEffect(() => {
    if (isHovered) return;
    
    const timer = setInterval(() => {
      setDirection(1);
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 6000);
    return () => clearInterval(timer);
  }, [slides.length, isHovered]);

  const nextSlide = () => {
    setDirection(1);
    setCurrentSlide((prev) => (prev + 1) % slides.length);
  };
  
  const prevSlide = () => {
    setDirection(-1);
    setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
  };

  const variants = {
    enter: (direction: number) => ({
      x: direction > 0 ? "100%" : "-100%",
      opacity: 0
    }),
    center: {
      zIndex: 1,
      x: 0,
      opacity: 1
    },
    exit: (direction: number) => ({
      zIndex: 0,
      x: direction < 0 ? "100%" : "-100%",
      opacity: 0
    })
  };

  return (
    <section className="w-full bg-background pt-[72px] md:pt-[84px] mb-8">
      <div 
        className="relative w-full group bg-gray-100 overflow-hidden shadow-sm"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <AnimatePresence initial={false} custom={direction} mode="popLayout">
          <motion.a
            href={slides[currentSlide].link}
            key={currentSlide}
            custom={direction}
            variants={variants}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{
              x: { type: "tween", duration: 0.5, ease: "easeInOut" },
              opacity: { duration: 0.5 }
            }}
            className="block w-full cursor-pointer bg-white"
          >
            <img 
              src={slides[currentSlide].image} 
              alt={slides[currentSlide].alt}
              className="w-full h-auto object-contain block m-0 p-0"
            />
            {/* Subtle gradient at bottom for indicator visibility */}
            <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-black/20 to-transparent pointer-events-none z-0" />
          </motion.a>
        </AnimatePresence>

        {/* Premium Navigation Arrows */}
        <div className="absolute inset-y-0 left-0 flex items-center justify-start px-2 md:px-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform -translate-x-4 group-hover:translate-x-0 z-10">
          <button 
            onClick={(e) => { e.preventDefault(); prevSlide(); }}
            className="w-12 h-12 md:w-16 md:h-16 bg-white/90 hover:bg-white flex items-center justify-center text-brand-black rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.15)] hover:scale-105 transition-all"
          >
            <ChevronLeft className="w-8 h-8 md:w-10 md:h-10 ml-[-2px]" />
          </button>
        </div>

        <div className="absolute inset-y-0 right-0 flex items-center justify-end px-2 md:px-6 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-x-4 group-hover:translate-x-0 z-10">
          <button 
            onClick={(e) => { e.preventDefault(); nextSlide(); }}
            className="w-12 h-12 md:w-16 md:h-16 bg-white/90 hover:bg-white flex items-center justify-center text-brand-black rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.15)] hover:scale-105 transition-all"
          >
            <ChevronRight className="w-8 h-8 md:w-10 md:h-10 mr-[-2px]" />
          </button>
        </div>
        
        {/* Animated Progress Indicators */}
        <div className="absolute bottom-6 left-0 right-0 flex justify-center gap-3 z-10">
          {slides.map((_, idx) => (
            <button
              key={idx}
              onClick={(e) => { 
                e.preventDefault(); 
                setDirection(idx > currentSlide ? 1 : -1);
                setCurrentSlide(idx); 
              }}
              className="relative h-2 rounded-full bg-white/40 overflow-hidden transition-all duration-300 w-16"
            >
              {currentSlide === idx && (
                <motion.div 
                  initial={{ width: 0 }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 6, ease: "linear" }}
                  className="absolute top-0 left-0 h-full bg-brand-accent"
                />
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
