'use client';

import Layout from '@/components/layout/Layout';
import axios from 'axios';
import Link from 'next/link';
import { useSearchParams, useRouter } from 'next/navigation';
import { useEffect, useState, useCallback } from 'react';
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

interface EventImage {
  id: string;
  src: string;
  title?: string;
  description?: string;
}

export default function SingleGallery() {
  const searchParams = useSearchParams();
  const eventId = searchParams.get('id');
  const router = useRouter();

  const [eventImages, setEventImages] = useState<EventImage[]>([]);
  const [open, setOpen] = useState(false);
  const [currentIndex, setCurrentIndex] = useState(0);

  const getEventGallery = useCallback(async () => {
    try {
      const res = await axios.get(
        `https://api.tamilculturewaterloo.org/api/event-images/event/${eventId}`
      );
      const formatted = res.data?.data?.map((img: any) => ({
        id: img.id,
        src: img.imageurl,
        title: img?.title || '',
        description: img?.description || '',
      }));
      setEventImages(formatted || []);
    } catch (error) {
      console.log("Error fetching event images", error);
    }
  }, [eventId]);

  useEffect(() => {
    if (eventId) {
      getEventGallery();
    }
  }, [eventId, getEventGallery]);

  const handleImageClick = (index: number) => {
    setCurrentIndex(index);
    setOpen(true);
  };

  return (
    <Layout headerStyle={1} footerStyle={1}>
      {/* Header Section */}
      <div
        className="inner-page-header"
        style={{ backgroundImage: 'url(/assets/img/event/gallery/gallery.webp)' }}
      >
        <div className="container">
          <div className="row">
            <div className="col-lg-12 m-auto">
              <div className="heading1">
                <h1>Recent Memories</h1>
                <div className="space20" />
                <Link href="/">
                  Home <i className="fa-solid fa-angle-right" /> <span>Recent Memories</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Gallery Section */}
      <div className="bloginner-section-area sp4">
        <div className="container">
          <div className="row">
            <div className="col-lg-12 m-auto">
              <div className="event2-header heading5 space-margin60 d-flex justify-content-between align-items-center">
                <h2 className="text-anime-style-3 mb-0">Photos Gallery</h2>
                <button
                  onClick={() => router.back()}
                  className="vl-btn3"
                  style={{ padding: '10px 16px' }}
                >
                  Back
                </button>
              </div>
            </div>
          </div>

          <div className="row gx-5">
            <div className="col-lg-12">
              <div className="row mt-4">
                {eventImages.map((image, index) => (
                  <div
                    key={image.id}
                    className="col-lg-3 col-md-6 mb-4"
                    data-aos="zoom-in"
                    data-aos-duration={1000}
                  >
                    <div className="blog4-boxarea">
                      <div
                        className="img1"
                        style={{ cursor: 'pointer' }}
                        onClick={() => handleImageClick(index)}
                      >
                        <img
                          src={image.src}
                          alt={image.title || `gallery-${index}`}
                          loading="lazy"
                          style={{ width: '100%', height: 'auto' }}
                        />
                      </div>
                    </div>
                  </div>
                ))}

                {eventImages.length === 0 && (
                  <div className="col-12 text-center mt-5">
                    <p className="text-muted">No images found for this event.</p>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>

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