'use client';

import { ChevronLeft, ChevronRight, Play } from 'lucide-react';
import { useState } from 'react';

interface Video {
    id: string;
    title: string;
}

interface VerticalVideoScrollProps {
    videos: Video[];
}

export default function VerticalVideoScroll({ videos }: VerticalVideoScrollProps) {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [isPlaying, setIsPlaying] = useState<{ [key: number]: boolean }>({});

    const goToSlide = (index: number) => {
        setCurrentIndex(index);
        setIsPlaying({});
    };

    const nextSlide = () => {
        setCurrentIndex((prev) => (prev + 1) % videos.length);
        setIsPlaying({});
    };

    const prevSlide = () => {
        setCurrentIndex((prev) => (prev - 1 + videos.length) % videos.length);
        setIsPlaying({});
    };

    const handlePlayToggle = (index: number) => {
        setIsPlaying(prev => ({
            ...prev,
            [index]: !prev[index]
        }));
    };

    if (!videos || videos.length === 0) {
        return <div className="w-full h-full bg-neutral-900 flex items-center justify-center text-white">No videos</div>;
    }

    return (
        <>
            {/* Video Container */}
            <div className="relative w-full h-full bg-black rounded-2xl overflow-hidden">
                {/* Slides */}
                {videos.map((video, index) => (
                    <div
                        key={video.id}
                        className="absolute inset-0"
                        style={{
                            opacity: currentIndex === index ? 1 : 0,
                            zIndex: currentIndex === index ? 10 : 0,
                            pointerEvents: currentIndex === index ? 'auto' : 'none'
                        }}
                    >
                        {/* Video Content */}
                        {isPlaying[index] ? (
                            <iframe
                                className="w-full h-full"
                                src={`https://www.youtube.com/embed/${video.id}?autoplay=1&controls=1&modestbranding=1&rel=0`}
                                title={video.title}
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                allowFullScreen
                            />
                        ) : (
                            <>
                                {/* Thumbnail */}
                                <img
                                    src={`https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`}
                                    alt={video.title}
                                    className="w-full h-full object-cover"
                                />

                                {/* Gradient Overlay */}
                                <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60" />

                                {/* Play Button */}
                                <button
                                    onClick={() => handlePlayToggle(index)}
                                    className="absolute inset-0 flex items-center justify-center z-10"
                                >
                                    <div className="w-16 h-16 md:w-20 md:h-20 bg-red-600/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-2xl hover:bg-red-500 transition-colors">
                                        <Play className="w-8 h-8 md:w-10 md:h-10 text-white ml-1" fill="currentColor" />
                                    </div>
                                </button>

                                {/* Video Info */}
                                <div className="absolute bottom-0 left-0 right-0 p-6 z-20">
                                    <div>
                                        <h3 className="text-xl md:text-2xl font-bold text-white mb-2 drop-shadow-lg">
                                            {video.title}
                                        </h3>
                                        <p className="text-sm text-white/90 drop-shadow-lg">
                                            Behind the scenes - V_LOG MEDIA
                                        </p>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                ))}

                {/* Navigation Arrows - Inside Video */}
                {videos.length > 1 && (
                    <>
                        <button
                            onClick={prevSlide}
                            className="absolute left-4 top-1/2 -translate-y-1/2 z-30 w-10 h-10 bg-black/30 backdrop-blur-sm hover:bg-black/50 rounded-full flex items-center justify-center transition-all duration-300 group"
                            aria-label="Previous video"
                        >
                            <ChevronLeft className="w-6 h-6 text-white group-hover:scale-110 transition-transform" />
                        </button>
                        <button
                            onClick={nextSlide}
                            className="absolute right-4 top-1/2 -translate-y-1/2 z-30 w-10 h-10 bg-black/30 backdrop-blur-sm hover:bg-black/50 rounded-full flex items-center justify-center transition-all duration-300 group"
                            aria-label="Next video"
                        >
                            <ChevronRight className="w-6 h-6 text-white group-hover:scale-110 transition-transform" />
                        </button>
                    </>
                )}

                {/* Pagination Dots - Inside Video at Top */}
                {videos.length > 1 && (
                    <div className="absolute top-4 left-0 right-0 flex justify-center gap-2 z-30">
                        {videos.map((_, index) => (
                            <button
                                key={index}
                                onClick={() => goToSlide(index)}
                                className="transition-all duration-300"
                                aria-label={`Go to video ${index + 1}`}
                            >
                                <div
                                    className={`rounded-full transition-all duration-300 ${index === currentIndex
                                            ? 'w-8 h-2.5 bg-gradient-to-r from-red-600 to-orange-500 shadow-lg'
                                            : 'w-2.5 h-2.5 bg-white/50 hover:bg-white/70'
                                        }`}
                                />
                            </button>
                        ))}
                    </div>
                )}
            </div>
        </>
    );
}
