{% extends spa_base or "base.html"%}
{% block title %}Admin - Pagamento Online{% endblock %}
{% block extra_head %}
<style>
    .admin-pay { max-width: 700px; margin: 0 auto; }
    .pay-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .pay-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); }
    .pay-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 32px; border: 1px solid var(--border); margin-bottom: 24px; }
    .pay-card h2 { font-size: 1em; color: var(--text-primary); margin-bottom: 6px; }
    .pay-card .desc { color: var(--text-muted); font-size: 0.85em; margin-bottom: 20px; }
    .pay-form-group { margin-bottom: 20px; }
    .pay-form-group label { display: block; font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; font-weight: 600; }
    .pay-form-group input, .pay-form-group select, .pay-form-group textarea { 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; font-family: inherit; }
    .pay-form-group input:focus, .pay-form-group select:focus, .pay-form-group textarea:focus { outline: none; border-color: var(--green); }
    .pay-form-group .hint { font-size: 0.75em; color: var(--text-muted); margin-top: 6px; }
    .pay-form-group textarea { min-height: 80px; resize: vertical; }
    .pay-save { background: var(--green); color: #000; font-weight: 700; width: 100%; justify-content: center; padding: 14px; }
    .radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
    .radio-option { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); flex: 1; min-width: 200px; }
    .radio-option:hover { border-color: var(--border-hover); }
    .radio-option.active { border-color: var(--green); background: rgba(70,211,105,0.08); }
    .radio-option input[type="radio"] { display: none; }
    .radio-option .radio-label { font-size: 0.9em; font-weight: 600; color: var(--text-primary); }
    .radio-option .radio-desc { font-size: 0.75em; color: var(--text-muted); }
    .test-btn { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); padding: 10px 20px; border-radius: var(--radius-md); cursor: pointer; font-size: 0.85em; font-weight: 500; transition: var(--transition); }
    .test-btn:hover { border-color: var(--green); color: var(--green); }
    .test-result { margin-top: 12px; padding: 12px; border-radius: var(--radius-md); font-size: 0.85em; display: none; }
    .test-result.ok { display: block; background: rgba(70,211,105,0.1); border: 1px solid rgba(70,211,105,0.3); color: var(--green); }
    .test-result.fail { display: block; background: rgba(229,9,20,0.1); border: 1px solid rgba(229,9,20,0.3); color: var(--primary); }
    .products-grid { display: grid; gap: 12px; }
    .product-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; align-items: end; }
    .product-row .plan-label { padding: 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.9em; font-weight: 500; }
    .webhook-url { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; font-family: monospace; font-size: 0.85em; color: var(--green); word-break: break-all; cursor: pointer; transition: var(--transition); }
    .webhook-url:hover { border-color: var(--green); }
