"use client";
import React from "react";
import { useQuery } from "@tanstack/react-query";
import { Link } from "react-router-dom";
import axios from "axios";

import { ArrowUpLeft, ChevronsLeft, RefreshCcw, } from "lucide-react";
import Swiper from "@/ui/swiper";
import { SwiperSlide } from "swiper/react";

import { useLanguage } from "@/store/language-context";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";

const IvoryAccreditations = () => {
    const { URL } = useLanguage();
    const { t } = useTranslation();

    const { data: dependencies = [], isLoading, error, refetch } = useQuery({
        queryKey: ['dependencies-slider', URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/dependencies?per_page=100`);
            if (response.status === 200) {
                return response?.data?.data?.data;
            } else {
                throw new Error(t('custom.err'));
            }
        },
        retry: 1,
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60 * 60 * 6, // 6HR
        gcTime: 1000 * 60 * 60 * 6,
    });

    if (isLoading) {
        return (
            <div className="w-full">
                <div className="grid grid-cols-4 gap-5 max-2xl:grid-cols-2 max-lg:grid-cols-1 w-full">
                    {[...Array(4)].map((_, i) => (
                        <div
                            key={i}
                            className={`bg-white dependance-card w-full rounded transition overflow-hidden p-0 ${(i === 0) ? '' : 'max-lg:!hidden'}`}
                            style={{
                                borderRadius: "12px",
                                margin: "10px 5px",
                            }}
                        >
                            <div className="rounded-card-image w-100"></div>
                            <div className="rounded-card-img l-load"></div>
                            <div className="flex justify-center items-center w-full my-3">
                                <div className="w-32 h-3 rounded-lg l-load-dt"></div>
                            </div>
                        </div>
                    ))}
                </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>
        )
    };

    const swiperProps = {
        loop: true,
        autoplay: { delay: 3000, disableOnInteraction: false },
        spaceBetween: 30,
        slidesPerView: 3,
        breakpoints: {
            0: { slidesPerView: 1 },
            680: { slidesPerView: 2 },
            1000: { slidesPerView: 3 },
        },
        className: "relative w-full",
    };

    return (
        <div className=" !py-8">

            <div className="flex justify-center mb-4">
                <h2 className="services-header flex justify-center after:w-20">{t('routes.accreditations')}</h2>
            </div>

            <Swiper id={'accreditations'} showButtons={false} props={swiperProps} key={URL}>
                {
                    dependencies.map((partner, i: number) => (
                        <SwiperSlide key={i}>
                            <Link
                                to={`/accreditations/${partner?.id}`}
                                key={partner?.id || i}
                                className="bg-white border border-gray-300 max-w-[30rem] overflow-hidden p-0 rounded-xl my-3 mx-1 flex flex-col justify-between items-center"
                            >
                                <div className="w-full h-32 bg-gray-200 rounded-b-full relative overflow-hidden">
                                </div>

                                <div className="w-40 h-40 -mt-20 mb-4 relative z-10 bg-white rounded-full flex justify-center items-center">
                                    <img
                                        src={partner?.image}
                                        alt={partner?.title || partner?.name}
                                        className="w-28 h-20 object-contain"
                                    />
                                </div>

                                <div className="px-4 mb-4 text-center capitalize">
                                    <p className="text-lg font-medium text-common-text truncate w-80 lg:w-60">
                                        {partner?.title}
                                    </p>
                                </div>

                                <div className="px-4 pb-4 w-full">
                                    <button
                                        className="w-full bg-primary-tw hover:bg-primary-tw/90 text-white font-medium py-2 px-4 rounded-lg transition-all  flex items-end justify-center group gap-1"
                                    >
                                        <span>
                                            {t('custom.more-details')}
                                        </span>
                                        <span>
                                            <ArrowUpLeft size={22} className='group-hover:-rotate-45 transition-all mt-1 ltr:rotate-90 ltr:group-hover:rotate-[135deg]' />
                                        </span>
                                    </button>
                                </div>
                            </Link>
                        </SwiperSlide>
                    ))
                }
            </Swiper>

            <div className="flex justify-center mt-5">
                <Button asChild variant="outline" className="h-9 bg-secondary-tw text-white [&_svg]:size-5 text-base">
                    <Link to={'/accreditations'} className="flex items-center gap-2">
                        {t('home.all-accreditations')}
                        <span>
                            <ChevronsLeft className="ltr:rotate-180" />
                        </span>
                    </Link>
                </Button>
            </div>
        </div>
    )
};

export default React.memo(IvoryAccreditations);