{% extends spa_base or "base.html"%}
{% block title %}Pagamento{% endblock %}
{% block extra_head %}
<style>
    .payment-wrapper { max-width: 500px; margin: 0 auto; padding: 40px 0; }
    .payment-card {
        background: var(--bg-card); border-radius: var(--radius-lg);
        padding: 40px; text-align: center; border: 1px solid var(--border);
    }
    .payment-card h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .payment-card .plan-name { color: var(--text-muted); font-size: 0.9em; margin-bottom: 16px; }
    .payment-card .price { font-size: 3em; font-weight: 800; color: var(--text-primary); margin: 16px 0; }
    .payment-card .period { color: var(--text-muted); font-size: 0.9em; margin-bottom: 24px; }
    .payment-card .divider { height: 1px; background: var(--border); margin: 24px 0; }
    .payment-card .instruction { color: var(--text-secondary); font-size: 0.9em; margin-bottom: 12px; }
    .qr-container { background: #fff; border-radius: var(--radius-lg); padding: 20px; display: inline-block; margin: 16px 0; }
    .qr-container img { width: 220px; height: 220px; display: block; }
    .pix-copy-area {
        background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md);
        padding: 14px; margin: 16px 0; word-break: break-all; font-size: 0.8em;
        color: var(--text-secondary); cursor: pointer; font-family: monospace; transition: var(--transition);
    }
    .pix-copy-area:hover { border-color: var(--primary); background: var(--bg-elevated); }
    .copy-feedback { color: var(--green); font-size: 0.85em; margin-top: 8px; display: none; }
    .countdown-bar {
        background: var(--bg-surface); border-radius: var(--radius-md); padding: 16px;
        margin: 16px 0; border: 1px solid var(--border);
    }
    .countdown-bar .countdown-label { color: var(--text-muted); font-size: 0.8em; margin-bottom: 8px; }
    .countdown-bar .countdown-progress {
        height: 6px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; margin-bottom: 8px;
    }
    .countdown-bar .countdown-progress .fill {
        height: 100%; border-radius: 3px; transition: width 1s linear;
        background: var(--green);
    }
    .countdown-bar .countdown-progress .fill.warning { background: var(--gold); }
    .countdown-bar .countdown-progress .fill.danger { background: var(--primary); }
    .countdown-bar .countdown-time { color: var(--text-primary); font-size: 1.4em; font-weight: 700; }
    .status-badge {
        margin-top: 20px; padding: 14px; border-radius: var(--radius-md); font-weight: 500; font-size: 0.9em;
    }
    .status-badge.pending { background: rgba(245,197,24,0.1); color: var(--gold); border: 1px solid rgba(245,197,24,0.2); }
    .status-badge.success { background: rgba(70,211,105,0.1); color: var(--green); border: 1px solid rgba(70,211,105,0.2); }
    .status-badge.error { background: rgba(229,9,20,0.1); color: var(--primary); border: 1px solid rgba(229,9,20,0.2); }
    .status-badge.expired { background: rgba(128,128,128,0.1); color: var(--text-muted); border: 1px solid rgba(128,128,128,0.2); }
    .refresh-btn { margin-top: 16px; }
    .back-link { display: inline-block; margin-top: 16px; color: var(--text-muted); font-size: 0.85em; text-decoration: none; }
    .back-link:hover { color: var(--text-secondary); }
    .expired-section { display: none; margin-top: 20px; }
    .expired-section.active { display: block; }
    #pixSection { transition: opacity 0.3s; }
    #pixSection.hidden { opacity: 0.3; pointer-events: none; }