</style>
{% endblock %}
{% block content %}
<div class="admin-pay">
    <div class="pay-header">
        <h1>&#x1f4b3; Pagamento Online</h1>
        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline btn-sm">&larr; Admin</a>
    </div>

    <div class="pay-card">
        <h2>Metodo de Pagamento</h2>
        <div class="desc">Escolha como os usuarios irao assinar seus planos.</div>
        <form method="POST">
            <div class="pay-form-group">
                <label>Metodo Ativo</label>
                <div class="radio-group">
                    <label class="radio-option {% if settings.get('payment_method', 'whatsapp') == 'whatsapp' %}active{% endif %}" onclick="selectMethod(this, 'whatsapp')">
                        <input type="radio" name="payment_method" value="whatsapp" {% if settings.get('payment_method', 'whatsapp') == 'whatsapp' %}checked{% endif %}>
                        <div>
                            <div class="radio-label">&#x1f4ac; WhatsApp</div>
                            <div class="radio-desc">Redireciona pro WhatsApp com mensagem pronta</div>
                        </div>
                    </label>
                    <label class="radio-option {% if settings.get('payment_method') == 'cakto' %}active{% endif %}" onclick="selectMethod(this, 'cakto')">
                        <input type="radio" name="payment_method" value="cakto" {% if settings.get('payment_method') == 'cakto' %}checked{% endif %}>
                        <div>
                            <div class="radio-label">&#x1f310; Checkout Online</div>
                            <div class="radio-desc">Pagamento direto no site via Pix</div>
                        </div>
                    </label>
                </div>
            </div>

            <div id="whatsapp-section" style="display:{% if settings.get('payment_method', 'whatsapp') == 'whatsapp' %}block{% else %}none{% endif %};">
                <div class="pay-form-group">
                    <label>WhatsApp de Pagamento</label>
                    <input type="tel" name="payment_whatsapp" value="{{ settings.get('payment_whatsapp', '') }}" placeholder="5584981518164">
                    <div class="hint">Codigo do pais + DDD + numero (apenas digitos).</div>
                </div>
                <div class="pay-form-group">
                    <label>WhatsApp de Suporte</label>
                    <input type="tel" name="support_whatsapp" value="{{ settings.get('support_whatsapp', '') }}" placeholder="5584981518164">
                </div>
            </div>

            <div id="cakto-section" style="display:{% if settings.get('payment_method') == 'cakto' %}block{% else %}none{% endif %};">
                <div class="pay-form-group">
                    <label>Client ID</label>
                    <input type="text" name="cakto_client_id" value="{{ settings.get('cakto_client_id', '') }}" placeholder="Seu client_id da API">
                    <div class="hint">Obtido em Integracoes &gt; Cakto API &gt; Criar Chave de API.</div>
                </div>
                <div class="pay-form-group">
                    <label>Client Secret</label>
                    <input type="password" name="cakto_client_secret" value="{{ settings.get('cakto_client_secret', '') }}" placeholder="Seu client_secret">
                    <div class="hint">Exibido apenas uma vez ao criar a chave.</div>
                </div>
                <div class="pay-form-group">
                    <label>Webhook Secret</label>
                    <input type="text" name="cakto_webhook_secret" value="{{ settings.get('cakto_webhook_secret', '') }}" placeholder="Secret do webhook">
                    <div class="hint">Gerado ao cadastrar o webhook. Usado para validar assinaturas.</div>
                </div>

                <div class="pay-form-group">
                    <button type="button" class="test-btn" onclick="testCaktoConnection()">&#x1f50c; Testar Conexao</button>
                    <div class="test-result" id="testResult"></div>
                </div>

                <div class="pay-form-group">
                    <label>Webhook URL</label>
                    <div class="webhook-url" onclick="copyWebhook()" title="Clique para copiar">
                        {{ request.host_url }}webhook/cakto
                    </div>
                    <div class="hint">Cadastre este URL no painel da Cakto. Eventos: purchase_approved, subscription_renewed, subscription_canceled.</div>
                </div>

                <div class="pay-form-group">
                    <label>Link de Pagamento por Plano</label>
                    <div class="products-grid">
                        {% for p in plans %}
                        <div class="product-row">
                            <div class="plan-label">{{ p.name }} — R$ {{ "%.2f"|format(p.effective_price) }}</div>
                            <input type="text" name="cakto_offer_{{ p.key }}" value="{{ offer_ids.get(p.key, '') }}" placeholder="Cole o link ou codigo da oferta (ex: 3wvo8m5)">
                        </div>
                        {% endfor %}
                    </div>
                    <div class="hint">No painel da Cakto, va em Checkout > Copiar Link. Cole o codigo que aparece depois de pay.cakto.com.br/ (ex: 3wvo8m5). Cadastre o webhook com o URL abaixo.</div>
                </div>
            </div>

            <button type="submit" class="btn pay-save">Salvar Configuracoes</button>
        </form>
    </div>
</div>

<script>
function selectMethod(el, method) {
    document.querySelectorAll('.radio-option').forEach(function(o) { o.classList.remove('active'); });
    el.classList.add('active');
    document.getElementById('whatsapp-section').style.display = method === 'whatsapp' ? 'block' : 'none';
    document.getElementById('cakto-section').style.display = method === 'cakto' ? 'block' : 'none';
}

function testCaktoConnection() {
    var btn = document.querySelector('.test-btn');
    var result = document.getElementById('testResult');
    btn.textContent = 'Testando...';
    btn.disabled = true;
    fetch('/admin/cakto/test', { method: 'POST', headers: {'X-CSRFToken': document.querySelector('meta[name=csrf-token]').content} })
        .then(function(r) { return r.json(); })
        .then(function(d) {
            if (d.ok) {
                result.className = 'test-result ok';
                result.textContent = 'Conexao OK! Token obtido com sucesso.';
            } else {
                result.className = 'test-result fail';
                result.textContent = 'Erro: ' + (d.error || 'Verifique as credenciais.');
            }
            btn.textContent = '\u{1f50c} Testar Conexao';
            btn.disabled = false;
        })
        .catch(function(e) {
            result.className = 'test-result fail';
            result.textContent = 'Erro de rede: ' + e.message;
            btn.textContent = '\u{1f50c} Testar Conexao';
            btn.disabled = false;
        });
}

function copyWebhook() {
    var url = '{{ request.host_url }}webhook/cakto';
    navigator.clipboard.writeText(url).then(function() {
        var el = document.querySelector('.webhook-url');
        var old = el.textContent.trim();
        el.textContent = 'Copiado!';
        setTimeout(function() { el.textContent = url; }, 1500);
    });
}
</script>
{% endblock %}