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

import { Users, Timer, ArrowLeft, ArrowRight } from 'lucide-react';
import { URL_IMAGE } from '@/utils/url';
import { useLocale } from 'next-intl';

export function StudentsAlsoBought() {
    const t = useTranslations();
    const locale = useLocale();
    const isArabic = locale === 'ar';
    const { data, isLoading } = useGet({ url: '/recorder-groups?recommended=true' });
    const courses: RecommendedProgram[] = data?.groups?.data?.slice(0, 3) || [];

    if (isLoading) {
        return (
            <div className="w-full space-y-4">
                <div className="h-8 w-48 bg-gray-100 animate-pulse rounded-lg" />
                <div className="space-y-3">
                    {[1, 2].map((i) => (
                        <div key={i} className="h-32 bg-gray-50 animate-pulse rounded-xl" />
                    ))}
                </div>
            </div>
        );
    }

    if (courses.length === 0) {
        return null;
    }

    return (
        <div className="w-full">
            <div className="flex items-center justify-between mb-8">
                <h2 className="text-2xl md:text-3xl font-black text-gray-900 tracking-tight">
                    {t("programs.students also bought")}
                </h2>
            </div>

            <div className="space-y-4">
                {courses.map((course) => {
                    const courseName = isArabic ? course.name_an || course.name : course.name || course.name_an;
                    const courseSlug = courseName ? encodeURIComponent(courseName.trim().toLowerCase().replace(/\s+/g, '-').replace(/\//g, '-')) : '';
                    const courseLink = `/programs/${course.id}${courseSlug ? `/${courseSlug}` : ''}`;
                    return (
                        <Link
                            href={courseLink}
                            key={course.id}
                            className="group relative flex flex-col sm:flex-row bg-white border border-gray-100 rounded-2xl overflow-hidden hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] transition-all duration-500"
                        >
                        {/* Image Container */}
                        <div className="relative w-full sm:w-48 md:w-64 h-48 sm:h-auto overflow-hidden shrink-0">
                            {course.image ? (
                                <img
                                    src={`${URL_IMAGE}/${course.image}`}
                                    alt={course.name}
                                    className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                />
                            ) : (
                                <div className="w-full h-full bg-slate-100 flex items-center justify-center">
                                    <Timer className="size-8 text-slate-300" />
                                </div>
                            )}
                            <div className="absolute top-3 start-3">
                                <span className="px-3 py-1 text-[10px] font-black uppercase tracking-wider text-white bg-purple-600/90 backdrop-blur-md rounded-full shadow-lg">
                                    {course.type_ar}
                                </span>
                            </div>
                        </div>

                        {/* Content Container */}
                        <div className="flex-1 p-5 md:p-6 flex flex-col justify-between gap-4">
                            <div className="space-y-2">
                                <h3 className="font-bold text-gray-900 text-lg md:text-xl line-clamp-2 leading-tight group-hover:text-purple-600 transition-colors">
                                    {isArabic ? course.name_an || course.name : course.name || course.name_an}
                                </h3>
                                
                                <div className="flex flex-wrap items-center gap-y-2 gap-x-4 text-xs font-medium text-gray-500">
                                    <div className="flex items-center gap-1.5 bg-slate-50 px-2.5 py-1 rounded-lg">
                                        <Timer className="size-3.5 text-purple-500" />
                                        <span>{course.hours} {t("custom.hours")}</span>
                                    </div>
                                    {course.course_topics && course.course_topics.length > 0 && (
                                        <div className="flex items-center gap-1.5 bg-slate-50 px-2.5 py-1 rounded-lg">
                                            <Users className="size-3.5 text-blue-500" />
                                            <span>{course.course_topics.length} {t("programs.lectures")}</span>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="flex items-center justify-between pt-4 border-t border-gray-50">
                                <div className="flex flex-col">
                                    <span className="text-[10px] text-gray-400 font-bold uppercase tracking-widest">{t("cart.price")}</span>
                                    {course.price > 0 ? (
                                        <p className="text-xl font-black text-purple-600">
                                            {course.price} <span className="text-xs font-bold opacity-70">{t("custom.sar")}</span>
                                        </p>
                                    ) : (
                                        <p className="text-xl font-black text-green-600">
                                            {t("programs.free")}
                                        </p>
                                    )}
                                </div>
                                
                                <div className="flex items-center gap-2 text-purple-600 font-black text-sm group-hover:gap-3 transition-all">
                                    <span>{t("programs.preview")}</span>
                                    {isArabic ? <ArrowLeft className="size-4" /> : <ArrowRight className="size-4" />}
                                </div>
                            </div>
                        </div>

                        {/* Hover Overlay Gradient */}
                        <div className="absolute inset-0 bg-gradient-to-r from-purple-600/0 via-purple-600/0 to-purple-600/[0.02] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
                    </Link>
                    );
                })}
            </div>
        </div>
    );
}