{% extends spa_base or "base.html"%}
{% block title %}Admin - Conteúdo{% endblock %}
{% block extra_head %}
<style>
    .admin-content-header {
        margin-bottom: 24px;
    }
    .admin-content-header h1 {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .admin-content-header p {
        color: var(--text-muted);
        font-size: 0.9em;
    }
    .admin-nav-pills {
        display: flex;
        gap: 8px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .admin-nav-pills a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 18px;
        background: var(--bg-surface);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        text-decoration: none;
        font-size: 0.85em;
        font-weight: 500;
        transition: var(--transition);
    }
    .admin-nav-pills a:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
    }
    .admin-nav-pills a.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
    .search-row {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        max-width: 400px;
    }
    .search-row .search-box { flex: 1; }
    @media (max-width: 768px) {
        .admin-content-header h1 {
            font-size: 1.3em;
        }
        .admin-nav-pills {
            gap: 6px;
        }
        .admin-nav-pills a {
            padding: 8px 14px;
            font-size: 0.8em;
        }
        .search-row {
            flex-direction: column;
            max-width: 100%;
        }
        .search-row .btn {
            width: 100%;
            justify-content: center;
        }
        .admin-table {
            font-size: 0.75em;
            min-width: 600px;
        }
        .admin-table th, .admin-table td {
            padding: 10px 12px;
        }
        .admin-section {
            margin-bottom: 20px;
        }
        .section-header {
            padding: 16px 20px;
        }
        .action-btns {
            gap: 4px;
        }
        .action-btn {
            padding: 5px 10px;
            font-size: 0.7em;
        }
    }
    @media (max-width: 480px) {
        .admin-content-header h1 {
            font-size: 1.1em;
        }
        .admin-nav-pills a {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="admin-content-header">
    <h1>Gerenciar {{ catalog_label }}</h1>
    <p>{{ canais.total }} itens {% if current_group %}em <strong>{{ current_group }}</strong>{% endif %} {% if search %}para "<strong>{{ search }}</strong>"{% endif %}</p>
</div>

<div class="admin-nav-pills">
    <a href="{{ url_for('admin_canais', tipo='live') }}" class="{% if tipo == 'live' %}active{% endif %}">Canais ({{ catalog_counts.live }})</a>
    <a href="{{ url_for('admin_canais', tipo='movie') }}" class="{% if tipo == 'movie' %}active{% endif %}">Filmes ({{ catalog_counts.movie }})</a>
    <a href="{{ url_for('admin_canais', tipo='series') }}" class="{% if tipo == 'series' %}active{% endif %}">Séries ({{ catalog_counts.series }})</a>
    <a href="{{ url_for('admin_panel') }}">← Voltar</a>
</div>

<form method="GET" style="margin-bottom:16px;">
    <input type="hidden" name="tipo" value="{{ tipo }}">
    <div style="display:flex; gap:10px; flex-wrap:wrap; align-items:end;">
        <div style="flex:1; min-width:200px;">
            <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Buscar</label>
            <input type="text" name="q" placeholder="Nome do conteudo..." value="{{ search }}" style="width:100%; 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;">
        </div>
        <div style="min-width:180px;">
            <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Categoria</label>
            <select name="group" style="width:100%; 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;">
                <option value="">Todas ({{ total_count }})</option>
                {% for g in groups %}
                <option value="{{ g }}" {% if current_group == g %}selected{% endif %}>{{ g }} ({{ group_counts[g] }})</option>
                {% endfor %}
            </select>
        </div>
        <div style="min-width:140px;">
            <label style="font-size:0.8em; color:var(--text-muted); display:block; margin-bottom:4px;">Status</label>
            <select name="status" style="width:100%; 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;">
                <option value="">Todos</option>
                <option value="visible" {% if current_status == 'visible' %}selected{% endif %}>Visiveis</option>
                <option value="hidden" {% if current_status == 'hidden' %}selected{% endif %}>Ocultos ({{ hidden_count }})</option>
                {% if tipo == 'live' %}
                <option value="online" {% if current_status == 'online' %}selected{% endif %}>Online ({{ online_count }})</option>
                <option value="offline" {% if current_status == 'offline' %}selected{% endif %}>Offline ({{ offline_count }})</option>
                {% endif %}
            </select>
        </div>
        <button type="submit" class="btn btn-sm" style="padding:8px 20px;">Filtrar</button>
        {% if search or current_group or current_status %}
        <a href="{{ url_for('admin_canais', tipo=tipo) }}" class="action-btn yellow" style="padding:8px 16px;">Limpar</a>
        {% endif %}
    </div>
</form>

{% if groups %}
<div style="margin-bottom:16px; display:flex; gap:6px; flex-wrap:wrap;">
    <a href="{{ url_for('admin_canais', tipo=tipo, q=search, status=current_status) }}" class="action-btn {% if not current_group %}blue{% else %}yellow{% endif %}" style="padding:5px 12px; font-size:0.75em;">Todos</a>
    {% for g in groups[:20] %}
    <a href="{{ url_for('admin_canais', tipo=tipo, q=search, group=g, status=current_status) }}" class="action-btn {% if current_group == g %}blue{% else %}yellow{% endif %}" style="padding:5px 12px; font-size:0.75em;">{{ g[:25] }} ({{ group_counts[g] }})</a>
    {% endfor %}
    {% if groups|length > 20 %}
    <span style="color:var(--text-muted); font-size:0.75em; padding:5px;">+{{ groups|length - 20 }} mais</span>
    {% endif %}
</div>
{% endif %}

<form method="POST" action="{{ url_for('admin_bulk_canais') }}">
<input type="hidden" name="tipo" value="{{ tipo }}">

<div id="bulkActions" style="display:none; padding:12px 24px; background:rgba(66,133,244,0.05); border-bottom:1px solid var(--border); display:flex; gap:8px; align-items:center;">
    <span style="color:var(--text-secondary); font-size:0.85em;" id="selectedCount">0 selecionados</span>
    <button type="submit" name="action" value="hide" class="action-btn yellow" style="padding:6px 14px;">Ocultar Selecionados</button>
    <button type="submit" name="action" value="show" class="action-btn green" style="padding:6px 14px;">Mostrar Selecionados</button>
    <button type="submit" name="action" value="delete" class="action-btn red" style="padding:6px 14px;" onclick="return confirm('Excluir itens selecionados?')">Excluir Selecionados</button>
</div>

<div class="admin-section">
    <div style="overflow-x:auto;">
        <table class="admin-table">
            <thead>
                <tr>
                    <th style="width:40px;"><input type="checkbox" id="selectAll" onclick="toggleSelectAll()"></th>
                    <th>ID</th>
                    <th>Nome</th>
                    <th>Categoria</th>
                    <th>Status</th>
                    <th>Views</th>
                    <th>Acoes</th>
                </tr>
            </thead>
            <tbody>
                {% for c in canais.items %}
                <tr>
                    <td><input type="checkbox" name="ids" value="{{ c.id }}" class="row-check" onchange="updateSelectedCount()"></td>
                    <td>{{ c.id }}</td>
                    <td style="max-width:350px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary);">{{ c.name }}</td>
                    <td>
                        <a href="{{ url_for('admin_canais', tipo=tipo, group=c.group_title) }}" style="color:var(--text-secondary); font-size:0.85em; text-decoration:none;">{{ c.group_title[:30] }}</a>
                    </td>
                    <td>
                        {% if c.is_hidden %}
                        <span class="badge badge-danger">Oculto</span>
                        {% elif health_map and health_map.get(c.id) and not health_map[c.id].is_online %}
                        <span class="badge" style="background:#666; color:#fff;">Offline</span>
                        {% else %}
                        <span class="badge badge-success">Visivel</span>
                        {% endif %}
                    </td>
                    <td>{{ c.view_count or 0 }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ url_for('admin_edit_canal', item_id=c.id, tipo=tipo) }}" class="action-btn blue">Editar</a>
                            <a href="{{ url_for('toggle_hidden', item_id=c.id, tipo=tipo) }}" class="action-btn {% if c.is_hidden %}green{% else %}yellow{% endif %}">
                                {{ 'Mostrar' if c.is_hidden else 'Ocultar' }}
                            </a>
                            <a href="{{ url_for('admin_delete_canal', item_id=c.id, tipo=tipo) }}" class="action-btn red" onclick="return confirm('Excluir {{ c.name }}?')">Excluir</a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" class="empty-state">Nenhum item encontrado.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
</form>

{% if canais.pages > 1 %}
<div class="pagination">
    {% if canais.has_prev %}
    <a href="{{ url_for('admin_canais', tipo=tipo, page=canais.prev_num, q=search, group=current_group, status=current_status) }}">← Anterior</a>
    {% endif %}
    <span class="current">{{ canais.page }} / {{ canais.pages }}</span>
    {% if canais.has_next %}
    <a href="{{ url_for('admin_canais', tipo=tipo, page=canais.next_num, q=search, group=current_group, status=current_status) }}">Proximo →</a>
    {% endif %}
</div>
{% endif %}

<script>
function toggleSelectAll() {
    const checked = document.getElementById('selectAll').checked;
    document.querySelectorAll('.row-check').forEach(cb => cb.checked = checked);
    updateSelectedCount();
}
function updateSelectedCount() {
    const count = document.querySelectorAll('.row-check:checked').length;
    document.getElementById('selectedCount').textContent = count + ' selecionados';
    document.getElementById('bulkActions').style.display = count > 0 ? 'flex' : 'none';
}
</script>
{% endblock %}