{% extends "base.html" %}

{% block title %}Manual do Usuário — {{ app_name }}{% endblock %}

{% block content %}
<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; flex-wrap: wrap; gap: 1rem;">
        <div>
            <h2 style="color: #123B6D; font-weight: 800; display: flex; align-items: center; gap: 0.5rem;">
                📘 Manual do Usuário — {{ app_name }}
            </h2>
            <p style="color: #5A6E85; font-size: 0.95rem; margin-top: 0.25rem;">
                {% if current_user.is_admin %}
                    Guia completo de operação com visualização global de todos os manuais do sistema.
                {% else %}
                    Guia prático e exclusivo de uso para o seu perfil no sistema.
                {% endif %}
            </p>
        </div>

        {% if current_user %}
            <span class="badge" style="background-color: #E3F2FD; color: #1976D2; font-size: 0.85rem; font-weight: 700; padding: 0.5rem 1rem;">
                Seu Perfil Ativo: {% if current_user.perfil == 'cadastrador' %}MULTIPLICADOR{% else %}{{ current_user.perfil|upper }}{% endif %}
            </span>
        {% endif %}
    </div>

    {% if current_user.is_admin %}
        <!-- Administrador: Acesso Total a Todos os Manuais via Abas de Navegação -->
        <div style="display: flex; gap: 0.5rem; border-bottom: 2px solid #E2E8F0; margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem;">
            <button onclick="openTab('tabAdmin')" class="tab-btn active-tab" id="btnAdmin" style="padding: 0.75rem 1.25rem; font-weight: 700; border: none; background: none; cursor: pointer; color: #0F2A4A; border-bottom: 3px solid #F58220;">
                👑 Administrador
            </button>
            <button onclick="openTab('tabMultiplicador')" class="tab-btn" id="btnMultiplicador" style="padding: 0.75rem 1.25rem; font-weight: 700; border: none; background: none; cursor: pointer; color: #64748B;">
                🧑‍💼 Multiplicador
            </button>
            <button onclick="openTab('tabDev')" class="tab-btn" id="btnDev" style="padding: 0.75rem 1.25rem; font-weight: 700; border: none; background: none; cursor: pointer; color: #64748B;">
                🛠️ Desenvolvedor (Dev)
            </button>
            <button onclick="openTab('tabVisualizador')" class="tab-btn" id="btnVisualizador" style="padding: 0.75rem 1.25rem; font-weight: 700; border: none; background: none; cursor: pointer; color: #64748B;">
                👁️ Visualizador
            </button>
        </div>
    {% endif %}

    <!-- 1. CONTEÚDO DO MULTIPLICADOR (Visível para Admin e Multiplicador) -->
    {% if current_user.is_admin or current_user.perfil == 'cadastrador' %}
    <div id="tabMultiplicador" class="tab-content" {% if current_user.is_admin %}style="display: none;"{% endif %}>
        <div style="background-color: #FFF8E1; border-left: 5px solid #FFA000; padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;">
            <h3 style="color: #B78103; font-weight: 800; font-size: 1.1rem; margin-bottom: 0.5rem;">
                🧑‍💼 Guia do Multiplicador (Líder de Campo)
            </h3>
            <p style="color: #6D4C41; font-size: 0.9rem;">
                Você é a força principal da campanha! Seu papel é cadastrar apoiadores na comunidade e formar novos multiplicadores para expandir a rede.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">1️⃣ Como Fazer o Primeiro Acesso</h4>
                <ol style="margin-left: 1.2rem; color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    <li>Acesse a tela de login.</li>
                    <li>No campo <strong>Usuário</strong>, digite seu <strong>CPF</strong>.</li>
                    <li>No campo <strong>Senha</strong>, digite também seu <strong>CPF</strong> (como senha inicial).</li>
                    <li>O sistema abrirá a tela para você criar sua <strong>nova senha pessoal</strong>. Digite-a e confirme!</li>
                </ol>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">2️⃣ Como Cadastrar um Apoiador</h4>
                <ol style="margin-left: 1.2rem; color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    <li>Clique no menu <strong>➕ Novo Cadastro</strong>.</li>
                    <li>Preencha o <strong>Nome Completo</strong> e <strong>Telefone</strong>.</li>
                    <li>Ao digitar o <strong>CEP</strong>, o bairro e a zona de Manaus são preenchidos automaticamente!</li>
                    <li>Preencha a <strong>Data de Nascimento</strong> (formato <code>DD/MM/AAAA</code>) e os dados do <strong>Título de Eleitor</strong>.</li>
                    <li>Clique em <strong>FINALIZAR E SALVAR CADASTRO</strong>.</li>
                </ol>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">3️⃣ Como Criar um Novo Multiplicador</h4>
                <ol style="margin-left: 1.2rem; color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    <li>No formulário de cadastro, marque a caixinha: <strong>"Sim, deseja se tornar Multiplicador(a)"</strong>.</li>
                    <li>Informe o <strong>CPF obrigatório</strong> dessa pessoa.</li>
                    <li>Assim que salvar, ela vira uma nova multiplicadora da sua equipe e os cadastros dela contam para você!</li>
                </ol>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">4️⃣ Esqueceu a Senha?</h4>
                <ol style="margin-left: 1.2rem; color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    <li>Na tela de login, clique em <strong>Esqueceu a senha?</strong>.</li>
                    <li>Digite seu CPF. O Administrador receberá um aviso no painel dele.</li>
                    <li>Assim que o Admin autorizar, você poderá entrar novamente usando seu <strong>CPF como senha</strong> para definir uma nova.</li>
                </ol>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 2. CONTEÚDO DO ADMINISTRADOR (Visível para Admin) -->
    {% if current_user.is_admin %}
    <div id="tabAdmin" class="tab-content">
        <div style="background-color: #EFF6FF; border-left: 5px solid #1D4ED8; padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;">
            <h3 style="color: #1E40AF; font-weight: 800; font-size: 1.1rem; margin-bottom: 0.5rem;">
                👑 Guia do Administrador (Gestor da Operação)
            </h3>
            <p style="color: #1E3A8A; font-size: 0.9rem;">
                Você comanda a operação! Tem acesso total para acompanhar cadastros, gerenciar a equipe, ver mapas, relatórios e autorizar resets de senha.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">📊 Visão Geral & Métricas</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    No menu <strong>🏠 Visão Geral</strong>, acompanhe o total de apoiadores cadastrados, o atingimento da meta da campanha, os bairros mais fortes de Manaus e os multiplicadores de destaque.
                </p>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">🎯 Gestão de Metas</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    Defina metas individuais personalizadas ao incluir/editar um multiplicador (ex: 250 apoiadores) ou ajuste a meta geral em <strong>⚙️ Configuração</strong>.
                </p>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">🔑 Aprovar Resets de Senha</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    No menu <strong>🔑 Resets de Senha</strong>, veja a notificação amarela de multiplicadores que esqueceram a senha. Clique em <strong>Aprovar & Resetar para o CPF</strong> para liberar o acesso.
                </p>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">🗺️ Território & Relatórios</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    Acesse <strong>🗺️ Território</strong> para ver o mapa de calor da cidade e <strong>📄 Relatórios</strong> para filtrar e exportar a lista de apoiadores em formatos oficiais.
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 3. CONTEÚDO DO DESENVOLVEDOR (Visível para Admin e Dev) -->
    {% if current_user.is_admin or current_user.perfil == 'dev' %}
    <div id="tabDev" class="tab-content" {% if current_user.is_admin %}style="display: none;"{% endif %}>
        <div style="background-color: #F3E8FF; border-left: 5px solid #7E22CE; padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;">
            <h3 style="color: #6B21A8; font-weight: 800; font-size: 1.1rem; margin-bottom: 0.5rem;">
                🛠️ Guia do Desenvolvedor (Dev / Suporte Técnico)
            </h3>
            <p style="color: #581C87; font-size: 0.9rem;">
                Acesso completo de nível técnico e suporte. Além de todas as funções de Administrador, possui auditoria de logs e configuração do sistema.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">📋 Logs de Auditoria</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    No menu <strong>📋 Auditoria</strong>, veja a trilha completa de alterações realizadas na plataforma com IP, usuário, horário e ação executada.
                </p>
            </div>

            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">⚙️ Configuração da Operação</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    No menu <strong>⚙️ Configuração</strong>, ajuste o nome do candidato, partido, slogan, município de atuação e metas padrão por multiplicador.
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 4. CONTEÚDO DO VISUALIZADOR (Visível para Admin e Visualizador) -->
    {% if current_user.is_admin or current_user.perfil == 'visualizador' %}
    <div id="tabVisualizador" class="tab-content" {% if current_user.is_admin %}style="display: none;"{% endif %}>
        <div style="background-color: #ECFDF5; border-left: 5px solid #059669; padding: 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;">
            <h3 style="color: #047857; font-weight: 800; font-size: 1.1rem; margin-bottom: 0.5rem;">
                👁️ Guia do Visualizador (Somente Leitura)
            </h3>
            <p style="color: #064E3B; font-size: 0.9rem;">
                Perfil de consulta estratégica. Permite acompanhar em tempo real todo o andamento da campanha sem permissão para alterar dados.
            </p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem;">
            <div style="background: #F8FAFC; border: 1px solid #E2E8F0; padding: 1.25rem; border-radius: 10px;">
                <h4 style="color: #123B6D; font-weight: 700; font-size: 1rem; margin-bottom: 0.75rem;">👁️ Acompanhamento em Tempo Real</h4>
                <p style="color: #475569; font-size: 0.9rem; line-height: 1.6;">
                    Consulte os menus <strong>Visão Geral</strong>, <strong>Rede de Multiplicadores</strong>, <strong>Território</strong> e <strong>Relatórios</strong>. Todas as estatísticas e mapas são atualizados instantaneamente!
                </p>
            </div>
        </div>
    </div>
    {% endif %}
</div>

{% if current_user.is_admin %}
<script>
function openTab(tabName) {
    const contents = document.querySelectorAll('.tab-content');
    contents.forEach(c => c.style.display = 'none');

    const btns = document.querySelectorAll('.tab-btn');
    btns.forEach(b => {
        b.style.color = '#64748B';
        b.style.borderBottom = 'none';
    });

    const activeTab = document.getElementById(tabName);
    if (activeTab) activeTab.style.display = 'block';

    const btnId = 'btn' + tabName.replace('tab', '');
    const activeBtn = document.getElementById(btnId);
    if (activeBtn) {
        activeBtn.style.color = '#0F2A4A';
        activeBtn.style.borderBottom = '3px solid #F58220';
    }
}
</script>
{% endif %}
{% endblock %}
