"use client";

import { useSearchParams } from "next/navigation";
import { Suspense } from "react";
import { CheckCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";

function SuccessContent() {
    const searchParams = useSearchParams();
    const sessionId = searchParams.get("session_id");

    return (
        <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center p-6">
            <div className="max-w-md w-full bg-slate-800/50 backdrop-blur-xl rounded-2xl border border-slate-700 p-8 text-center space-y-6">
                <div className="flex justify-center">
                    <CheckCircle className="h-16 w-16 text-green-500" />
                </div>
                <h1 className="text-2xl font-bold text-white">¡Pago completado!</h1>
                <p className="text-slate-300">
                    Tu suscripción se ha activado correctamente. Ya puedes disfrutar del contenido exclusivo.
                </p>
                {sessionId && (
                    <p className="text-xs text-slate-500 break-all">
                        ID de sesión: {sessionId}
                    </p>
                )}
                <Link href="/">
                    <Button className="w-full mt-4">Volver al Dashboard</Button>
                </Link>
            </div>
        </div>
    );
}

export default function SuccessPage() {
    return (
        <Suspense fallback={
            <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 flex items-center justify-center">
                <p className="text-white">Cargando...</p>
            </div>
        }>
            <SuccessContent />
        </Suspense>
    );
}