<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ app_name }}{% endblock %} — {{ app_subtitle }}</title>
    
    <!-- Favicon Oficial VoxManu -->
    <link rel="icon" type="image/jpeg" href="{{ url_for('static', filename='img/voxmanu_logo.jpg') }}">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- CSS Theme v2.5 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
    
    <!-- Chart.js & Leaflet map CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    
    {% block extra_head %}{% endblock %}
</head>
<body>
    <div class="app-wrapper" id="appWrapper">
        {% if current_user %}
        <!-- Sidebar Navigation (Design System v2.5) -->
        <aside class="sidebar" id="appSidebar">
            <div class="sidebar-header">
                <a href="{{ url_for('dashboards.index') }}" class="sidebar-brand" style="display: flex; align-items: center; gap: 0.6rem;">
                    <img src="{{ url_for('static', filename='img/voxmanu_logo.jpg') }}" alt="VoxManu" style="width: 32px; height: 32px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,0.2);">
                    <span class="sidebar-brand-text">{{ app_name }}</span>
                    <span class="sidebar-brand-badge">2.5</span>
                </a>
                <button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Recolher / Expandir Menu Lateral">
                    <span id="sidebarToggleIcon">◀</span>
                </button>
            </div>
            
            <ul class="sidebar-menu">
                {% if current_user.perfil == 'cadastrador' %}
                    <li class="sidebar-item">
                        <a href="{{ url_for('cadastros.meus') }}" class="sidebar-link {% if request.endpoint == 'cadastros.meus' %}active{% endif %}">
                            <span class="sidebar-icon">🏠</span>
                            <span class="sidebar-text">Meu Painel</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('cadastros.novo') }}" class="sidebar-link {% if request.endpoint == 'cadastros.novo' %}active{% endif %}">
                            <span class="sidebar-icon">➕</span>
                            <span class="sidebar-text">Novo Cadastro</span>
                        </a>
                    </li>
                {% else %}
                    <li class="sidebar-item">
                        <a href="{{ url_for('dashboards.index') }}" class="sidebar-link {% if request.endpoint == 'dashboards.index' %}active{% endif %}">
                            <span class="sidebar-icon">🏠</span>
                            <span class="sidebar-text">Visão Geral</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('cadastros.index') }}" class="sidebar-link {% if request.endpoint in ['cadastros.index', 'cadastros.novo'] %}active{% endif %}">
                            <span class="sidebar-icon">👥</span>
                            <span class="sidebar-text">Cadastros</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('usuarios.index') }}" class="sidebar-link {% if request.endpoint == 'usuarios.index' %}active{% endif %}">
                            <span class="sidebar-icon">🧑‍💼</span>
                            <span class="sidebar-text">Multiplicadores</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('rede.arvore') }}" class="sidebar-link {% if request.endpoint == 'rede.arvore' %}active{% endif %}">
                            <span class="sidebar-icon">🌐</span>
                            <span class="sidebar-text">Rede de Multiplicadores</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('territorio.mapa') }}" class="sidebar-link {% if request.endpoint == 'territorio.mapa' %}active{% endif %}">
                            <span class="sidebar-icon">🗺️</span>
                            <span class="sidebar-text">Território</span>
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('relatorios.index') }}" class="sidebar-link {% if request.endpoint == 'relatorios.index' %}active{% endif %}">
                            <span class="sidebar-icon">📄</span>
                            <span class="sidebar-text">Relatórios</span>
                        </a>
                    </li>
                {% endif %}
                
                <div class="sidebar-divider"></div>
                
                {% if current_user.can_manage_users() %}
                    <li class="sidebar-item">
                        <a href="{{ url_for('usuarios.pedidos_reset') }}" class="sidebar-link {% if request.endpoint == 'usuarios.pedidos_reset' %}active{% endif %}">
                            <span class="sidebar-icon">🔑</span>
                            <span class="sidebar-text">Resets de Senha</span>
                            {% if pedidos_reset_count > 0 %}
                                <span class="badge" style="background-color: #F58220; color: #FFFFFF; font-size: 0.75rem; margin-left: auto; padding: 0.2rem 0.5rem; font-weight: 800;">
                                    {{ pedidos_reset_count }}
                                </span>
                            {% endif %}
                        </a>
                    </li>
                    <li class="sidebar-item">
                        <a href="{{ url_for('auditoria.index') }}" class="sidebar-link {% if request.endpoint == 'auditoria.index' %}active{% endif %}">
                            <span class="sidebar-icon">📋</span>
                            <span class="sidebar-text">Auditoria</span>
                        </a>
                    </li>
                {% endif %}
                
                {% if current_user.can_configure_campaign() %}
                    <li class="sidebar-item">
                        <a href="{{ url_for('campanhas.setup') }}" class="sidebar-link {% if request.endpoint == 'campanhas.setup' %}active{% endif %}">
                            <span class="sidebar-icon">⚙️</span>
                            <span class="sidebar-text">Configuração</span>
                        </a>
                    </li>
                {% endif %}
                
                <li class="sidebar-item" style="margin-top: auto;">
                    <a href="{{ url_for('dashboards.manual') }}" class="sidebar-link {% if request.endpoint == 'dashboards.manual' %}active{% endif %}">
                        <span class="sidebar-icon">❓</span>
                        <span class="sidebar-text">Manual do Usuário</span>
                    </a>
                </li>
                <li class="sidebar-item">
                    <a href="{{ url_for('auth.logout') }}" class="sidebar-link logout-link">
                        <span class="sidebar-icon">🚪</span>
                        <span class="sidebar-text">Sair</span>
                    </a>
                </li>
            </ul>
        </aside>
        {% endif %}
        
        <!-- Main Application Area -->
        <main class="main-content">
            {% if current_user %}
            <header class="topbar">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <button class="topbar-toggle-btn" id="topbarToggleBtn" title="Recolher / Expandir Menu Lateral">
                        ☰
                    </button>
                    <div class="topbar-title">
                        <h1>{% if campanha_ativa %}{{ campanha_ativa.nome }}{% else %}{{ app_name }}{% endif %}</h1>
                    </div>
                </div>
                <div class="topbar-user">
                    <span id="syncStatusBadge" class="badge badge-success" style="background-color: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; font-weight: 700;">Online</span>
                    <span class="user-badge" style="background: #0F2A4A; color: #FFFFFF; font-weight: 700; border: 1px solid #1E40AF;">
                        {{ current_user.nome }} ({% if current_user.is_dev %}DEV{% elif current_user.is_admin %}ADMIN{% elif current_user.is_visualizador %}VISUALIZADOR{% else %}MULTIPLICADOR{% endif %})
                    </span>
                </div>
            </header>
            {% endif %}
            
            <div class="page-body">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                {% block content %}{% endblock %}
            </div>
        </main>
    </div>
    
    <!-- Core JS -->
    <script src="{{ url_for('static', filename='js/sidebar.js') }}"></script>
    <script src="{{ url_for('static', filename='js/offline_sync.js') }}"></script>
    <script src="{{ url_for('static', filename='js/masks.js') }}"></script>

    <!-- Interceptador Global de Sessão Expirada para Requisições Async -->
    <script>
    (function() {
        const originalFetch = window.fetch;
        window.fetch = async function(...args) {
            let [resource, config] = args;
            config = config || {};
            config.headers = config.headers || {};
            if (!config.headers['X-Requested-With']) {
                config.headers['X-Requested-With'] = 'XMLHttpRequest';
            }
            const response = await originalFetch(resource, config);
            if (response.status === 401) {
                window.location.href = '/login';
            }
            return response;
        };
    })();
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>