</style>
{% endblock %}
{% block content %}
<div class="payment-wrapper">
    <div class="payment-card">
        <h1>Pagamento</h1>
        <p class="plan-name">{{ plan.name if plan else 'Troco Play - Plano Premium' }}</p>
        <div class="price">R$ {{ payment.amount }}</div>
        <p class="period">{{ plan.days if plan else 30 }} dias de acesso</p>
        <div class="divider"></div>

        <div id="pixSection">
            <p class="instruction">Escaneie o QR Code abaixo com seu banco:</p>
            <div class="qr-container">
                <img src="data:image/png;base64,{{ qr_b64 }}" alt="QR Code PIX" id="qrImage">
            </div>
            <p class="instruction">Ou copie o codigo PIX:</p>
            <div class="pix-copy-area" id="pixCode" onclick="copyPix()">
                {{ pix_copy }}
            </div>
            <small id="copyFeedback" class="copy-feedback">Copiado!</small>
        </div>

        <div class="countdown-bar" id="countdownBar">
            <div class="countdown-label">Tempo restante para pagamento:</div>
            <div class="countdown-progress"><div class="fill" id="countdownFill"></div></div>
            <div class="countdown-time" id="countdownTime">20:00</div>
        </div>

        <div class="status-badge pending" id="statusBadge">
            Aguardando pagamento...
        </div>

        <button class="btn refresh-btn" onclick="checkStatus()" id="checkBtn">Verificar Pagamento</button>

        <div class="expired-section" id="expiredSection">
            <p style="color:var(--text-muted); margin-bottom:12px;">Esta cobranca PIX expirou.</p>
            <a href="{{ url_for('assinar', plan_type=payment.plan_type) }}" class="btn">Gerar Novo PIX</a>
        </div>
        <br>
        <a href="{{ url_for('planos') }}" class="back-link">&larr; Voltar</a>
    </div>
</div>
{% endblock %}
{% block scripts %}
<script>
    var chargeId = '{{ charge_id }}';
    var expiresAtStr = '{{ payment.expires_at.isoformat() if payment.expires_at else "" }}';
    var paymentStatus = '{{ payment.status }}';
    var countdownInterval = null;
    var pollInterval = null;

    function initCountdown() {
        if (!expiresAtStr) return;
        const expiresAt = new Date(expiresAtStr + 'Z');
        const totalMs = 20 * 60 * 1000;

        function update() {
            const now = new Date();
            const diff = expiresAt - now;
            if (diff <= 0) {
                clearInterval(countdownInterval);
                document.getElementById('countdownTime').textContent = '00:00';
                document.getElementById('countdownFill').style.width = '0%';
                document.getElementById('countdownFill').className = 'fill danger';
                document.getElementById('statusBadge').className = 'status-badge expired';
                document.getElementById('statusBadge').textContent = 'Cobranca expirada.';
                document.getElementById('pixSection').classList.add('hidden');
                document.getElementById('expiredSection').classList.add('active');
                return;
            }
            const mins = Math.floor(diff / 60000);
            const secs = Math.floor((diff % 60000) / 1000);
            document.getElementById('countdownTime').textContent =
                String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');

            const pct = (diff / totalMs) * 100;
            const fill = document.getElementById('countdownFill');
            fill.style.width = pct + '%';
            fill.className = 'fill' + (pct < 20 ? ' danger' : pct < 50 ? ' warning' : '');
        }
        update();
        countdownInterval = setInterval(update, 1000);
    }

    async function checkStatus() {
        const btn = document.getElementById('checkBtn');
        btn.textContent = 'Verificando...';
        btn.disabled = true;
        try {
            const r = await fetch('/api/payment_status/' + chargeId);
            const data = await r.json();
            if (data.status === 'paid') {
                document.getElementById('statusBadge').className = 'status-badge success';
                document.getElementById('statusBadge').textContent = 'Pagamento confirmado! Redirecionando...';
                clearInterval(countdownInterval);
                clearInterval(pollInterval);
                setTimeout(() => { window.location.href = '/dashboard'; }, 2000);
            } else if (data.status === 'expired' || data.status === 'cancelled') {
                document.getElementById('statusBadge').className = 'status-badge expired';
                document.getElementById('statusBadge').textContent = 'Cobranca expirada.';
                document.getElementById('pixSection').classList.add('hidden');
                document.getElementById('expiredSection').classList.add('active');
                clearInterval(countdownInterval);
            } else {
                document.getElementById('statusBadge').className = 'status-badge pending';
                document.getElementById('statusBadge').textContent = 'Ainda aguardando pagamento...';
            }
        } catch(e) {
            document.getElementById('statusBadge').className = 'status-badge error';
            document.getElementById('statusBadge').textContent = 'Erro ao verificar. Tente novamente.';
        }
        btn.textContent = 'Verificar Pagamento';
        btn.disabled = false;
    }

    function copyPix() {
        const el = document.getElementById('pixCode');
        navigator.clipboard.writeText(el.textContent.trim()).then(() => {
            document.getElementById('copyFeedback').style.display = 'block';
            setTimeout(() => { document.getElementById('copyFeedback').style.display = 'none'; }, 2000);
        });
    }

    initCountdown();
    pollInterval = setInterval(checkStatus, 5000);
    setTimeout(checkStatus, 3000);
</script>
{% endblock %}