'use client'

import Layout from '@/hoc/Layout'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { TickCircle, CloseCircle } from 'iconsax-react'
import { Suspense } from 'react'

const ThankYouContent = () => {
    const searchParams = useSearchParams()

    const status = searchParams.get('status')
    const orderId = searchParams.get('order_id')
    const paymentId = searchParams.get('payment_id')

    // صفحه پرداخت ناموفق
    if (status === 'failed') {
        return (
            <div className="flex items-center justify-center min-h-[60vh] px-4 py-8">
                <div className="text-center max-w-lg w-full">
                    {/* آیکون خطا */}
                    <div className="flex justify-center mb-6">
                        <div className="bg-red-50 rounded-full p-5">
                            <CloseCircle color="red" size={64} className="text-red-500" variant="Bold" />
                        </div>
                    </div>

                    {/* پیام اصلی */}
                    <h1 className="text-2xl font-bold text-gray-900 mb-2">
                        پرداخت ناموفق بود
                    </h1>
                    <p className="text-gray-600 mb-8">
                        متأسفانه پرداخت شما با خطا مواجه شد
                    </p>

                    {/* اطلاعات */}
                    {orderId && (
                        <div className="bg-gray-50 rounded-xl p-6 mb-6 text-right">
                            <div className="space-y-4">
                                <div className="flex justify-between items-center">
                                    <span className="text-sm text-gray-600">شماره سفارش:</span>
                                    <span className="font-bold text-gray-900">{orderId}</span>
                                </div>
                                {paymentId && (
                                    <div className="flex justify-between items-center pt-4 border-t border-gray-200">
                                        <span className="text-sm text-gray-600">کد پیگیری:</span>
                                        <span className="text-sm text-gray-800 font-mono">{paymentId}</span>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}

                    {/* دکمه‌های اکشن */}
                    <div className="flex flex-col gap-3">
                        <Button asChild className="w-full">
                            <Link href="/cart/payment">تلاش مجدد برای پرداخت</Link>
                        </Button>
                        <Button asChild variant="outline" className="w-full">
                            <Link href="/">بازگشت به صفحه اصلی</Link>
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

    // صفحه پرداخت موفق
    if (status === 'success') {
        return (
            <div className="flex items-center justify-center min-h-[60vh] px-4 py-8">
                <div className="text-center max-w-lg w-full">
                    {/* آیکون موفقیت */}
                    <div className="flex justify-center mb-6">
                        <div className="bg-green-50 rounded-full p-5">
                            <TickCircle color='green' size={64} className="text-green-500" variant="Bold" />
                        </div>
                    </div>

                    {/* پیام اصلی */}
                    <h1 className="text-2xl font-bold text-gray-900 mb-2">
                        پرداخت با موفقیت انجام شد
                    </h1>
                    <p className="text-gray-600 mb-8">
                        سفارش شما ثبت شد و به زودی ارسال می‌شود
                    </p>

                    {/* اطلاعات سفارش */}
                    <div className="bg-gray-50 rounded-xl p-6 mb-6 text-right">
                        <div className="space-y-4">
                            <div className="flex justify-between items-center">
                                <span className="text-sm text-gray-600">شماره سفارش:</span>
                                <span className="font-bold text-gray-900">{orderId}</span>
                            </div>
                            <div className="flex justify-between items-center pt-4 border-t border-gray-200">
                                <span className="text-sm text-gray-600">کد پیگیری:</span>
                                <span className="text-sm text-gray-800 font-mono">{paymentId}</span>
                            </div>
                        </div>
                    </div>

                    {/* دکمه‌های اکشن */}
                    <div className="flex flex-col gap-3">
                        <Button asChild className="w-full">
                            <Link href="/profile/orders">مشاهده سفارشات</Link>
                        </Button>
                        <Button asChild variant="outline" className="w-full">
                            <Link href="/">بازگشت به صفحه اصلی</Link>
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

    // در صورتی که status معتبر نباشد
    return (
        <div className="flex items-center justify-center min-h-[60vh]">
            <div className="text-center max-w-md w-full px-4">
                <div className="text-gray-600 text-lg mb-4">
                    اطلاعات پرداخت نامعتبر است
                </div>
                <Button asChild>
                    <Link href="/">بازگشت به صفحه اصلی</Link>
                </Button>
            </div>
        </div>
    )
}

const ThankYouPage = () => {
    return (
        <Layout>
            <Suspense
                fallback={
                    <div className="flex items-center justify-center min-h-[60vh]">
                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
                    </div>
                }
            >
                <ThankYouContent />
            </Suspense>
        </Layout>
    )
}

export default ThankYouPage