"use client";

import { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { motion, AnimatePresence } from "framer-motion";

interface ProductImageGalleryProps {
  images: string[];
  alt: string;
  autoplay?: boolean;
  interval?: number; // in milliseconds
}

export default function ProductImageGallery({
  images,
  alt,
  autoplay = true,
  interval = 5000, // Default to 5 seconds
}: ProductImageGalleryProps) {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const [isPaused, setIsPaused] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [timerId, setTimerId] = useState<NodeJS.Timeout | null>(null);

  // If no images are provided, show a placeholder
  if (!images || images.length === 0) {
    return (
      <div className="relative aspect-square w-full max-w-lg mx-auto">
        <Image
          src="/placeholder.svg"
          alt={alt}
          fill
          className="object-contain"
          sizes="(max-width: 768px) 100vw, 50vw"
        />
      </div>
    );
  }

  // Auto-slideshow effect
  useEffect(() => {
    if (!autoplay || isPaused || images.length <= 1) {
      if (timerId) {
        clearInterval(timerId);
        setTimerId(null);
      }
      return;
    }

    if (!timerId) {
      const timer = setInterval(() => {
        setCurrentImageIndex((prev) =>
          prev === images.length - 1 ? 0 : prev + 1,
        );
      }, interval);
      setTimerId(timer);
    }

    return () => {
      if (timerId) {
        clearInterval(timerId);
      }
    };
  }, [autoplay, interval, images.length, isPaused, timerId]);

  const handlePrevious = () => {
    setCurrentImageIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const handleNext = () => {
    setCurrentImageIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
  };

  const handleThumbnailClick = (index: number) => {
    setCurrentImageIndex(index);
  };

  return (
    <div
      className="space-y-4"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
      ref={containerRef}
    >
      {/* Main image with navigation arrows */}
      <div className="relative aspect-square w-full max-w-lg mx-auto bg-white rounded-lg overflow-hidden border border-gray-200">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentImageIndex}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
            className="absolute inset-0"
          >
            <Image
              src={images[currentImageIndex] || "/placeholder.svg"}
              alt={`${alt} - Image ${currentImageIndex + 1}`}
              fill
              className="object-contain"
              sizes="(max-width: 768px) 100vw, 50vw"
            />
          </motion.div>
        </AnimatePresence>

        {images.length > 1 && (
          <>
            <button
              onClick={handlePrevious}
              className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-md transition-all z-10"
              aria-label="Previous image"
            >
              <ChevronLeft className="h-5 w-5" />
            </button>
            <button
              onClick={handleNext}
              className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white rounded-full p-2 shadow-md transition-all z-10"
              aria-label="Next image"
            >
              <ChevronRight className="h-5 w-5" />
            </button>

            {/* Progress indicator */}
            <div className="absolute bottom-2 left-0 right-0 flex justify-center gap-1.5 z-10">
              {images.map((_, index) => (
                <button
                  key={`indicator-${index}`}
                  onClick={() => handleThumbnailClick(index)}
                  className={cn(
                    "w-2 h-2 rounded-full transition-all",
                    currentImageIndex === index
                      ? "bg-red-600 w-4"
                      : "bg-gray-300 hover:bg-gray-400",
                  )}
                  aria-label={`Go to image ${index + 1}`}
                  aria-current={currentImageIndex === index}
                />
              ))}
            </div>
          </>
        )}
      </div>

      {/* Thumbnails */}
      {images.length > 1 && (
        <div className="flex overflow-x-auto gap-2 pb-2 max-w-lg mx-auto">
          {images.map((image, index) => (
            <motion.button
              key={index}
              onClick={() => handleThumbnailClick(index)}
              className={cn(
                "relative w-16 h-16 flex-shrink-0 border-2 rounded-md overflow-hidden transition-all",
                currentImageIndex === index
                  ? "border-red-600"
                  : "border-gray-200 hover:border-gray-300",
              )}
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              aria-label={`View image ${index + 1}`}
              aria-current={currentImageIndex === index}
            >
              <Image
                src={image || "/placeholder.svg"}
                alt={`${alt} thumbnail ${index + 1}`}
                fill
                className="object-cover"
              />
            </motion.button>
          ))}
        </div>
      )}
    </div>
  );
}