{% extends spa_base or "base.html"%}
{% block title %}Admin - Termos de Uso{% 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; }
    .admin-section {
        background: var(--bg-card); border-radius: var(--radius-lg);
        border: 1px solid var(--border); margin-bottom: 24px; overflow: hidden;
    }
    .section-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 24px; border-bottom: 1px solid var(--border);
    }
    .section-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th {
        background: var(--bg-surface); color: var(--text-muted); padding: 12px 20px;
        text-align: left; font-size: 0.75em; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
    }
    .admin-table td {
        padding: 14px 20px; border-bottom: 1px solid var(--border);
        font-size: 0.85em; color: var(--text-secondary);
    }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .empty-state { padding: 40px; text-align: center; color: var(--text-muted); font-size: 0.9em; }
    @media (max-width: 768px) {
        .admin-header h1 { font-size: 1.4em; }
        .admin-table { font-size: 0.75em; min-width: 600px; }
        .admin-table th, .admin-table td { padding: 10px 12px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="admin-header">
    <h1>Comprovantes de Aceite dos Termos</h1>
    <p>Registro de aceitação dos Termos de Uso, Política de Privacidade, Termos de Serviço e Programa de Afiliados</p>
</div>

<div class="admin-section">
    <div class="section-header">
        <h2>📋 Aceitações</h2>
        <span class="count">{{ acceptances.total }} registros</span>
    </div>
    <div style="padding:12px 24px; border-bottom:1px solid var(--border);">
        <form method="GET" style="display:flex; gap:8px; align-items:center;">
            <input type="text" name="q" placeholder="Buscar por email..." value="{{ search }}" style="flex:1; max-width:350px; padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em;">
            <button type="submit" class="action-btn blue" style="padding:6px 14px; background:rgba(66,133,244,0.1); color:#4285f4; border:1px solid rgba(66,133,244,0.2); border-radius:var(--radius-sm); cursor:pointer;">Buscar</button>
            {% if search %}
            <a href="{{ url_for('admin_terms') }}" class="action-btn" style="padding:6px 14px; background:rgba(245,197,24,0.1); color:var(--gold); border:1px solid rgba(245,197,24,0.2); border-radius:var(--radius-sm); text-decoration:none;">Limpar</a>
            {% endif %}
        </form>
    </div>
    <div style="padding:12px 24px; border-bottom:1px solid var(--border); background:rgba(245,197,24,0.04);">
        <form method="GET" action="{{ url_for('admin_user_consent_export') }}" style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
            <span style="font-size:0.8em; color:var(--text-muted); white-space:nowrap;">📥 Exportar:</span>
            <input type="email" name="email" placeholder="Email do usuario..." required style="flex:1; min-width:200px; max-width:300px; padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em;">
            <label style="font-size:0.8em; color:var(--text-secondary); display:flex; align-items:center; gap:4px; cursor:pointer;">
                <input type="radio" name="type" value="all" checked> Ambos
            </label>
            <label style="font-size:0.8em; color:var(--text-secondary); display:flex; align-items:center; gap:4px; cursor:pointer;">
                <input type="radio" name="type" value="terms"> Só Termos
            </label>
            <label style="font-size:0.8em; color:var(--text-secondary); display:flex; align-items:center; gap:4px; cursor:pointer;">
                <input type="radio" name="type" value="cookies"> Só Cookies
            </label>
            <button type="submit" class="action-btn" style="padding:6px 14px; background:rgba(66,133,244,0.1); color:#4285f4; border:1px solid rgba(66,133,244,0.2); border-radius:var(--radius-sm); cursor:pointer; font-weight:600;">📥 Exportar</button>
        </form>
    </div>
    <div style="overflow-x:auto;">
        <table class="admin-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Usuário</th>
                    <th>Data/Hora</th>
                    <th>IP</th>
                    <th>Dispositivo</th>
                    <th>Versão</th>
                    <th>Documento</th>
                </tr>
            </thead>
            <tbody>
                {% for a in acceptances.items %}
                <tr>
                    <td>#{{ a.id }}</td>
                    <td style="color:var(--text-primary); font-weight:500;">{{ a.user.email }}</td>
                    <td>{{ a.accepted_at|bdatetime('%d/%m/%Y %H:%M:%S') }}</td>
                    <td style="font-family:monospace; font-size:0.8em;">{{ a.ip_address }}</td>
                    <td>{{ a.device_info }}</td>
                    <td>{{ a.terms_version }}</td>
                    <td>
                        <a href="{{ url_for('admin_terms_download', acceptance_id=a.id) }}" class="action-btn blue" style="padding:4px 10px; font-size:0.75em; background:rgba(66,133,244,0.1); color:#4285f4; border:1px solid rgba(66,133,244,0.2); border-radius:var(--radius-sm); text-decoration:none; white-space:nowrap;">
                            ⬇ TXT
                        </a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="empty-state">Nenhum registro de aceitação encontrado.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% if acceptances.pages > 1 %}
<div class="pagination">
    {% if acceptances.has_prev %}
    <a href="{{ url_for('admin_terms', page=acceptances.prev_num, q=search) }}">← Anterior</a>
    {% endif %}
    <span class="current">{{ acceptances.page }} / {{ acceptances.pages }}</span>
    {% if acceptances.has_next %}
    <a href="{{ url_for('admin_terms', page=acceptances.next_num, q=search) }}">Próximo →</a>
    {% endif %}
</div>
{% endif %}

<div style="margin-top:32px; display:flex; gap:16px; flex-wrap:wrap;">
    <a href="{{ url_for('admin_cookies') }}" class="btn btn-outline">🍪 Ver Consentimentos de Cookies</a>
</div>
{% endblock %}