<div x-data="pagoApp()" x-init="init()" class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-2xl shadow-lg max-w-md w-full p-8 text-center">

        <!-- Estado: verificando -->
        <div x-show="estado === 'verificando'" x-cloak>
            <svg class="animate-spin h-12 w-12 text-[#8eb02f] mx-auto mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
            </svg>
            <h1 class="text-xl font-bold text-gray-700 mb-2">Verificando tu pago…</h1>
            <p class="text-sm text-gray-400">Estamos confirmando con la pasarela. Esto puede tomar unos segundos.</p>
        </div>

        <!-- Estado: confirmado -->
        <div x-show="estado === 'confirmado'" x-cloak>
            <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-9 h-9 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-green-700 mb-2">¡Pago confirmado!</h1>
            <p class="text-sm text-gray-500 mb-1">Tu pago fue procesado exitosamente.</p>
            <p x-show="fechaPago" class="text-xs text-gray-400 mb-6">Fecha: <span x-text="fechaPago"></span></p>
            <a href="/" class="inline-block px-6 py-2 bg-[#8eb02f] text-white rounded-lg text-sm font-medium hover:bg-[#7a9a29] transition">
                Volver al inicio
            </a>
        </div>

        <!-- Estado: rechazado / cancelado -->
        <div x-show="estado === 'rechazado'" x-cloak>
            <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-9 h-9 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-red-700 mb-2">Pago no aprobado</h1>
            <p class="text-sm text-gray-500 mb-4">Tu pago fue rechazado o cancelado por la pasarela de pago.</p>
            <p class="text-xs text-gray-400 mb-6">Puedes intentarlo nuevamente o contactar a soporte si el problema persiste.</p>
            <a href="/" class="inline-block px-6 py-2 bg-red-500 text-white rounded-lg text-sm font-medium hover:bg-red-600 transition">
                Volver al inicio
            </a>
        </div>

        <!-- Estado: pendiente -->
        <div x-show="estado === 'pendiente'" x-cloak>
            <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-9 h-9 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                </svg>
            </div>
            <h1 class="text-xl font-bold text-yellow-700 mb-2">Pago en proceso</h1>
            <p class="text-sm text-gray-500 mb-4">
                Tu pago está siendo procesado. Recibirás una confirmación por correo en breve.
            </p>
            <p class="text-xs text-gray-400 mb-6">Si realizaste el pago, puede tardar algunos minutos en reflejarse.</p>
            <a href="/" class="inline-block px-6 py-2 bg-[#8eb02f] text-white rounded-lg text-sm font-medium hover:bg-[#7a9a29] transition">
                Volver al inicio
            </a>
        </div>

    </div>
</div>

<script>
function pagoApp() {
    return {
        // Estado inicial inyectado por el servidor (confirmado | rechazado | pendiente).
        // Si ya viene resuelto no se hace polling.
        estado: '{{ .Estado }}' || 'verificando',
        fechaPago: '{{ .FechaPago }}',
        ref: '{{ .Ref }}',
        intentos: 0,
        maxIntentos: 12,
        intervalo: null,

        init() {
            // Si el servidor ya resolvió el estado, no hay que hacer polling
            if (this.estado === 'confirmado' || this.estado === 'rechazado') return;

            if (!this.ref) {
                this.estado = 'pendiente';
                return;
            }

            // Estado aún indeterminado: arrancar polling
            this.estado = 'verificando';
            this.verificar();
            this.intervalo = setInterval(() => this.verificar(), 3000);
        },

        async verificar() {
            this.intentos++;
            try {
                const r = await fetch(`/pago/estado?ref=${encodeURIComponent(this.ref)}`);
                const data = await r.json();

                if (data.estado === 'confirmado' || data.confirmado) {
                    this.estado = 'confirmado';
                    this.fechaPago = data.fecha_pago || '';
                    clearInterval(this.intervalo);
                    return;
                }
                if (data.estado === 'rechazado') {
                    this.estado = 'rechazado';
                    clearInterval(this.intervalo);
                    return;
                }
            } catch (_) {}

            if (this.intentos >= this.maxIntentos) {
                clearInterval(this.intervalo);
                this.estado = 'pendiente';
            }
        },
    };
}
</script>
