"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 {
    Loader,
    ShoppingCart,
    SaudiRiyal,
    Package2,
    CalendarRange,
    BookOpen,
    Tag,
    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 PackageDetailAside({ 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");

    return (
        <div className="sticky top-24 rounded-2xl border border-gray-200 bg-white shadow-lg overflow-hidden">
            {/* Package image */}
            <div className="relative h-56 w-full overflow-hidden">
                {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: 1024px) 100vw, 33vw"
                    />
                ) : (
                    <div className="size-full flex items-center justify-center bg-gradient-to-br from-purple-50 to-indigo-100">
                        <Package2 className="size-16 text-purple-300" />
                    </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />

                {/* Price overlay */}
                <div className="absolute bottom-4 start-4 end-4 flex items-end justify-between gap-4 ">
                    <div className="flex flex-col gap-1 items-start">
                        {pkg?.promotion ? (
                            <>
                                <div className="flex  gap-1.5 bg-white px-2 py-1 rounded-2xl  shadow-2xl  border border-white/20 items-center">
                                    <span className="text-primary-tw-700 font-black text-xl tracking-tighter">
                                        {pkg.final_price}
                                    </span>
                                    <SaudiRiyal className="size-5 text-primary-tw-600 " />
                                </div>
                                <div className="flex items-center gap-2 px-1">
                                    <del className="text-white/70 text-sm font-bold decoration-red-500/50">
                                        {pkg.price} <SaudiRiyal className="size-3 inline opacity-60" />
                                    </del>
                                    <Badge className="bg-red-600 text-white border-none py-0.5 px-2 text-[10px] font-black rounded-lg">
                                        -{pkg.promotion?.type === 'percentage' ? `${pkg.promotion.value}%` : <span className="flex items-center gap-0.5">{pkg.promotion?.value} <SaudiRiyal className="size-2.5" /></span>}
                                    </Badge>
                                </div>
                            </>
                        ) : pkg?.price && Number(pkg.price) > 0 ? (
                            <div className="flex items-baseline gap-1 bg-white px-4 py-2 rounded-2xl shadow-xl">
                                <span className="text-purple-700 font-black text-3xl tracking-tighter">
                                    {pkg.price}
                                </span>
                                <SaudiRiyal className="size-5 text-purple-600 mb-1" />
                            </div>
                        ) : (
                            <span className="inline-flex items-center bg-green-500 text-white font-black text-sm px-5 py-2 rounded-full shadow-2xl uppercase tracking-widest">
                                {t("packages.free")}
                            </span>
                        )}
                    </div>
                </div>
            </div>

            {/* Details */}
            <div className="p-6 space-y-6">
                 {/* Promo Counter */}
                 {pkg?.promotion?.end_at && (
                    <div className="p-4 bg-gradient-to-br from-primary-tw-50 to-white rounded-xl border border-primary-tw-100 shadow-sm">
                        <div className="flex items-center gap-2 mb-3">
                            <div className="size-6 rounded-lg bg-primary-tw-600 flex items-center justify-center text-white">
                                <Clock className="size-3.5" />
                            </div>
                            <span className="text-xs font-black text-primary-tw-700 uppercase tracking-wider">
                                {t("custom.offer_period") || "Offer Period"}
                            </span>
                        </div>
                        <div className="flex justify-center">
                            <CountdownTimer targetDate={pkg.promotion.end_at} />
                        </div>
                    </div>
                )}
                {(pkg?.discount_amount ?? 0) > 0 && (
                     <div className="relative overflow-hidden bg-gradient-to-br from-red-50 to-orange-50 border-2 border-dashed border-red-200 rounded-2xl p-4 group/voucher hover:bg-red-100/50 transition-colors duration-300">
                        <div className="flex items-center justify-between relative z-10">
                            <div className="flex items-center gap-3">
                                <div className="bg-red-600 text-white p-2.5 rounded-xl shadow-[0_4px_12px_rgba(220,38,38,0.2)] group-hover/voucher:scale-110 transition-transform duration-300">
                                    <Tag className="size-5" />
                                </div>
                                <div>
                                    <div className="flex items-center gap-1.5 mb-0.5">
                                        <span className="text-[10px] font-black text-red-600 uppercase tracking-widest">
                                            {t("custom.discount")}
                                        </span>
                                        <div className="h-1 w-1 rounded-full bg-red-300" />
                                        <span className="text-[10px] font-black text-orange-600 uppercase tracking-widest">
                                            {t("custom.limited-time")}
                                        </span>
                                    </div>
                                    <p className="text-lg font-black text-red-950 leading-none">
                                        {t("custom.saving")} {pkg.discount_amount} <SaudiRiyal className="size-3.5 inline mb-0.5" />
                                    </p>
                                </div>
                            </div>
                            <div className="h-10 w-px bg-red-200/50 mx-2" />
                            <div className="text-red-500 group-hover/voucher:translate-x-1 transition-transform">
                                 <ArrowRight className="size-5 rtl:rotate-180" />
                            </div>
                        </div>
                        {/* Decorative circles for punch-hole effect */}
                        <div className="absolute -left-3 top-1/2 -translate-y-1/2 size-6 bg-white rounded-full border border-red-100" />
                        <div className="absolute -right-3 top-1/2 -translate-y-1/2 size-6 bg-white rounded-full border border-red-100" />
                     </div>
                )}
                {/* Meta info */}
                <ul className="space-y-2.5 text-sm text-gray-600">
                    {pkg?.category && (
                        <li className="flex items-center gap-2">
                            <Tag className="size-4 text-purple-500 flex-shrink-0" />
                            <span>{pkg.category.name}</span>
                        </li>
                    )}
                    <li className="flex items-center gap-2">
                        <CalendarRange className="size-4 text-purple-500 flex-shrink-0" />
                        <span>{pkg?.month_number} {monthLabel}</span>
                    </li>
                    {pkg?.groups_count != null && (
                        <li className="flex items-center gap-2">
                            <BookOpen className="size-4 text-indigo-500 flex-shrink-0" />
                            <span>{pkg.groups_count} {t("packages.courses_count")}</span>
                        </li>
                    )}
                </ul>

                <div className="h-px bg-gray-100" />

                {/* CTA — only show for paid packages */}
                {pkg?.price && Number(pkg.price) > 0 && (
                    <Button
                        className="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-5 text-base"
                        onClick={() => addPackageToCart(pkg.id, t)}
                        disabled={isAdding}
                    >
                        {isAdding ? (
                            <Loader className="animate-spin size-5 me-2" />
                        ) : (
                            <ShoppingCart className="size-5 me-2" />
                        )}
                        {t("packages.add_to_cart")}
                    </Button>
                )}
            </div>

            {/* Bottom accent */}
            <div className="h-1 bg-gradient-to-r from-purple-500 via-indigo-500 to-pink-500" />
        </div>
    );
}