// import { ImageType } from "@/types/home/image";
// import { useEffect, useState } from "react";


// const directions = ["slide-left", "slide-right", "slide-top", "slide-bottom"];

// function randomDirection() {
//     return directions[Math.floor(Math.random() * directions.length)];
// }

// function SlideImage({ src, alt, delay = 0 }: { src: string; alt?: string; delay?: number; }) {

//     const [current, setCurrent] = useState(src);
//     const [incoming, setIncoming] = useState<string | null>(null);
//     const [direction, setDirection] = useState("slide-right");

//     useEffect(() => {
//         if (src !== current) {
//             const dir = randomDirection();
//             setDirection(dir);

//             const start = setTimeout(() => {
//                 setIncoming(src);
//             }, delay);

//             const finish = setTimeout(() => {
//                 setCurrent(src);
//                 setIncoming(null);
//             }, delay + 600);

//             return () => {
//                 clearTimeout(start);
//                 clearTimeout(finish);
//             };
//         }
//     }, [src, current, delay]);

//     return (
//         <div className="relative w-full h-full overflow-hidden">

//             {/* current image */}
//             <img
//                 src={current}
//                 alt={alt}
//                 className="absolute inset-0 w-full h-full object-cover"
//             />

//             {/* sliding image */}
//             {incoming && (
//                 <img
//                     src={incoming}
//                     alt={alt}
//                     className={`absolute inset-0 w-full h-full object-cover ${direction}`}
//                 />
//             )}

//         </div>
//     );
// }

// export default function RoomImageCarousel({ images }: { images: ImageType[] }) {

//     const [index, setIndex] = useState(0);

//     const visible = [
//         images[index % images.length],
//         images[(index + 1) % images.length],
//         images[(index + 2) % images.length],
//     ];

//     useEffect(() => {
//         const timer = setInterval(() => {
//             setIndex((i) => (i + 1) % images.length);
//         }, 4000);

//         return () => clearInterval(timer);
//     }, [images.length]);

//     if (images.length <= 0) return

//     return (
//         <div className="hidden sm:grid grid-cols-4 sm:grid-cols-3 grid-rows-3 sm:grid-rows-2 gap-2 h-90 w-full">

//             <div className="col-span-4 sm:col-span-2 row-span-2 rounded-none overflow-hidden w-full">
//                 <SlideImage src={visible[0].url} alt={visible[0].alt_text} delay={0} />
//             </div>

//             <div className="col-span-2 sm:col-span-1 rounded-none overflow-hidden w-full">
//                 <SlideImage src={visible[1].url} alt={visible[1].alt_text} delay={1500} />
//             </div>

//             <div className="col-span-2 sm:col-span-1 rounded-none overflow-hidden w-full">
//                 <SlideImage src={visible[2].url} alt={visible[2].alt_text} delay={500} />
//             </div>

//         </div>
//     );
// }


import { useEffect, useState } from "react";
import { ImageType } from "@/types/home/image";
import FullscreenImageCarousel from "@/components/core/FullscreenImageCarousel";

const directions = ["slide-left", "slide-right", "slide-top", "slide-bottom"];

function randomDirection() {
    return directions[Math.floor(Math.random() * directions.length)];
}

/* ---------------- SLIDE IMAGE ---------------- */
function SlideImage({
    src,
    alt,
    delay = 0,
    onClick,
}: {
    src: string;
    alt?: string;
    delay?: number;
    onClick?: () => void;
}) {
    const [current, setCurrent] = useState(src);
    const [incoming, setIncoming] = useState<string | null>(null);
    const [direction, setDirection] = useState("slide-right");

    useEffect(() => {
        if (src !== current) {
            setDirection(randomDirection());

            const start = setTimeout(() => {
                setIncoming(src);
            }, delay);

            const finish = setTimeout(() => {
                setCurrent(src);
                setIncoming(null);
            }, delay + 600);

            return () => {
                clearTimeout(start);
                clearTimeout(finish);
            };
        }
    }, [src, current, delay]);

    return (
        <div className="relative w-full h-full overflow-hidden">
            <img
                src={current}
                alt={alt}
                onClick={onClick}
                className="absolute inset-0 w-full h-full object-cover cursor-pointer"
            />

            {incoming && (
                <img
                    src={incoming}
                    alt={alt}
                    className={`absolute inset-0 w-full h-full object-cover ${direction}`}
                />
            )}
        </div>
    );
}

/* ---------------- MAIN ---------------- */
export default function RoomImageCarousel({
    images,
}: {
    images: ImageType[];
}) {
    const [index, setIndex] = useState(0);
    const [open, setOpen] = useState(false);
    const [activeIndex, setActiveIndex] = useState(0);

    if (!images || images.length === 0) return null;

    const safe = (i: number) => i % images.length;

    const get = (i: number) => images[safe(i)];

    const visible = [
        get(index),
        images.length > 1 ? get(index + 1) : get(index),
        images.length > 2 ? get(index + 2) : get(index),
    ];

    /* GRID AUTO SLIDE */
    useEffect(() => {
        if (images.length <= 1) return;

        const timer = setInterval(() => {
            setIndex((i) => safe(i + 1));
        }, 4000);

        return () => clearInterval(timer);
    }, [images.length]);

    const openImage = (i: number) => {
        setActiveIndex(safe(i));
        setOpen(true);
    };

    return (
        <>
            {/* GRID */}
            <div className="hidden sm:grid grid-cols-4 sm:grid-cols-3 grid-rows-3 sm:grid-rows-2 gap-2 h-100 w-full">

                <div className="col-span-4 sm:col-span-2 row-span-2 overflow-hidden">
                    <SlideImage
                        src={visible[0].url}
                        alt={visible[0].alt_text}
                        onClick={() => openImage(index)}
                    />
                </div>

                <div className="col-span-2 sm:col-span-1 overflow-hidden">
                    <SlideImage
                        src={visible[1].url}
                        alt={visible[1].alt_text}
                        onClick={() => openImage(index + 1)}
                    />
                </div>

                <div className="col-span-2 sm:col-span-1 overflow-hidden">
                    <SlideImage
                        src={visible[2].url}
                        alt={visible[2].alt_text}
                        onClick={() => openImage(index + 2)}
                    />
                </div>
            </div>

            {/* REUSABLE FULLSCREEN CAROUSEL */}
            <FullscreenImageCarousel
                images={images}
                open={open}
                setOpen={setOpen}
                initialIndex={activeIndex}
            />
        </>
    );
}