{% extends spa_base or "base.html"%}
{% block title %}Pagamento - {{ plan.name }}{% endblock %}
{% block extra_head %}
<style>
    .pay-page { max-width: 520px; margin: 0 auto; }
    .pay-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 0.9em; margin-bottom: 20px; transition: var(--transition); }
    .pay-back:hover { color: var(--text-primary); }
    .pay-plan-card {
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 24px; text-align: center; margin-bottom: 24px;
    }
    .pay-plan-card .plan-name { font-size: 1.2em; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
    .pay-plan-card .plan-price { font-size: 2em; font-weight: 800; color: var(--gold); }
    .pay-plan-card .plan-days { color: var(--text-muted); font-size: 0.85em; margin-top: 2px; }
    .pay-section {
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 24px; margin-bottom: 16px;
    }
    .pay-section h3 { font-size: 1em; font-weight: 600; color: var(--text-primary); margin-bottom: 16px; }
    .pay-loading { text-align: center; padding: 40px 0; color: var(--text-muted); }
    .pay-qr-wrap { text-align: center; }
    .pay-qr-box {
        background: #fff; padding: 16px; border-radius: var(--radius-md);
        display: inline-block; margin-bottom: 16px;
    }
    .pay-qr-box canvas, .pay-qr-box img { display: block; }
    .pay-pix-label { color: var(--text-muted); font-size: 0.8em; margin-bottom: 8px; }
    .pay-pix-copy {
        background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
        padding: 12px 14px; font-family: monospace; font-size: 0.7em; color: var(--text-secondary);
        word-break: break-all; cursor: pointer; transition: var(--transition); width: 100%; text-align: left;
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .pay-pix-copy:hover { border-color: var(--green); color: var(--green); }
    .pay-pix-copy .copy-icon { flex-shrink: 0; font-size: 1.1em; }
    .pay-timer {
        background: var(--bg-surface); border: 1px solid var(--gold); border-radius: var(--radius-md);
        padding: 10px 16px; margin: 16px 0; text-align: center;
    }
    .pay-timer .timer-label { color: var(--text-muted); font-size: 0.75em; margin-bottom: 4px; }
    .pay-timer .timer-value { color: var(--gold); font-size: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
    .pay-timer .timer-bar { height: 3px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; margin-top: 8px; }
    .pay-timer .timer-fill { height: 100%; background: var(--gold); border-radius: 2px; transition: width 1s linear; }
    .pay-btn {
        width: 100%; padding: 14px; font-weight: 700; border: none; border-radius: var(--radius-md);
        cursor: pointer; font-size: 0.95em; transition: var(--transition);
    }
    .pay-btn-primary { background: var(--green); color: #000; }
    .pay-btn-primary:hover { opacity: 0.9; }
    .pay-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
    .pay-btn-outline { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); margin-top: 12px; }
    .pay-btn-outline:hover { border-color: var(--border-hover); }
    .pay-info { color: var(--text-muted); font-size: 0.78em; text-align: center; margin-top: 12px; line-height: 1.5; }
    .pay-success-wrap { text-align: center; padding: 20px 0; }
    .pay-success-wrap .check { font-size: 3em; margin-bottom: 12px; }
    .pay-success-wrap .msg { color: var(--green); font-size: 1em; font-weight: 600; }
    .pay-error-wrap { text-align: center; padding: 10px 0; }
    .pay-error-wrap .msg { color: var(--primary); font-size: 0.9em; }
</style>
{% endblock %}
{% block content %}
<div class="pay-page">
    <a href="{{ url_for('planos') }}" class="pay-back">&larr; Voltar aos planos</a>

    <div class="pay-plan-card">
        <div class="plan-name">{{ plan.name }}</div>
        {% if plan.promotion_enabled and plan.promotion_price is not none %}
        <div class="plan-price">R$ {{ "%.2f"|format(plan.effective_price) }}</div>
        <div style="font-size:0.78em; color:var(--text-muted); text-decoration:line-through;">R$ {{ "%.2f"|format(plan.price) }}</div>
        {% else %}
        <div class="plan-price">R$ {{ "%.2f"|format(plan.effective_price) }}</div>
        {% endif %}
        <div class="plan-days">{{ plan.days }} dias de acesso</div>
    </div>

    {% if pending %}
    <div class="pay-section">
        <h3>&#x1f504; Pagamento pendente</h3>
        <p style="color:var(--text-secondary); font-size:0.85em; margin-bottom:16px;">
            Voce ja tem um pagamento em andamento para este plano.
        </p>
        <button class="pay-btn" style="background:var(--gold); color:#000;" onclick="continuePayment('{{ pending.charge_id }}')">
            Continuar Pagamento
        </button>
        <button class="pay-btn pay-btn-outline" onclick="cancelPending()">
            Cancelar e Criar Novo Pagamento
        </button>
    </div>
    {% endif %}

    <div class="pay-section" id="sectionAction" {% if pending %}style="display:none;"{% endif %}>
        <h3>Pagamento via Pix</h3>
        <p style="color:var(--text-secondary); font-size:0.85em; margin-bottom:16px;">
            Preencha seus dados para gerar o QR Code. O pagamento e confirmado na hora.
        </p>
        <div style="margin-bottom:14px;">
            <label for="nameInput" style="display:block; font-size:0.85em; color:var(--text-secondary); margin-bottom:6px;">Nome completo</label>
            <input type="text" id="nameInput" placeholder="Seu nome completo" maxlength="255"
                   value=""
                   style="width:100%; padding:12px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.95em; box-sizing:border-box;"
                   autocomplete="name">
            <div id="nameError" style="color:var(--primary); font-size:0.78em; margin-top:4px; display:none;"></div>
        </div>
        <div style="margin-bottom:14px;">
            <label style="display:block; font-size:0.85em; color:var(--text-secondary); margin-bottom:6px;">Telefone</label>
            <input type="tel" value="{{ current_user.whatsapp or '' }}" disabled
                   style="width:100%; padding:12px 14px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-muted); font-size:0.95em; box-sizing:border-box; opacity:0.7;">
            <div style="font-size:0.72em; color:var(--text-muted); margin-top:4px;">Telefone ja cadastrado.</div>
        </div>
        <div style="margin-bottom:16px;">
            <label for="cpfInput" style="display:block; font-size:0.85em; color:var(--text-secondary); margin-bottom:6px;">CPF</label>
            <input type="text" id="cpfInput" placeholder="000.000.000-00" maxlength="14"
                   style="width:100%; padding:12px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.95em; box-sizing:border-box;"
                   oninput="formatCPF(this)" autocomplete="off">
            <div id="cpfError" style="color:var(--primary); font-size:0.78em; margin-top:4px; display:none;"></div>
        </div>
        <button class="pay-btn pay-btn-primary" id="btnCreate" onclick="createPayment()">Gerar QR Code Pix</button>
    </div>

    <div class="pay-section" id="sectionLoading" style="display:none;">
        <div class="pay-loading">&#x23f3; Gerando pagamento...</div>
    </div>

    <div class="pay-section" id="sectionPix" style="display:none;">
        <h3>Escaneie o QR Code</h3>
        <div class="pay-qr-wrap">
            <div class="pay-qr-box" id="pixQrCode"></div>
        </div>
        <div class="pay-pix-label">Ou copie o codigo Pix abaixo:</div>
        <div class="pay-pix-copy" id="pixCopyCode" onclick="copyPixCode()">
            <span id="pixCodeText">Carregando...</span>
            <span class="copy-icon">&#x1f4cb;</span>
        </div>
        <div class="pay-timer">
            <div class="timer-label">Tempo restante para pagamento</div>
            <div class="timer-value" id="pixTimer">--:--</div>
            <div class="timer-bar"><div class="timer-fill" id="pixTimerFill" style="width:100%"></div></div>
        </div>
        <button class="pay-btn pay-btn-primary" id="btnCheckPay" onclick="checkPaymentStatus()">&#x2705; Ja paguei</button>
        <div class="pay-info">Apos pagar, o plano e ativado automaticamente em ate 1 minuto.</div>
    </div>

    <div class="pay-section" id="sectionError" style="display:none;">
        <div class="pay-error-wrap">
            <div class="msg" id="payErrorMsg"></div>
        </div>
        <button class="pay-btn pay-btn-outline" onclick="goBackToAction()">Tentar Novamente</button>
    </div>

    <div class="pay-section" id="sectionSuccess" style="display:none;">
        <div class="pay-success-wrap">
            <div class="check">&#x2705;</div>
            <div class="msg">Pagamento confirmado!</div>
            <p style="color:var(--text-muted); font-size:0.85em; margin-top:8px;">Seu plano ja esta ativo.</p>
        </div>
        <a href="{{ url_for('dashboard') }}" class="pay-btn pay-btn-primary" style="text-decoration:none; text-align:center; display:block;">Ir para o Dashboard</a>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
var S = {
    planType: '{{ plan_type }}',
    orderId: '',
    qrCode: '',
    expiresAt: null,
    pollTimer: null,
    countdownTimer: null,
    totalMs: 0
};

function showSection(id) {
    ['sectionAction', 'sectionLoading', 'sectionPix', 'sectionError', 'sectionSuccess'].forEach(function(s) {
        document.getElementById(s).style.display = 'none';
    });
    document.getElementById(id).style.display = 'block';
}

function goBackToAction() {
    clearTimers();
    showSection('sectionAction');
}

function clearTimers() {
    if (S.pollTimer) { clearInterval(S.pollTimer); S.pollTimer = null; }
    if (S.countdownTimer) { clearInterval(S.countdownTimer); S.countdownTimer = null; }
}

function formatCPF(el) {
    var v = el.value.replace(/\D/g, '').substring(0, 11);
    if (v.length > 9) el.value = v.replace(/(\d{3})(\d{3})(\d{3})(\d{1,2})/, '$1.$2.$3-$4');
    else if (v.length > 6) el.value = v.replace(/(\d{3})(\d{3})(\d{1,3})/, '$1.$2.$3');
    else if (v.length > 3) el.value = v.replace(/(\d{3})(\d{1,3})/, '$1.$2');
    else el.value = v;
}

function validateCPF(cpf) {
    cpf = cpf.replace(/\D/g, '');
    if (cpf.length !== 11) return false;
    if (/^(\d)\1{10}$/.test(cpf)) return false;
    var s = 0, i;
    for (i = 0; i < 9; i++) s += parseInt(cpf[i]) * (10 - i);
    var r = 11 - (s % 11);
    if (r === 10 || r === 11) r = 0;
    if (parseInt(cpf[9]) !== r) return false;
    s = 0;
    for (i = 0; i < 10; i++) s += parseInt(cpf[i]) * (11 - i);
    r = 11 - (s % 11);
    if (r === 10 || r === 11) r = 0;
    return parseInt(cpf[10]) === r;
}

function showFieldError(id, msg) {
    var el = document.getElementById(id);
    el.textContent = msg;
    el.style.display = 'block';
}

function hideFieldError(id) {
    document.getElementById(id).style.display = 'none';
}

function createPayment() {
    var nameVal = document.getElementById('nameInput').value.trim();
    var cpfVal = document.getElementById('cpfInput').value;
    hideFieldError('nameError');
    hideFieldError('cpfError');
    if (!nameVal || nameVal.length < 3) {
        showFieldError('nameError', 'Informe seu nome completo.');
        return;
    }
    if (!cpfVal || cpfVal.replace(/\D/g, '').length !== 11) {
        showFieldError('cpfError', 'Informe seu CPF completo.');
        return;
    }
    if (!validateCPF(cpfVal)) {
        showFieldError('cpfError', 'CPF invalido. Verifique os numeros.');
        return;
    }
    var cpfClean = cpfVal.replace(/\D/g, '');
    showSection('sectionLoading');
    var csrfToken = document.querySelector('meta[name=csrf-token]').content;
    fetch('/api/cakto/create-payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
        body: JSON.stringify({ plan_type: S.planType, cpf: cpfClean, name: nameVal })
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (!d.ok) {
            document.getElementById('payErrorMsg').textContent = d.error || 'Erro ao criar pagamento.';
            showSection('sectionError');
            return;
        }
        S.orderId = d.order_id || '';
        S.qrCode = d.qr_code;
        S.expiresAt = d.expires_at ? new Date(d.expires_at) : null;
        renderPix();
        showSection('sectionPix');
        startTimers();
        startPolling();
    })
    .catch(function() {
        document.getElementById('payErrorMsg').textContent = 'Erro de conexao. Tente novamente.';
        showSection('sectionError');
    });
}

function renderPix() {
    var container = document.getElementById('pixQrCode');
    container.innerHTML = '';
    document.getElementById('pixCodeText').textContent = S.qrCode;
    try {
        new QRCode(container, {
            text: S.qrCode, width: 240, height: 240,
            colorDark: '#000000', colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.M
        });
    } catch(e) {
        container.innerHTML = '<p style="color:#333; padding:20px; font-size:0.85em;">Abra o app do banco e escaneie o codigo.</p>';
    }
}

function startTimers() {
    if (!S.expiresAt) return;
    S.totalMs = S.expiresAt - new Date();
    var timerEl = document.getElementById('pixTimer');
    var fillEl = document.getElementById('pixTimerFill');
    function update() {
        var diff = S.expiresAt - new Date();
        if (diff <= 0) {
            timerEl.textContent = 'Expirado';
            fillEl.style.width = '0%';
            clearTimers();
            return;
        }
        var m = Math.floor(diff / 60000);
        var s = Math.floor((diff % 60000) / 1000);
        timerEl.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
        fillEl.style.width = Math.max(0, (diff / S.totalMs) * 100) + '%';
    }
    update();
    S.countdownTimer = setInterval(update, 1000);
}

function startPolling() {
    if (S.pollTimer) clearInterval(S.pollTimer);
    S.pollTimer = setInterval(function() {
        if (!S.orderId) return;
        var csrfToken = document.querySelector('meta[name=csrf-token]').content;
        fetch('/api/payment_status/' + S.orderId, { headers: { 'X-CSRFToken': csrfToken } })
            .then(function(r) { return r.json(); })
            .then(function(d) {
                if (d.status === 'paid') {
                    clearTimers();
                    showSection('sectionSuccess');
                }
            })
            .catch(function() {});
    }, 5000);
}

function checkPaymentStatus() {
    if (!S.orderId) {
        alert('Nenhum pagamento encontrado. Gere o QR Code primeiro.');
        return;
    }
    var btn = document.getElementById('btnCheckPay');
    btn.textContent = 'Verificando...';
    btn.disabled = true;
    var csrfToken = document.querySelector('meta[name=csrf-token]').content;
    fetch('/api/payment_status/' + S.orderId, { headers: { 'X-CSRFToken': csrfToken } })
        .then(function(r) { return r.json(); })
        .then(function(d) {
            btn.innerHTML = '&#x2705; Ja paguei';
            btn.disabled = false;
            if (d.status === 'paid') {
                clearTimers();
                showSection('sectionSuccess');
            } else if (d.status === 'expired') {
                alert('Este pagamento expirou. Crie um novo pagamento.');
                clearTimers();
                showSection('sectionAction');
            } else {
                alert('Pagamento pendente. Apos pagar, aguarde ate 1 minuto para confirmacao automatica.');
            }
        })
        .catch(function() {
            btn.innerHTML = '&#x2705; Ja paguei';
            btn.disabled = false;
            alert('Erro ao verificar pagamento. Tente novamente.');
        });
}

function copyPixCode() {
    var code = S.qrCode;
    if (navigator.clipboard) {
        navigator.clipboard.writeText(code).then(function() {
            var el = document.getElementById('pixCodeText');
            var orig = el.textContent;
            el.textContent = 'Copiado!';
            setTimeout(function() { el.textContent = orig; }, 1500);
        });
    }
}

function continuePayment(chargeId) {
    showSection('sectionLoading');
    var csrfToken = document.querySelector('meta[name=csrf-token]').content;
    fetch('/api/payment_status/' + chargeId, { headers: { 'X-CSRFToken': csrfToken } })
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (d.status === 'paid') {
                showSection('sectionSuccess');
                return;
            }
            if (d.status === 'expired') {
                document.getElementById('payErrorMsg').textContent = 'Este pagamento expirou. Crie um novo pagamento.';
                showSection('sectionError');
                return;
            }
            if (d.pix_qr_code) {
                S.qrCode = d.pix_qr_code;
                S.orderId = chargeId;
                S.expiresAt = d.expires_at ? new Date(d.expires_at) : null;
                renderPix();
                showSection('sectionPix');
                startTimers();
                startPolling();
            } else {
                document.getElementById('payErrorMsg').textContent = 'Pagamento pendente encontrado. Clique em "Gerar QR Code Pix" para criar um novo.';
                showSection('sectionError');
            }
        })
        .catch(function() {
            document.getElementById('payErrorMsg').textContent = 'Erro ao verificar pagamento.';
            showSection('sectionError');
        });
}

function cancelPending() {
    document.getElementById('sectionAction').style.display = 'block';
}
</script>
<script src="{{ url_for('static', filename='qrcode.min.js') }}"></script>
{% endblock %}