"use client";
import Image from "next/image";
import { Link } from "@/i18n/navigation";
import { LearningPath } from "@/types/models";
import { useTranslations } from "next-intl";
import { CheckCircle2, Clock, GraduationCap, ArrowRight, ExternalLink, ChevronDown, ChevronUp, Lock } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { URL_IMAGE } from "@/utils/url";
import { useState } from "react";
import { format } from "date-fns";
import { CountdownTimer } from "../../../../(website)/programs/offers/_components/countdown";

export function LearningPathBox({ path }: { path: LearningPath }) {
    const t = useTranslations();
    const [isExpanded, setIsExpanded] = useState(false);
    
    const progress = (path.total_groups ?? 0) > 0 ? Math.round(((path.completed_groups ?? 0) / path.total_groups) * 100) : 0;
    
    // Determine which groups to show based on expansion state
    const allGroups = path.groups || [];
    const displayedGroups = isExpanded ? allGroups : allGroups.slice(0, 2);
    const hiddenCount = allGroups.length - 2;

    return (
        <div 
            className="group block relative overflow-hidden rounded-2xl bg-gradient-to-br from-white to-gray-50 dark:from-zinc-900 dark:to-zinc-950 border border-gray-200 dark:border-zinc-800 hover:border-primary-tw-300 dark:hover:border-primary-tw-700 transition-all duration-300 h-full flex flex-col"
        >
            {/* Header with gradient background — click goes to detail page */}
            <Link href={`/dashboard/learning-paths/${path.id}`} className="block relative group/header">
            <div className="relative bg-gradient-to-r from-primary-tw-500 to-purple-600 p-6 pb-8 shrink-0 hover:opacity-95 transition-opacity h-[180px]">
                <div className="absolute inset-0 bg-black/10"></div>
                
                <div className="relative z-10 flex justify-between items-start">
                    <div className="flex-1">
                        <h3 className="font-bold text-2xl text-white mb-2 transition-colors">
                            {path.name}
                        </h3>
                        <div className="flex items-center gap-2 text-white/90">
                            <GraduationCap className="w-4 h-4" />
                            <span className="text-sm">
                                {path.total_groups} {path.total_groups === 1 ? 'برنامج' : 'برامج'}
                            </span>
                        </div>
                    </div>
                    
                    {/* Circular Progress */}
                    <div className="relative size-20 flex items-center justify-center">
                        <svg className="size-full -rotate-90">
                            <circle
                                cx="40"
                                cy="40"
                                r="36"
                                stroke="rgba(255, 255, 255, 0.2)"
                                strokeWidth="6"
                                fill="none"
                            />
                            <circle
                                cx="40"
                                cy="40"
                                r="36"
                                stroke="white"
                                strokeWidth="6"
                                fill="none"
                                strokeDasharray={`${2 * Math.PI * 36}`}
                                strokeDashoffset={`${2 * Math.PI * 36 * (1 - progress / 100)}`}
                                strokeLinecap="round"
                                className="transition-all duration-700"
                            />
                        </svg>
                        <div className="absolute inset-0 flex items-center justify-center">
                            <span className="text-white font-bold text-lg">{progress}%</span>
                        </div>
                    </div>
                </div>

                {/* Subscription/Expiration Banner */}
                {(path.expired_at || path.subscription_at) && (
                    <div className="absolute bottom-0 inset-x-0 z-20 bg-black/20 backdrop-blur-md p-1.5 text-white border-t border-white/10">
                        <div className="flex items-center justify-between gap-2 px-2">
                             <div className="flex items-center gap-1.5">
                                <Clock className="size-3" />
                                <span className="text-[10px] font-bold uppercase tracking-wider">
                                    {path.expired_at ? "فترة الوصول" : "تاريخ التسجيل"}
                                </span>
                            </div>
                            <div className="bg-white/10 rounded-lg px-2 py-0.5 text-[11px] font-black">
                                {path.expired_at ? (
                                    <CountdownTimer targetDate={path.expired_at} />
                                ) : (
                                    format(new Date(path.subscription_at!), "yyyy-MM-dd")
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </div>
            </Link>

            {/* Content section */}
            <div className="p-6 space-y-4 flex-1 flex flex-col">
                {/* Progress bar */}
                <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                        <span className="text-gray-600 dark:text-gray-400 font-medium">الإنجاز</span>
                        <span className="text-primary-tw-600 dark:text-primary-tw-400 font-semibold">
                            {path.completed_groups} / {path.total_groups}
                        </span>
                    </div>
                    <div className="w-full bg-gray-200 dark:bg-zinc-800 rounded-full h-3 overflow-hidden">
                        <div 
                            className="h-full bg-gradient-to-r from-primary-tw-500 to-purple-600 rounded-full transition-all duration-700 ease-out relative"
                            style={{ width: `${progress}%` }}
                        >
                            <div className="absolute inset-0 bg-white/20 animate-pulse"></div>
                        </div>
                    </div>
                </div>

                {/* Groups preview */}
                {allGroups.length > 0 && (
                    <div className="space-y-3">
                        <h4 className="text-sm font-semibold text-gray-700 dark:text-gray-300 flex items-center gap-2">
                            <div className="size-1.5 rounded-full bg-primary-tw-500"></div>
                            البرامج المضمنة
                        </h4>
                        <div className="space-y-2">
                             {displayedGroups.map((group, index) => {
                                const percentage = Math.min(100, Math.max(0, group.progress_percentage || 0));
                                const canOpen = group.can_open !== false;
                                return (
                                <div 
                                    key={group.id} 
                                    className={`relative flex items-center gap-4 p-4 rounded-xl transition-all duration-300 ${
                                        canOpen 
                                            ? "bg-white dark:bg-zinc-900/50 border border-gray-100 dark:border-zinc-800 hover:shadow-lg hover:border-primary-tw-200 dark:hover:border-primary-tw-800 group/item hover:-translate-y-0.5" 
                                            : "bg-gray-50/50 dark:bg-zinc-900/30 border border-gray-100/50 dark:border-zinc-800/50 opacity-60 cursor-not-allowed"
                                    }`}
                                >
                                    {/* Action Icon for canOpen */}
                                    {canOpen && (
                                        <div className="self-center shrink-0 absolute top-2 left-1 opacity-0 -translate-x-2 group-hover/item:opacity-100 group-hover/item:translate-x-0 transition-all duration-300">
                                            <div className="size-8 rounded-full bg-primary-tw-50 dark:bg-primary-tw-900/20 text-primary-tw-600 flex items-center justify-center">
                                                <ExternalLink className="size-4" />
                                            </div>
                                        </div>
                                    )}
                                    <div className={`relative size-12 shrink-0 rounded-lg overflow-hidden border border-gray-100 dark:border-zinc-700 shadow-sm bg-gray-100 dark:bg-zinc-800 ${!canOpen ? "grayscale" : ""}`}>
                                        {group.image ? (
                                            <Image
                                                src={`${URL_IMAGE}/${group.image}`}
                                                alt={group.name}
                                                fill
                                                className={`object-cover transition-transform duration-500 ${canOpen ? "group-hover/item:scale-110" : ""}`}
                                            />
                                        ) : (
                                            <div className="w-full h-full grid place-items-center text-gray-300 dark:text-gray-600">
                                                <GraduationCap className="w-5 h-5" />
                                            </div>
                                        )}
                                        {!canOpen && (
                                            <div className="absolute inset-0 bg-black/10 flex items-center justify-center">
                                                <Lock className="size-4 text-white/50" />
                                            </div>
                                        )}
                                    </div>

                                    {/* Group Info */}
                                    
                                    <div className="flex-1 min-w-0 flex flex-col gap-2">
                                        
                                        <div className="flex justify-between items-start gap-2">
                                           
                                            <h4 className={`text-sm font-bold leading-snug line-clamp-1 transition-colors ${
                                                canOpen 
                                                    ? "text-gray-900 dark:text-gray-100 group-hover/item:text-primary-tw-600" 
                                                    : "text-gray-400 dark:text-zinc-500 font-medium"
                                            }`}>
                                                {group.name}
                                            </h4>
                                            {percentage > 0 && (
                                                <span className="text-xs font-bold text-primary-tw-600 dark:text-primary-tw-400 shrink-0">
                                                    {percentage}%
                                                </span>
                                            )}
                                        </div>

                                        <div className="flex items-center gap-3 text-[10px] text-gray-500 font-medium">
                                            {/* Status Badge */}
                                            {group.completion_status === 'completed' ? (
                                                <div className="flex items-center gap-1 text-green-600 bg-green-50 dark:bg-green-900/20 px-1.5 py-0.5 rounded-md">
                                                    <CheckCircle2 className="w-3 h-3" />
                                                    <span>مكتمل</span>
                                                </div>
                                            ) : (group.completion_status === 'in_progress' || group.completion_status === 'enrolled' || percentage > 0) ? (
                                                <div className="flex items-center gap-1 text-blue-600 bg-blue-50 dark:bg-blue-900/20 px-1.5 py-0.5 rounded-md">
                                                    <Clock className="w-3 h-3" />
                                                    <span>{percentage > 0 ? 'جاري' : 'مسجل'}</span>
                                                </div>
                                            ) : !canOpen ? (
                                                <div className="flex items-center gap-1 text-gray-400 bg-gray-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded-md">
                                                    <Lock className="w-3 h-3" />
                                                    <span>مغلق</span>
                                                </div>
                                            ) : (
                                                <div className="flex items-center gap-1 text-gray-500 bg-gray-50 dark:bg-zinc-800 px-1.5 py-0.5 rounded-md">
                                                    <span>لم يبدأ</span>
                                                </div>
                                            )}
                                            
                                            {/* Divider */}
                                            <div className="w-px h-3 bg-gray-200 dark:bg-zinc-700"></div>

                                            {/* Stats */}
                                            {group.statistics ? (
                                                <span dir="ltr" className="font-mono text-gray-600 dark:text-gray-400">
                                                    {group.statistics}
                                                </span>
                                            ) : (
                                                <span className="text-gray-400">-</span>
                                            )}
                                        </div>
                                        
                                        {/* Progress Bar */}
                                        <div className="w-full h-1 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                                            <div 
                                                className="h-full bg-gradient-to-r from-primary-tw-500 to-purple-500 rounded-full transition-all duration-700 ease-out"
                                                style={{ width: `${percentage}%` }}
                                            />
                                        </div>
                                    </div>
                                    
                                    {/* Action Icon */}
                                  
                                    
                                    {/* Hover Action Link for canOpen */}
                                    {canOpen && (
                                        <Link 
                                            href={`/dashboard/programs/fullscreen-${group.id}`}
                                            className="absolute inset-0 z-10 focus:outline-none focus:ring-2 focus:ring-primary-tw-500 rounded-xl"
                                        >
                                            <span className="sr-only">عرض البرنامج</span>
                                        </Link>
                                    )}
                                </div>
                            )})}
                        </div>
                        
                        {allGroups.length > 2 && (
                            <button 
                                onClick={() => setIsExpanded(!isExpanded)}
                                className="w-full py-2 flex items-center justify-center gap-1 text-xs font-medium text-gray-500 dark:text-gray-400 hover:text-primary-tw-600 dark:hover:text-primary-tw-400 transition-colors"
                            >
                                {isExpanded ? (
                                    <>
                                        <span>عرض أقل</span>
                                        <ChevronUp className="w-3 h-3" />
                                    </>
                                ) : (
                                    <>
                                        <span>+ {hiddenCount} برامج أخرى</span>
                                        <ChevronDown className="w-3 h-3" />
                                    </>
                                )}
                            </button>
                        )}
                    </div>
                )}
            </div>

            {/* Hover effect overlay */}
            <div className="absolute inset-0 bg-gradient-to-t from-primary-tw-500/0 to-purple-600/0 group-hover:from-primary-tw-500/5 group-hover:to-purple-600/5 transition-all duration-300 pointer-events-none"></div>
        </div>
    );
}