"use client";
import Image from "next/image";
import { Link } from "@/i18n/navigation";
import { LearningPathGroup } from "@/types/models";
import { URL_IMAGE } from "@/utils/url";
import { CheckCircle2, Clock, GraduationCap, ArrowLeft, ArrowRight, PlayCircle, Lock } from "lucide-react";
import { useLocale } from "next-intl";

interface Props {
    group: LearningPathGroup;
    index: number;
}

export function LearningPathGroupItem({ group, index }: Props) {
    const locale = useLocale();
    const isArabic = locale === "ar";

    const percentage = Math.min(100, Math.max(0, group.progress_percentage || 0));
    const isCompleted = group.completion_status === "completed";
    const isInProgress = group.completion_status === "in_progress" || group.completion_status === "enrolled" || (percentage > 0 && !isCompleted);
    const isNotStarted = !isCompleted && !isInProgress;

    const canOpen = group.can_open !== false; // Default to true if undefined
    
    // Build deep link for resume
    let href = `/dashboard/programs/fullscreen-${group.id}`;
    if (group.current_type && group.current_item) {
        href += `?${group.current_type}=${group.current_item}`;
    }

    return (
        <div className={`group relative flex flex-col sm:flex-row gap-0 rounded-2xl overflow-hidden bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 transition-all duration-300 ${
            canOpen 
                ? "hover:border-primary-tw-300 dark:hover:border-primary-tw-700 hover:shadow-xl" 
                : "opacity-75"
        }`}>

            {/* Step indicator */}
            <div className="absolute top-4 start-4 z-10 size-8 rounded-full bg-primary-tw-600 text-white flex items-center justify-center text-sm font-bold shadow-md">
                {index + 1}
            </div>

            {/* Completion badge */}
            {isCompleted && (
                <div className="absolute top-4 end-4 z-10 flex items-center gap-1 bg-green-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full shadow-md">
                    <CheckCircle2 className="size-3" />
                    مكتمل
                </div>
            )}

            {/* Image */}
            <div className="relative w-full sm:w-52 h-48 sm:h-auto shrink-0 bg-gradient-to-br from-primary-tw-100 to-purple-100 dark:from-primary-tw-950 dark:to-purple-950">
                {group.image ? (
                    <Image
                        src={`${URL_IMAGE}/${group.image}`}
                        alt={group.name}
                        fill
                        className={`object-cover transition-transform duration-700 ${canOpen ? "group-hover:scale-105" : "grayscale opacity-50"}`}
                    />
                ) : (
                    <div className="size-full flex items-center justify-center">
                        <GraduationCap className="size-12 text-primary-tw-300" />
                    </div>
                )}
                {/* Gradient overlay on image */}
                <div className={`absolute inset-0 bg-gradient-to-t from-black/40 to-transparent transition-opacity duration-300 ${canOpen ? "opacity-0 group-hover:opacity-100" : "opacity-40"}`} />
                {/* Play/Lock button on hover */}
                <div className="absolute inset-0 flex items-center justify-center transition-opacity duration-300">
                    {canOpen ? (
                        <div className="size-12 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center border border-white/40 opacity-0 group-hover:opacity-100">
                            <PlayCircle className="size-7 text-white drop-shadow" />
                        </div>
                    ) : (
                        <div className="size-12 rounded-full bg-black/20 backdrop-blur-md flex items-center justify-center border border-white/20">
                            <Lock className="size-6 text-white drop-shadow" />
                        </div>
                    )}
                </div>
            </div>

            {/* Content */}
            <div className="flex-1 p-5 flex flex-col justify-between gap-4">
                <div className="space-y-1">
                    {/* Status pill */}
                    <div className="flex items-center gap-2 flex-wrap">
                        {isCompleted && (
                            <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-green-700 bg-green-50 dark:bg-green-900/20 dark:text-green-300 px-2 py-0.5 rounded-full border border-green-200 dark:border-green-800">
                                <CheckCircle2 className="size-3" />
                                مكتمل
                            </span>
                        )}
                        {isInProgress && (
                            <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-300 px-2 py-0.5 rounded-full border border-blue-200 dark:border-blue-800">
                                <Clock className="size-3" />
                                جاري
                            </span>
                        )}
                        {isNotStarted && (
                            <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-gray-500 bg-gray-50 dark:bg-zinc-800 dark:text-gray-400 px-2 py-0.5 rounded-full border border-gray-200 dark:border-zinc-700">
                                لم يبدأ
                            </span>
                        )}
                        {group.statistics && (
                            <span className="text-[11px] text-gray-400 font-mono bg-gray-50 dark:bg-zinc-800 px-2 py-0.5 rounded-full border border-gray-100 dark:border-zinc-700" dir="ltr">
                                {group.statistics}
                            </span>
                        )}
                    </div>

                    <h3 className={`text-lg font-bold leading-snug transition-colors ${
                        canOpen 
                            ? "text-gray-900 dark:text-white group-hover:text-primary-tw-600 dark:group-hover:text-primary-tw-400" 
                            : "text-gray-400 dark:text-zinc-500"
                    }`}>
                        {group.name}
                    </h3>
                    {group.name_an && (
                        <p className="text-sm text-gray-500 dark:text-gray-400">{group.name_an}</p>
                    )}
                </div>

                {/* Progress bar */}
                <div className="space-y-1.5">
                    <div className="flex justify-between text-xs font-medium text-gray-500 dark:text-gray-400">
                        <span>التقدم</span>
                        <span className="text-primary-tw-600 dark:text-primary-tw-400 font-bold">{percentage}%</span>
                    </div>
                    <div className="w-full h-2 bg-gray-100 dark:bg-zinc-800 rounded-full overflow-hidden">
                        <div
                            className={`h-full rounded-full transition-all duration-700 ease-out ${
                                isCompleted
                                    ? "bg-gradient-to-r from-green-500 to-emerald-400"
                                    : "bg-gradient-to-r from-primary-tw-500 to-purple-500"
                            }`}
                            style={{ width: `${percentage}%` }}
                        />
                    </div>
                </div>

                {/* CTA */}
                <div className="flex justify-end">
                    {canOpen ? (
                        <Link
                            href={href}
                            className="inline-flex items-center gap-2 text-sm font-semibold text-primary-tw-600 dark:text-primary-tw-400 hover:text-primary-tw-700 dark:hover:text-primary-tw-300 group/link transition-colors"
                        >
                            {percentage > 0 ? "متابعة البرنامج" : "بدء البرنامج"}
                            {isArabic
                                ? <ArrowLeft className="size-4 group-hover/link:-translate-x-1 transition-transform" />
                                : <ArrowRight className="size-4 group-hover/link:translate-x-1 transition-transform" />
                            }
                        </Link>
                    ) : (
                        <div className="inline-flex items-center gap-2 text-xs font-medium text-gray-400 dark:text-zinc-600 bg-gray-50 dark:bg-zinc-800/50 px-3 py-1.5 rounded-lg border border-gray-100 dark:border-zinc-800">
                            <Lock className="size-3.5" />
                            <span>يجب إكمال البرنامج السابق أولاً</span>
                        </div>
                    )}
                </div>
            </div>

            {/* Left accent line */}
            <div className={`absolute start-0 top-0 bottom-0 w-1 transition-all duration-300 ${
                isCompleted ? "bg-green-500" : isInProgress ? "bg-blue-500" : "bg-gray-200 dark:bg-zinc-700 group-hover:bg-primary-tw-500"
            }`} />
        </div>
    );
}