// app/checkout/success/page.tsx
'use client';

import { Suspense } from 'react';
import { motion } from 'framer-motion';
import {
  CheckCircle,
  Sparkles,
} from 'lucide-react';
import { SuccessContent } from './SuccessContent';

export default function SuccessPage() {
  return (
    <div className="min-h-screen bg-linear-to-br from-slate-50 via-white to-emerald-50/30 pt-28 pb-12">
      <div className="max-w-2xl mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-white rounded-3xl shadow-2xl overflow-hidden"
        >
          {/* Success Header */}
          <div className="bg-linear-to-r from-emerald-500 to-teal-500 p-10 text-center text-white relative overflow-hidden">
            <div className="absolute inset-0 opacity-10">
              <Sparkles className="absolute top-4 left-4 h-6 w-6" />
              <Sparkles className="absolute bottom-4 right-4 h-8 w-8" />
            </div>
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ type: 'spring', delay: 0.2, stiffness: 200 }}
              className="flex justify-center mb-6"
            >
              <div className="w-24 h-24 bg-white/20 rounded-full flex items-center justify-center backdrop-blur-sm">
                <CheckCircle className="h-12 w-12 text-white" />
              </div>
            </motion.div>
            <h1 className="text-3xl font-bold mb-2">Order Confirmed!</h1>
            <p className="text-emerald-100 text-lg">
              Your payment was processed successfully
            </p>
          </div>

          {/* Wrap the client component that uses useSearchParams in Suspense */}
          <Suspense fallback={<OrderDetailsSkeleton />}>
            <SuccessContent />
          </Suspense>
        </motion.div>
      </div>
    </div>
  );
}

// Loading skeleton while waiting for search params
function OrderDetailsSkeleton() {
  return (
    <div className="p-8 space-y-6">
      <div className="bg-slate-50 rounded-2xl p-5 text-center border border-slate-200 animate-pulse">
        <div className="h-4 bg-slate-200 rounded w-24 mx-auto mb-2"></div>
        <div className="h-8 bg-slate-200 rounded w-48 mx-auto"></div>
      </div>
      <div className="space-y-4">
        <div className="h-6 bg-slate-200 rounded w-40"></div>
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-start gap-4">
            <div className="w-10 h-10 bg-slate-200 rounded-xl"></div>
            <div className="flex-1">
              <div className="h-5 bg-slate-200 rounded w-32 mb-2"></div>
              <div className="h-4 bg-slate-200 rounded w-48"></div>
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-3 pt-4">
        <div className="flex-1 h-12 bg-slate-200 rounded-xl"></div>
        <div className="flex-1 h-12 bg-slate-200 rounded-xl"></div>
      </div>
    </div>
  );
}