{% extends spa_base or "base.html"%}
{% block title %}Admin - Exportar Emails/WhatsApp{% endblock %}
{% block extra_head %}
<style>
    .export-page { max-width: 700px; margin: 0 auto; }
    .export-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .export-header p { color: var(--text-muted); font-size: 0.9em; margin-bottom: 24px; }
    .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 0.9em; font-weight: 500; margin-bottom: 20px; }
    .back-link:hover { color: var(--text-primary); }
    .export-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; }
    .section-label { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 12px; }
    .radio-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
    .radio-group label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg-surface); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.85em; color: var(--text-secondary); font-weight: 500; transition: all 0.2s; }
    .radio-group label:hover { border-color: var(--border-hover); color: var(--text-primary); }
    .radio-group input[type="radio"]:checked + span { color: var(--text-primary); font-weight: 600; }
    .radio-group label:has(input:checked) { border-color: var(--primary); background: rgba(229,9,20,0.08); }
    .radio-group input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }
    .count-badge { font-size: 0.75em; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-muted); margin-left: 4px; }
    .radio-group label:has(input:checked) .count-badge { background: rgba(229,9,20,0.15); color: var(--primary); }
    .divider { border: none; border-top: 1px solid var(--border); margin: 0 0 24px 0; }
    .btn-export { width: 100%; padding: 14px; font-size: 1em; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; }
    .btn-export.primary { background: var(--primary); color: #fff; }
    .btn-export.primary:hover { opacity: 0.9; }
</style>
{% endblock %}
{% block content %}
<div class="export-page" style="padding: 24px;">
    <a href="{{ url_for('admin_panel') }}" class="back-link">← Voltar ao Painel</a>

    <div class="export-header">
        <h1>📤 Exportar Emails / WhatsApp</h1>
        <p>Selecione o tipo de contato, a categoria e o formato para exportar.</p>
    </div>

    <form method="POST" action="{{ url_for('admin_export_emails') }}">
        <div class="export-card">
            <!-- Tipo de Contato -->
            <div class="section-label">1. Tipo de Contato</div>
            <div class="radio-group" style="margin-bottom: 24px;">
                <label>
                    <input type="radio" name="contato" value="ambos" checked>
                    <span>📧💬 Ambos</span>
                </label>
                <label>
                    <input type="radio" name="contato" value="email">
                    <span>📧 Apenas Email</span>
                </label>
                <label>
                    <input type="radio" name="contato" value="whatsapp">
                    <span>💬 Apenas WhatsApp</span>
                </label>
            </div>

            <hr class="divider">

            <!-- Categoria -->
            <div class="section-label">2. Categoria</div>
            <div class="radio-group">
                <label>
                    <input type="radio" name="filtro" value="todos" checked>
                    <span>👥 Todos</span>
                    <span class="count-badge">{{ counts.get('todos', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="ativos">
                    <span>✅ Ativos</span>
                    <span class="count-badge">{{ counts.get('ativos', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="free">
                    <span>🆓 Free</span>
                    <span class="count-badge">{{ counts.get('free', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="vip">
                    <span>💎 VIP/Premium</span>
                    <span class="count-badge">{{ counts.get('vip', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="inativos">
                    <span>⏸ Inativos</span>
                    <span class="count-badge">{{ counts.get('inativos', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="banidos">
                    <span>🚫 Banidos</span>
                    <span class="count-badge">{{ counts.get('banidos', 0) }}</span>
                </label>
                <label>
                    <input type="radio" name="filtro" value="vip_1mes">
                    <span>⏰ VIP Expira em 30 dias</span>
                </label>
            </div>

            <hr class="divider">

            <!-- Formato -->
            <div class="section-label">3. Formato</div>
            <div class="radio-group" style="margin-bottom: 24px;">
                <label>
                    <input type="radio" name="formato" value="csv" checked>
                    <span>📊 CSV (Excel)</span>
                </label>
                <label>
                    <input type="radio" name="formato" value="txt">
                    <span>📄 TXT (Texto)</span>
                </label>
            </div>

            <!-- Botao Exportar -->
            <button type="submit" class="btn-export primary">📥 Exportar Agora</button>
        </div>
    </form>
</div>
{% endblock %}