{% extends spa_base or "base.html"%}
{% block title %}Admin - Logs{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 24px; }
    .admin-header h1 { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-header p { color: var(--text-muted); font-size: 0.9em; }
    .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); display: flex; align-items: center; gap: 8px; }
    .section-header .count { background: var(--bg-surface); padding: 4px 10px; border-radius: 100px; font-size: 0.75em; color: var(--text-muted); font-weight: 500; }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { background: var(--bg-surface); color: var(--text-muted); padding: 12px 16px; text-align: left; font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .admin-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.82em; color: var(--text-secondary); vertical-align: top; }
    .admin-table tr:last-child td { border-bottom: none; }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 0.72em; font-weight: 600; white-space: nowrap; }
    .badge-ok { background: rgba(70,211,105,0.12); color: var(--green); }
    .badge-warn { background: rgba(245,197,24,0.12); color: var(--gold); }
    .badge-error { background: rgba(229,9,20,0.12); color: var(--primary); }
    .badge-audit { background: rgba(66,133,244,0.12); color: #4285f4; }
    .badge-m3u { background: rgba(100,200,255,0.12); color: #64c8ff; }
    .log-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 16px 24px; border-bottom: 1px solid var(--border); }
    .log-filters .fld { display: flex; flex-direction: column; gap: 4px; }
    .log-filters label { color: var(--text-muted); font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
    .log-filters input, .log-filters select { padding: 8px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.82em; min-width: 120px; }
    .log-filters .grow { flex: 1; min-width: 200px; }
    .log-filters button, .log-filters a.link-btn { padding: 9px 16px; border: 0; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.8em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
    .log-filters button.apply { background: var(--green); color: #fff; }
    .log-filters a.link-btn { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); }
    .details-cell { max-width: 380px; word-break: break-word; white-space: pre-wrap; font-size: 0.95em; color: var(--text-muted); }
    .mono { font-family: monospace; font-size: 0.92em; word-break: break-all; }
    .pager { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 16px 24px; border-top: 1px solid var(--border); }
    .pager .info { color: var(--text-muted); font-size: 0.8em; }
    .pager a, .pager span.dis { padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.82em; text-decoration: none; border: 1px solid var(--border); }
    .pager a { background: var(--bg-surface); color: var(--text-secondary); }
    .pager a:hover { color: var(--text-primary); border-color: var(--border-hover); }
    .pager span.dis { background: var(--bg-surface); color: var(--text-muted); opacity: 0.5; }
    .admin-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
    .admin-nav-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--radius-md); text-decoration: none; font-size: 0.85em; font-weight: 500; transition: var(--transition); }
    .admin-nav-btn:hover { background: var(--bg-elevated); border-color: var(--border-hover); color: var(--text-primary); }
</style>
{% endblock %}
{% block content %}
{% set qs = (('origem=' ~ origem) ~ ('&status=' ~ status_filter if status_filter else '') ~ ('&acao=' ~ (acao|urlencode) if acao else '') ~ ('&q=' ~ (q|urlencode) if q else '') ~ ('&de=' ~ date_from if date_from else '') ~ ('&ate=' ~ date_to if date_to else '')) %}
<div style="max-width: 1400px; margin: 0 auto; padding: 24px;">
    <div class="admin-header">
        <h1>📜 Logs</h1>
        <p>Histórico geral de auditoria e das fontes M3U. Filtre por origem, status, categoria, texto ou período.</p>
    </div>
    <div class="admin-nav">
        <a href="{{ url_for('admin_panel') }}" class="admin-nav-btn">← Voltar ao Painel</a>
    </div>

    <div class="admin-section">
        <div class="section-header">
            <h2>🔍 Filtros <span class="count">{{ total }} registro(s)</span></h2>
        </div>
        <form method="GET" class="log-filters">
            <div class="fld">
                <label>Origem</label>
                <select name="origem">
                    <option value="all" {% if origem == 'all' %}selected{% endif %}>Todas</option>
                    <option value="audit" {% if origem == 'audit' %}selected{% endif %}>Auditoria</option>
                    <option value="m3u" {% if origem == 'm3u' %}selected{% endif %}>Fontes M3U</option>
                </select>
            </div>
            <div class="fld">
                <label>Status</label>
                <select name="status">
                    <option value="" {% if not status_filter %}selected{% endif %}>Todos</option>
                    <option value="ok" {% if status_filter == 'ok' %}selected{% endif %}>OK</option>
                    <option value="warn" {% if status_filter == 'warn' %}selected{% endif %}>Aviso</option>
                    <option value="error" {% if status_filter == 'error' %}selected{% endif %}>Erro</option>
                </select>
            </div>
            <div class="fld">
                <label>Categoria / Ação</label>
                <input type="text" name="acao" placeholder="login, sync, ban..." value="{{ acao }}">
            </div>
            <div class="fld grow">
                <label>Buscar (email, IP, mensagem)</label>
                <input type="text" name="q" placeholder="termo de busca..." value="{{ q }}">
            </div>
            <div class="fld">
                <label>De</label>
                <input type="date" name="de" value="{{ date_from }}">
            </div>
            <div class="fld">
                <label>Até</label>
                <input type="date" name="ate" value="{{ date_to }}">
            </div>
            <button type="submit" class="apply">Filtrar</button>
            {% if origem != 'all' or status_filter or acao or q or date_from or date_to %}
            <a href="{{ url_for('admin_logs') }}" class="link-btn">Limpar</a>
            {% endif %}
        </form>

        <div style="overflow-x:auto;">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Data/Hora</th>
                        <th>Origem</th>
                        <th>Conta/Fonte</th>
                        <th>Ação</th>
                        <th>Status</th>
                        <th>Mensagem</th>
                        <th>IP / URL</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rows %}
                    <tr>
                        <td style="white-space:nowrap;">{{ r.when }}</td>
                        <td><span class="badge {{ 'badge-m3u' if r.origem == 'M3U' else 'badge-audit' }}">{{ r.origem }}</span></td>
                        <td>{{ r.conta }}</td>
                        <td><span class="mono">{{ r.action }}</span></td>
                        <td><span class="badge badge-{{ r.status }}">{{ r.status|upper }}</span></td>
                        <td class="details-cell">{{ r.message }}</td>
                        <td class="mono" style="max-width:260px;">{{ r.extra }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" style="text-align:center; color:var(--text-muted); padding:24px;">Nenhum log encontrado com esses filtros.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="pager">
            <span class="info">Página {{ page }} de {{ total_pages }} · {{ total }} registro(s)</span>
            <div style="display:flex; gap:8px;">
                {% if page > 1 %}
                <a href="{{ url_for('admin_logs', page=page-1) }}&{{ qs }}">← Anterior</a>
                {% else %}<span class="dis">← Anterior</span>{% endif %}
                {% if page < total_pages %}
                <a href="{{ url_for('admin_logs', page=page+1) }}&{{ qs }}">Próxima →</a>
                {% else %}<span class="dis">Próxima →</span>{% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}