<!-- 
    Modal de Pagamento Bootstrap 5
    Inclua este componente na página assinatura.php
-->

<!-- Modal de Pagamento -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h5 class="modal-title" id="paymentModalLabel">
                    <i class="bi bi-credit-card me-2"></i>Finalizar Pagamento
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body text-center">
                <!-- Loading State -->
                <div id="paymentLoading" class="py-5">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="text-muted">Gerando pagamento...</p>
                </div>

                <!-- Pix Payment -->
                <div id="paymentPix" class="d-none">
                    <div class="mb-4">
                        <h6 class="text-success mb-3">
                            <i class="bi bi-qr-code me-2"></i>Pague com Pix
                        </h6>
                        <p class="small text-muted mb-3">
                            Escaneie o QR Code ou copie o código Pix
                        </p>
                    </div>
                    
                    <div class="bg-light p-4 rounded-3 mb-4">
                        <img id="pixQrCode" src="" alt="QR Code Pix" class="img-fluid mb-3" style="max-width: 200px;">
                        <div id="pixAmount" class="fs-4 fw-bold text-primary mb-2"></div>
                    </div>

                    <div class="input-group mb-3">
                        <input type="text" 
                               id="pixCopyPaste" 
                               class="form-control form-control-sm text-truncate" 
                               readonly>
                        <button class="btn btn-primary" type="button" onclick="copyPixCode()">
                            <i class="bi bi-clipboard me-1"></i>Copiar
                        </button>
                    </div>

                    <div class="alert alert-info small">
                        <i class="bi bi-clock me-1"></i>
                        O pagamento via Pix é confirmado automaticamente em segundos.
                    </div>
                </div>

                <!-- Redirect Payment -->
                <div id="paymentRedirect" class="d-none py-4">
                    <div class="mb-4">
                        <i class="bi bi-box-arrow-up-right display-4 text-primary"></i>
                    </div>
                    <h6>Você será redirecionado para o checkout seguro</h6>
                    <p class="text-muted small mb-4">
                        Clique no botão abaixo para continuar o pagamento.
                    </p>
                    <a id="checkoutLink" href="#" class="btn btn-primary btn-lg" target="_blank">
                        <i class="bi bi-lock me-2"></i>Ir para Checkout Seguro
                    </a>
                </div>

                <!-- Error State -->
                <div id="paymentError" class="d-none py-4">
                    <div class="mb-3">
                        <i class="bi bi-exclamation-triangle display-4 text-danger"></i>
                    </div>
                    <h6 class="text-danger">Erro ao processar pagamento</h6>
                    <p id="paymentErrorMessage" class="text-muted small"></p>
                    <button class="btn btn-outline-primary" onclick="retryPayment()">
                        <i class="bi bi-arrow-clockwise me-1"></i>Tentar novamente
                    </button>
                </div>

                <!-- Success State -->
                <div id="paymentSuccess" class="d-none py-4">
                    <div class="mb-3">
                        <i class="bi bi-check-circle display-4 text-success"></i>
                    </div>
                    <h6 class="text-success">Pagamento Confirmado!</h6>
                    <p class="text-muted small">Seu plano foi ativado com sucesso.</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    #paymentModal .modal-content {
        border: none;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    
    #pixQrCode {
        border-radius: 12px;
        padding: 8px;
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .copy-success {
        animation: pulse 0.3s ease;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
</style>

<script>
/**
 * Sistema de Pagamento Multi-Gateway
 * JavaScript para integração com checkout
 */

let currentPaymentData = null;
let paymentCheckInterval = null;

/**
 * Inicia o processo de pagamento
 * @param {number} planId - ID do plano
 * @param {string} paymentMethod - 'pix' ou 'checkout'
 */
async function initPayment(planId, paymentMethod = 'pix') {
    const modal = new bootstrap.Modal(document.getElementById('paymentModal'));
    modal.show();
    
    // Reset states
    showPaymentState('loading');
    
    try {
        const response = await fetch('/api/create-payment.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                plan_id: planId,
                payment_method: paymentMethod
            })
        });

        const data = await response.json();
        currentPaymentData = data;

        if (!data.success) {
            throw new Error(data.error || 'Erro ao criar pagamento');
        }

        if (paymentMethod === 'pix' && data.pix_qr_code_base64) {
            // Mostrar Pix
            document.getElementById('pixQrCode').src = 'data:image/png;base64,' + data.pix_qr_code_base64;
            document.getElementById('pixCopyPaste').value = data.pix_copy_paste || data.pix_qr_code;
            showPaymentState('pix');
            
            // Iniciar polling para verificar status
            startPaymentCheck(data.transaction_id || data.internal_transaction_id);
        } else if (data.checkout_url) {
            // Mostrar opção de redirect
            document.getElementById('checkoutLink').href = data.checkout_url;
            showPaymentState('redirect');
        } else {
            throw new Error('Resposta de pagamento inválida');
        }

    } catch (error) {
        console.error('Erro no pagamento:', error);
        document.getElementById('paymentErrorMessage').textContent = error.message;
        showPaymentState('error');
    }
}

/**
 * Mostra um estado específico do modal
 */
function showPaymentState(state) {
    const states = ['loading', 'pix', 'redirect', 'error', 'success'];
    states.forEach(s => {
        const el = document.getElementById('payment' + s.charAt(0).toUpperCase() + s.slice(1));
        if (el) {
            el.classList.toggle('d-none', s !== state);
        }
    });
}

/**
 * Copia o código Pix para a área de transferência
 */
async function copyPixCode() {
    const input = document.getElementById('pixCopyPaste');
    const btn = input.nextElementSibling;
    
    try {
        await navigator.clipboard.writeText(input.value);
        btn.innerHTML = '<i class="bi bi-check me-1"></i>Copiado!';
        btn.classList.add('btn-success');
        btn.classList.remove('btn-primary');
        btn.classList.add('copy-success');
        
        setTimeout(() => {
            btn.innerHTML = '<i class="bi bi-clipboard me-1"></i>Copiar';
            btn.classList.remove('btn-success', 'copy-success');
            btn.classList.add('btn-primary');
        }, 2000);
    } catch (err) {
        // Fallback para browsers antigos
        input.select();
        document.execCommand('copy');
        btn.innerHTML = '<i class="bi bi-check me-1"></i>Copiado!';
    }
}

/**
 * Inicia verificação periódica do status do pagamento
 */
function startPaymentCheck(transactionId) {
    if (paymentCheckInterval) {
        clearInterval(paymentCheckInterval);
    }
    
    paymentCheckInterval = setInterval(async () => {
        try {
            const response = await fetch(`/api/check-payment.php?id=${transactionId}`);
            const data = await response.json();
            
            if (data.status === 'approved') {
                clearInterval(paymentCheckInterval);
                showPaymentState('success');
                
                // Recarregar página após 2 segundos
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            }
        } catch (error) {
            console.error('Erro ao verificar status:', error);
        }
    }, 5000); // Verifica a cada 5 segundos
}

/**
 * Tenta o pagamento novamente
 */
function retryPayment() {
    if (currentPaymentData && currentPaymentData.plan_id) {
        initPayment(currentPaymentData.plan_id, currentPaymentData.payment_method);
    } else {
        document.getElementById('paymentModal').querySelector('.btn-close').click();
    }
}

// Limpar interval quando modal fechar
document.getElementById('paymentModal')?.addEventListener('hidden.bs.modal', () => {
    if (paymentCheckInterval) {
        clearInterval(paymentCheckInterval);
        paymentCheckInterval = null;
    }
});
</script>
