'use client';

import { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';
import { CheckCircle2, ShieldCheck } from 'lucide-react';

function PaymentSuccessContent() {
  const searchParams = useSearchParams();
  const mOrderId = searchParams.get('mOrderId') || searchParams.get('orderNo') || '';

  return (
    <div className="relative min-h-screen flex items-center justify-center bg-black px-4 py-8">
      <div
        className="pointer-events-none absolute inset-0 opacity-[0.04]"
        style={{
          backgroundImage:
            'linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px)',
          backgroundSize: '80px 80px',
        }}
      />

      <div className="relative z-10 w-full max-w-[420px] text-center">
        {/* Checkmark */}
        <div className="mb-8 flex flex-col items-center">
          <div className="relative mb-6">
            <div className="absolute inset-0 animate-ping rounded-full bg-white/5" />
            <div className="relative flex h-20 w-20 items-center justify-center rounded-full border border-neutral-700 bg-neutral-900">
              <CheckCircle2 className="h-10 w-10 text-white" strokeWidth={1.5} />
            </div>
          </div>

          <h1 className="text-2xl font-bold tracking-tight text-white">Payment Successful</h1>
          <p className="mt-3 max-w-xs text-sm leading-relaxed text-neutral-500">
            Your payment has been received successfully and your order is confirmed.
          </p>

          {mOrderId && (
            <p className="mt-2 text-xs font-mono text-neutral-600">
              Order: {mOrderId}
            </p>
          )}
        </div>

        {/* Badges */}
        <div className="flex items-center justify-center gap-3 mb-6">
          <span className="inline-flex items-center gap-1.5 rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1.5 text-xs font-medium text-neutral-400">
            <ShieldCheck className="h-3.5 w-3.5" />
            Secured
          </span>
          <span className="inline-flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-3 py-1.5 text-xs font-medium text-neutral-400">
            Order Confirmed
          </span>
        </div>
      </div>
    </div>
  );
}

export default function PaymentSuccessPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center bg-black">
        <div className="h-8 w-8 animate-spin rounded-full border-2 border-neutral-700 border-t-white" />
      </div>
    }>
      <PaymentSuccessContent />
    </Suspense>
  );
}