{% extends "base.html" %}

{% block title %}{% if usuario %}Editar Usuário{% else %}Novo Usuário{% endif %} — {{ app_name }}{% endblock %}

{% block content %}
<div style="max-width: 650px; margin: 0 auto;">
    <div class="content-card">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 1rem;">
            <h2 style="color: #123B6D; font-weight: 800;">
                {% if usuario %}✏️ Editar Usuário: {{ usuario.nome }}{% else %}➕ Cadastrar Novo Usuário{% endif %}
            </h2>
            <a href="{{ url_for('usuarios.index') }}" style="color: #1976D2; font-weight: 600; text-decoration: none;">← Voltar à Lista</a>
        </div>

        <form method="POST" action="{% if usuario %}{{ url_for('usuarios.editar', user_id=usuario.id) }}{% else %}{{ url_for('usuarios.novo') }}{% endif %}">
            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">Nome Completo *</label>
                <input type="text" name="nome" required value="{{ usuario.nome if usuario else '' }}" placeholder="Nome do usuário" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
            </div>

            <div style="margin-bottom: 1rem;">
                <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">E-mail de Acesso *</label>
                <input type="email" name="email" required value="{{ usuario.email if usuario else '' }}" placeholder="email@campanha.com" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">CPF <span style="color: #64748B; font-weight: normal;">(Usuário de Acesso)</span></label>
                    <input type="text" name="cpf" value="{{ usuario.cpf if usuario and usuario.cpf else '' }}" placeholder="000.000.000-00" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                </div>
                <div>
                    <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">Telefone / WhatsApp</label>
                    <input type="text" name="telefone" value="{{ usuario.telefone if usuario and usuario.telefone else '' }}" placeholder="(92) 99999-9999" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem;">
                <div>
                    <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">Perfil / Nível de Acesso * ⓘ</label>
                    <select name="perfil" id="selectPerfil" required style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                        {% for r in allowed_roles %}
                            <option value="{{ r }}" {% if usuario and usuario.perfil == r %}selected{% endif %}>
                                {% if r == 'dev' or r == 'superadmin_dev' %}Desenvolvedor (Acesso Total + Logs)
                                {% elif r == 'admin' or r == 'admin_1' or r == 'admin_2' %}Administrador (Gestão Completa)
                                {% elif r == 'visualizador' %}Visualizador (Somente Leitura)
                                {% elif r == 'cadastrador' or r == 'multiplicador' %}Multiplicador (Expansor de Rede)
                                {% else %}{{ r|upper }}
                                {% endif %}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div>
                    <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">Superior Hierárquico (Pai)</label>
                    <select name="cadastrador_pai_id" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
                        <option value="">[ Nenhum / Superior Raiz ]</option>
                        {% for p in pais %}
                            <option value="{{ p.id }}" {% if (usuario and usuario.cadastrador_pai_id == p.id) or (not usuario and current_user.perfil == 'cadastrador' and current_user.id == p.id) %}selected{% endif %}>
                                {{ p.nome }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <!-- Card Contextual de Descrição do Perfil Selecionado -->
            <div id="cardDescricaoPerfil" style="background-color: #E3F2FD; border: 1px solid #90CAF9; border-radius: 8px; padding: 1rem; margin-bottom: 1.25rem; font-size: 0.85rem; color: #0D47A1;">
                <strong id="tituloDescricaoPerfil">Cadastrador</strong>
                <p id="textoDescricaoPerfil" style="margin-top: 0.3rem;">Pode cadastrar apoiadores, criar outros cadastradores subordinados à sua rede e visualizar sua sub-árvore. Não pode criar administradores ou alterar configurações da campanha.</p>
            </div>

            {% if not usuario %}
            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.85rem;">Senha Inicial *</label>
                <input type="password" name="senha" required placeholder="••••••••" style="width: 100%; padding: 0.75rem; border: 1px solid #CBD5E1; border-radius: 6px;">
            </div>
            {% endif %}

            <button type="submit" class="btn-primary-orange" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 1.05rem;">
                {% if usuario %}SALVAR ALTERAÇÕES{% else %}CRIAR USUÁRIO{% endif %}
            </button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const selectPerfil = document.getElementById('selectPerfil');
    const tituloDesc = document.getElementById('tituloDescricaoPerfil');
    const textoDesc = document.getElementById('textoDescricaoPerfil');

    const descricoes = {
        'superadmin_dev': {
            titulo: 'DEV / Superadmin',
            texto: 'Possui acesso técnico e administrativo total ao sistema e parâmetros globais da plataforma.'
        },
        'admin_1': {
            titulo: 'Admin 1 — Estratégico',
            texto: 'Pode configurar informações estratégicas da campanha, políticos aliados/concorrentes, metas, usuários e regras gerais.'
        },
        'admin_2': {
            titulo: 'Admin 2 — Operacional',
            texto: 'Pode gerenciar usuários, cadastradores, cadastros e acompanhar a operação territorial, sem alterar parâmetros estratégicos principais.'
        },
        'visualizador': {
            titulo: 'Visualizador (Somente Leitura)',
            texto: 'Pode visualizar dashboards, mapas, território, árvore de rede e relatórios. Não pode criar, editar ou excluir registros.'
        },
        'cadastrador': {
            titulo: 'Cadastrador (Expansor de Rede)',
            texto: 'Pode cadastrar apoiadores, criar outros cadastradores subordinados à sua rede e acompanhar a sub-árvore. Não pode criar administradores.'
        },
        'comum': {
            titulo: 'Usuário Comum',
            texto: 'Possui acesso operacional limitado conforme as permissões da operação.'
        }
    };

    function atualizarCard() {
        const val = selectPerfil.value;
        if (descricoes[val]) {
            tituloDesc.textContent = descricoes[val].titulo;
            textoDesc.textContent = descricoes[val].texto;
        }
    }

    if (selectPerfil) {
        selectPerfil.addEventListener('change', atualizarCard);
        atualizarCard();
    }
});
</script>
{% endblock %}