import { useState, useEffect, useCallback } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import gallery1 from "@/assets/gallery-1.jpg";
import gallery2 from "@/assets/gallery-2.jpg";
import gallery3 from "@/assets/gallery-3.jpg";
import gallery4 from "@/assets/gallery-4.jpg";
import gallery5 from "@/assets/gallery-5.jpg";
import gallery6 from "@/assets/gallery-6.jpg";
import gallery7 from "@/assets/gallery-7.jpg";
import gallery8 from "@/assets/gallery-8.jpg";
import gallery9 from "@/assets/gallery-9.jpg";
import gallery10 from "@/assets/gallery-10.jpg";
import gallery11 from "@/assets/gallery-11.jpg";
import gallery12 from "@/assets/gallery-12.jpg";
import gallery13 from "@/assets/gallery-13.jpg";
import gallery14 from "@/assets/gallery-14.jpg";
import gallery15 from "@/assets/gallery-15.jpg";
import gallery16 from "@/assets/gallery-16.jpg";

const photos = [
  { src: gallery1, alt: "Crianças brincando no espaço" },
  { src: gallery2, alt: "Mesa decorada para festa" },
  { src: gallery3, alt: "Área de brinquedos" },
  { src: gallery4, alt: "Família celebrando" },
  { src: gallery7, alt: "Equipe de recreação animando" },
  { src: gallery8, alt: "Crianças no escorregador" },
  { src: gallery9, alt: "Diversão no brinquedo Tornado" },
  { src: gallery10, alt: "Pai e filho se divertindo" },
  { src: gallery11, alt: "Crianças jogando videogame" },
  { src: gallery12, alt: "Crianças no simulador de corrida" },
  { src: gallery13, alt: "Família dançando na festa" },
  { src: gallery14, alt: "Brinquedo radical de cabeça para baixo" },
  { src: gallery15, alt: "Recepção da equipe aos convidados" },
];

const AUTOPLAY_INTERVAL = 7000; // 7 segundos

export const PhotoGallery = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [resetKey, setResetKey] = useState(0);

  const goToNext = useCallback((manual: boolean = false) => {
    setCurrentIndex((prev) => (prev === photos.length - 1 ? 0 : prev + 1));
    if (manual) {
      setResetKey((prev) => prev + 1);
    }
  }, []);

  const goToPrevious = () => {
    setCurrentIndex((prev) => (prev === 0 ? photos.length - 1 : prev - 1));
    setResetKey((prev) => prev + 1);
  };

  const goToSlide = (index: number) => {
    setCurrentIndex(index);
    setResetKey((prev) => prev + 1);
  };

  // Autoplay timer - resets when resetKey changes
  useEffect(() => {
    const timer = setInterval(goToNext, AUTOPLAY_INTERVAL);
    return () => clearInterval(timer);
  }, [goToNext, resetKey]);

  return (
    <section className="py-16 md:py-24 bg-secondary">
      <div className="container mx-auto px-6">
        {/* Section Title */}
        <div className="text-center mb-12 animate-fade-in">
          <h2 className="font-display font-bold text-3xl md:text-4xl text-foreground mb-4">
            AQUI, A DIVERSÃO É GARANTIDA!
          </h2>
          <p className="text-muted-foreground text-lg whitespace-nowrap">
            Onde a alegria das crianças encontra a tranquilidade dos pais
          </p>
        </div>

        {/* Carousel */}
        <div className="relative max-w-4xl mx-auto">
          {/* Main Image - Sliding Container */}
          <div className="relative aspect-[4/3] md:aspect-[16/10] rounded-3xl overflow-hidden shadow-card bg-muted">
            <div 
              className="flex h-full transition-transform duration-500 ease-out"
              style={{ transform: `translateX(-${currentIndex * 100}%)` }}
            >
              {photos.map((photo, index) => (
                <img
                  key={index}
                  src={photo.src}
                  alt={photo.alt}
                  className="w-full h-full object-cover flex-shrink-0"
                />
              ))}
            </div>

            {/* Navigation Arrows */}
            <button
              onClick={goToPrevious}
              className="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/90 hover:bg-white shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110"
              aria-label="Foto anterior"
            >
              <ChevronLeft className="w-6 h-6 text-foreground" />
            </button>

            <button
              onClick={() => goToNext(true)}
              className="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-white/90 hover:bg-white shadow-lg flex items-center justify-center transition-all duration-200 hover:scale-110"
              aria-label="Próxima foto"
            >
              <ChevronRight className="w-6 h-6 text-foreground" />
            </button>
          </div>

          {/* Dots Indicator */}
          <div className="flex justify-center gap-3 mt-6">
            {photos.map((_, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`w-3 h-3 rounded-full transition-all duration-300 ${
                  index === currentIndex
                    ? "bg-primary w-8"
                    : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
                }`}
                aria-label={`Ver foto ${index + 1}`}
              />
            ))}
          </div>

          {/* Thumbnail Preview */}
          <div className="hidden md:flex justify-center gap-4 mt-8">
            {photos.map((photo, index) => (
              <button
                key={index}
                onClick={() => goToSlide(index)}
                className={`relative w-20 h-20 rounded-xl overflow-hidden transition-all duration-300 ${
                  index === currentIndex
                    ? "ring-4 ring-primary ring-offset-2 scale-110"
                    : "opacity-60 hover:opacity-100"
                }`}
              >
                <img
                  src={photo.src}
                  alt={photo.alt}
                  className="w-full h-full object-cover"
                />
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};
