
'use client';

import { Suspense } from 'react';
import Link from 'next/link';
import { XCircle, ArrowLeft, RefreshCw, X } from 'lucide-react';
import { useSearchParams } from 'next/navigation';
import { useLanguage } from '@/lib/language-context';

function CancelContent() {
    const searchParams = useSearchParams();
    const sessionId = searchParams.get('session_id');
    const { t } = useLanguage();

    return (
        <div className="min-h-screen bg-gradient-to-br from-rose-400 via-pink-500 to-red-600 flex items-center justify-center p-4 relative overflow-hidden">

            {/* Background blobs */}
            <div className="absolute top-0 right-0 w-96 h-96 bg-yellow-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
            <div className="absolute bottom-0 left-0 w-96 h-96 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse animation-delay-2000"></div>

            <div className="bg-white/95 backdrop-blur-xl rounded-3xl shadow-2xl overflow-hidden max-w-lg w-full transform transition-all hover:scale-[1.01] duration-500 relative z-10 border border-white/20">
                {/* Header Section */}
                <div className="bg-gradient-to-r from-rose-500 to-red-600 p-8 text-center relative overflow-hidden">
                    <div className="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')]"></div>
                    <div className="relative z-10 flex flex-col items-center">
                        <div className="bg-white p-4 rounded-full shadow-lg mb-6 animate-pulse">
                            <XCircle className="h-16 w-16 text-rose-600" />
                        </div>
                        <h1 className="text-3xl font-bold text-white mb-2">{t('payment.paymentCancelled')}</h1>
                        <p className="text-rose-100 font-medium opacity-90">{t('payment.transactionNotCompleted')}</p>
                    </div>
                </div>

                {/* Details Section */}
                <div className="p-8 text-center">
                    <div className="bg-rose-50 rounded-xl p-6 mb-8 border border-rose-100">
                        <p className="text-gray-700 leading-relaxed font-medium">
                            {t('payment.cancelledPaymentMessage')}
                            <br /><span className="text-sm text-gray-500 mt-2 block">{t('payment.noCharges')}</span>
                        </p>
                    </div>

                    <div className="space-y-4">
                        <Link
                            href="/#pricing"
                            className="group relative flex justify-center items-center w-full py-4 px-6 bg-gray-900 text-white font-bold rounded-xl transition-all hover:bg-gray-800 hover:shadow-lg hover:-translate-y-1 active:translate-y-0"
                        >
                            <RefreshCw className="w-5 h-5 mr-3 group-hover:rotate-180 transition-transform duration-500" />
                            <span>{t('payment.tryAgain')}</span>
                        </Link>

                        <Link
                            href="/"
                            className="inline-flex items-center justify-center w-full py-3 text-gray-500 hover:text-gray-800 font-semibold transition-colors hover:bg-gray-50 rounded-lg group"
                        >
                            <ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" />
                            {t('payment.backToHome')}
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default function PaymentCancelPage() {
    return (
        <Suspense fallback={<div className="min-h-screen flex items-center justify-center" />}>
            <CancelContent />
        </Suspense>
    );
}
