"use client";

import { useTranslations, useLocale } from "next-intl";
import { Link } from "@/i18n/navigation";
import { 
    Check, 
    ArrowRight, 
    LayoutDashboard, 
    Search, 
    ArrowLeft
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { useSearchParams } from "next/navigation";
import { useQueryClient } from "@tanstack/react-query";
import { revalidate } from "@/utils/revalidate";
import { useCart } from "@/contexts/cart";

export default function SuccessPaymentPage() {
    const t = useTranslations();
    const locale = useLocale();
    const isArabic = locale === "ar";
    const searchParams = useSearchParams();
    const queryClient = useQueryClient();
    const { fetchCart } = useCart();

    const orderId = searchParams.get("orderId") || searchParams.get("paymentId") || "ORD-" + Math.floor(10000 + Math.random() * 90000);

    const handleGoToDashboard = async () => {
        // 1. Invalidate tanstack query cache
        await queryClient.invalidateQueries();
        
        // 2. Revalidate server-side tags for purchased records
        try {
            await revalidate({ url: "/user/groups/records" });
            await revalidate({ url: "/cart" });
        } catch (e) {
            console.error("Revalidation error", e);
        }

        // 3. Refresh cart store
        await fetchCart(t);

        // 4. Hard redirect to ensure fresh server-side state
        window.location.assign("/" + locale + "/dashboard/programs");
    };

    return (
        <div className="min-h-screen bg-white flex flex-col items-center justify-center p-4 overflow-hidden">
            {/* Main Success Container with Slide-up Animation */}
            <div className="w-full max-w-xl text-center space-y-8 animate-in fade-in slide-in-from-bottom-12 duration-1000 ease-out">
                
                {/* Success Icon with Pop effect */}
                <div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-emerald-50 mb-4 relative animate-in zoom-in duration-700 delay-300">
                    <div className="absolute inset-0 rounded-full border-4 border-emerald-100 animate-ping opacity-20" />
                    <div className="w-20 h-20 rounded-full bg-emerald-500 flex items-center justify-center shadow-xl shadow-emerald-100 transform transition-transform hover:scale-110">
                        <Check className="w-10 h-10 text-white stroke-[4px]" />
                    </div>
                </div>

                {/* Text Section with Staggered Slide Animations */}
                <div className="space-y-4">
                    <h1 className="text-4xl md:text-5xl font-black text-slate-900 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-700 delay-500 fill-mode-both">
                        {t("success_payment_title")}
                    </h1>
                    <p className="text-slate-500 text-lg max-w-sm mx-auto animate-in fade-in slide-in-from-bottom-4 duration-700 delay-700 fill-mode-both leading-relaxed">
                        {t("success_payment_desc")}
                    </p>
                </div>

               

                {/* Action Buttons with Horizontal Slide Translation */}
                <div className="flex flex-col sm:flex-row gap-4 pt-8 animate-in fade-in slide-in-from-bottom-6 duration-700 delay-1000 fill-mode-both">
                    <Button
                        onClick={handleGoToDashboard}
                        className="flex-1 h-16 rounded-[24px] bg-purple-600 hover:bg-purple-700 text-white font-black shadow-2xl shadow-purple-100 group transition-all hover:-translate-y-1 active:translate-y-0"
                    >
                        <div className="flex items-center justify-center gap-3 text-lg">
                            <LayoutDashboard className="w-5 h-5" />
                            {t("go_to_dashboard")}
                            {isArabic 
                                ? <ArrowLeft className="w-5 h-5 group-hover:-translate-x-2 transition-transform" /> 
                                : <ArrowRight className="w-5 h-5 group-hover:translate-x-2 transition-transform" />
                            }
                        </div>
                    </Button>
                    
                    <Button
                        asChild
                        variant="outline"
                        className="flex-1 h-16 rounded-[24px] border-2 border-slate-100 hover:bg-slate-50 text-slate-600 font-black text-lg transition-all hover:-translate-y-1 active:translate-y-0"
                    >
                        <Link href="/programs" className="flex items-center justify-center gap-3">
                            <Search className="w-5 h-5" />
                            {t("explore_programs")}
                        </Link>
                    </Button>
                </div>

                
            </div>
        </div>
    );
}