"use client"
import { Program } from '@/types/models';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useGet } from '@/hooks/use-get';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from "swiper/modules";
import 'swiper/css';
import 'swiper/css/pagination';

import { Button } from '@/components/ui/button';
import { ArrowRight, RefreshCcw } from 'lucide-react';
import { ProgramBox } from '../programs/(all)/_components/program-box';

export function PopularCoursesSection() {
    const t = useTranslations();
    const { data, isLoading, error, refetch } = useGet({ url: "/recorder-groups?type=record", context: "website" });
    const groups: Program[] = data?.groups?.data;
    if (!isLoading && !error && (!groups || groups.length === 0)) return null;
    return (
        <section className="py-16">
            <div className="box px-4">
                <div className="flex max-md:flex-col gap-4 items-start justify-between mb-8">
                    <div>
                        <h2 className="text-4xl font-bold text-gray-900 mb-3">
                            {t('home.popular-courses.title')}
                        </h2>
                        <p className="text-lg text-gray-600 max-w-3xl">
                            {t('home.popular-courses.subtitle')}
                        </p>
                    </div>
                    <Button variant={"secondary"} asChild>
                        <Link href="/programs?type=record" className=" text-purple-600 font-semibold !cursor-pointer">
                            {t('home.popular-courses.view-all')}
                            <ArrowRight className="size-5 rtl:rotate-180" />
                        </Link>
                    </Button>
                </div>

                {
                    isLoading ?
                        <div className="grid md:grid-cols-3 gap-4 place-items-center overflow-hidden">
                            {[...Array(3)].map((_, i) => (
                                <div key={i} className={`bg-gray-300 animate-pulse w-full h-72 rounded-lg`}
                                />
                            ))}
                        </div>
                        :
                        error ?
                            <div className="text-center py-20 flex flex-col gap-4 box">
                                <p className="text-red-500" > {t('custom.err')}</p>
                                <div className="grid place-items-center">
                                    <Button
                                        variant="secondary"
                                        className="mt-2 px-4 py-2 rounded-md border"
                                        onClick={() => refetch && refetch()}
                                    >
                                        {t('custom.try-again')} <RefreshCcw />
                                    </Button>
                                </div>
                            </div>
                            :
                            <Swiper
                                modules={[Navigation, Pagination, Autoplay]}
                                spaceBetween={20}
                                slidesPerView={1}
                                loop={groups?.length > 4}
                                pagination={{
                                    clickable: true,
                                    currentClass: "!cursor-pointer"
                                }}
                                autoplay={{ delay: 3000, disableOnInteraction: false }}
                                breakpoints={{
                                    640: { slidesPerView: 2, spaceBetween: 20 },
                                    1024: { slidesPerView: 3, spaceBetween: 30 },
                                    1280: { slidesPerView: 4, spaceBetween: 30 },
                                }}
                                className='!h-fit !pb-12 [&_.swiper-pagination]:!-bottom-2 [&_.swiper-pagination]:z-40 [&_.swiper-pagination]:!cursor-pointer'
                            >
                                {(() => {
                                    const chunked: Program[][] = [];
                                    const rawData: Program[] = groups?.slice(0, 16) || [];
                                    const numCols = rawData.length > 4 ? Math.max(4, Math.ceil(rawData.length / 2)) : rawData.length;
                                    
                                    for (let i = 0; i < numCols; i++) {
                                        const col: Program[] = [];
                                        if (i < rawData.length) col.push(rawData[i]);
                                        if (i + numCols < rawData.length) col.push(rawData[i + numCols]);
                                        if (col.length > 0) {
                                            chunked.push(col);
                                        }
                                    }
                                    
                                    return chunked.map((pair, index) => (
                                        <SwiperSlide key={index}>
                                            <div className="flex flex-col gap-4">
                                                {pair.map((course) => (
                                                    <ProgramBox program={course} key={course.id} />
                                                ))}
                                            </div>
                                        </SwiperSlide>
                                    ));
                                })()}
                            </Swiper>
                }
            </div>
        </section>
    );
}