"use client";

import React, { useEffect, useState } from "react";
import { getGallery } from "@/app/lib/api";
import { MdClose, MdArrowBack, MdArrowForward } from "react-icons/md";
import Link from "next/link";
import { GiFlowerPot } from "react-icons/gi";

const Gallery = () => {
    const [galleryItems, setGalleryItems] = useState([]);
    const [activeIndex, setActiveIndex] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const data = await getGallery();
            setGalleryItems(data || []);
        };
        fetchData();
    }, []);

    const openModal = (index) => setActiveIndex(index);
    const closeModal = () => setActiveIndex(null);

    const nextImage = () => {
        setActiveIndex((prev) =>
            prev === galleryItems.length - 1 ? 0 : prev + 1
        );
    };

    const prevImage = () => {
        setActiveIndex((prev) =>
            prev === 0 ? galleryItems.length - 1 : prev - 1
        );
    };

    // Keyboard support
    useEffect(() => {
        const handleKey = (e) => {
            if (activeIndex === null) return;
            if (e.key === "Escape") closeModal();
            if (e.key === "ArrowRight") nextImage();
            if (e.key === "ArrowLeft") prevImage();
        };

        window.addEventListener("keydown", handleKey);
        return () => window.removeEventListener("keydown", handleKey);
    }, [activeIndex, galleryItems]);

    return (
        <div className="py-16">
            <div className="container">
                <div className="mb-2">
                    <p className="flex items-center gap-3 text-green-700 font-semibold text-sm uppercase tracking-wide mx-auto w-fit">
                        <span className="h-[1px] w-8 bg-green-300"></span>
                        <GiFlowerPot className="text-green-600 animate-bounce" size={18} />
                        Gallery
                        <GiFlowerPot className="text-green-600 animate-bounce" size={18} />
                        <span className="h-[1px] w-8 bg-green-300"></span>
                    </p>
                    <p className="text-2xl lg:text-3xl font-semibold text-gray-800 mb-6 text-center">
                        Explore Our Stunning Artificial Flower Gallery
                    </p>
                </div>
                <div className="grid lg:grid-cols-6 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-4">
                    {galleryItems.slice(0, 18).map((item, index) => (
                        <div
                            key={index}
                            onClick={() => openModal(index)}
                            className="relative group overflow-hidden rounded-lg cursor-pointer"
                        >
                            <img
                                src={item.img}
                                alt={item.name}
                                title={item.name}
                                className="w-full h-56 object-cover transition-transform duration-300 group-hover:scale-105"
                            />
                            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition flex items-center justify-center">
                                <p className="text-white text-lg font-semibold">
                                    {item.name}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>

                {
                    galleryItems.length > 12 && (
                        <>
                            <p className="text-center mt-8 text-gray-600">
                                And {galleryItems.length - 12} more...
                            </p>
                            <Link href="/" className="block mt-4 text-center text-green-600 font-semibold hover:underline">
                                View Full Gallery
                            </Link>
                        </>
                    )
                }

            </div>

            {/* MODAL */}
            {activeIndex !== null && (
                <div className="fixed inset-0 bg-black/80 z-50 flex items-center justify-center">

                    {/* Close Button */}
                    <button
                        onClick={closeModal}
                        className="absolute top-5 right-5 text-white text-3xl cursor-pointer"
                    >
                        <MdClose />
                    </button>

                    {/* Prev Button */}
                    <button
                        onClick={prevImage}
                        className="absolute left-5 text-white text-4xl cursor-pointer"
                    >
                        <MdArrowBack />
                    </button>

                    {/* Image */}
                    <div className="max-w-5xl w-full px-4">
                        <img
                            src={galleryItems[activeIndex]?.img}
                            alt=""
                            className="w-full max-h-[80vh] object-contain rounded-lg"
                        />
                    </div>

                    {/* Next Button */}
                    <button
                        onClick={nextImage}
                        className="absolute right-5 text-white text-4xl cursor-pointer"
                    >
                        <MdArrowForward />
                    </button>
                </div>
            )}
        </div>
    );
};

export default Gallery;