'use client';

import Link from 'next/link';
import React, { useState } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

interface GalleryImage {
    src: string;
    alt?: string;
    delay?: number;
    year: number;
}

export default function HomePhotoGallerySection() {
    const galleryImages: GalleryImage[] = [
        { src: "/assets/img/home/photos-gallery/christmas.webp", delay: 800, year: 2025 },
        { src: "/assets/img/home/photos-gallery/m-g.webp", delay: 1000, year: 2025 },
        { src: "/assets/img/home/photos-gallery/thai-pongal.webp", delay: 1000, year: 2004 },
        { src: "/assets/img/home/photos-gallery/multicultural.webp", delay: 1000, year: 2023 },
        { src: "/assets/img/home/photos-gallery/sports.webp", delay: 1000, year: 2024 },
        { src: "/assets/img/home/photos-gallery/tamil-new-yr.webp", delay: 1000, year: 2022 },

        { src: "/assets/img/home/photos-gallery/kw.webp", delay: 1200, year: 1989 },
        { src: "/assets/img/home/photos-gallery/tamil-heritage.webp", delay: 800, year: 2025 },
        { src: "/assets/img/all-images/memory/memory-img9.png", delay: 1000, year: 2004 },
        { src: "/assets/img/all-images/memory/memory-img4.png", delay: 1000, year: 1989 },
        { src: "/assets/img/all-images/memory/memory-img9.png", delay: 1200, year: 2025 },
    ];

    const [open, setOpen] = useState(false);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [activeTab, setActiveTab] = useState<'All' | number>('All');

    const years = Array.from(new Set(galleryImages.map(img => img.year))).sort((a, b) => b - a);
    const tabs: (number | 'All')[] = ['All', ...years];

    const filteredImages = activeTab === 'All'
        ? galleryImages
        : galleryImages.filter(img => img.year === activeTab);

    const handleImageClick = (index: number) => {
        const actualIndex = galleryImages.findIndex(img => img.src === filteredImages[index].src);
        setCurrentIndex(actualIndex);
        setOpen(true);
    };

    return (
        <>
            <div className="bloginner-section-area sp1">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 m-auto">
                            <div className="event2-header heading5 space-margin60">
                                <h2 className="text-anime-style-3">Photos Gallery</h2>

                                {/* Tabs */}
                                <div className="d-flex justify-content-start gap-3 mt-4 flex-wrap">
                                    {tabs.map((tab, i) => (
                                        <button
                                            key={i}
                                            className={`btn btn-sm gallery-btn ${activeTab === tab ? 'btn-primary' : 'btn-outline-primary'}`}
                                            onClick={() => setActiveTab(tab)}
                                        >
                                            {tab === 'All' ? 'All' : tab}
                                        </button>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='row gx-5'>
                        <div className='col-lg-10'>
                            <div className="row mt-4">
                                {filteredImages.slice(0, 8).map((img, index) => (
                                    <div
                                        key={index}
                                        className="col-lg-3 col-md-6"
                                        data-aos="zoom-in"
                                        data-aos-duration={img.delay || 1000}
                                    >
                                        <div className="blog4-boxarea">
                                            <div
                                                className="img1"
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => handleImageClick(index)}
                                            >
                                                <img
                                                    src={img.src}
                                                    alt={img.alt || `gallery-${index}`}
                                                    loading="lazy"
                                                    style={{ width: '100%', height: 'auto' }}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                ))}
                                {filteredImages.length === 0 && (
                                    <div className="col-12 text-center mt-5">
                                        <p className="text-muted">No images found for selected year.</p>
                                    </div>
                                )}
                            </div>
                        </div>
                        <div className='col-lg-2'>
                            <div className="memory-boxarea pl-3">

                                <div className="img1" data-aos="zoom-in" data-aos-duration={1000} >
                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt="" className='mb-5' />
                                    <img src="https://tamilculturewaterloo.org/wp-content/uploads/2025/06/2025KWFestposter-1-202x300.jpg" alt=""/>

                                </div>
                            </div>
                        </div>
                        <div className='col-lg-12'>
                            <div className="space32" />
                            <div className="btn-area1 text-center" data-aos="fade-left" data-aos-duration={1200}>
                                <Link href="/event-schedule" className="vl-btn3">know More</Link>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            {/* Lightbox */}
            <Lightbox
                open={open}
                close={() => setOpen(false)}
                index={currentIndex}
                slides={galleryImages.map((img) => ({ src: img.src }))}
            />
        </>
    );
}