{% extends spa_base or "base.html"%}
{% block title %}Configuracao de Afiliados{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 24px; }
    .admin-header h1 { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-header p { color: var(--text-muted); font-size: 0.9em; }
    .config-layout { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; padding: 0 24px; }
    .config-card {
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
        overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .config-card .card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--bg-surface);
    }
    .config-card .card-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); margin: 0; }
    .config-card .card-body { padding: 24px; }
    .form-group { margin-bottom: 18px; }
    .form-group label { font-size: 0.82em; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }
    .form-group input, .form-group select {
        width: 100%; padding: 10px 14px; background: var(--bg-surface);
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        color: var(--text-primary); font-size: 0.92em; transition: var(--transition);
        box-sizing: border-box;
    }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(229,9,20,0.15); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .btn-save {
        background: var(--primary); color: #fff; font-weight: 700;
        padding: 12px 32px; border: none; border-radius: var(--radius-sm);
        cursor: pointer; font-size: 0.92em; transition: var(--transition);
    }
    .btn-save:hover { background: var(--primary-hover); }
    .user-list { display: grid; gap: 10px; }
    .user-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px; background: var(--bg-surface);
        border-radius: var(--radius-md); border: 1px solid var(--border);
        transition: var(--transition);
    }
    .user-item:hover { border-color: var(--border-hover); }
    .user-item .user-info { display: flex; flex-direction: column; gap: 4px; }
    .user-item .email { color: var(--text-primary); font-weight: 600; font-size: 0.9em; }
    .user-item .config-info { color: var(--text-secondary); font-size: 0.82em; }
    .user-item .config-badge {
        display: inline-block; padding: 3px 8px; border-radius: 100px; font-size: 0.72em; font-weight: 600;
    }
    .config-badge.percentage { background: rgba(70,211,105,0.1); color: var(--green); }
    .config-badge.fixed { background: rgba(245,197,24,0.1); color: var(--gold); }
    .config-badge.both { background: rgba(100,150,255,0.1); color: #6496ff; }
    .action-btn {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 8px 16px; border-radius: var(--radius-sm);
        font-size: 0.82em; font-weight: 600; text-decoration: none;
        transition: var(--transition); border: 1px solid transparent; cursor: pointer;
    }
    .action-btn.blue { background: rgba(66,133,244,0.1); color: #4285f4; border-color: rgba(66,133,244,0.2); }
    .action-btn.blue:hover { background: rgba(66,133,244,0.2); }
    .action-btn.yellow { background: rgba(245,197,24,0.1); color: var(--gold); border-color: rgba(245,197,24,0.2); }
    .action-btn.yellow:hover { background: rgba(245,197,24,0.2); }
    .info-box {
        background: rgba(70,211,105,0.06); border: 1px solid rgba(70,211,105,0.15);
        border-radius: var(--radius-md); padding: 14px 18px; color: var(--text-secondary);
        font-size: 0.85em; margin-bottom: 20px; line-height: 1.5;
    }
    .back-link {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--text-muted); text-decoration: none; font-size: 0.85em;
        margin-bottom: 16px; transition: var(--transition);
    }
    .back-link:hover { color: var(--text-primary); }
    .empty-state { text-align: center; color: var(--text-muted); padding: 32px 20px; font-size: 0.9em; }
    details { margin-top: 20px; }
    details summary { cursor: pointer; color: var(--text-secondary); font-weight: 500; font-size: 0.9em; padding: 12px 0; }
    details summary:hover { color: var(--text-primary); }
    .config-form-detail {
        padding: 20px; background: var(--bg-surface); border-radius: var(--radius-md);
        border: 1px solid var(--border); margin-top: 16px;
    }
    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
</style>
{% endblock %}
{% block content %}
<div class="config-layout">
    <div class="admin-header">
        <h1>⚙️ Configuracao de Comissoes</h1>
        <p>Gerencie as comissoes do programa de afiliados de forma organizada</p>
    </div>

    <!-- Global Config -->
    <div class="config-card">
        <div class="card-header">
            <h2>🌐 Configuracao Global</h2>
            <span style="color:var(--text-muted); font-size:0.82em;">Aplica-se a todos os afiliados sem configuracao individual</span>
        </div>
        <div class="card-body">
            <form method="POST">
                <input type="hidden" name="user_id" value="">
                <div class="form-row">
                    <div class="form-group">
                        <label>Modelo de Comissao</label>
                        <select name="commission_type" id="global-commission-type" onchange="toggleGlobalInfo()">
                            <option value="percentage" {% if global_config and global_config.commission_type == 'percentage' %}selected{% endif %}>Plano Gratis (Dias)</option>
                            <option value="fixed" {% if global_config and global_config.commission_type == 'fixed' %}selected{% endif %}>Dinheiro (Carteira)</option>
                            <option value="both" {% if global_config and global_config.commission_type == 'both' %}selected{% endif %}>Ambos (afiliado escolhe)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Porcentagem (%)</label>
                        <input type="number" name="percentage_value" step="0.1" min="0.1" max="100"
                               value="{{ global_config.percentage_value if global_config else 10 }}" placeholder="10">
                    </div>
                </div>
                <div class="info-box" id="global-info-box">
                    {% if global_config and global_config.commission_type == 'percentage' %}
                        O afiliado recebe <strong>{{ global_config.percentage_value }}%</strong> em dias extras no plano.
                    {% elif global_config and global_config.commission_type == 'fixed' %}
                        O afiliado recebe <strong>{{ global_config.percentage_value }}%</strong> do valor do plano em dinheiro na carteira.
                    {% elif global_config and global_config.commission_type == 'both' %}
                        O afiliado escolhe entre receber <strong>dias no plano</strong> ou <strong>dinheiro na carteira</strong>.
                    {% else %}
                        O afiliado recebe <strong>10%</strong> como padrao.
                    {% endif %}
                </div>
                <div style="display:flex; gap:12px; justify-content:flex-end;">
                    <button type="submit" class="btn-save">💾 Salvar Configuracao Global</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Individual Configs -->
    <div class="config-card">
        <div class="card-header">
            <h2>👤 Configuracoes Individuais</h2>
            <span style="color:var(--text-muted); font-size:0.82em;">{{ user_config_map|length }} usuario(s) configurado(s)</span>
        </div>
        <div class="card-body">
            {% if user_config_map %}
            <div class="user-list">
                {% for user_id, config in user_config_map.items() %}
                {% set u = all_users|selectattr('id', 'equalto', user_id)|first %}
                <div class="user-item">
                    <div class="user-info">
                        <span class="email">{{ u.email if u else 'Usuario #' ~ user_id }}</span>
                        <span class="config-info">
                            <span class="config-badge {{ config.commission_type }}">
                                {% if config.commission_type == 'percentage' %}Plano Gratis{% endif %}
                                {% if config.commission_type == 'fixed' %}Dinheiro{% endif %}
                                {% if config.commission_type == 'both' %}Ambos{% endif %}
                            </span>
                            {{ config.percentage_value }}%
                        </span>
                    </div>
                    <button class="action-btn blue" onclick="openUserConfig({{ user_id }}, '{{ u.email if u else '' }}', '{{ config.commission_type }}', {{ config.percentage_value }})">Editar</button>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">
                <p>Nenhuma configuracao individual. Os afiliados usam a configuracao global.</p>
            </div>
            {% endif %}

            <details>
                <summary>⚙️ Configurar usuario especifico</summary>
                <form method="POST" action="{{ url_for('admin_user_affiliate_config', user_id=0) }}" id="user-config-form" class="config-form-detail">
                    <input type="hidden" name="user_id" id="config-user-id">
                    <div class="form-row">
                        <div class="form-group">
                            <label>Selecione o Usuario</label>
                            <select name="user_id_select" id="user-select" onchange="document.getElementById('config-user-id').value=this.value" style="width:100%; padding:10px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary);">
                                <option value="">Selecione...</option>
                                {% for u in all_users %}
                                <option value="{{ u.id }}">{{ u.email }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Modelo de Comissao</label>
                            <select name="commission_type" id="config-commission-type">
                                <option value="percentage">Plano Gratis (Dias)</option>
                                <option value="fixed">Dinheiro (Carteira)</option>
                                <option value="both">Ambos (afiliado escolhe)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Porcentagem (%)</label>
                            <input type="number" name="percentage_value" id="config-percentage" step="0.1" min="0.1" max="100" value="10">
                        </div>
                    </div>
                    <button type="submit" class="btn-save">💾 Salvar Configuracao</button>
                </form>
            </details>
        </div>
    </div>

    <a href="{{ url_for('admin_panel') }}" class="back-link">← Voltar ao Painel Admin</a>
</div>

<!-- Modal -->
<div class="modal-overlay" id="modal-user-config" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:10000; justify-content:center; align-items:center;" onclick="if(event.target===this)closeUserConfig()">
    <div style="background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); max-width:500px; width:90%; padding:24px; position:relative;">
        <button class="modal-close" onclick="closeUserConfig()" style="position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-muted); font-size:1.5em; cursor:pointer;">&times;</button>
        <h3 style="color:var(--text-primary); margin-bottom:20px;">Configurar Afiliado - <span id="modal-user-email" style="color:var(--gold);"></span></h3>
        <form method="POST" id="form-user-config">
            <div class="form-group">
                <label>Modelo de Comissao</label>
                <select name="commission_type" id="modal-commission-type">
                    <option value="percentage">Plano Gratis (Dias)</option>
                    <option value="fixed">Dinheiro (Carteira)</option>
                    <option value="both">Ambos (afiliado escolhe)</option>
                </select>
            </div>
            <div class="form-group">
                <label>Porcentagem (%)</label>
                <input type="number" name="percentage_value" id="modal-percentage" step="0.1" min="0.1" max="100">
            </div>
            <div style="display:flex; gap:12px; justify-content:flex-end; margin-top:20px;">
                <button type="button" class="action-btn blue" onclick="closeUserConfig()">Cancelar</button>
                <button type="submit" class="btn-save">Salvar</button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleGlobalInfo() {
    var type = document.getElementById('global-commission-type').value;
    var box = document.getElementById('global-info-box');
    var pctVal = document.querySelector('input[name="percentage_value"]').value || 10;
    if (type === 'percentage') {
        box.innerHTML = 'O afiliado recebe <strong>' + pctVal + '%</strong> em dias extras no plano.';
        box.style.background = 'rgba(70,211,105,0.06)'; box.style.borderColor = 'rgba(70,211,105,0.15)'; box.style.color = 'var(--text-secondary)';
    } else if (type === 'fixed') {
        box.innerHTML = 'O afiliado recebe <strong>' + pctVal + '%</strong> do valor do plano em dinheiro na carteira.';
        box.style.background = 'rgba(245,197,24,0.06)'; box.style.borderColor = 'rgba(245,197,24,0.15)'; box.style.color = 'var(--text-secondary)';
    } else {
        box.innerHTML = 'O afiliado escolhe entre receber <strong>dias no plano</strong> ou <strong>dinheiro na carteira</strong>.';
        box.style.background = 'rgba(100,150,255,0.06)'; box.style.borderColor = 'rgba(100,150,255,0.15)'; box.style.color = 'var(--text-secondary)';
    }
}
toggleGlobalInfo();

function openUserConfig(userId, email, type, pct) {
    document.getElementById('modal-user-email').textContent = email;
    document.getElementById('modal-commission-type').value = type;
    document.getElementById('modal-percentage').value = pct;
    document.getElementById('form-user-config').action = '/admin/users/' + userId + '/affiliate_config';
    document.getElementById('modal-user-config').style.display = 'flex';
}
function closeUserConfig() {
    document.getElementById('modal-user-config').style.display = 'none';
}
</script>
{% endblock %}