import { GET } from "@/utils/get";
import { Offer, Program, Package } from "@/types/models";
import { ProgramBox } from "../../(all)/_components/program-box";
import { PackageBox } from "../../(all)/_components/package-box";
import { getTranslations } from "next-intl/server";
import { Badge } from "@/components/ui/badge";
import { Percent, Zap, GraduationCap, Layers, ArrowLeft, Calendar, Sparkles, CheckCircle2, Trophy, Rocket, ShieldCheck, Clock } from "lucide-react";
import { Metadata } from "next";
import { Link } from "@/i18n/navigation";
import { CountdownTimer } from "../_components/countdown";
import Image from "next/image";
import { URL_IMAGE } from "@/utils/url";

export const generateMetadata = async ({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> => {
    const { id } = await params;
    const t = await getTranslations();
    try {
        const response = await GET({ url: `/offers/${id}`, revalidate: 0 });
        return {
            title: response?.offer?.title || t('routes.offers') || "Offer Details"
        }
    } catch {
        return { title: "Offer Details" }
    }
};

async function getOfferDetails(id: string) {
    try {
        const response = await GET({ url: `/offers/${id}`, revalidate: 0 });
        return response?.offer || null;
    } catch (error) {
        console.error("Failed to fetch offer details:", error);
        return null;
    }
}

export default async function OfferDetailsPage({ params }: { params: Promise<{ id: string, locale: string }> }) {
    const { id, locale } = await params;
    const offer: Offer | null = await getOfferDetails(id);
    const t = await getTranslations();

    if (!offer) {
        return (
            <main className="py-20 text-center">
                <h2 className="text-2xl font-black text-gray-900">{t("custom.offer_not_found") || "Offer not found"}</h2>
                <Link href="/programs/offers" className="text-primary-tw-600 font-bold mt-4 inline-block underline">
                    {t("custom.back_to_offers") || "Back to all offers"}
                </Link>
            </main>
        );
    }

    const programs = (offer.groups || []) as any[] as Program[];
    const packages = (offer.packages || []) as any[] as Package[];

    return (
        <main className="min-h-screen bg-white selection:bg-primary-tw-100 relative overflow-hidden">
            {/* Ultra-Premium Background */}
            <div className="absolute top-0 inset-x-0 h-[1200px] overflow-hidden pointer-events-none">
                <div className="absolute -top-[5%] -right-[5%] size-[800px] bg-primary-tw-600/[0.03] blur-[150px] rounded-full animate-blob" />
                <div className="absolute top-[10%] -left-[10%] size-[600px] bg-amber-500/[0.02] blur-[120px] rounded-full animate-blob [animation-delay:2s]" />
                <div className="absolute inset-0 opacity-[0.015] grayscale" 
                     style={{ backgroundImage: 'url("https://www.transparenttextures.com/patterns/carbon-fibre.png")' }} />
            </div>

            {/* Header / Navigation Bar */}
            <div className="sticky top-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-100">
                <div className="box mx-auto px-4  pt-4  h-20 flex items-center justify-between">
                    <Link 
                        href="/programs/offers" 
                        className="group flex items-center gap-3 text-gray-500 hover:text-primary-tw-600 transition-all font-black text-[10px] uppercase tracking-[0.2em]"
                    >
                        <ArrowLeft className="size-4 rtl:rotate-180 group-hover:-translate-x-1 rtl:group-hover:translate-x-1 transition-transform" />
                        {t("custom.all_offers") || "All Offers"}
                    </Link>

                    <div className="flex items-center gap-6">
                        
                        {offer.end_at && (
                            <div className="flex items-center  gap-4 bg-amber-50 px-4 py-2 rounded-full border border-amber-100 shadow-sm">
                               
                                <CountdownTimer targetDate={offer.end_at} />
                            </div>
                        )}
                    </div>
                </div>
            </div>

            <div className="relative box mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-24  ">
                {/* Hero Section: Grid Layout */}
                <section className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                    <div className="lg:col-span-8 space-y-10">
                        <div className="space-y-6">
                            <div className="flex flex-wrap items-center gap-4">
                                <Badge className="bg-primary-tw-600 text-white border-none px-6 py-2 rounded-full font-black text-[10px] uppercase tracking-[0.2em] shadow-xl shadow-primary-tw-600/20">
                                    <Zap className="size-3 mr-2 inline" /> {t("custom.special_offer") || "Special Campaign"}
                                </Badge>
                                <div className="flex items-center gap-2 px-4 py-1.5 bg-gray-50 rounded-full border border-gray-100 text-[10px] font-black text-gray-400 uppercase tracking-widest">
                                    <Sparkles className="size-3 text-amber-500" />
                                    {t("custom.limited_slots") || "Exclusive Spots"}
                                </div>
                            </div>
                            
                            <h1 className="text-3xl md:text-6xl font-black text-gray-900 tracking-tight leading-[0.9] drop-shadow-sm">
                                {offer.title}
                            </h1>

                            
                        </div>

                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div className="bg-primary-tw-50 p-8 rounded-[40px] border border-primary-tw-100 relative overflow-hidden group hover:bg-primary-tw-600 transition-all duration-500">
                                <div className="relative z-10 space-y-4">
                                    <div className="size-14 rounded-2xl bg-white shadow-lg flex items-center justify-center text-primary-tw-600 group-hover:scale-110 transition-transform">
                                        <Percent className="size-7" />
                                    </div>
                                    <div>
                                        <div className="text-xs font-black text-primary-tw-600 group-hover:text-white/70 uppercase tracking-widest mb-1">{t("custom.saving") || "You Save"}</div>
                                        <div className="text-4xl font-black text-gray-900 group-hover:text-white tracking-tighter">{offer.value}% {t("custom.off") || "OFF"}</div>
                                    </div>
                                </div>
                                <div className="absolute -bottom-4 -right-4 size-32 bg-primary-tw-600/5 rounded-full group-hover:bg-white/10 transition-colors" />
                            </div>

                            <div className="bg-gray-900 p-8 rounded-[40px] border border-gray-800 relative overflow-hidden group">
                                <div className="relative z-10 space-y-4">
                                    <div className="size-14 rounded-2xl bg-white/10 backdrop-blur-md shadow-lg flex items-center justify-center text-amber-400 group-hover:rotate-12 transition-transform">
                                        <Trophy className="size-7" />
                                    </div>
                                    <div>
                                        <div className="text-xs font-black text-gray-400 uppercase tracking-widest mb-1">{t("custom.elite_programs") || "Elite Access"}</div>
                                        <div className="text-4xl font-black text-white tracking-tighter">{offer.groups_count + offer.packages_count} {t("custom.total_items") || "Deals"}</div>
                                    </div>
                                </div>
                                <div className="absolute top-0 right-0 size-48 bg-primary-tw-600/10 blur-[60px] rounded-full" />
                            </div>
                        </div>
                    </div>

                    <div className="lg:col-span-4 relative">
                        <div className="relative aspect-square rounded-[60px] overflow-hidden bg-gray-100 border-8 border-white shadow-2xl">
                            {offer.image ? (
                                <Image 
                                    src={`${URL_IMAGE}/${offer.image}`} 
                                    alt={offer.title} 
                                    fill 
                                    className="object-cover"
                                />
                            ) : (
                                <div className="absolute inset-0 bg-gradient-to-br from-primary-tw-600 to-indigo-900 flex items-center justify-center">
                                    <Rocket className="size-32 text-white/10 animate-float" />
                                    <div className="absolute bottom-12 inset-x-12 p-8 rounded-[32px] bg-white/10 backdrop-blur-md border border-white/20">
                                        <div className="text-white text-center font-black text-xl uppercase tracking-[0.2em]">{offer.title}</div>
                                    </div>
                                </div>
                            )}
                        </div>
                        {/* Decorative floating badge */}
                        <div className="absolute -bottom-4 -right-4 size-32 bg-amber-400 rounded-full flex flex-col items-center justify-center text-gray-900 shadow-2xl border-4 border-white animate-bounce-slow z-20">
                            <span className="font-black text-2xl leading-none">-{offer.value}%</span>
                            <span className="font-black text-[8px] uppercase tracking-widest">{t("custom.exclusive") || "EXCLUSIVE"}</span>
                        </div>
                    </div>
                </section>

                {/* Items Grid Section */}
                <div className="space-y-32">
                    {programs.length > 0 && (
                        <section id="programs">
                            <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
                                <div className="space-y-4">
                                    <div className="flex items-center gap-3">
                                        <div className="size-10 rounded-xl bg-primary-tw-600 flex items-center justify-center text-white shadow-lg shadow-primary-tw-600/20">
                                            <GraduationCap className="size-5" />
                                        </div>
<h2 className="text-3xl font-black text-gray-900 tracking-tight">
                                        {t("custom.included_programs") || "Included Programs"}
                                    </h2>                                    </div>
                                    
                                </div>
                               
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                                {programs.map((program) => (
                                    <ProgramBox key={program.id} program={program} />
                                ))}
                            </div>
                        </section>
                    )}

                    {packages.length > 0 && (
                        <section id="packages">
                            <div className="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
                                <div className="space-y-4">
                                    <div className="flex items-center gap-3">
                                        <div className="size-10 rounded-xl bg-amber-500 flex items-center justify-center text-white shadow-lg shadow-amber-500/20">
                                            <Layers className="size-5" />
                                        </div>
                                        <span className="text-[10px] font-black text-amber-600 uppercase tracking-[0.3em]">{t("custom.value_bundles") || "Value Bundles"}</span>
                                    </div>
                                    <h2 className="text-5xl font-black text-gray-900 tracking-tight">
                                        {t("custom.included_packages") || "Included Packages"}
                                    </h2>
                                </div>
                                <p className="text-gray-400 font-medium max-w-sm border-l-2 border-gray-100 pl-6 rtl:border-l-0 rtl:border-r-2 rtl:pl-0 rtl:pr-6">
                                    {t("custom.packages_selection_desc") || "Comprehensive training packages designed to accelerate your professional growth."}
                                </p>
                            </div>
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                                {packages.map((pkg) => (
                                    <PackageBox key={pkg.id} pkg={pkg} />
                                ))}
                            </div>
                        </section>
                    )}
                </div>
            </div>

            {/* Sticky Mobile Footer Enrollment CTA */}
            <div className="md:hidden fixed bottom-6 inset-x-4 z-[100] animate-fade-in">
                <div className="bg-gray-900 text-white p-4 rounded-3xl shadow-2xl flex items-center justify-between border border-white/10 backdrop-blur-md">
                   <div className="flex flex-col">
                        <span className="text-[10px] font-black text-white/50 uppercase tracking-widest">{offer.title}</span>
                        <span className="text-lg font-black">{offer.value}% {t("custom.off")}</span>
                   </div>
                   <Link href="#programs" className="bg-primary-tw-600 px-6 py-3 rounded-2xl font-black text-xs uppercase tracking-widest hover:scale-105 transition-transform">
                        {t("custom.view_programs") || "View Deals"}
                   </Link>
                </div>
            </div>
        </main>
    );
}