{% extends "base.html" %}
{% block title %}Admin - Sugestões{% endblock %}
{% block extra_head %}
<style>
    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        flex-wrap: wrap;
        gap: 16px;
    }
    .admin-header h1 { font-size: 1.4em; font-weight: 700; color: var(--text-primary); }
    .filter-bar {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 24px;
    }
    .filter-bar a {
        padding: 8px 16px;
        border-radius: var(--radius-md);
        font-size: 0.8em;
        font-weight: 500;
        text-decoration: none;
        transition: var(--transition);
        background: var(--bg-surface);
        color: var(--text-secondary);
        border: 1px solid var(--border);
    }
    .filter-bar a:hover { background: var(--bg-elevated); color: var(--text-primary); }
    .filter-bar a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .filter-bar a .count {
        background: rgba(255,255,255,0.15);
        padding: 1px 8px;
        border-radius: 100px;
        margin-left: 4px;
        font-size: 0.85em;
    }
    .filter-bar a.active .count { background: rgba(255,255,255,0.25); }
    .search-form {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
    }
    .search-form input {
        flex: 1;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        padding: 10px 16px;
        border-radius: var(--radius-md);
        font-size: 0.9em;
        outline: none;
    }
    .search-form input:focus { border-color: var(--text-secondary); }
    .search-form button {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-secondary);
        padding: 10px 20px;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-weight: 500;
    }
    .search-form button:hover { background: var(--bg-elevated); color: var(--text-primary); }
    .sug-table {
        width: 100%;
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        overflow: hidden;
    }
    .sug-table table {
        width: 100%;
        border-collapse: collapse;
    }
    .sug-table th, .sug-table td {
        padding: 12px 16px;
        text-align: left;
        font-size: 0.85em;
        border-bottom: 1px solid var(--border);
    }
    .sug-table th {
        background: var(--bg-surface);
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.75em;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .sug-table td { color: var(--text-secondary); }
    .sug-table tr:hover td { background: rgba(255,255,255,0.03); }
    .sug-table .user-col { color: var(--text-primary); font-weight: 500; }
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        border-radius: 100px;
        font-size: 0.75em;
        font-weight: 600;
    }
    .status-pendente { background: rgba(245,197,24,0.15); color: var(--gold); }
    .status-aprovado { background: rgba(100,200,255,0.15); color: #64c8ff; }
    .status-rejeitado { background: rgba(229,9,20,0.15); color: var(--primary); }
    .status-implementado { background: rgba(70,211,105,0.15); color: var(--green); }
    .status-form {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    .status-form select {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.8em;
        outline: none;
    }
    .status-form button {
        background: var(--primary);
        color: #fff;
        border: none;
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-size: 0.75em;
        cursor: pointer;
        font-weight: 500;
    }
    .status-form button:hover { background: var(--primary-hover); }
    .note-input {
        background: var(--bg-surface);
        border: 1px solid var(--border);
        color: var(--text-primary);
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        font-size: 0.8em;
        outline: none;
        width: 100%;
        max-width: 200px;
    }
    @media (max-width: 768px) {
        .sug-table { overflow-x: auto; }
        .sug-table table { min-width: 700px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="admin-header">
    <h1>💡 Sugestões dos Usuários</h1>
</div>

<div class="filter-bar">
    <a href="{{ url_for('admin_sugestoes', status='all', q=search) }}" class="{% if status_filter == 'all' %}active{% endif %}">Todas</a>
    <a href="{{ url_for('admin_sugestoes', status='pendente', q=search) }}" class="{% if status_filter == 'pendente' %}active{% endif %}">Pendentes {% if total_pendente > 0 %}<span class="count">{{ total_pendente }}</span>{% endif %}</a>
    <a href="{{ url_for('admin_sugestoes', status='aprovado', q=search) }}" class="{% if status_filter == 'aprovado' %}active{% endif %}">Aprovadas</a>
    <a href="{{ url_for('admin_sugestoes', status='rejeitado', q=search) }}" class="{% if status_filter == 'rejeitado' %}active{% endif %}">Rejeitadas</a>
    <a href="{{ url_for('admin_sugestoes', status='implementado', q=search) }}" class="{% if status_filter == 'implementado' %}active{% endif %}">Implementadas</a>
</div>

<form class="search-form" method="GET">
    {% if status_filter and status_filter != 'all' %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
    <input type="text" name="q" placeholder="Buscar por email do usuário..." value="{{ search }}">
    <button type="submit">Buscar</button>
</form>

<div class="sug-table">
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>Usuário</th>
                <th>Tipo</th>
                <th>Título</th>
                <th>Status</th>
                <th>Data</th>
                <th>Ações</th>
            </tr>
        </thead>
        <tbody>
            {% for s in sugestoes.items %}
            <tr>
                <td>#{{ s.id }}</td>
                <td class="user-col">{{ s.user.email }}</td>
                <td>
                    <span class="tipo-badge" style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:4px;font-size:0.75em;font-weight:500;background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border);">
                        {% if s.tipo == 'canal' %}📺{% elif s.tipo == 'funcao' %}⚙️{% elif s.tipo == 'melhoria' %}🚀{% else %}💬{% endif %}
                        {{ s.tipo }}
                    </span>
                </td>
                <td>
                    <strong style="color:var(--text-primary);">{{ s.titulo }}</strong>
                    {% if s.descricao %}
                    <div style="font-size:0.85em;color:var(--text-muted);margin-top:2px;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ s.descricao }}</div>
                    {% endif %}
                </td>
                <td><span class="status-badge status-{{ s.status }}">{{ s.status }}</span></td>
                <td>{{ s.created_at | bdate }}</td>
                <td>
                    <form class="status-form" method="POST" action="{{ url_for('admin_sugestao_status', sug_id=s.id) }}">
                        <select name="status">
                            <option value="pendente" {% if s.status == 'pendente' %}selected{% endif %}>⏳ Pendente</option>
                            <option value="aprovado" {% if s.status == 'aprovado' %}selected{% endif %}>✅ Aprovado</option>
                            <option value="rejeitado" {% if s.status == 'rejeitado' %}selected{% endif %}>❌ Rejeitado</option>
                            <option value="implementado" {% if s.status == 'implementado' %}selected{% endif %}>🎉 Implementado</option>
                        </select>
                        <input class="note-input" type="text" name="admin_note" placeholder="Observação..." value="{{ s.admin_note }}">
                        <button type="submit">Atualizar</button>
                    </form>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="7" style="text-align:center;padding:40px;color:var(--text-muted);">Nenhuma sugestão encontrada.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if sugestoes.pages > 1 %}
<div class="pagination">
    {% for page_num in sugestoes.iter_pages() %}
        {% if page_num %}
            <a href="{{ url_for('admin_sugestoes', page=page_num, status=status_filter, q=search) }}" class="{% if page_num == sugestoes.page %}current{% endif %}">{{ page_num }}</a>
        {% else %}
            <span style="color:var(--text-muted);padding:10px;">...</span>
        {% endif %}
    {% endfor %}
</div>
{% endif %}
{% endblock %}