"use client";

import { useTranslations, useLocale } from "next-intl";
import { Link } from "@/i18n/navigation";
import { 
    XCircle, 
    RefreshCcw, 
    ShoppingCart, 
    ArrowRight,
    ArrowLeft,
    PhoneCall
} from "lucide-react";
import { Button } from "@/components/ui/button";

export default function FailedPaymentPage() {
    const t = useTranslations();
    const locale = useLocale();
    const isArabic = locale === "ar";

    return (
        <div className="min-h-screen bg-slate-50/30 flex flex-col items-center justify-center p-4 overflow-hidden">
            {/* Main Failure 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">
                
                {/* Failure Icon with Pop/Shake effect */}
                <div className="inline-flex items-center justify-center w-24 h-24 rounded-full bg-rose-50 mb-4 relative animate-in zoom-in duration-700 delay-300">
                    <div className="absolute inset-0 rounded-full border-4 border-rose-100 animate-pulse opacity-40" />
                    <div className="w-20 h-20 rounded-full bg-rose-500 flex items-center justify-center shadow-xl shadow-rose-100 transform transition-transform hover:scale-110">
                        <XCircle className="w-10 h-10 text-white stroke-[3px]" />
                    </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("failed_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("failed_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
                        asChild
                        className="flex-1 h-16 rounded-[24px] bg-slate-900 hover:bg-slate-800 text-white font-black shadow-2xl shadow-slate-100 group transition-all hover:-translate-y-1 active:translate-y-0"
                    >
                        <Link href="/cart/checkout" className="flex items-center justify-center gap-3 text-lg">
                            <RefreshCcw className="w-5 h-5 group-hover:rotate-180 transition-transform duration-500" />
                            {t("try_again_payment")}
                        </Link>
                    </Button>
                    
                    <Button
                        asChild
                        variant="outline"
                        className="flex-1 h-16 rounded-[24px] border-2 border-slate-200 hover:bg-white text-slate-600 font-black text-lg transition-all hover:-translate-y-1 active:translate-y-0 bg-white"
                    >
                        <Link href="/cart" className="flex items-center justify-center gap-3">
                            <ShoppingCart className="w-5 h-5" />
                            {t("back_to_cart")}
                        </Link>
                    </Button>
                </div>

               
            </div>
        </div>
    );
}