"use client";

import { CheckCircle2, PackageSearch } from "lucide-react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { Suspense } from "react";

function SuccessContent() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("id");

  return (
    <div className="max-w-3xl mx-auto bg-card rounded-xl border border-border/50 p-10 shadow-xl text-center">
      <div className="flex justify-center mb-6">
        <CheckCircle2 className="w-24 h-24 text-green-500" />
      </div>
      
      <h1 className="text-4xl font-black text-foreground mb-4">Commande Confirmée !</h1>
      <p className="text-xl text-gray-500 mb-8">Merci pour votre achat. Votre commande est en cours de traitement.</p>
      
      <div className="bg-muted p-6 rounded-lg inline-block mb-10 text-left border border-border/50">
        <div className="text-sm text-black mb-1">Numéro de commande</div>
        <div className="text-2xl font-mono font-bold text-brand-accent mb-4">{orderId || "ORD-XXXX-XXXX"}</div>
        
        <div className="text-sm text-black mb-1">Mode de paiement</div>
        <div className="font-bold text-black">Paiement à la livraison (COD)</div>
      </div>

      <div className="flex flex-col sm:flex-row justify-center gap-4">
        <Link href="/" className="bg-brand-accent hover:bg-brand-accent/90 text-white font-bold py-3 px-8 rounded-full transition-colors">
          Continuer vos achats
        </Link>
        <Link href="#" className="bg-transparent hover:bg-muted text-foreground border border-border/50 font-bold py-3 px-8 rounded-full transition-colors flex justify-center items-center gap-2">
          <PackageSearch className="w-5 h-5" /> Suivre la commande
        </Link>
      </div>
    </div>
  );
}

export default function CheckoutSuccessPage() {
  return (
    <div className="min-h-screen bg-muted/30 pt-32 pb-24 px-4">
      <Suspense fallback={<div>Loading...</div>}>
        <SuccessContent />
      </Suspense>
    </div>
  );
}
