"use client";
import Image from "next/image";
import { Package } from "@/types/models";
import { URL_IMAGE } from "@/utils/url";
import { useCart } from "@/contexts/cart";
import { useTranslations } from "next-intl";
import { Link } from "@/i18n/navigation";
import {
    CalendarRange,
    BookOpen,
    Tag,
    Package2,
    SaudiRiyal,
    ArrowRight,
    ShoppingCart,
    Loader,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

export function DashboardPackageCard({ pkg }: { pkg: Package }) {
    const t = useTranslations();
    const { addPackageToCart, itemIdAdding } = useCart();

    const isAdding = itemIdAdding === pkg.id;
    const monthLabel = pkg.month_number === 1 ? t("packages.month") : t("packages.months");
    const groupsCount = (pkg as any).groups?.length ?? pkg.groups_count ?? 0;

    return (
        <div className="relative flex flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white hover:border-purple-300 hover:shadow-xl transition-all duration-500 hover:-translate-y-1 group">
            {/* Image */}
            <div className="relative h-40 overflow-hidden bg-gradient-to-br from-purple-50 to-indigo-100">
                {pkg.image ? (
                    <>
                        <Image
                            src={`${URL_IMAGE}/${pkg.image}`}
                            alt={pkg.name}
                            fill
                            className="object-cover transition-transform duration-700 group-hover:scale-110"
                            sizes="(max-width: 768px) 100vw, 33vw"
                        />
                        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
                    </>
                ) : (
                    <div className="size-full flex items-center justify-center">
                        <Package2 className="size-14 text-purple-300" />
                    </div>
                )}

                {/* Category badge */}
                {pkg.category && (
                    <div className="absolute top-2 end-2 z-10">
                        <Badge className="bg-white/90 backdrop-blur-sm text-purple-700 border border-purple-100 text-xs px-2 py-0.5">
                            <Tag className="size-3 me-1" />
                            {pkg.category.name}
                        </Badge>
                    </div>
                )}

                {/* Price */}
                <div className="absolute bottom-2 start-2 z-10">
                    {pkg.price && Number(pkg.price) > 0 ? (
                        <span className="inline-flex items-center gap-1 bg-white/95 text-purple-700 font-bold text-sm px-2.5 py-1 rounded-full shadow">
                            {pkg.price} <SaudiRiyal className="size-3.5" />
                        </span>
                    ) : (
                        <span className="inline-flex items-center gap-1 bg-green-500 text-white font-bold text-xs px-2.5 py-1 rounded-full shadow">
                            {t("packages.free")}
                        </span>
                    )}
                </div>
            </div>

            {/* Body */}
            <div className="flex flex-col flex-1 p-4 gap-2.5">
                <h3 className="font-bold text-gray-900 text-base leading-snug line-clamp-2 group-hover:text-purple-700 transition-colors">
                    {pkg.name}
                </h3>

                <p className="text-gray-500 text-xs line-clamp-2 leading-relaxed flex-1">
                    {pkg.description}
                </p>

                {/* Meta */}
                <div className="flex flex-wrap gap-2.5 text-xs text-gray-500 border-t pt-2.5">
                    <span className="flex items-center gap-1">
                        <CalendarRange className="size-3.5 text-purple-500" />
                        {pkg.month_number} {monthLabel}
                    </span>
                    {groupsCount > 0 && (
                        <span className="flex items-center gap-1">
                            <BookOpen className="size-3.5 text-indigo-500" />
                            {groupsCount} {t("packages.courses_count")}
                        </span>
                    )}
                </div>

                {/* Actions */}
                <div className="flex items-center gap-2 pt-1">
                    <Button
                        size="sm"
                        variant="outline"
                        className="text-purple-700 border-purple-200 hover:bg-purple-50 flex-1 text-xs"
                        onClick={() => addPackageToCart(pkg.id, t)}
                        disabled={isAdding}
                    >
                        {isAdding ? (
                            <Loader className="animate-spin size-3.5" />
                        ) : (
                            <ShoppingCart className="size-3.5 me-1" />
                        )}
                        {t("packages.add_to_cart")}
                    </Button>

                    <Button asChild size="sm" className="bg-purple-600 hover:bg-purple-700 text-white text-xs">
                        <Link href={`/programs/packages/${pkg.id}`}>
                            <ArrowRight className="size-3.5 rtl:rotate-180" />
                        </Link>
                    </Button>
                </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>
    );
}