"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, usePathname } from "@/i18n/navigation";
import {
    Loader,
    ShoppingCart,
    SaudiRiyal,
    Tag,
    Package2,
    CalendarRange,
    BookOpen,
    ArrowRight,
    Clock
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { CountdownTimer } from "../../offers/_components/countdown";

export function PackageBox({ pkg }: { pkg: Package }) {
    const t = useTranslations();
    const pathname = usePathname();
    const isOffersPage = pathname.includes('/offers');
    const isHomePage = pathname === '/';
    const showCounter = isOffersPage || isHomePage;
    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="group relative flex flex-col overflow-hidden rounded-2xl bg-white border border-gray-200 hover:border-purple-300 transition-all duration-500 hover:shadow-2xl hover:-translate-y-1">
            {/* Image */}
            <div className="relative h-48 w-full overflow-hidden bg-gradient-to-br from-purple-50 to-indigo-100">
                {pkg.image ? (
                    <>
                        <Image
                            src={`https://tr.ivorytraining.com/${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/50 via-black/10 to-transparent" />
                    </>
                ) : (
                    <div className="size-full flex items-center justify-center">
                        <Package2 className="size-16 text-purple-300" />
                    </div>
                )}

                {showCounter && pkg.promotion?.start_at && (
                    <div className="absolute bottom-0 inset-x-0 z-20 bg-gradient-to-t from-primary-tw-600/90 to-primary-tw-600/70 backdrop-blur-sm p-2 text-white border-t border-white/20">
                        <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-3" />
                                <span className="text-[10px] font-black uppercase tracking-widest">{t("custom.offer_period") || "Offer Period"}</span>
                            </div>
                            <div className="bg-white/10 rounded-lg px-2 py-0.5">
                                <CountdownTimer targetDate={pkg.promotion.end_at!} />
                            </div>
                        </div>
                    </div>
                )}

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

                {/* Price */}
                <div className="absolute bottom-4 start-4 z-10 flex flex-col gap-0.5 items-start">
                    {pkg.promotion ? (
                        <>
                            <div className="flex items-center gap-1.5 bg-white px-3 py-1.5 rounded-xl shadow-2xl">
                                <span className="text-primary-tw-700 font-black text-xl tracking-tight">
                                    {Number(pkg.promotion.final_price) || ((Number(pkg.price) || 0) - (Number(pkg.discount_amount) || 0))}
                                </span>
                                <SaudiRiyal className="size-4 text-primary-tw-600" />
                            </div>
                            <del className="text-white/80 text-[10px] font-bold px-1.5 decoration-red-500/50">
                                {pkg.price} <SaudiRiyal className="size-2.5 inline opacity-60" />
                            </del>
                        </>
                    ) : pkg.price && Number(pkg.price) > 0 ? (
                        <div className="flex items-center gap-1.5 bg-white px-3 py-1.5 rounded-xl shadow-lg">
                            <span className="text-purple-700 font-black text-xl tracking-tight">
                                {pkg.price}
                            </span>
                            <SaudiRiyal className="size-4 text-purple-600" />
                        </div>
                    ) : (
                        <span className="inline-flex items-center bg-green-500 text-white font-black text-[10px] px-4 py-1.5 rounded-full shadow-xl uppercase tracking-widest">
                            {t("packages.free")}
                        </span>
                    )}
                </div>

                {/* Discount Percentage Badge - Styled as a Label */}
                {pkg.promotion && (pkg.discount_amount ?? 0) > 0 && (
                     <div className="absolute top-0 start-0 z-20">
                        <div className="bg-red-600 text-white font-black text-[10px] px-4 py-1.5 rounded-br-2xl shadow-[4px_4px_15px_rgba(220,38,38,0.3)] uppercase tracking-widest flex items-center gap-1.5">
                            <Tag className="size-3" />
                            <span>-{pkg.promotion.type === 'percentage' ? `${pkg.promotion.value}%` : <span className="flex items-center gap-0.5">{pkg.promotion.value} <SaudiRiyal className="size-2.5" /></span>}</span>
                        </div>
                     </div>
                )}
            </div>

            {/* Body */}
            <div className="flex flex-col flex-1 p-5 pt-7 gap-4">
                <div className="space-y-2">
                    <Link href={`/programs/packages/${pkg.id}`}>
                        <h3 className="font-black text-gray-900 text-xl leading-tight line-clamp-2 group-hover:text-purple-700 transition-colors duration-300">
                            {pkg.name}
                        </h3>
                    </Link>
                    {pkg.description && (
                        <p className="text-gray-500 text-xs line-clamp-2 leading-relaxed font-medium">
                            {pkg.description}
                        </p>
                    )}
                </div>

                {/* Meta Tags */}
                <div className="flex flex-wrap gap-2 pt-1 border-t border-gray-50">
                     <span className="bg-purple-50 text-purple-700 text-[10px] font-black px-2 py-1 rounded-md flex items-center gap-1">
                        <CalendarRange className="size-3" />
                        {pkg.month_number} {monthLabel}
                    </span>
                    {groupsCount > 0 && (
                        <span className="bg-indigo-50 text-indigo-700 text-[10px] font-black px-2 py-1 rounded-md flex items-center gap-1">
                            <BookOpen className="size-3" />
                            {groupsCount} {t("packages.courses_count")}
                        </span>
                    )}
                </div>

                {/* Actions */}
                <div className="flex items-center gap-2 pt-1">
                    {Number(pkg.price) > 0 && (
                        <Button
                            size="sm"
                            variant="secondary"
                            className="text-purple-700 flex-1"
                            onClick={() => addPackageToCart(pkg.id, t)}
                            disabled={isAdding}
                        >
                            {isAdding ? (
                                <Loader className="animate-spin size-4" />
                            ) : (
                                <ShoppingCart className="size-4 me-1.5" />
                            )}
                            {t("packages.add_to_cart")}
                        </Button>
                    )}

                    <Button asChild size="sm" className={`bg-purple-600 hover:bg-purple-700 text-white ${Number(pkg.price) <= 0 ? 'flex-1' : ''}`}>
                        <Link href={`/programs/packages/${pkg.id}`}>
                            {Number(pkg.price) <= 0 ? t("routes.programs-details") : <ArrowRight className="size-4 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>
    );
}