<?php
/**
 * TESTE REAL: Diagnóstico Completo de Pagamento com Cartão
 * Este arquivo simula o checkout real, capturando TODOS os dados do SDK
 */

declare(strict_types=1);

// Headers para permitir acesso
header('Content-Type: text/html; charset=utf-8');

// Conexão com banco de dados (deve vir primeiro)
require __DIR__ . '/../config/config_db.php';

// Importa configurações
require __DIR__ . '/../config/token.php';

// Helper de gateway (para obter public key)
require_once __DIR__ . '/gateway_helper.php';

// Autoload do Composer
require __DIR__ . '/../vendor/autoload.php';

// Obter public key do Mercado Pago
$mercadopago_public_key = null;
if (function_exists('get_gateway_config')) {
    $mercadopago_public_key = get_gateway_config('mercadopago', 'public_key');
}
if (empty($mercadopago_public_key) && defined('PUBLIC_KEY')) {
    $mercadopago_public_key = PUBLIC_KEY;
}

// Detectar ambiente sem expor segredos (apenas para UI do teste)
// Regra: se qualquer chave for TEST -> SANDBOX. Se ambas APP_USR -> PRODUÇÃO.
$mpPublicKey = is_string($mercadopago_public_key) ? trim($mercadopago_public_key) : '';
$mpAccessToken = defined('ACCESS_TOKEN') && is_string(ACCESS_TOKEN) ? trim((string) ACCESS_TOKEN) : '';

$mpEnv = 'unknown';
if ($mpPublicKey !== '' && str_starts_with($mpPublicKey, 'TEST-')) {
    $mpEnv = 'test';
} elseif ($mpAccessToken !== '' && str_starts_with($mpAccessToken, 'TEST-')) {
    $mpEnv = 'test';
} elseif ($mpPublicKey !== '' && str_starts_with($mpPublicKey, 'APP_USR-') && $mpAccessToken !== '' && str_starts_with($mpAccessToken, 'APP_USR-')) {
    $mpEnv = 'prod';
}

$mpEnvLabel = match ($mpEnv) {
    'test' => 'SANDBOX (TEST) — não debita cartão real',
    'prod' => 'PRODUÇÃO (APP_USR) — pode debitar cartão real',
    default => 'AMBIENTE INDEFINIDO — confira credenciais (PUBLIC_KEY/ACCESS_TOKEN)',
};

