<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Procesando Pago - Rifa en Línea</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .container {
            text-align: center;
            padding: 2rem;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            max-width: 500px;
            width: 90%;
        }

        .spinner {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 2rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        h1 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            font-weight: 300;
        }

        p {
            font-size: 1rem;
            opacity: 0.9;
            line-height: 1.5;
            margin-bottom: 1rem;
        }

        .logo {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 2rem;
            background: linear-gradient(45deg, #fff, #f0f0f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .status {
            margin-top: 1.5rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border-left: 4px solid #4CAF50;
        }

        .countdown {
            font-size: 1.2rem;
            font-weight: bold;
            color: #4CAF50;
            margin-top: 1rem;
        }

        .error {
            border-left-color: #f44336;
            background: rgba(244, 67, 54, 0.1);
        }

        .payment-details {
            background: rgba(255, 255, 255, 0.05);
            padding: 1rem;
            border-radius: 10px;
            margin: 1rem 0;
            text-align: left;
        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            margin: 0.5rem 0;
        }

        .detail-label {
            opacity: 0.8;
        }

        .detail-value {
            font-weight: bold;
        }

        .manual-button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 25px;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
            transition: background 0.3s;
            display: none;
        }

        .manual-button:hover {
            background: #45a049;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">Rifa en Línea</div>
        <div class="spinner" id="spinner"></div>
        <h1 id="title">Procesando tu solicitud...</h1>
        <p id="message">Conectando con la pasarela de pago segura</p>
        
        <div class="payment-details" id="paymentDetails" style="display: none;">
            <div class="detail-row">
                <span class="detail-label">Orden:</span>
                <span class="detail-value" id="orderIdDisplay">-</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Monto:</span>
                <span class="detail-value" id="amountDisplay">-</span>
            </div>
        </div>
        
        <div class="status" id="status">
            <p id="statusText">Preparando conexión segura...</p>
        </div>

        <div class="countdown" id="countdown"></div>
        
        <button class="manual-button" id="manualButton" onclick="proceedManually()">
            Continuar Manualmente
        </button>
    </div>

    <script>
        class RifaPaymentHandler {
            constructor() {
                this.urlParams = new URLSearchParams(window.location.search);
                this.action = this.urlParams.get('action');
                this.token = this.urlParams.get('token');
                this.orderId = this.urlParams.get('order_id');
                this.amount = this.urlParams.get('amount');
                this.signature = this.urlParams.get('signature');
                this.origin = this.urlParams.get('origin') || 'https://lavale.cl';
                
                console.log('RifaPaymentHandler iniciado:', {
                    action: this.action,
                    orderId: this.orderId,
                    hasToken: !!this.token,
                    origin: this.origin
                });
                
                this.handleRequest();
            }

            handleRequest() {
                switch(this.action) {
                    case 'pay':
                        this.handlePaymentRedirect();
                        break;
                    case 'success':
                        this.handleSuccessReturn();
                        break;
                    case 'cancel':
                    case 'cancelled':
                        this.handleCancelReturn();
                        break;
                    case 'error':
                    case 'fail':
                        this.handleErrorReturn();
                        break;
                    default:
                        this.handleDefaultRedirect();
                }
            }

            handlePaymentRedirect() {
                this.updateStatus('Redirigiendo a la pasarela de pago...', 'success');
                this.updateTitle('Conectando con ETpay');
                this.updateMessage('Tu pago se procesará de forma segura a través de ETpay');
                
                if (this.orderId || this.amount) {
                    this.showPaymentDetails();
                }
                
                if (!this.token) {
                    this.showError('Token de pago no encontrado');
                    this.redirectToLavale('error', 'missing_token');
                    return;
                }
                
                const gatewayUrl = this.buildETpayGatewayUrl();
                console.log('Redirigiendo a ETpay:', gatewayUrl);
                
                this.startCountdown(3, () => {
                    window.location.href = gatewayUrl;
                });
            }

            buildETpayGatewayUrl() {
                const baseUrl = 'https://pmt-01.etpayment.com/';
                const params = new URLSearchParams();
                
                params.append('token', this.token);
                
                if (this.signature) {
                    params.append('signature', this.signature);
                }
                
                if (this.orderId) {
                    params.append('order_id', this.orderId);
                }
                
                params.append('ts', Date.now().toString());
                
                return `${baseUrl}?${params.toString()}`;
            }

            handleSuccessReturn() {
                this.updateStatus('¡Pago completado exitosamente!', 'success');
                this.updateTitle('¡Pago Exitoso!');
                this.updateMessage('Tu pago ha sido procesado correctamente. Te redirigiremos de vuelta a La Vale.');
                
                const transactionId = this.urlParams.get('transaction_id');
                const reference = this.urlParams.get('reference');
                
                console.log('Pago exitoso:', {
                    orderId: this.orderId,
                    transactionId,
                    reference
                });
                
                const returnUrl = this.buildLavaleReturnUrl('success', {
                    transaction_id: transactionId,
                    reference: reference
                });
                
                this.startCountdown(5, () => {
                    window.location.href = returnUrl;
                });
            }

            handleCancelReturn() {
                this.updateStatus('Pago cancelado', 'error');
                this.updateTitle('Pago Cancelado');
                this.updateMessage('El pago fue cancelado. Te redirigiremos de vuelta a La Vale.');
                
                const returnUrl = this.buildLavaleReturnUrl('fail', {
                    reason: 'cancelled'
                });
                
                this.startCountdown(5, () => {
                    window.location.href = returnUrl;
                });
            }

            handleErrorReturn() {
                this.updateStatus('Error en el procesamiento', 'error');
                this.updateTitle('Error en el Pago');
                this.updateMessage('Hubo un problema al procesar el pago. Te redirigiremos de vuelta a La Vale.');
                
                const errorReason = this.urlParams.get('reason') || this.urlParams.get('error') || 'unknown_error';
                
                const returnUrl = this.buildLavaleReturnUrl('fail', {
                    reason: errorReason
                });
                
                this.startCountdown(5, () => {
                    window.location.href = returnUrl;
                });
            }

            buildLavaleReturnUrl(status, additionalParams = {}) {
                const baseUrl = status === 'success' 
                    ? `${this.origin}/success`
                    : `${this.origin}/fail`;
                
                const params = new URLSearchParams();
                
                if (this.orderId) {
                    params.append('order_id', this.orderId);
                }
                
                // Añadir parámetros adicionales
                Object.entries(additionalParams).forEach(([key, value]) => {
                    if (value) {
                        params.append(key, value);
                    }
                });
                
                // Marcar que viene desde rifa
                params.append('from_rifa', 'true');
                
                return `${baseUrl}?${params.toString()}`;
            }

            handleDefaultRedirect() {
                this.updateStatus('Redirigiendo a La Vale...', 'success');
                this.updateTitle('Redirigiendo...');
                this.updateMessage('Te estamos enviando de vuelta a La Vale.');
                
                this.startCountdown(3, () => {
                    window.location.href = this.origin;
                });
            }

            redirectToLavale(status, reason) {
                const url = status === 'success' 
                    ? `${this.origin}/success?order_id=${encodeURIComponent(this.orderId || '')}`
                    : `${this.origin}/fail?reason=${encodeURIComponent(reason)}`;
                
                this.startCountdown(5, () => {
                    window.location.href = url;
                });
            }

            showPaymentDetails() {
                const detailsElement = document.getElementById('paymentDetails');
                const orderDisplay = document.getElementById('orderIdDisplay');
                const amountDisplay = document.getElementById('amountDisplay');
                
                if (this.orderId) {
                    orderDisplay.textContent = this.orderId;
                }
                
                if (this.amount) {
                    const formattedAmount = new Intl.NumberFormat('es-CL', {
                        style: 'currency',
                        currency: 'CLP'
                    }).format(parseInt(this.amount));
                    amountDisplay.textContent = formattedAmount;
                }
                
                detailsElement.style.display = 'block';
            }

            updateStatus(message, type = 'success') {
                const statusElement = document.getElementById('status');
                const statusText = document.getElementById('statusText');
                
                statusText.textContent = message;
                statusElement.className = `status ${type === 'error' ? 'error' : ''}`;
            }

            updateTitle(title) {
                document.getElementById('title').textContent = title;
            }

            updateMessage(message) {
                document.getElementById('message').textContent = message;
            }

            startCountdown(seconds, callback) {
                const countdownElement = document.getElementById('countdown');
                const manualButton = document.getElementById('manualButton');
                let remaining = seconds;
                
                const updateCountdown = () => {
                    countdownElement.textContent = `Redirigiendo en ${remaining} segundos...`;
                    remaining--;
                    
                    if (remaining < 0) {
                        callback();
                    } else {
                        setTimeout(updateCountdown, 1000);
                    }
                };
                
                updateCountdown();
                
                // Mostrar botón manual después de 10 segundos
                setTimeout(() => {
                    manualButton.style.display = 'inline-block';
                }, 10000);
            }

            showError(message) {
                this.updateStatus(message, 'error');
                this.updateTitle('Error');
            }
        }

        // Función global para el botón manual
        function proceedManually() {
            const handler = window.rifaHandler;
            if (handler && handler.action === 'pay' && handler.token) {
                const gatewayUrl = handler.buildETpayGatewayUrl();
                window.location.href = gatewayUrl;
            } else {
                const origin = new URLSearchParams(window.location.search).get('origin') || 'https://lavale.cl';
                window.location.href = origin;
            }
        }

        // Inicializar cuando se carga la página
        document.addEventListener('DOMContentLoaded', () => {
            window.rifaHandler = new RifaPaymentHandler();
        });

        // Manejar errores globales
        window.addEventListener('error', (e) => {
            console.error('Error en rifaenlinea.net:', e);
            document.getElementById('title').textContent = 'Error Técnico';
            document.getElementById('message').textContent = 'Hubo un problema técnico. Redirigiendo a La Vale...';
            
            setTimeout(() => {
                const origin = new URLSearchParams(window.location.search).get('origin') || 'https://lavale.cl';
                window.location.href = `${origin}/fail?reason=technical_error`;
            }, 3000);
        });

        // Manejar cache del navegador
        window.addEventListener('pageshow', (event) => {
            if (event.persisted) {
                console.log('Página cargada desde caché, recargando...');
                window.location.reload();
            }
        });
    </script>
</body>
</html>