{% extends "base.html" %}
{% block title %}Configuracao de Afiliados{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 32px; }
    .admin-header h1 { font-size: 1.8em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-header p { color: var(--text-muted); font-size: 0.95em; }
    .config-grid { display: grid; gap: 24px; }
    .config-card {
        background: var(--bg-card); border-radius: var(--radius-lg);
        border: 1px solid var(--border); overflow: hidden;
    }
    .config-card .card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 24px; border-bottom: 1px solid var(--border);
    }
    .config-card .card-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); }
    .config-card .card-body { padding: 24px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { font-size: 0.8em; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }
    .form-group input, .form-group select {
        width: 100%; padding: 10px 12px; background: var(--bg-surface);
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        color: var(--text-primary); font-size: 0.9em;
    }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--text-secondary); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .btn-save {
        background: var(--green); color: #000; font-weight: 700;
        padding: 12px 32px; border: none; border-radius: var(--radius-sm);
        cursor: pointer; font-size: 0.9em;
    }
    .btn-save:hover { filter: brightness(1.1); }
    .user-list { display: grid; gap: 8px; }
    .user-item {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px; background: var(--bg-surface);
        border-radius: var(--radius-sm); border: 1px solid var(--border);
    }
    .user-item .email { color: var(--text-primary); font-weight: 500; font-size: 0.85em; }
    .user-item .config-info { color: var(--text-muted); font-size: 0.8em; }
    .action-btn {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 6px 12px; border-radius: var(--radius-sm);
        font-size: 0.75em; font-weight: 500; 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.green { background: rgba(70,211,105,0.1); color: var(--green); border-color: rgba(70,211,105,0.2); }
    .action-btn:hover { filter: brightness(1.2); }
    .info-box {
        background: rgba(70,211,105,0.1); border: 1px solid rgba(70,211,105,0.2);
        border-radius: var(--radius-md); padding: 16px 20px; color: var(--green);
        font-size: 0.85em; margin-bottom: 20px;
    }
    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
</style>
{% endblock %}
{% block content %}
<div class="config-grid" style="max-width:900px; margin:0 auto;">
    <div class="admin-header">
        <h1>Configuracao de Comissoes</h1>
        <p>Gerencie as comissoes do programa de afiliados</p>
        <a href="{{ url_for('admin_panel') }}" class="action-btn blue" style="padding:8px 20px; text-decoration:none; margin-top:12px; display:inline-block;">← Painel Admin</a>
        <a href="{{ url_for('admin_afiliados_saques') }}" class="action-btn blue" style="padding:8px 20px; text-decoration:none; margin-top:12px; display:inline-block;">Gerenciar Saques</a>
    </div>

    <div class="config-card">
        <div class="card-header">
            <h2>Configuracao Global</h2>
            <span style="color:var(--text-muted); font-size:0.8em;">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="form-row">
                    <div class="form-group" id="global-info-group">
                        <div id="global-info-plano" style="background:rgba(70,211,105,0.08); border:1px solid rgba(70,211,105,0.2); border-radius:var(--radius-sm); padding:12px 16px; color:var(--green); font-size:0.85em;">
                            O afiliado recebe <strong>X%</strong> em dias extras no plano.
                        </div>
                        <div id="global-info-dinheiro" style="display:none; background:rgba(245,197,24,0.08); border:1px solid rgba(245,197,24,0.2); border-radius:var(--radius-sm); padding:12px 16px; color:var(--gold); font-size:0.85em;">
                            O afiliado recebe <strong>X%</strong> do valor do plano em dinheiro na carteira.
                        </div>
                        <div id="global-info-ambos" style="display:none; background:rgba(100,150,255,0.08); border:1px solid rgba(100,150,255,0.2); border-radius:var(--radius-sm); padding:12px 16px; color:#6496ff; font-size:0.85em;">
                            O afiliado escolhe entre receber <strong>dias no plano</strong> ou <strong>dinheiro na carteira</strong>.
                        </div>
                    </div>
                    <div class="form-group">
                        <label>&nbsp;</label>
                        <button type="submit" class="btn-save">Salvar Configuracao Global</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="config-card">
        <div class="card-header">
            <h2>Configuracoes Individuais</h2>
            <span class="count" style="color:var(--text-muted); font-size:0.85em;">{{ user_config_map|length }} usuario(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>
                        <div class="email">{{ u.email if u else 'Usuario #' ~ user_id }}</div>
                        <div class="config-info">
                            {% if config.commission_type == 'percentage' %}Plano Gratis: {{ config.percentage_value }}%{% endif %}
                            {% if config.commission_type == 'fixed' %}Dinheiro: {{ config.percentage_value }}%{% endif %}
                            {% if config.commission_type == 'both' %}Ambos: {{ config.percentage_value }}%{% endif %}
                        </div>
                    </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 style="color:var(--text-muted); font-size:0.9em; text-align:center; padding:20px;">
                Nenhuma configuracao individual. Os afiliados usam a configuracao global.
            </div>
            {% endif %}
            <details style="margin-top:20px;">
                <summary style="cursor:pointer; color:var(--text-secondary); font-weight:500; font-size:0.85em;">Configurar usuario especifico</summary>
                <form method="POST" action="{{ url_for('admin_user_affiliate_config', user_id=0) }}" id="user-config-form" style="margin-top:16px; display:grid; gap:12px;">
                    <input type="hidden" name="user_id" id="config-user-id">
                    <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-row">
                        <div class="form-group">
                            <label>Modelo de Comissao</label>
                            <select name="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" 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>
</div>

<div class="modal-overlay" id="modal-user-config">
    <div class="modal-box" style="max-width:500px;">
        <button class="modal-close" onclick="closeUserConfig()">&times;</button>
        <h3>Configurar Afiliado - <span id="modal-user-email"></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 class="modal-btns">
                <button type="button" class="btn btn-cancel" onclick="closeUserConfig()">Cancelar</button>
                <button type="submit" class="btn">Salvar</button>
            </div>
        </form>
    </div>
</div>

<script>
function toggleGlobalInfo() {
    var type = document.getElementById('global-commission-type').value;
    document.getElementById('global-info-plano').style.display = type === 'percentage' ? '' : 'none';
    document.getElementById('global-info-dinheiro').style.display = type === 'fixed' ? '' : 'none';
    document.getElementById('global-info-ambos').style.display = type === 'both' ? '' : 'none';
}
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').classList.add('active');
}
function closeUserConfig() {
    document.getElementById('modal-user-config').classList.remove('active');
}
</script>
{% endblock %}