"use client"
import Image from "next/image";
import { URL_IMAGE } from "@/utils/url";
import { Offer } from "@/types/models";
import { Link } from "@/i18n/navigation";
import { useTranslations } from "next-intl";
import { Badge } from "@/components/ui/badge";
import { ArrowRight, Clock, GraduationCap, Layers, Percent, Zap } from "lucide-react";
import { CountdownTimer } from "./countdown";

export function OfferCard({ offer }: { offer: Offer }) {
    const t = useTranslations();
    
    return (
        <Link 
            href={`/programs/offers/${offer.id}`}
            className="group relative flex flex-col bg-white rounded-3xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500"
        >
            {/* Discount Badge */}
            {offer.value > 0 && (
                <div className="absolute top-4 right-4 z-10">
                    <Badge className="bg-primary-tw text-white border-none px-4 py-1.5 rounded-full font-black text-sm shadow-lg animate-pulse">
                        <Zap className="size-3 mr-1 inline" /> {offer.value}% {offer.type === 'percentage' ? t("custom.off") || "OFF" : ""}
                    </Badge>
                </div>
            )}

            {/* Image Section */}
            <div className="relative h-56 w-full overflow-hidden">
                {offer.image_url || offer.image ? (
                    <Image
                        src={offer.image_url || `${URL_IMAGE}/${offer.image}`}
                        alt={offer.title}
                        fill
                        className="object-cover group-hover:scale-110 transition-transform duration-700"
                    />
                ) : (
                    <div className="absolute inset-0 bg-gradient-to-br from-primary-tw-600/10 to-primary-tw-900/5 flex items-center justify-center">
                        <Percent className="size-20 text-primary-tw-200 group-hover:rotate-12 transition-transform duration-500" />
                    </div>
                )}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition-opacity" />
                
                <div className="absolute bottom-4 left-4 right-4 text-white">
                    <h3 className="text-xl font-black line-clamp-1">{offer.title}</h3>
                </div>

                {offer.end_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-3 text-white border-t border-white/10">
                        <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 animate-pulse" />
                                <span className="text-[10px] font-black uppercase tracking-widest opacity-80">{t("custom.offer_period") || "Offer Period"}</span>
                            </div>
                            <div className="bg-white/20 rounded-xl px-3 py-1 ring-1 ring-white/30">
                                <CountdownTimer targetDate={offer.end_at} />
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Content Section */}
            <div className="p-6 space-y-4 flex-1 flex flex-col">
                <div className="flex items-center gap-6 text-sm">
                    <div className="flex items-center gap-2 text-gray-600 font-bold">
                        <div className="size-8 rounded-lg bg-primary-tw-50 flex items-center justify-center text-primary-tw-600">
                            <GraduationCap className="size-4" />
                        </div>
                        <span>{offer.groups_count} {t("custom.programs") || "Programs"}</span>
                    </div>
                    <div className="flex items-center gap-2 text-gray-600 font-bold">
                        <div className="size-8 rounded-lg bg-amber-50 flex items-center justify-center text-amber-500">
                            <Layers className="size-4" />
                        </div>
                        <span>{offer.packages_count} {t("custom.packages") || "Packages"}</span>
                    </div>
                </div>

                <p className="text-gray-500 text-sm line-clamp-2 leading-relaxed flex-1">
                    {t("custom.offer_details_preview", { title: offer.title }) || `Check out the exclusive items included in ${offer.title}`}
                </p>

                <div className="pt-4 border-t border-gray-50 flex items-center justify-between group/btn">
                    <span className="text-primary-tw-600 font-black text-sm tracking-widest uppercase">{t("custom.view_details") || "View Details"}</span>
                    <div className="size-10 rounded-full bg-gray-50 flex items-center justify-center group-hover/btn:bg-primary-tw-600 group-hover/btn:text-white transition-all duration-300">
                        <ArrowRight className="size-5 rtl:rotate-180 group-hover/btn:translate-x-1 rtl:group-hover/btn:-translate-x-1 transition-transform" />
                    </div>
                </div>
            </div>
        </Link>
    );
}