"use client";
import axios from 'axios';
import Image from '@/ui/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from "swiper/modules";

import { useQuery } from '@tanstack/react-query';
import { ImageDownIcon, RefreshCcw } from 'lucide-react';
import { useLanguage } from '@/store/language-context';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';

export default function IvoryClients() {
    const { URL } = useLanguage();
    const { t } = useTranslation();

    const { data: clientsData = [], isLoading, error, refetch } = useQuery({
        queryKey: ['clients-slider', URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/clients?per_page=200`);

            if (response.data.status !== 200) throw new Error(t('custom.err'));
            return response?.data?.data?.data;
        },
        retry: 1,
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60 * 60 * 6, // 6HR
        gcTime: 1000 * 60 * 60 * 6,
    });

    if (isLoading) {
        return (
            <div className="grid grid-cols-4 gap-5 max-2xl:grid-cols-2 max-lg:grid-cols-1 w-full px-4 py-2">
                {[...Array(4)].map((_, i) => (
                    <div key={i} className={`l-load w-full h-28 rounded-lg justify-center items-center text-white ${(i === 0) ? 'flex' : 'flex max-lg:!hidden'}`}
                    >
                        <ImageDownIcon size={30} />
                    </div>
                ))}
            </div>
        )
    };

    if (error) {
        return (
            <div className="text-center py-8 flex flex-col gap-4 layout">
                <p className="text-red-500">{t('custom.err')}</p>
                <div className="grid place-items-center">
                    <Button
                        variant="outline"
                        className="mt-2 bg-secondary-tw text-white px-4 py-2 rounded-md"
                        onClick={() => refetch && refetch()}
                    >
                        {t('custom.try-again')} <RefreshCcw />
                    </Button>
                </div>
            </div>
        )
    };

    return (
        <section className="w-full py-4 ">
            <div className="border-2 rounded-lg flex items-center">
                <div className='px-4 grid place-items-center ltr:border-r-2 rtl:border-l-2'>
                    <h2 className="services-header !text-lg after:w-12 after:-bottom-1 text-nowrap flex justify-center">
                        {t('home.ivory-clients')}
                    </h2>
                </div>
                <Swiper
                    key={URL}
                    modules={[Navigation, Pagination, Autoplay]}
                    spaceBetween={20}
                    slidesPerView={4}
                    loop={clientsData?.length > 4}
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    breakpoints={{
                        300: { slidesPerView: 1, spaceBetween: 10 },
                        480: { slidesPerView: 2, spaceBetween: 15 },
                        768: { slidesPerView: 3, spaceBetween: 20 },
                        1024: { slidesPerView: 4, spaceBetween: 30 },
                    }}
                    className='!h-36 cursor-grabbing'
                >
                    {clientsData?.map((client, i: number) => (
                        <SwiperSlide key={i} className='w-full h-36'>
                            <div className="relative flex justify-center items-center w-8/12 h-full">
                                <Image
                                    src={client?.image}
                                    alt={client?.name}
                                    className="w-3/4 h-28 object-contain"
                                />
                            </div>
                        </SwiperSlide>
                    ))}
                </Swiper>
            </div>
        </section>
    );
};