const { useState, useEffect, useLayoutEffect, useRef, useMemo, useImperativeHandle, forwardRef } = React;

const JourneysInLogos = ({ wrapperClassName = "w-full mt-32" }) => {
    const scrollRef = useRef(null);

    const partners = [
        { name: "Knack", type: "Global Talent Platform", src: "logos/logo-journey/knack.jpeg" },
        { name: "Apple", type: "Global Tech Company", src: "logos/logo-journey/apple.png" },
        { name: "Juventus", type: "Sports Club", src: "logos/logo-journey/juventus.png" },
        { name: "Flux Logistics", type: "Logistics Group", src: "logos/logo-journey/flux.png" },
        { name: "Meta", type: "Global Tech Company", src: "logos/logo-journey/meta.png" },
        { name: "Casa", type: "Lifestyle Furniture Brand", src: "logos/logo-journey/casa.png" },
        { name: "SMAC", type: "Sports Entertainment", src: "logos/logo-journey/smac.png" }
    ];

    const loopedPartners = [...partners, ...partners, ...partners, ...partners, ...partners];

    useEffect(() => {
        const el = scrollRef.current;
        if (!el) return;

        const itemWidth = 280 + 24; // Width (280px) + Gap (6 * 4 = 24px)
        const totalSetWidth = partners.length * itemWidth;

        const handleScroll = () => {
            const { scrollLeft, scrollWidth, clientWidth } = el;
            
            // If we've scrolled near the end of the looped content, jump back to the middle set
            if (scrollLeft + clientWidth >= scrollWidth - itemWidth) {
                el.scrollLeft = scrollLeft - totalSetWidth;
            }
            // If we've scrolled near the start, jump forward
            if (scrollLeft <= itemWidth) {
                el.scrollLeft = scrollLeft + totalSetWidth;
            }
        };

        el.addEventListener('scroll', handleScroll);
        // Initial scroll to the second set of logos to allow infinite scroll in both directions
        el.scrollLeft = totalSetWidth;

        return () => el.removeEventListener('scroll', handleScroll);
    }, []);

    const scroll = (direction) => {
        if (scrollRef.current) {
            const scrollAmount = 400;
            const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current;

            if (direction === "right" && scrollLeft >= scrollWidth - clientWidth - 10) {
                scrollRef.current.scrollTo({ left: 0, behavior: "smooth" });
            } else if (direction === "left" && scrollLeft <= 10) {
                scrollRef.current.scrollTo({ left: scrollWidth - clientWidth, behavior: "smooth" });
            } else {
                scrollRef.current.scrollBy({
                    left: direction === "left" ? -scrollAmount : scrollAmount,
                    behavior: "smooth"
                });
            }
        }
    };

    return (
        <div className={`${wrapperClassName} relative`}>
            <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-8 sm:mb-12">
                <h2 className="text-[16px] tracking-tight opacity-50 font-medium text-black">
                    Our journey in logos
                </h2>
            </div>

            <div
                ref={scrollRef}
                className="flex items-stretch overflow-x-auto overflow-y-hidden no-scrollbar -mx-4 sm:-mx-8 md:-mx-16 px-4 sm:px-8 md:px-16 gap-4 sm:gap-6 pb-4 sm:pb-12 scroll-smooth touch-pan-x"
            >
                {loopedPartners.map((partner, i) => (
                    <div
                        key={i}
                        className="flex-none w-[min(17.5rem,calc(100vw-3rem))] sm:w-[280px] min-h-[180px] sm:h-[200px] sm:min-h-0 border border-black/[0.05] rounded-lg p-6 sm:p-8 flex flex-col justify-between hover:border-black/20 transition-all duration-500 group cursor-default bg-white"
                    >
                        <div className="relative flex h-16 sm:h-20 w-full items-center">
                            {partner.src ? (
                                <img
                                    src={partner.src}
                                    alt={`${partner.name} logo`}
                                    className={`object-contain object-left opacity-90 transition-opacity duration-500 group-hover:opacity-100 ${
                                        partner.name === "Apple"
                                            ? "max-h-[64%] max-w-[56%] p-0.5 grayscale opacity-70"
                                            : partner.name === "Flux Logistics"
                                                ? "max-h-[46%] max-w-[58%]"
                                            : partner.name === "SMAC"
                                                ? "max-h-[42%] max-w-[42%]"
                                            : partner.name === "Meta"
                                                ? "max-h-[48%] max-w-[54%]"
                                            : "max-h-full max-w-[80%]"
                                    }`}
                                    loading="lazy"
                                    decoding="async"
                                />
                            ) : (
                                <div className="inline-flex h-full items-center rounded-md border border-dashed border-black/[0.14] px-3">
                                    <span className="text-xs sm:text-sm font-medium tracking-wide uppercase text-black/45">
                                        {partner.name}
                                    </span>
                                </div>
                            )}
                        </div>
                        <div className="space-y-4">
                            <div className="h-px w-full bg-black/[0.03]"></div>
                            <span className="text-[10px] capitalize tracking-[0.2em] opacity-30 font-medium">
                                {partner.type}
                            </span>
                        </div>
                    </div>
                ))}
            </div>

            <div className="mt-4 sm:mt-6 flex justify-end pb-8 sm:pb-10 md:pb-12 shrink-0 space-x-2">
                <button
                    type="button"
                    onClick={() => scroll("left")}
                    className="w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-lg border border-black/[0.07] transition-all active:scale-90 bg-white/80 md:bg-white/50 backdrop-blur-sm opacity-50 md:opacity-40 text-black hover:opacity-100 hover:border-black/20"
                    aria-label="Scroll left"
                >
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="19" y1="12" x2="5" y2="12"></line>
                        <polyline points="12 19 5 12 12 5"></polyline>
                    </svg>
                </button>
                <button
                    type="button"
                    onClick={() => scroll("right")}
                    className="w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-lg border border-black/[0.07] transition-all active:scale-90 bg-white/80 md:bg-white/50 backdrop-blur-sm opacity-50 md:opacity-40 text-black hover:opacity-100 hover:border-black/20"
                    aria-label="Scroll right"
                >
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </button>
            </div>
        </div>
    );
};

window.JourneysInLogos = JourneysInLogos;