"use client";
import Image from "next/image";

import { Program } from "@/types/models";
import { useTranslations } from "next-intl";
import { format } from "date-fns";

import { Badge } from "@/components/ui/badge";
import { ArrowRight, CalendarRange, MapPin, UserPen, WatchIcon, PlayCircle, ExternalLink, Sparkles, Clock } from "lucide-react";
import { URL_IMAGE } from "@/utils/url";
import { Link } from "@/i18n/navigation";
import { Button } from "@/components/ui/button";
import { toast } from "@/hooks/use-toast";
import { CountdownTimer } from "../../../../(website)/programs/offers/_components/countdown";

export function ProgramBox({ program }: { program: Program }) {
    const t = useTranslations();
    
    // Determine link based on SCORM
    // Determine link based on SCORM
    let programLink = program?.scorm_course_id 
        ? `/scorm?groupId=${program.id}&scormId=${program.scorm_course_id}`
        : `/dashboard/programs/fullscreen-${program?.id}`;

    // Add deep linking for resume functionality
    if (!program?.scorm_course_id && (program as any).current_type && (program as any).current_item) {
        const type = (program as any).current_type;
        const item = (program as any).current_item;
        
        if (type === 'session') {
            programLink += `?session=${item}`;
        } else if (type === 'exam') {
            programLink += `?exam=${item}`;
        } else if (type === 'review') {
            programLink += `?review=${item}`;
        } else if (type === 'activity') {
            programLink += `?activity=${item}`;
        }
    }
    
    const isScorm = !!program?.scorm_course_id;

    const handleProgramClick = (e: React.MouseEvent) => {
        if (!isScorm && program.statistics === '(0/0)') {
            e.preventDefault();
            toast({
                title: t('custom.error'),
                description: t('custom.cannotEnterGroup'),
                variant: 'destructive',
            });
        }
    };
    
    return (
        <div className="group relative h-full flex flex-col overflow-hidden rounded-2xl bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 hover:border-primary-tw-300 dark:hover:border-primary-tw-600 transition-all duration-500 hover:shadow-2xl hover:-translate-y-2">
            {/* Image Section with Gradient Overlay */}
            <div className="relative h-56 w-full overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-zinc-800 dark:to-zinc-900">
                {program?.image ? (
                    <>
                        <Image
                            src={`${URL_IMAGE}/${program.image}`}
                            alt={program.name}
                            className="object-cover transition-transform duration-700 group-hover:scale-110"
                            fill
                            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                        />
                        {/* Gradient Overlay */}
                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
                    </>
                ) : (
                    <div className="size-full flex items-center justify-center bg-gradient-to-br from-primary-tw-100 to-purple-100 dark:from-primary-tw-950 dark:to-purple-950">
                        <Sparkles className="size-12 text-primary-tw-400 opacity-30" />
                    </div>
                )}
                
                {/* Type Badge - Floating top right */}
                <div className="absolute top-4 right-4 z-10">
                    <Badge className="bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md text-primary-tw-600 dark:text-primary-tw-400 border border-primary-tw-200 dark:border-primary-tw-800 font-bold px-3 py-1.5 shadow-lg">
                        {program.type}
                    </Badge>
                </div>

                {/* Expiration Counter Banner */}
                {typeof program.progress_percentage === 'number' && program.progress_percentage < 100 && (program?.expired_at || program?.end_date) && (
                    <div 
                        className={`absolute bottom-0 inset-x-0 z-20 backdrop-blur-sm p-2 text-white border-t border-white/20 ${(program.expired_at || program.end_date) && new Date(program.expired_at || program.end_date!) <= new Date() ? 'bg-red-600/90' : 'bg-gradient-to-t from-primary-tw-600/90 to-primary-tw-600/70'}`}
                    >
                        <div className="flex items-center justify-between gap-2 max-w-full">
                            <div className="flex items-center gap-1.5 shrink-0">
                                <Clock className="size-4" />
                                <span className="text-[12px] font-black uppercase tracking-widest">{t("custom.offer_period") || "فتره الكورس"}</span>
                            </div>
                            <div className="bg-white/10 rounded-lg px-2 py-0.5">
                                <CountdownTimer targetDate={(program.expired_at || program.end_date)!} />
                            </div>
                        </div>
                    </div>
                )}

                {/* Play Button Overlay for SCORM */}
                {isScorm && (
                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                        <div className="p-4 rounded-full bg-white/20 backdrop-blur-md border-2 border-white/40">
                            <PlayCircle className="size-12 text-white drop-shadow-2xl" />
                        </div>
                    </div>
                )}
            </div>

            {/* Content Section */}
            <div className="flex-1 flex flex-col p-6 space-y-4 text-start" dir="rtl">
                {/* Title Section */}
                <div className="space-y-2 border-b border-gray-100 dark:border-zinc-800 pb-4">
                    <Link 
                        href={programLink}
                        className="block group/title"
                        onClick={handleProgramClick}
                    >
                        <h3 className="font-bold text-xl text-gray-900 dark:text-gray-100 line-clamp-2 group-hover/title:text-primary-tw-600 dark:group-hover/title:text-primary-tw-400 transition-colors duration-300">
                            {program?.name}
                        </h3>
                    </Link>
                    
                    {program?.course_name && (
                        <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 leading-relaxed">
                            {program.course_name}
                        </p>
                    )}
                </div>

                {/* Details Grid */}
                <div className="flex-1 space-y-3">
                    {/* Instructor */}
                    {program?.coaches_names && program.coaches_names.length > 0 && program.coaches_names[0] && (
                        <div className="flex items-center gap-3 group/item">
                            <div className="flex items-center justify-center size-9 rounded-lg bg-blue-50 dark:bg-blue-950/30 text-blue-600 dark:text-blue-400 group-hover/item:bg-blue-100 dark:group-hover/item:bg-blue-900/40 transition-colors">
                                <UserPen className="size-4" />
                            </div>
                            <div className="flex-1 min-w-0 text-start">
                                <p className="text-xs text-gray-500 dark:text-gray-500 font-medium uppercase tracking-wide">
                                    {t("programs.instructor")}
                                </p>
                                <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                    {program.coaches_names[0]}
                                </p>
                            </div>
                        </div>
                    )}

                    {/* Hours */}
                    {(program?.hours ?? 0) >= 0 && (
                        <div className="flex items-center gap-3 group/item">
                            <div className="flex items-center justify-center size-9 rounded-lg bg-purple-50 dark:bg-purple-950/30 text-purple-600 dark:text-purple-400 group-hover/item:bg-purple-100 dark:group-hover/item:bg-purple-900/40 transition-colors">
                                <WatchIcon className="size-4" />
                            </div>
                            <div className="flex-1 min-w-0 text-start">
                                <p className="text-xs text-gray-500 dark:text-gray-500 font-medium uppercase tracking-wide">
                                    المدة
                                </p>
                                <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                    {program.hours} {t('custom.hours')}
                                </p>
                            </div>
                        </div>
                    )}

                    {/* Course Period */}
                    {program?.start_date && program?.end_date && (
                        <div className="flex items-center gap-3 group/item">
                            <div className="flex items-center justify-center size-9 rounded-lg bg-emerald-50 dark:bg-emerald-950/30 text-emerald-600 dark:text-emerald-400 group-hover/item:bg-emerald-100 dark:group-hover/item:bg-emerald-900/40 transition-colors">
                                <CalendarRange className="size-4" />
                            </div>
                            <div className="flex-1 min-w-0 text-start">
                                <p className="text-xs text-gray-500 dark:text-gray-500 font-medium uppercase tracking-wide">
                                    فترة الكورس
                                </p>
                                <p className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
                                    {program.start_date} - {program.end_date}
                                </p>
                            </div>
                        </div>
                    )}
                </div>

                {/* Progress Section */}
                {typeof program.progress_percentage === 'number' && (
                    <div className="space-y-2 pt-2 border-t border-gray-50 dark:border-zinc-800/50">
                        <div className="flex justify-between items-end text-xs">
                            <span className="font-medium text-gray-500 dark:text-gray-400">{t('programs.progress')}</span>
                            <div className="flex items-center gap-1.5">
                                {!isScorm && program.statistics && (
                                    <span className="text-[10px] text-gray-400 font-medium bg-gray-50 dark:bg-white/5 px-1.5 py-0.5 rounded">
                                        {program.statistics}
                                    </span>
                                )}
                                <span className="font-bold text-primary-tw-600 dark:text-primary-tw-400">
                                    {program.progress_percentage}%
                                </span>
                            </div>
                        </div>
                        <div className="h-2 w-full rounded-full bg-gray-100 dark:bg-zinc-800 overflow-hidden shadow-inner">
                            <div 
                                className="h-full rounded-full bg-gradient-to-r from-primary-tw-500 via-purple-500 to-pink-500 transition-all duration-1000 ease-out shadow-[0_0_10px_rgba(168,85,247,0.4)]"
                                style={{ width: `${Math.min(100, Math.max(0, program.progress_percentage))}%` }}
                            />
                        </div>
                    </div>
                )}


                {/* CTA Button */}
                <div className="pt-4">
                    <Button 
                        asChild 
                        className="w-full bg-gradient-to-r from-primary-tw-500 to-purple-600 hover:from-primary-tw-600 hover:to-purple-700 text-white font-semibold shadow-lg hover:shadow-xl transition-all duration-300 group/btn"
                    >
                        <Link 
                            href={programLink}
                            onClick={handleProgramClick}
                        >
                            {isScorm ? (
                                <>
                                    <PlayCircle className="size-4 me-2" />
                                    {(program.progress_percentage || 0) > 0 ? "متابعة البرنامج" : "بدء البرنامج"}
                                    <ExternalLink className="size-4 ms-2" />
                                </>
                            ) : (
                                <>
                                    {(program.progress_percentage || 0) > 0 ? "متابعة البرنامج" : "عرض التفاصيل"}
                                    <ArrowRight className="size-4 ms-2 rtl:rotate-180 group-hover/btn:translate-x-1 rtl:group-hover/btn:-translate-x-1 transition-transform" />
                                </>
                            )}
                        </Link>
                    </Button>
                </div>
            </div>

            {/* Decorative gradient line at bottom */}
            <div className="h-1 bg-gradient-to-r from-primary-tw-500 via-purple-600 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
        </div>
    );
}