{% extends spa_base or "base.html"%}
{% block title %}Admin - Suporte{% endblock %}
{% block extra_head %}
<style>
    .admin-support { max-width: 1100px; margin: 0 auto; }
    .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .page-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); }
    .filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
    .filter-btn {
        background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border);
        padding: 8px 16px; border-radius: var(--radius-md); font-size: 0.8em; font-weight: 500;
        text-decoration: none; transition: var(--transition);
    }
    .filter-btn:hover, .filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .search-form { display: flex; gap: 8px; margin-bottom: 20px; }
    .search-form input {
        flex: 1; padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border);
        border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.85em;
    }
    .search-form input:focus { outline: none; border-color: var(--text-secondary); }
    .stats-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .stat-pill { padding: 8px 16px; border-radius: 100px; font-size: 0.8em; font-weight: 600; }
    .stat-pill.open { background: rgba(245,197,24,0.1); color: var(--gold); }
    .stat-pill.attendance { background: rgba(70,211,105,0.1); color: var(--green); }
    .stat-pill.closed { background: rgba(128,128,128,0.1); color: var(--text-muted); }
    .ticket-list { display: grid; gap: 8px; }
    .ticket-item {
        background: var(--bg-card); border-radius: var(--radius-md); padding: 16px 20px;
        border: 1px solid var(--border); display: flex; justify-content: space-between;
        align-items: center; gap: 16px; text-decoration: none; color: inherit; transition: var(--transition);
    }
    .ticket-item:hover { border-color: var(--border-hover); }
    .ticket-info h3 { font-size: 0.95em; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
    .ticket-info .meta { font-size: 0.8em; color: var(--text-muted); }
    .ticket-status { padding: 3px 10px; border-radius: 100px; font-size: 0.72em; font-weight: 600; white-space: nowrap; }
    .ticket-status.aberto { background: rgba(245,197,24,0.1); color: var(--gold); }
    .ticket-status.em_atendimento { background: rgba(70,211,105,0.1); color: var(--green); }
    .ticket-status.respondido { background: rgba(100,150,255,0.1); color: #6496ff; }
    .ticket-status.fechado { background: rgba(128,128,128,0.1); color: var(--text-muted); }
</style>
{% endblock %}
{% block content %}
<div class="admin-support">
    <div class="page-header">
        <h1>Suporte - Chamados</h1>
        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline btn-sm">&larr; Admin</a>
    </div>

    <div class="stats-row">
        <span class="stat-pill open">Abertos: {{ total_open }}</span>
        <span class="stat-pill attendance">Em atendimento: {{ total_attendance }}</span>
        <span class="stat-pill closed">Fechados: {{ total_closed }}</span>
    </div>

    <div class="filters">
        <a href="{{ url_for('admin_suporte', status='all') }}" class="filter-btn {% if status_filter == 'all' %}active{% endif %}">Todos</a>
        <a href="{{ url_for('admin_suporte', status='aberto') }}" class="filter-btn {% if status_filter == 'aberto' %}active{% endif %}">Abertos</a>
        <a href="{{ url_for('admin_suporte', status='em_atendimento') }}" class="filter-btn {% if status_filter == 'em_atendimento' %}active{% endif %}">Em Atendimento</a>
        <a href="{{ url_for('admin_suporte', status='respondido') }}" class="filter-btn {% if status_filter == 'respondido' %}active{% endif %}">Respondidos</a>
        <a href="{{ url_for('admin_suporte', status='fechado') }}" class="filter-btn {% if status_filter == 'fechado' %}active{% endif %}">Fechados</a>
    </div>

    <form class="search-form" method="GET">
        <input type="text" name="q" placeholder="Buscar por email do usuario..." value="{{ search }}">
        <button type="submit" class="btn btn-sm">Buscar</button>
    </form>

    <div class="ticket-list">
        {% for t in tickets.items %}
        <a href="{{ url_for('admin_suporte_ticket', ticket_id=t.id) }}" class="ticket-item">
            <div class="ticket-info">
                <h3>#{{ t.id }} - {{ t.subject }}</h3>
                <div class="meta">{{ t.user.email }} &middot; {{ t.created_at|bdatetime }}</div>
            </div>
            <span class="ticket-status {{ t.status }}">{{ t.status|replace('_', ' ')|capitalize }}</span>
        </a>
        {% endfor %}
    </div>

    {% if tickets.pages > 1 %}
    <div class="pagination" style="margin-top:24px;">
        {% if tickets.has_prev %}
        <a href="{{ url_for('admin_suporte', page=tickets.prev_num, status=status_filter, q=search) }}">&laquo; Anterior</a>
        {% endif %}
        {% for p in tickets.iter_pages() %}
        {% if p %}
        <a href="{{ url_for('admin_suporte', page=p, status=status_filter, q=search) }}" class="{% if p == tickets.page %}current{% endif %}">{{ p }}</a>
        {% endif %}
        {% endfor %}
        {% if tickets.has_next %}
        <a href="{{ url_for('admin_suporte', page=tickets.next_num, status=status_filter, q=search) }}">Proximo &raquo;</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}