import Image from "next/image";
import { getTranslations } from "next-intl/server";
import { URL_IMAGE } from "@/utils/url";
import { Link } from "@/i18n/navigation";
import {
    BookOpen,
    Package2,
    CalendarCheck,
    ChevronRight,
    CheckCircle2,
    Clock,
    CircleDot,
} from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

// ── Types matching GET /user/packages response ────────────────────────────────

interface UserPackageGroup {
    id: number;
    name: string;
    name_an: string | null;
    image: string;
    order: number;
    completion_status: "not_enrolled" | "in_progress" | "completed";
    start_date: string;
    end_date: string;
    progress_percentage: number;
    statistics: string;
    current_type: string | null;
    current_item: number | null;
}

export interface UserPackage {
    id: number;
    name: string;
    image: string;
    price: string;
    status_payment: string;
    subscription_at: string;
    total_groups: number;
    completed_groups: number;
    percentage: number;
    groups: UserPackageGroup[];
}

// ── Status helpers ────────────────────────────────────────────────────────────

function GroupStatusIcon({ status }: { status: UserPackageGroup["completion_status"] }) {
    if (status === "completed")
        return <CheckCircle2 className="size-4 text-green-500 flex-shrink-0" />;
    if (status === "in_progress")
        return <Clock className="size-4 text-amber-500 flex-shrink-0" />;
    return <CircleDot className="size-4 text-gray-300 flex-shrink-0" />;
}

function groupStatusColor(status: UserPackageGroup["completion_status"]) {
    if (status === "completed") return "bg-green-100 text-green-700 border-green-200";
    if (status === "in_progress") return "bg-amber-100 text-amber-700 border-amber-200";
    return "bg-gray-100 text-gray-500 border-gray-200";
}

// ── Main card ─────────────────────────────────────────────────────────────────

export async function UserPackageCard({ pkg }: { pkg: UserPackage }) {
    const t = await getTranslations();

    const subscriptionDate = new Date(pkg.subscription_at).toLocaleDateString("ar-SA", {
        year: "numeric",
        month: "short",
        day: "numeric",
    });

    function statusLabel(s: UserPackageGroup["completion_status"]) {
        if (s === "completed") return t("packages.completed_status");
        if (s === "in_progress") return t("packages.in_progress");
        return t("packages.not_enrolled");
    }

    return (
        <div className="flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm hover:shadow-lg hover:border-purple-200 transition-all duration-300 group">

            {/* ── Image banner ── */}
            <div className="relative h-40 overflow-hidden bg-gradient-to-br from-purple-100 to-indigo-100">
                {pkg.image ? (
                    <>
                        <Image
                            src={pkg.image.startsWith("http") ? pkg.image : `${URL_IMAGE}/${pkg.image}`}
                            alt={pkg.name}
                            fill
                            className="object-cover transition-transform duration-700 group-hover:scale-105"
                            sizes="(max-width: 768px) 100vw, 33vw"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
                    </>
                ) : (
                    <div className="size-full flex items-center justify-center">
                        <Package2 className="size-14 text-purple-300" />
                    </div>
                )}

                {/* Payment status badge */}
                <div className="absolute top-3 end-3 z-10">
                    <Badge className="bg-white/90 backdrop-blur-sm text-purple-700 border border-purple-200 text-xs font-semibold px-2.5 py-1 shadow">
                        {pkg.status_payment}
                    </Badge>
                </div>

                {/* Package name overlay */}
                <div className="absolute bottom-3 start-3 end-3 z-10">
                    <h3 className="text-white font-bold text-base leading-snug line-clamp-2 drop-shadow">
                        {pkg.name}
                    </h3>
                </div>
            </div>

            {/* ── Body ── */}
            <div className="flex flex-col gap-4 p-4 flex-1">

                {/* Subscription date */}
                <div className="flex items-center gap-1.5 text-xs text-gray-500">
                    <CalendarCheck className="size-3.5 text-purple-500 flex-shrink-0" />
                    <span>{subscriptionDate}</span>
                </div>

                {/* Overall progress */}
                <div className="space-y-1.5">
                    <div className="flex items-center justify-between text-xs text-gray-600">
                        <span className="font-medium">{t("packages.progress")}</span>
                        <span className="font-bold text-purple-700">{pkg.percentage}%</span>
                    </div>
                    {/* Inline progress bar — no external component needed */}
                    <div className="h-2 w-full rounded-full bg-gray-100 overflow-hidden">
                        <div
                            className="h-full rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 transition-all duration-500"
                            style={{ width: `${pkg.percentage}%` }}
                        />
                    </div>
                    <p className="text-xs text-gray-400">
                        {pkg.completed_groups} {t("packages.completed")} {t("packages.of")} {pkg.total_groups} {t("packages.courses")}
                    </p>
                </div>

                {/* Courses list */}
                {pkg.groups.length > 0 && (
                    <div className="space-y-2 border-t pt-3">
                        <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-1.5">
                            <BookOpen className="size-3.5 text-indigo-500" />
                            {t("packages.included_courses")}
                        </p>
                        <ul className="space-y-2">
                            {pkg.groups.map((group) => (
                                <Link
                                    key={group.id}
                                    href={`/dashboard/programs/fullscreen-${group.id}`}
                                    className="flex items-center gap-2.5 rounded-lg border p-2 hover:bg-gray-50 transition-colors"
                                >
                                    {/* Group thumbnail */}
                                    <div className="relative size-9 flex-shrink-0 rounded-md overflow-hidden bg-gray-100">
                                        {group.image ? (
                                            <Image
                                                src={group.image.startsWith("http") ? group.image : `${URL_IMAGE}/${group.image}`}
                                                alt={group.name}
                                                fill
                                                className="object-cover"
                                                sizes="36px"
                                            />
                                        ) : (
                                            <div className="size-full flex items-center justify-center">
                                                <BookOpen className="size-4 text-gray-300" />
                                            </div>
                                        )}
                                    </div>

                                    {/* Name + status */}
                                    <div className="flex-1 min-w-0">
                                        <p className="text-xs font-semibold text-gray-800 line-clamp-1">{group.name}</p>
                                        <div className="flex items-center gap-1 mt-0.5">
                                            <GroupStatusIcon status={group.completion_status} />
                                            <span className={`text-[10px] font-medium px-1.5 py-0.5 rounded-full border ${groupStatusColor(group.completion_status)}`}>
                                                {statusLabel(group.completion_status)}
                                            </span>
                                            {group.statistics && (
                                                <span className="text-[10px] text-gray-400 ms-auto">{group.statistics}</span>
                                            )}
                                        </div>
                                    </div>

                                    {/* Enter button if enrolled */}
                                    {(group.completion_status === "in_progress" || group.completion_status === "completed") && (
                                        <Link href={`/dashboard/programs/${group.id}`}>
                                            <ChevronRight className="size-4 text-purple-500 rtl:rotate-180" />
                                        </Link>
                                    )}
                                </Link>
                            ))}
                        </ul>
                    </div>
                )}
            </div>

            {/* ── Bottom accent ── */}
            <div className="h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
        </div>
    );
}