'use client';

import { useGet } from '@/hooks/use-get';
import { useLocale, useTranslations } from 'next-intl';
import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, FreeMode } from 'swiper/modules';
import { RefreshCcw, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';

import 'swiper/css';
import 'swiper/css/free-mode';

export function DependencesSwiper() {
    const t = useTranslations();
    const locale = useLocale();

    // Base API URL from environment or fallback
    const BASE_API_URL = process.env.NEXT_PUBLIC_IVORY || "https://e-training.ivorytraining.com/api";
    
    const { data, isLoading, error, refetch } = useGet({
        url: `${BASE_API_URL}/${locale}/dependencies`,
        context: "special"
    });

    const dependences = data?.data?.data || [];

    if (isLoading) {
        return (
            <div className="w-full py-16 bg-white flex flex-col items-center justify-center">
                <Loader2 className="size-8 text-primary-tw-500 animate-spin mb-4" />
                <div className="h-4 w-48 bg-gray-100 animate-pulse rounded" />
            </div>
        );
    }

    if (error) {
        return (
            <div className="text-center py-16 bg-gray-50 flex flex-col items-center gap-4">
                <p className="text-gray-500">{t('custom.err')}</p>
                <Button variant="outline" onClick={() => refetch()} className="rounded-full">
                    {t('custom.try-again')} <RefreshCcw className="ml-2 size-4" />
                </Button>
            </div>
        );
    }

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

    return (
        <section className="w-full py-20 bg-white border-y border-gray-100 overflow-hidden">
            <div className="box m-auto">
                <div className="text-center mb-16 space-y-4">
                    <h2 className="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">
                        {t('home.dependences') || 'الاعتمادات الدولية'}
                    </h2>
                    <div className="flex justify-center">
                        <div className="h-1.5 w-20 bg-primary-tw-500 rounded-full" />
                    </div>
                </div>

                <div className="relative">
                    {/* Seamless Marquee Slider with Focal Point (Active Highlight) */}
                    <Swiper
                        modules={[Autoplay, FreeMode]}
                        spaceBetween={40}
                        slidesPerView={2}
                        loop={true}
                        centeredSlides={true}
                        watchSlidesProgress={true}
                        speed={3000}
                        autoplay={{
                            delay: 0,
                            disableOnInteraction: false,
                        }}
                        freeMode={{
                            enabled: true,
                            momentum: false,
                        }}
                        breakpoints={{
                            480: { slidesPerView: 3, spaceBetween: 40 },
                            768: { slidesPerView: 4, spaceBetween: 50 },
                            1024: { slidesPerView: 5, spaceBetween: 60 },
                            1280: { slidesPerView: 6, spaceBetween: 80 },
                        }}
                        className="dependences-swiper !ease-linear"
                    >
                        {dependences.map((item: any) => (
                            <SwiperSlide key={item.id} className="transition-all duration-700">
                                <div className="flex flex-col items-center justify-center h-44 px-4 group/item">
                                    <div className="logo-container relative w-full h-28 flex items-center justify-center filter grayscale opacity-40 transition-all duration-700 transform group-hover/item:scale-110">
                                        <Image
                                            src={item.image}
                                            alt={item.title}
                                            width={180}
                                            height={90}
                                            style={{ objectFit: 'contain' }}
                                            className="max-w-full max-h-full"
                                            loading="lazy"
                                        />
                                    </div>
                                    
                                    {/* Modern Title Design */}
                                    <div className="title-container mt-4 opacity-0 translate-y-4 transition-all duration-700 text-center pointer-events-none">
                                        <span className="text-xs md:text-sm font-bold text-primary-tw-600 tracking-tight leading-tight block ">
                                            {item.title}
                                        </span>
                                        <div className="h-0.5 w-0 bg-primary-tw-500 mx-auto mt-1 group-hover/item:w-8 transition-all duration-700" />
                                    </div>
                                </div>
                            </SwiperSlide>
                        ))}
                    </Swiper>

                    {/* Faded edges to create a professional seamless transition */}
                    <div className="absolute inset-y-0 left-0 w-32 md:w-48 bg-gradient-to-r from-white via-white/80 to-transparent z-10 pointer-events-none" />
                    <div className="absolute inset-y-0 right-0 w-32 md:w-48 bg-gradient-to-l from-white via-white/80 to-transparent z-10 pointer-events-none" />
                </div>
            </div>
            
            <style jsx global>{`
                /* Perfectly smooth linear marquee effect */
                .dependences-swiper .swiper-wrapper {
                    transition-timing-function: linear !important;
                }

                /* Highlight Active/Hovered Slide: Color + Scale + Title Visibility */
                .dependences-swiper .swiper-slide-active .logo-container,
                .dependences-swiper .swiper-slide:hover .logo-container {
                    filter: grayscale(0) !important;
                    opacity: 1 !important;
                    transform: scale(1.15);
                }

                .dependences-swiper .swiper-slide-active .title-container,
                .dependences-swiper .swiper-slide:hover .title-container {
                    opacity: 1 !important;
                    transform: translateY(0) !important;
                }

                .dependences-swiper .swiper-slide-active .title-container div,
                .dependences-swiper .swiper-slide:hover .title-container div {
                    width: 2rem !important; /* Matches w-8 */
                }
            `}</style>
        </section>
    );
}