?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teste Real: Cartão de Crédito - Diagnóstico Completo</title>
    
    <!-- SDK Mercado Pago -->
    <script src="https://sdk.mercadopago.com/js/v2"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            /* CRÍTICO: não prender iframes (checkout original usa overflow: visible) */
            overflow: visible;
            /* Evitar stacking context que “prende” os campos */
            position: relative;
            z-index: auto;
        }
        .header {
            background: linear-gradient(135deg, #009ee3 0%, #0073e6 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        .env-badge {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.02em;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(0,0,0,0.25);
        }
        .env-test { background: rgba(244, 67, 54, 0.25); border-color: rgba(244, 67, 54, 0.55); }
        .env-prod { background: rgba(76, 175, 80, 0.25); border-color: rgba(76, 175, 80, 0.55); }
        .env-unknown { background: rgba(255, 152, 0, 0.25); border-color: rgba(255, 152, 0, 0.55); }
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        .header p {
            opacity: 0.9;
        }
        .content {
            padding: 40px;
        }
        .section {
            margin-bottom: 40px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 12px;
            border-left: 4px solid #009ee3;
        }
        .section h2 {
            color: #333;
            margin-bottom: 20px;
            font-size: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 600;
            /* CRÍTICO (igual checkout): label nunca pode bloquear clique nos iframes */
            pointer-events: none;
        }
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #009ee3;
        }
        .card-form {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
        }
        .mp-form-group {
            margin-bottom: 20px;
        }
        .mp-form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
            font-size: 14px;
            /* CRÍTICO: não bloquear cliques nos iframes (checkout original) */
            pointer-events: none;
        }
        .mp-form-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            background-color: #fff;
        }
        .mp-form-group input:focus {
            outline: none;
            border-color: #009ee3;
            box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.1);
        }
        /* Containers dos campos do Mercado Pago (iframes) - CRÍTICO */
        #form-checkout__cardNumber,
        #form-checkout__expirationDate,
        #form-checkout__securityCode {
            /* Dimensões e Layout - CRÍTICO */
            width: 100% !important;
            height: 50px !important;
            min-height: 50px !important;
            max-height: 50px !important;
            display: block !important;
            box-sizing: border-box !important;
            background-color: #ffffff !important;
            border: 2px solid #ddd !important;
            border-radius: 8px !important;
            position: relative !important;
            padding: 0 !important;
            margin: 0 !important;
            overflow: visible !important;
            pointer-events: auto !important;
            cursor: text !important;
            z-index: 10 !important;
        }
        /* CRÍTICO em layout flex: permitir encolher e não “estourar” o iframe */
        #form-checkout__expirationDate,
        #form-checkout__securityCode {
            min-width: 0 !important;
        }
        /* CRÍTICO (igual checkout): garantir que nada no form bloqueie os campos */
        #form-card-mp {
            position: relative !important;
            pointer-events: auto !important;
        }
        #form-card-mp * {
            pointer-events: auto !important;
        }
        #form-card-mp *::before,
        #form-card-mp *::after {
            pointer-events: none !important;
        }
        #form-checkout__cardNumber:focus-within,
        #form-checkout__expirationDate:focus-within,
        #form-checkout__securityCode:focus-within {
            border-color: #009ee3 !important;
            box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.1) !important;
        }
        /* Iframes dentro dos containers - CRÍTICO para funcionamento */
        #form-checkout__cardNumber iframe,
        #form-checkout__expirationDate iframe,
        #form-checkout__securityCode iframe {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            min-height: 50px !important;
            max-height: 50px !important;
            border: none !important;
            background: transparent !important;
            pointer-events: auto !important;
            z-index: 10000 !important;
            cursor: text !important;
            display: block !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
        /* Garantir que os iframes sejam clicáveis */
        #form-checkout__cardNumber *,
        #form-checkout__expirationDate *,
        #form-checkout__securityCode * {
            pointer-events: auto !important;
        }
        /* Indicador de bandeira do cartão */
        .card-brand-indicator {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            z-index: 1;
            pointer-events: none;
        }
        .card-brand-indicator img {
            height: 24px;
            width: auto;
        }
        .mp-form-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            background-color: #fff;
            box-sizing: border-box;
            color: #333;
        }
        .mp-form-group select:focus {
            outline: none;
            border-color: #009ee3;
            box-shadow: 0 0 0 3px rgba(0, 158, 227, 0.1);
        }
        .btn {
            background: linear-gradient(135deg, #009ee3 0%, #0073e6 100%);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-weight: 600;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,158,227,0.3);
        }
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }
        .debug-panel {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            max-height: 500px;
            overflow-y: auto;
            margin-top: 20px;
        }
        .debug-panel h3 {
            color: #4ec9b0;
            margin-bottom: 15px;
        }
        .debug-item {
            margin-bottom: 15px;
            padding: 10px;
            background: #252526;
            border-radius: 5px;
            border-left: 3px solid #4ec9b0;
        }
        .debug-item strong {
            color: #569cd6;
        }
        .error {
            background: #3d2d2d;
            border-left-color: #f44336;
            color: #ff6b6b;
        }
        .success {
            background: #2d4d2d;
            border-left-color: #4caf50;
            color: #81c784;
        }
        .warning {
            background: #3d3d2d;
            border-left-color: #ff9800;
            color: #ffb74d;
        }
        pre {
            background: #1e1e1e;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin-top: 10px;
            font-size: 12px;
            line-height: 1.4;
        }
        .info-box {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .info-box strong {
            color: #1976d2;
        }
        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #009ee3;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ============================================================
           ENDEREÇO (COPIADO DO CHECKOUT ORIGINAL - gerarCamposEndereco)
           ============================================================ */
        .error-message {
            display: none;
            margin-top: 6px;
            font-size: 12px;
            color: #f44336;
        }

        .endereco-container-mp_cartao {
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px;
            background: rgba(102, 126, 234, 0.1);
            border: 2px dashed rgba(0, 0, 0, 0.15);
            border-radius: 10px;
        }

        .endereco-container-mp_cartao h3 {
            font-size: 16px;
            color: #333;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔍 Teste Real: Diagnóstico Completo de Pagamento</h1>
            <p>Simula o checkout real com SDK do Mercado Pago - Captura TODOS os dados</p>
            <div class="env-badge <?= $mpEnv === 'prod' ? 'env-prod' : ($mpEnv === 'test' ? 'env-test' : 'env-unknown'); ?>">
                <?= htmlspecialchars($mpEnvLabel, ENT_QUOTES, 'UTF-8'); ?>
            </div>
        </div>
        
        <div class="content">
            <div class="info-box">
                <strong>ℹ️ Instruções:</strong>
                <ol style="margin-left: 20px; margin-top: 10px;">
                    <li>Selecione um produto do sistema</li>
                    <li>Preencha os dados do cartão (use cartões de teste do Mercado Pago)</li>
                    <li>Clique em "Processar Pagamento"</li>
                    <li>Veja TODOS os dados capturados no painel de debug abaixo</li>
                </ol>
            </div>
            
            <div class="section">
                <h2>📦 1. Selecionar Produto</h2>
                <div class="form-group">
                    <label>Produto ID:</label>
                    <input type="number" id="produto_id" placeholder="Ex: 30" value="30">
                    <small style="color: #888;">ID do produto no banco de dados</small>
                </div>
                <button class="btn" onclick="carregarProduto()">Carregar Produto</button>
                <div id="produto-info" style="margin-top: 20px;"></div>
            </div>
            
            <div class="section">
                <h2>💳 2. Dados do Cartão (SDK Mercado Pago)</h2>
                <div class="card-form">
                    <form id="form-card-mp">
                        <!-- Estrutura COPIADA do checkout original (mantendo IDs do MP) -->
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" id="form-checkout__cardholderEmail" placeholder="test@test.com" value="test@test.com">
                        </div>

                        <div class="form-group" style="position: relative;">
                            <label>Número do Cartão</label>
                            <div id="form-checkout__cardNumber" style="width: 100% !important; height: 50px !important;"></div>
                            <div class="card-brand-indicator" id="card-brand-indicator"></div>
                        </div>

                        <div class="form-group" style="display:flex !important; gap:10px !important;">
                            <div id="form-checkout__expirationDate" style="flex:1 !important; height: 50px !important;"></div>
                            <div id="form-checkout__securityCode" style="flex:1 !important; height: 50px !important;"></div>
                        </div>

                        <div class="form-group">
                            <label>Nome do Titular</label>
                            <input type="text" id="form-checkout__cardholderName" placeholder="APRO" value="APRO">
                        </div>

                        <!-- Campos ocultos necessários (SDK) -->
                        <div class="form-group" style="display:none;">
                            <select id="form-checkout__identificationType"></select>
                        </div>
                        <div class="form-group">
                            <label>CPF</label>
                            <input type="text" id="form-checkout__identificationNumber" placeholder="12345678909" value="12345678909">
                        </div>
                        <div class="form-group" style="display:none;">
                            <select id="form-checkout__issuer"></select>
                        </div>

                        <div class="form-group">
                            <label>Parcelas</label>
                            <select id="form-checkout__installments"></select>
                        </div>

                        <!-- ============================================================
                             ENDEREÇO (APENAS PARA PRODUTO FÍSICO) - MESMOS IDS DO CHECKOUT
                             ============================================================ -->
                        <div id="endereco-container-mp-cartao" class="endereco-container-mp_cartao" style="display:none;">
                            <h3>
                                Endereço de Entrega
                            </h3>

                            <div class="form-group">
                                <input type="text" id="input_cep_mp_cartao" name="input_cep_mp_cartao" placeholder="CEP (Ex: 01310-100)" maxlength="9" required>
                                <div class="error-message" id="error-input_cep_mp_cartao"></div>
                            </div>

                            <div class="form-group">
                                <input type="text" id="input_logradouro_mp_cartao" name="input_logradouro_mp_cartao" placeholder="Rua" required>
                                <div class="error-message" id="error-input_logradouro_mp_cartao"></div>
                            </div>

                            <div style="display: grid; grid-template-columns: 1fr 2fr; gap: 10px;">
                                <div class="form-group">
                                    <input type="text" id="input_numero_mp_cartao" name="input_numero_mp_cartao" placeholder="Número" required>
                                    <div class="error-message" id="error-input_numero_mp_cartao"></div>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="input_complemento_mp_cartao" name="input_complemento_mp_cartao" placeholder="Complemento (opcional)">
                                </div>
                            </div>

                            <div class="form-group">
                                <input type="text" id="input_bairro_mp_cartao" name="input_bairro_mp_cartao" placeholder="Bairro" required>
                                <div class="error-message" id="error-input_bairro_mp_cartao"></div>
                            </div>

                            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 10px;">
                                <div class="form-group">
                                    <input type="text" id="input_cidade_mp_cartao" name="input_cidade_mp_cartao" placeholder="Cidade" required>
                                    <div class="error-message" id="error-input_cidade_mp_cartao"></div>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="input_estado_mp_cartao" name="input_estado_mp_cartao" placeholder="UF" maxlength="2" required style="text-transform: uppercase;">
                                    <div class="error-message" id="error-input_estado_mp_cartao"></div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="section">
                <h2>🚀 3. Processar Pagamento</h2>
                <button class="btn" id="btn-processar" onclick="processarPagamento()">Processar Pagamento</button>
                <div id="processamento-status" style="margin-top: 20px;"></div>
            </div>
            
            <div class="section">
                <h2>🔍 4. Debug Completo - Todos os Dados Capturados</h2>
                <div class="debug-panel" id="debug-panel">
                    <h3>📊 Aguardando processamento...</h3>
                    <p>Os dados aparecerão aqui após clicar em "Processar Pagamento"</p>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Dados globais
        let mp = null;
        let cardFormInstance = null;
        let produtoData = null;
        let _pendingPayment = false;
        let _currentAmount = "1.00"; // default (será atualizado ao carregar produto)
        
        // Inicializar SDK do Mercado Pago
        function inicializarMercadoPago() {
            console.log('🚀 [TESTE] Inicializando SDK do Mercado Pago...');
            
            if (typeof MercadoPago === 'undefined') {
                console.error('❌ [TESTE] SDK do Mercado Pago não carregou');
                mostrarDebug('error', 'SDK do Mercado Pago não carregou. Verifique a conexão com a internet.');
                return;
            }
            
            // Obter public key
            const publicKey = '<?php echo htmlspecialchars($mercadopago_public_key ?? '', ENT_QUOTES, "UTF-8"); ?>';
            
            console.log('🔑 [TESTE] Public Key (primeiros 20 chars):', publicKey.substring(0, 20) + '...');
            
            mp = new MercadoPago(publicKey, {
                locale: 'pt-BR'
            });
            
            // Inicializar formulário de cartão
            inicializarCardForm();
        }
        
        // Inicializar formulário de cartão
        function inicializarCardForm() {
            console.log('📝 [TESTE] Inicializando cardForm...');
            
            if (!mp) {
                console.error('❌ [TESTE] SDK não inicializado');
                return;
            }
            
            try {
                cardFormInstance = mp.cardForm({
                    // CRÍTICO: amount deve refletir o valor real do produto
                    amount: _currentAmount,
                    iframe: true,
                    form: {
                        id: "form-card-mp",
                        cardNumber: {
                            id: "form-checkout__cardNumber",
                            placeholder: "Número do cartão"
                        },
                        expirationDate: {
                            id: "form-checkout__expirationDate",
                            placeholder: "MM/AA"
                        },
                        securityCode: {
                            id: "form-checkout__securityCode",
                            placeholder: "CVV"
                        },
                        cardholderName: {
                            id: "form-checkout__cardholderName",
                            placeholder: "Nome do titular"
                        },
                        cardholderEmail: {
                            id: "form-checkout__cardholderEmail"
                        },
                        issuer: {
                            id: "form-checkout__issuer",
                            placeholder: "Banco emissor"
                        },
                        installments: {
                            id: "form-checkout__installments",
                            placeholder: "Parcelas"
                        },
                        identificationType: {
                            id: "form-checkout__identificationType"
                        },
                        identificationNumber: {
                            id: "form-checkout__identificationNumber",
                            placeholder: "CPF"
                        }
                    },
                    callbacks: {
                        onFormMounted: (error) => {
                            if (error) {
                                console.error('❌ [TESTE] Erro ao montar formulário:', error);
                            } else {
                                console.log('✅ [TESTE] Formulário montado com sucesso!');
                                // Garantir que os iframes sejam clicáveis após montagem
                                setTimeout(() => {
                                    garantirIframesClicaveis();
                                }, 300);
                            }
                        },
                        onReady: () => {
                            console.log('✅ [TESTE] CardForm pronto!');
                            // Garantir que os iframes sejam clicáveis quando estiver pronto
                            setTimeout(() => {
                                garantirIframesClicaveis();
                                detectarBandeiraCartao();
                                // Diagnóstico específico do campo que está falhando
                                diagnosticarCampoIframe('form-checkout__expirationDate');
                                diagnosticarCampoIframe('form-checkout__cardNumber');
                                diagnosticarCampoIframe('form-checkout__securityCode');
                            }, 500);
                        },
                        onSubmit: (event) => {
                            event.preventDefault();
                            console.log('📤 [TESTE] Formulário submetido (callback onSubmit)');

                            // Token é gerado no SUBMIT (fluxo correto do SDK)
                            if (!_pendingPayment) {
                                console.warn('⚠️ [TESTE] onSubmit sem pagamento pendente. Ignorando.');
                                return;
                            }

                            try {
                                const cardFormData = cardFormInstance.getCardFormData();
                                console.log('✅ [TESTE] cardFormData (onSubmit):', cardFormData);
                                mostrarDebugCompleto(cardFormData);

                                if (!cardFormData.token || String(cardFormData.token).trim() === '') {
                                    throw new Error('Token não foi gerado (token vazio). Verifique principalmente VALIDADE e CVV.');
                                }

                                processarComCardFormData(cardFormData);
                            } catch (err) {
                                console.error('❌ [TESTE] Erro no onSubmit:', err);
                                mostrarStatus('❌ Erro ao gerar token: ' + (err.message || 'Erro desconhecido'), 'error');
                                mostrarDebug('error', 'Erro no onSubmit', (err && err.stack) ? err.stack : String(err));
                                _pendingPayment = false;
                                liberarBotaoProcessar();
                            }
                        }
                    }
                });
                
                console.log('✅ [TESTE] cardFormInstance criado:', cardFormInstance);
            } catch (error) {
                console.error('❌ [TESTE] Erro ao inicializar cardForm:', error);
                mostrarDebug('error', 'Erro ao inicializar cardForm: ' + error.message);
            }
        }
        
        // Carregar produto (modo robusto): recarrega a página com ?produto_id=
        // Motivo: o SDK do MP não é confiável ao desmontar/remontar cardForm dinamicamente,
        // isso pode “matar” a clicabilidade dos iframes após o reload do produto.
        async function carregarProduto() {
            const produtoId = String(document.getElementById('produto_id')?.value || '').trim();
            if (!produtoId) {
                alert('Por favor, informe o ID do produto');
                return;
            }

            // Recarregar a página garante que o amount seja aplicado ANTES do cardForm montar
            const url = new URL(window.location.href);
            url.searchParams.set('produto_id', produtoId);
            window.location.href = url.toString();
        }

        // Carregar dados do produto (usado no boot, antes de inicializar o MP)
        async function carregarProdutoData(produtoId) {
            mostrarStatus('Carregando produto...', 'info');

            const response = await fetch(`/backend/test_get_produto.php?id=${encodeURIComponent(produtoId)}`);
            const data = await response.json();

            if (!data.success) {
                throw new Error(data.message || 'Erro ao carregar produto');
            }

            produtoData = data.produto;

            // Mostrar endereço apenas para produto físico (mesma regra do checkout)
            const tipoProduto = String(produtoData.tipo_produto || 'digital').toLowerCase();
            toggleEnderecoFisico(tipoProduto === 'fisico');

            // Atualizar amount do cardForm conforme valor do produto (ANTES de inicializar cardForm)
            const precoRaw = parseFloat(produtoData.preco || produtoData.valor || produtoData.preco_atual || 1);
            const precoFinal = (Number.isFinite(precoRaw) && precoRaw > 0) ? precoRaw : 1;
            _currentAmount = precoFinal.toFixed(2);

            document.getElementById('produto-info').innerHTML = `
                <div style="background: #e8f5e9; padding: 15px; border-radius: 8px; border-left: 4px solid #4caf50;">
                    <strong>✅ Produto carregado:</strong><br>
                    <strong>Nome:</strong> ${produtoData.nome || produtoData.titulo}<br>
                    <strong>Preço:</strong> R$ ${parseFloat(produtoData.preco || produtoData.valor || 0).toFixed(2)}<br>
                    <strong>Tipo:</strong> ${produtoData.tipo_produto || 'digital'}
                </div>
            `;

            mostrarStatus('Produto carregado com sucesso! Valor do cardForm: R$ ' + _currentAmount, 'success');
        }

        function liberarBotaoProcessar() {
            const btn = document.getElementById('btn-processar');
            if (btn) {
                btn.disabled = false;
                btn.innerHTML = 'Processar Pagamento';
            }
        }

        // Mostrar/ocultar e validar endereço conforme tipo do produto
        function toggleEnderecoFisico(isFisico) {
            const container = document.getElementById('endereco-container-mp-cartao');
            if (!container) return;

            container.style.display = isFisico ? 'block' : 'none';

            // Marcar required apenas quando físico
            const ids = [
                'input_cep_mp_cartao',
                'input_logradouro_mp_cartao',
                'input_numero_mp_cartao',
                'input_bairro_mp_cartao',
                'input_cidade_mp_cartao',
                'input_estado_mp_cartao'
            ];

            ids.forEach((id) => {
                const el = document.getElementById(id);
                if (el) el.required = !!isFisico;
            });
        }

        // Capturar e validar endereço (produto físico)
        function capturarEnderecoFisico() {
            const cep = (document.getElementById('input_cep_mp_cartao')?.value || '').replace(/\D/g, '');
            const rua = (document.getElementById('input_logradouro_mp_cartao')?.value || '').trim();
            const numero = (document.getElementById('input_numero_mp_cartao')?.value || '').trim();
            const complemento = (document.getElementById('input_complemento_mp_cartao')?.value || '').trim();
            const bairro = (document.getElementById('input_bairro_mp_cartao')?.value || '').trim();
            const cidade = (document.getElementById('input_cidade_mp_cartao')?.value || '').trim();
            const estado = (document.getElementById('input_estado_mp_cartao')?.value || '').trim().toUpperCase();

            const erros = [];
            if (cep.length !== 8) erros.push('CEP (8 dígitos)');
            if (rua.length < 3) erros.push('Rua (mínimo 3 caracteres)');
            if (!numero) erros.push('Número');
            if (bairro.length < 2) erros.push('Bairro (mínimo 2 caracteres)');
            if (cidade.length < 2) erros.push('Cidade (mínimo 2 caracteres)');
            if (estado.length !== 2) erros.push('UF (2 letras)');

            if (erros.length > 0) {
                throw new Error('Preencha o endereço completo: ' + erros.join(', '));
            }

            return {
                cep: cep,
                rua: rua,
                numero: numero,
                complemento: complemento,
                bairro: bairro,
                cidade: cidade,
                estado: estado
            };
        }

        // OBS: não reinicializar cardForm em runtime (causa campos “sem clique” em alguns browsers)

        // Enviar pagamento para o backend com base no cardFormData já tokenizado
        async function processarComCardFormData(cardFormData) {
            try {
                const paymentMethodId = cardFormData.paymentMethodId || cardFormData.payment_method_id;
                if (!paymentMethodId) {
                    throw new Error('payment_method_id não encontrado no cardFormData');
                }

                const produtoId = document.getElementById('produto_id').value;
                const valor = produtoData ? parseFloat(produtoData.preco || produtoData.valor || produtoData.preco_atual || 1) : parseFloat(_currentAmount || '1');
                const valorFinal = (Number.isFinite(valor) && valor > 0) ? valor : 1;

                const payload = {
                    token: cardFormData.token,
                    issuer: cardFormData.issuerId || cardFormData.issuer,
                    installments: parseInt(cardFormData.installments, 10) || 1,
                    payment_method_id: paymentMethodId,
                    transaction_amount: parseFloat(valorFinal.toFixed(2)),
                    description: produtoData ? (produtoData.nome || produtoData.titulo) : 'Teste',
                    product: {
                        id: produtoId,
                        title: produtoData ? (produtoData.nome || produtoData.titulo) : 'Teste',
                        price: parseFloat(valorFinal.toFixed(2))
                    },
                    payer: {
                        email: document.getElementById('form-checkout__cardholderEmail').value || 'test@test.com',
                        first_name: 'Teste',
                        last_name: 'Real',
                        identification: {
                            type: 'CPF',
                            number: document.getElementById('form-checkout__identificationNumber').value.replace(/\D/g, '') || '12345678909'
                        }
                    }
                };

                // Se produto físico, endereço é obrigatório e deve ser enviado ao backend (mesma regra do checkout)
                const tipoProduto = String(produtoData?.tipo_produto || 'digital').toLowerCase();
                if (tipoProduto === 'fisico') {
                    const enderecoObj = capturarEnderecoFisico();
                    payload.enderecoJson = JSON.stringify(enderecoObj);
                }

                mostrarDebug('info', 'Payload completo que será enviado:', JSON.stringify(payload, null, 2));
                mostrarStatus('Enviando para backend...', 'info');

                const response = await fetch('/backend/process_payment.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });

                const responseText = await response.text();
                console.log('📥 [TESTE] Resposta do backend:', responseText);

                let responseData;
                try {
                    responseData = JSON.parse(responseText);
                } catch (e) {
                    responseData = { message: responseText };
                }

                if (response.ok && responseData.status === 'success') {
                    mostrarStatus('✅ Pagamento processado com sucesso!', 'success');
                    mostrarDebug('success', 'Resposta do backend:', JSON.stringify(responseData, null, 2));

                    // Resumo alto-sinal: confirmar se o backend criou pagamento no MP
                    const resumo = {
                        status: responseData?.status || null,
                        mp_status: responseData?.payment_status || responseData?.payment?.status || responseData?.status_mp || null,
                        mp_status_detail: responseData?.payment_status_detail || responseData?.payment?.status_detail || null,
                        mp_id: responseData?.payment_id || responseData?.payment?.id || responseData?.id || null
                    };
                    mostrarDebug('success', 'Resumo (pagamento criado?)', JSON.stringify(resumo, null, 2));
                } else {
                    mostrarStatus('❌ Erro no pagamento: ' + (responseData.message || 'Erro desconhecido'), 'error');
                    mostrarDebug('error', 'Erro do backend:', JSON.stringify(responseData, null, 2));
                }
            } finally {
                _pendingPayment = false;
                liberarBotaoProcessar();
            }
        }
        
        // Processar pagamento
        async function processarPagamento() {
            console.log('💳 [TESTE] Iniciando processamento de pagamento...');
            
            if (!cardFormInstance) {
                alert('Erro: Formulário não inicializado. Recarregue a página.');
                return;
            }
            
            const btn = document.getElementById('btn-processar');
            btn.disabled = true;
            btn.innerHTML = 'Processando... <span class="loading"></span>';
            
            // Limpar debug anterior
            document.getElementById('debug-panel').innerHTML = '<h3>📊 Capturando dados...</h3>';
            
            try {
                if (!produtoData) {
                    mostrarStatus('⚠️ Dica: clique em "Carregar Produto" para usar o valor real (ex: R$ 1,00).', 'warning');
                }

                _pendingPayment = true;

                const form = document.getElementById('form-card-mp');
                if (!form) {
                    throw new Error('Formulário #form-card-mp não encontrado');
                }

                // Dispara submit real (gera token e cai no onSubmit do cardForm)
                if (typeof form.requestSubmit === 'function') {
                    form.requestSubmit();
                } else {
                    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                }
            } catch (error) {
                console.error('❌ [TESTE] Erro:', error);
                mostrarStatus('❌ Erro: ' + error.message, 'error');
                mostrarDebug('error', 'Erro capturado:', error.message + '\n' + (error.stack || ''));
                _pendingPayment = false;
                liberarBotaoProcessar();
            }
        }
        
        // Mostrar debug completo
        function mostrarDebugCompleto(cardFormData) {
            const panel = document.getElementById('debug-panel');
            let html = '<h3>📊 Dados Capturados do cardFormData</h3>';
            
            // Todas as chaves
            html += '<div class="debug-item"><strong>Chaves disponíveis:</strong><br>' + Object.keys(cardFormData).join(', ') + '</div>';
            
            // Token
            html += `<div class="debug-item">
                <strong>Token:</strong><br>
                ${cardFormData.token ? (cardFormData.token.substring(0, 30) + '... (tamanho: ' + cardFormData.token.length + ')') : 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.token}
            </div>`;
            
            // Payment Method ID
            html += `<div class="debug-item">
                <strong>paymentMethodId:</strong><br>
                ${cardFormData.paymentMethodId || 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.paymentMethodId}
            </div>`;
            
            html += `<div class="debug-item">
                <strong>payment_method_id:</strong><br>
                ${cardFormData.payment_method_id || 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.payment_method_id}
            </div>`;
            
            // Installments
            html += `<div class="debug-item">
                <strong>installments:</strong><br>
                ${cardFormData.installments || 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.installments}
            </div>`;
            
            // Issuer
            html += `<div class="debug-item">
                <strong>issuerId:</strong><br>
                ${cardFormData.issuerId || 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.issuerId}
            </div>`;
            
            html += `<div class="debug-item">
                <strong>issuer:</strong><br>
                ${cardFormData.issuer || 'NULL/UNDEFINED'}<br>
                <strong>Tipo:</strong> ${typeof cardFormData.issuer}
            </div>`;
            
            // JSON completo
            html += '<div class="debug-item"><strong>JSON Completo:</strong><pre>' + JSON.stringify(cardFormData, null, 2) + '</pre></div>';
            
            panel.innerHTML = html;
        }
        
        // Mostrar debug
        function mostrarDebug(type, title, content) {
            const panel = document.getElementById('debug-panel');
            const div = document.createElement('div');
            div.className = 'debug-item ' + type;
            div.innerHTML = '<strong>' + title + '</strong><pre>' + content + '</pre>';
            panel.appendChild(div);
            panel.scrollTop = panel.scrollHeight;
        }
        
        // Mostrar status
        function mostrarStatus(message, type) {
            const statusDiv = document.getElementById('processamento-status');
            const colors = {
                success: '#4caf50',
                error: '#f44336',
                info: '#2196f3',
                warning: '#ff9800'
            };
            statusDiv.innerHTML = `<div style="padding: 15px; background: ${colors[type]}20; color: ${colors[type]}; border-radius: 8px; border-left: 4px solid ${colors[type]};">${message}</div>`;
        }
        
        // Garantir que os iframes sejam clicáveis
        function garantirIframesClicaveis() {
            const camposIds = [
                'form-checkout__cardNumber',
                'form-checkout__expirationDate',
                'form-checkout__securityCode'
            ];
            
            let iframesEncontrados = 0;
            
            camposIds.forEach(campoId => {
                const campo = document.getElementById(campoId);
                if (!campo) {
                    console.warn(`⚠️ [TESTE] Container ${campoId} não encontrado`);
                    return;
                }
                
                // Configurar container
                campo.style.setProperty('pointer-events', 'auto', 'important');
                campo.style.setProperty('z-index', '100', 'important');
                campo.style.setProperty('position', 'relative', 'important');
                campo.style.setProperty('overflow', 'visible', 'important');
                campo.style.setProperty('cursor', 'text', 'important');
                
                // Encontrar e configurar iframes
                const iframes = campo.querySelectorAll('iframe');
                iframes.forEach(iframe => {
                    if (!iframe) return;
                    
                    iframesEncontrados++;
                    
                    // Configurar iframe para ser clicável
                    iframe.style.setProperty('pointer-events', 'auto', 'important');
                    iframe.style.setProperty('z-index', '10000', 'important');
                    iframe.style.setProperty('position', 'absolute', 'important');
                    iframe.style.setProperty('top', '0', 'important');
                    iframe.style.setProperty('left', '0', 'important');
                    iframe.style.setProperty('width', '100%', 'important');
                    iframe.style.setProperty('height', '100%', 'important');
                    iframe.style.setProperty('cursor', 'text', 'important');
                    iframe.style.setProperty('border', 'none', 'important');
                    iframe.style.setProperty('background', 'transparent', 'important');
                    iframe.style.setProperty('visibility', 'visible', 'important');
                    iframe.style.setProperty('opacity', '1', 'important');
                    
                    console.log(`✅ [TESTE] Iframe ${campoId} configurado`);
                });
                
                if (iframes.length > 0) {
                    console.log(`✅ [TESTE] ${campoId}: ${iframes.length} iframe(s) encontrado(s) e configurado(s)`);
                }
            });
            
            return iframesEncontrados;
        }

        // Diagnóstico: confirma se o iframe foi injetado e se tem overlay bloqueando clique
        function diagnosticarCampoIframe(campoId) {
            try {
                const el = document.getElementById(campoId);
                if (!el) {
                    console.warn('❌ [TESTE] diagnosticarCampoIframe: container não encontrado:', campoId);
                    return;
                }

                const iframe = el.querySelector('iframe');
                const rect = el.getBoundingClientRect();
                const centerX = Math.floor(rect.left + rect.width / 2);
                const centerY = Math.floor(rect.top + rect.height / 2);
                const topEl = document.elementFromPoint(centerX, centerY);

                console.log(`🧪 [TESTE] Campo ${campoId} diagnóstico:`, {
                    hasIframe: !!iframe,
                    rect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
                    elementFromPoint: topEl ? (topEl.tagName + (topEl.id ? ('#' + topEl.id) : '') + (topEl.className ? ('.' + String(topEl.className).replace(/\s+/g, '.')) : '')) : null
                });

                if (!iframe) {
                    mostrarStatus(`⚠️ Iframe NÃO foi injetado no campo ${campoId}. (SDK não montou o campo)`, 'warning');
                } else if (topEl && topEl !== iframe && !iframe.contains(topEl) && !el.contains(topEl)) {
                    mostrarStatus(`⚠️ Existe um overlay por cima do campo ${campoId} (elementFromPoint: ${topEl.tagName}).`, 'warning');
                }
            } catch (e) {
                console.error('❌ [TESTE] diagnosticarCampoIframe erro:', e);
            }
        }
        
        // Detectar bandeira do cartão
        function detectarBandeiraCartao() {
            if (!cardFormInstance) {
                return;
            }
            
            try {
                if (typeof cardFormInstance.getCardFormData === 'function') {
                    const cardFormData = cardFormInstance.getCardFormData();
                    const paymentMethodId = cardFormData.paymentMethodId || cardFormData.payment_method_id;
                    
                    if (paymentMethodId) {
                        console.log('💳 [TESTE] Bandeira detectada:', paymentMethodId);
                        
                        // Atualizar indicador visual se existir
                        const brandIndicator = document.getElementById('card-brand-indicator');
                        if (brandIndicator) {
                            const brandNames = {
                                'visa': 'Visa',
                                'master': 'Mastercard',
                                'amex': 'Amex',
                                'elo': 'Elo',
                                'hipercard': 'Hipercard'
                            };
                            brandIndicator.textContent = brandNames[paymentMethodId] || paymentMethodId.toUpperCase();
                        }
                    }
                }
            } catch (error) {
                // Silenciar erro - pode não ter dados ainda
                console.debug('🔍 [TESTE] Ainda não há dados de cartão:', error.message);
            }
        }
        
        // Inicializar quando a página carregar (carrega produto ANTES de iniciar MP, se houver ?produto_id=)
        window.addEventListener('DOMContentLoaded', async () => {
            console.log('📄 [TESTE] Página carregada');

            const url = new URL(window.location.href);
            const produtoIdParam = url.searchParams.get('produto_id');
            if (produtoIdParam) {
                const input = document.getElementById('produto_id');
                if (input) input.value = produtoIdParam;

                try {
                    await carregarProdutoData(produtoIdParam);
                } catch (e) {
                    console.error('❌ [TESTE] Falha ao carregar produto via parâmetro:', e);
                    mostrarStatus('❌ Erro ao carregar produto: ' + (e.message || 'erro'), 'error');
                }
            } else {
                // Sem produto carregado, manter endereço oculto por padrão
                toggleEnderecoFisico(false);
            }

            // Inicializar MP SOMENTE após resolver o produto (para amount correto)
            inicializarMercadoPago();

            // Monitorar mudanças no número do cartão para detectar bandeira
            setInterval(() => {
                if (cardFormInstance) {
                    detectarBandeiraCartao();
                }
            }, 500);

            // CEP -> ViaCEP (igual ao fluxo do checkout: autocomplete)
            const cepInput = document.getElementById('input_cep_mp_cartao');
            if (cepInput) {
                cepInput.addEventListener('input', async (e) => {
                    let value = String(e.target.value || '').replace(/\D/g, '');
                    if (value.length > 8) value = value.substring(0, 8);
                    if (value.length > 5) value = value.substring(0, 5) + '-' + value.substring(5);
                    e.target.value = value;

                    if (value.replace(/\D/g, '').length === 8) {
                        try {
                            const cep = value.replace(/\D/g, '');
                            const res = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
                            const data = await res.json();
                            if (data && !data.erro) {
                                const ruaEl = document.getElementById('input_logradouro_mp_cartao');
                                const bairroEl = document.getElementById('input_bairro_mp_cartao');
                                const cidadeEl = document.getElementById('input_cidade_mp_cartao');
                                const ufEl = document.getElementById('input_estado_mp_cartao');
                                if (ruaEl) ruaEl.value = data.logradouro || '';
                                if (bairroEl) bairroEl.value = data.bairro || '';
                                if (cidadeEl) cidadeEl.value = data.localidade || '';
                                if (ufEl) ufEl.value = String(data.uf || '').toUpperCase();

                                const numeroEl = document.getElementById('input_numero_mp_cartao');
                                if (numeroEl) numeroEl.focus();
                            }
                        } catch (err) {
                            console.warn('⚠️ [TESTE] ViaCEP falhou:', err);
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>

