"use client";
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import useHomeSection from '@/hooks/use-home-section';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import 'swiper/css/pagination';

import { ArrowUpLeft, CalendarRange, ChevronsLeft, Hourglass, PersonStanding, RefreshCcw, ScrollText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import Image from '@/ui/image';
import { useLanguage } from '@/store/language-context';

export default function IvoryAchievements() {
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { data: achievements, error, isLoading, refetch } = useHomeSection({ sectionName: 'ivory_Achievements' });

    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>
        )
    };

    if (isLoading) {
        return (
            <div className="layout">
                <div className="achievements-content row w-100">
                    {/* Right Side - Text & Stats */}
                    <div className="p-2 col-lg-7">
                        <div className="w-36 h-4 rounded-md l-load-dt"></div>

                        <div className="flex items-center gap-2 my-3">
                            <div className="size-6 rounded-md l-load-dt"></div>
                            <div className="w-48 h-6 rounded-md l-load-dt"></div>
                        </div>

                        <div className="flex justify-between items-center gap-3 my-2">
                            {
                                [...Array(3)].map((_, i) => (
                                    <div key={i} className="grid place-items-center gap-2">
                                        <div className="size-24 rounded-md l-load-dt"></div>
                                        <div className="w-32 h-5 rounded-md l-load-dt"></div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>

                    <div className="image-slider col-lg-5">
                        <div className="slider-image l-load-dt"></div>
                    </div>

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

    return (
        <section>
            <section className='layout bg-zinc-100 lg:h-[26rem] max-lg:h-fit'>
                <Swiper
                    key={URL}
                    modules={[Navigation, Autoplay, Pagination]}
                    loop={true}
                    autoplay={{ delay: 3000, disableOnInteraction: false }}
                    pagination={{ el: '.custom-pagination', clickable: true }}
                    spaceBetween={20}
                    slidesPerView={1}
                    className='lg:!h-[19.5rem]'
                >
                    {
                        achievements?.map((achieve, i: number) => (
                            <SwiperSlide key={achieve?.id || i}>
                                <section className='flex gap-4 lg:h-fit max-lg:flex-col'>
                                    <div className='lg:w-7/12 px-3'>
                                        <h2 className='services-header after:w-20'>
                                            {t('home.achievements-ivory')}
                                        </h2>
                                        <div className='flex items-center gap-2'>
                                            <div>
                                                <ScrollText className='text-secondary-tw' />
                                            </div>
                                            <p className='text-lg font-semibold text-primary-tw'>
                                                {achieve?.title}
                                            </p>
                                        </div>
                                        <div>
                                            <div className='flex gap-4 my-6 w-full justify-around'>
                                                {/* year */}
                                                <div className='flex items-center gap-1'>
                                                    <div>
                                                        <CalendarRange className='text-primary-tw' size={25} />
                                                    </div>
                                                    <div>
                                                        <span className='text-secondary-tw mx-1'>
                                                            {achieve?.year}
                                                        </span>
                                                        <span className='text-primary-tw'>
                                                            {t('achievements.year')}
                                                        </span>
                                                    </div>
                                                </div>
                                                {/* trainer */}
                                                <div className='flex items-center gap-1'>
                                                    <div>
                                                        <PersonStanding className='text-primary-tw' size={28} />
                                                    </div>
                                                    <div>
                                                        <span className='text-secondary-tw mx-1'>
                                                            {achieve?.number_trainer}
                                                        </span>
                                                        <span className='text-primary-tw'>
                                                            {t('achievements.trainer')}
                                                        </span>
                                                    </div>
                                                </div>
                                                {/* days */}
                                                <div className='flex items-center gap-1'>
                                                    <div>
                                                        <Hourglass className='text-primary-tw' />
                                                    </div>
                                                    <div>
                                                        <span className='text-secondary-tw mx-1'>
                                                            {achieve?.days}
                                                        </span>
                                                        <span className='text-primary-tw'>
                                                            {t('achievements.train-day')}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <Link to={`/achievements/${achieve?.id}`} className='flex items-center gap-1 text-secondary-tw text-lg group hover:text-secondary-tw/70 justify-end'>
                                                    {t('custom.more-details')} <ArrowUpLeft
                                                        size={22}
                                                        className="transition-all mt-1 rtl:rotate-0 rtl:group-hover:-rotate-45 ltr:rotate-90 ltr:group-hover:rotate-[135deg]"
                                                    />

                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='lg:w-5/12 h-full relative z-20'>
                                        <div className='w-full relative z-20 border-2 border-secondary-tw rounded-md'>
                                            <Image
                                                src={achieve?.image}
                                                alt={achieve?.title}
                                                className={'w-full object-fill h-[19rem] rounded-md'}
                                            />
                                        </div>
                                    </div>
                                </section>
                            </SwiperSlide>
                        ))
                    }
                </Swiper>
                <div className="custom-pagination my-4 text-center lg:text-end lg:me-52 2xl:me-60 *:mx-1" />
            </section>
            <div className="grid place-items-center">
                <Button asChild className='bg-secondary-tw text-white px-4 !text-base rounded-lg my-8'>
                    <Link to={'/achievements'} className='flex items-center gap-2'>
                        {t('home.all-achievements')}
                        <span>
                            <ChevronsLeft className="ltr:rotate-180" />
                        </span>
                    </Link>
                </Button>
            </div>
        </section>
    );
};