'use client';

import Image from 'next/image';
import { useState, useEffect, useCallback } from 'react';

interface HeroImage {
  src: string;
  alt: string;
}

interface HeroCarouselProps {
  images: HeroImage[];
  interval?: number; // Auto-advance interval in ms (default 2000 like original)
}

export function HeroCarousel({ images, interval = 2000 }: HeroCarouselProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [nextIndex, setNextIndex] = useState<number | null>(null);

  const goToNext = useCallback(() => {
    const next = (currentIndex + 1) % images.length;
    setNextIndex(next);
    // After transition, update current
    setTimeout(() => {
      setCurrentIndex(next);
      setNextIndex(null);
    }, 500);
  }, [currentIndex, images.length]);

  const goToSlide = useCallback((index: number) => {
    if (index !== currentIndex && nextIndex === null) {
      setNextIndex(index);
      setTimeout(() => {
        setCurrentIndex(index);
        setNextIndex(null);
      }, 500);
    }
  }, [currentIndex, nextIndex]);

  // Auto-advance
  useEffect(() => {
    const timer = setInterval(goToNext, interval);
    return () => clearInterval(timer);
  }, [goToNext, interval]);

  const goToPrev = useCallback(() => {
    const prev = (currentIndex - 1 + images.length) % images.length;
    setNextIndex(prev);
    setTimeout(() => {
      setCurrentIndex(prev);
      setNextIndex(null);
    }, 500);
  }, [currentIndex, images.length]);

  if (images.length === 0) return null;

  return (
    <div className="relative w-full h-screen bg-black overflow-hidden">
      {/* Images - stacked with fade transition */}
      {images.map((image, index) => (
        <div
          key={image.src}
          className={`absolute inset-0 transition-opacity duration-500 ease-in-out ${
            index === currentIndex
              ? nextIndex !== null
                ? 'opacity-0'
                : 'opacity-100'
              : index === nextIndex
                ? 'opacity-100'
                : 'opacity-0'
          }`}
          style={{ zIndex: index === nextIndex ? 2 : index === currentIndex ? 1 : 0 }}
        >
          <Image
            src={image.src}
            alt={image.alt}
            fill
            className="object-cover"
            sizes="100vw"
            priority={index === 0}
          />
        </div>
      ))}

      {/* Navigation Arrows - matching Squarespace style */}
      <button
        onClick={goToPrev}
        className="absolute left-6 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center text-white/70 hover:text-white transition-colors"
        aria-label="Previous slide"
      >
        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button
        onClick={goToNext}
        className="absolute right-6 top-1/2 -translate-y-1/2 z-10 w-12 h-12 flex items-center justify-center text-white/70 hover:text-white transition-colors"
        aria-label="Next slide"
      >
        <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
        </svg>
      </button>

      {/* Line indicators at bottom - matching Squarespace style */}
      <div className="absolute bottom-8 left-0 right-0 flex justify-center gap-2 z-10">
        {images.map((_, index) => (
          <button
            key={index}
            onClick={() => goToSlide(index)}
            className={`h-0.5 transition-all duration-300 ${
              index === currentIndex
                ? 'bg-white w-8'
                : 'bg-white/40 hover:bg-white/60 w-8'
            }`}
            aria-label={`Go to slide ${index + 1}`}
          />
        ))}
      </div>
    </div>
  );
}
