export interface GalleryImage {
    id: number;
    src: string;
    alt: string;
}

const imagePath = "/gallery/";

const galleryData: GalleryImage[] = [
    { id: 1, src: imagePath + '1.webp', alt: 'Canyon de Grosdar - Toboggan naturel dans le Jura' },
    { id: 2, src: imagePath + '2.webp', alt: 'Descente en rappel au canyon de Coiserette - Saint-Claude Jura' },
    { id: 3, src: imagePath + '3.webp', alt: 'Saut dans les vasques du canyon de Chaley - Ain' },
    { id: 4, src: imagePath + '4.webp', alt: 'Canyon de Rhéby - Aventure canyoning dans l\'Ain' },
    { id: 5, src: imagePath + '5.webp', alt: 'Toboggan aquatique naturel - Région des Lacs Jura' },
    { id: 6, src: imagePath + '6.webp', alt: 'Canyon de Malvaux - Initiation canyoning Jura' },
    { id: 7, src: imagePath + '7.webp', alt: 'Descente en rappel cascade - Massif du Jura' },
    { id: 8, src: imagePath + '8.webp', alt: 'Canyon de Langouette - Parcours aventure Jura' },
    { id: 9, src: imagePath + '9.webp', alt: 'Piscine naturelle - Gorges de l\'Ain' },
    { id: 10, src: imagePath + '10.webp', alt: 'Groupe canyoning - Saint-Claude Jura' },
    { id: 11, src: imagePath + '11.webp', alt: 'Vue panoramique - Canyons du Jura et de l\'Ain' },
];

import { useState } from 'react';
import { ImageModal } from '@/components/global/fullscreen-image';
import OptimizedImage from '../global/optimized-image';

export interface GalleryImage {
    id: number;
    src: string;
    alt: string;
}

export default function Gallery() {
    const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);
    const [showFullGallery, setShowFullGallery] = useState(false);

    const previewImages = galleryData.slice(0, 3);
    const remainingImagesCount = galleryData.length - 3;

    const getCellSize = (index: number, totalImages: number) => {
        let className = "";
        
        if (index === 0) {
            className = "col-span-2 row-span-2";
        }
        else if (totalImages >= 5) {
            switch (index) {
                case Math.floor(totalImages / 2):
                    className = "row-span-2";
                    break;
                case totalImages - 2:
                    className = "col-span-2";
                    break;
                default:
                    className = "";
            }
        }
        
        return className;
    };

    const handleNext = () => {
        if (!selectedImage) return;
        const currentIndex = galleryData.findIndex(img => img.id === selectedImage.id);
        const nextIndex = (currentIndex + 1) % galleryData.length;
        setSelectedImage(galleryData[nextIndex]);
    };

    const handlePrevious = () => {
        if (!selectedImage) return;
        const currentIndex = galleryData.findIndex(img => img.id === selectedImage.id);
        const previousIndex = (currentIndex - 1 + galleryData.length) % galleryData.length;
        setSelectedImage(galleryData[previousIndex]);
    };

    return (
        <section className="section-padding max-w-7xl mx-auto">
            <div>
                <h1 className="main-title">
                    Galerie Photos<br />Canyoning Jura & Ain
                </h1>
                <div className="flex justify-center">
                    <p className="main-description">
                        Découvrez en images nos sorties canyoning à Saint-Claude, Ambérieu-en-Bugey et dans la Région des Lacs. 
                        Toboggans, sauts et rappels dans les plus beaux canyons du Jura et de l&apos;Ain !
                    </p>
                </div>
            </div>
            
            <div className="p-4 md:p-8">
                {/* Preview des 3 premières images */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    {previewImages.map((image, index) => (
                        <OptimizedImage 
                            key={image.id}
                            src={image.src}
                            alt={image.alt}
                            containerClassName="relative overflow-hidden rounded-2xl shadow-lg h-[320px]"
                            className="object-cover w-full h-full transition-transform duration-300 hover:scale-105 hover:cursor-pointer rounded-2xl"
                            onClick={() => setSelectedImage(image)}
                            style={{ aspectRatio: '1080/920' }}
                        />
                    ))}
                </div>

                {/* Bouton pour afficher le reste */}
                {!showFullGallery ? (
                    <div className="flex flex-col items-center py-8">
                        <div className="text-center mb-6">
                            <p className="text-lg text-muted-foreground mb-2">
                                Et encore {remainingImagesCount} photos à découvrir ! 🎉
                            </p>
                            <p className="text-sm text-muted-foreground">
                                Cliquez pour voir toute la collection
                            </p>
                        </div>
                        <button
                            onClick={() => setShowFullGallery(true)}
                            className="px-8 py-4 bg-primary text-primary-foreground rounded-xl font-semibold text-lg hover:bg-primary/90 transition-all duration-300 transform hover:scale-105 shadow-lg"
                        >
                            📸 Découvrir les {remainingImagesCount} autres photos
                        </button>
                    </div>
                ) : (
                    /* Galerie complète */
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-[320px]">
                        {galleryData.map((image, index) => (
                            <OptimizedImage 
                                key={image.id}
                                src={image.src}
                                alt={image.alt}
                                containerClassName={`relative overflow-hidden ${getCellSize(index, galleryData.length)} rounded-2xl shadow-lg`}
                                className="object-cover w-full h-full transition-transform duration-300 hover:scale-105 hover:cursor-pointer rounded-2xl"
                                onClick={() => setSelectedImage(image)}
                                style={{ aspectRatio: '1080/920' }}
                            />
                        ))}
                    </div>
                )}
            </div>
            
            <ImageModal
                image={{
                    src: selectedImage?.src || '',
                    alt: selectedImage?.alt || '',
                }}
                isOpen={!!selectedImage}
                onClose={() => setSelectedImage(null)}
                onNext={handleNext}
                onPrevious={handlePrevious}
            />
        </section>
    );
};
