{% extends spa_base or "base.html" %}
{% block title %}Séries{% endblock %}
{% block extra_head %}
<style>
    .page-header {
        margin-bottom: 24px;
    }
    .page-header h1 {
        font-size: 1.8em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .page-header p {
        color: var(--text-muted);
        font-size: 0.9em;
    }
    .search-row {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
        max-width: 480px;
    }
    .search-row .search-box { flex: 1; }
    .group-filter-wrap { margin-bottom:24px; }
    .group-filter-toggle { display:none; align-items:center; gap:8px; width:100%; margin-bottom:8px; padding:10px 18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); font-size:.85em; cursor:pointer; text-align:left; }
    .group-filter-toggle .arrow { margin-left:auto; transition:transform .2s; }
    .group-filter-toggle.open .arrow { transform:rotate(180deg); }
    .group-filter { display:flex; flex-wrap:wrap; gap:8px; }
    .group-filter a { background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); padding:8px 16px; border-radius:var(--radius-md); font-size:.8em; font-weight:500; text-decoration:none; transition:var(--transition); }
    .group-filter a:hover, .group-filter a.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    .group-filter a.top-group-link { background:var(--bg-surface); color:var(--text-secondary); border-color:var(--border); }
    .group-filter a.top-group-link.active { background:var(--primary); color:#fff; border-color:var(--primary); }
    @media (max-width: 768px) {
        .search-row { max-width:none; flex-wrap:wrap; }
        .search-row .search-box { min-width:0; flex:1 1 100%; }
        .group-filter-toggle { display:flex; }
        .group-filter-wrap .group-filter { display:none; }
        .group-filter-wrap.open .group-filter { display:flex; }
        .group-filter a { font-size:.75em; padding:8px 12px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Séries</h1>
    <p>{{ total }} séries disponíveis</p>
</div>

<form method="GET" class="search-row">
    <input type="text" name="q" class="search-box" placeholder="Buscar série..." value="{{ search }}" aria-label="Buscar série" autocomplete="off">
    <button type="submit" class="btn btn-sm">Buscar</button>
    {% if search or current_group %}
    <a href="{{ url_for('series') }}" class="btn btn-sm btn-outline">Limpar</a>
    {% endif %}
</form>

<div class="group-filter-wrap" id="seriesGroupFilterWrap">
    <button type="button" class="group-filter-toggle" id="seriesGroupFilterToggle" onclick="toggleSeriesGroupFilter()"><span>Categorias <span class="count">({{ groups|length + 1 }})</span></span><span class="arrow">▼</span></button>
    <div class="group-filter">
    <a href="{{ url_for('series') }}" class="{% if not current_group and not show_fav %}active{% endif %}">Todos</a>
    <a href="{{ url_for('series', fav='1') }}" class="{% if show_fav %}active{% endif %}" style="{% if show_fav %}background:var(--gold);color:#000;border-color:var(--gold);{% else %}border-color:var(--gold);color:var(--gold);{% endif %}">⭐ Favoritos</a>
    <a href="{{ url_for('series', group=MAIS_ASSISTIDOS_KEY) }}" class="top-group-link {% if is_top_group %}active{% endif %}">{{ MAIS_ASSISTIDOS_LABEL }}</a>
    {% for g in groups %}
    <a href="{{ url_for('series', group=g) }}" class="{% if current_group == g %}active{% endif %}">{{ g }}</a>
    {% endfor %}
    </div>
</div>
<script>
function toggleSeriesGroupFilter() { const wrap=document.getElementById('seriesGroupFilterWrap'); const btn=document.getElementById('seriesGroupFilterToggle'); wrap.classList.toggle('open'); btn.classList.toggle('open'); }
{% if current_group or show_fav %}document.addEventListener('DOMContentLoaded',()=>{document.getElementById('seriesGroupFilterWrap').classList.add('open');document.getElementById('seriesGroupFilterToggle').classList.add('open');});{% endif %}
</script>

<div class="grid card-list">
    {% for s in series_list %}
    <div class="card" onclick="location.href='{{ url_for('series_detail', series_name=s.name) }}'">
        <div class="card-thumb" data-capa-serie="{{ s.name }}">
            {% if s.logo %}
            <img loading="lazy" src="{{ s.logo|proxy_logo }}" alt="{{ s.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
            <span style="display:none;">🎞️</span>
            {% else %}
            <span>🎞️</span>
            {% endif %}
            <div class="play-overlay">▶</div>
        </div>
        <div class="card-body">
            <h3 title="{{ s.name|urldecode }}" style="display:flex; align-items:center; gap:6px; font-size:0.95em; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;">
                <span style="font-size:1em; flex-shrink:0;">🎞️</span>
                <span style="overflow:hidden; text-overflow:ellipsis;">{{ s.name|urldecode }}</span>
            </h3>
            <div class="meta">
                {% if s.group_title %}{{ s.group_title }} · {% endif %}{{ s.seasons }} temp{{ 's' if s.seasons > 1 else '' }} · {{ s.count }} eps
            </div>
            <span class="badge">SÉRIE</span>
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">
        Nenhuma série encontrada.
    </div>
    {% endfor %}
</div>

{% if total_pages > 1 %}
<div class="pagination">
    {% if page > 1 %}
    <a href="{{ url_for('series', page=page-1, q=search, group=current_group) }}">← Anterior</a>
    {% endif %}
    <span class="current">{{ page }} / {{ total_pages }}</span>
    {% if page < total_pages %}
    <a href="{{ url_for('series', page=page+1, q=search, group=current_group) }}">Próximo →</a>
    {% endif %}
</div>
{% endif %}

<script>
function toggleFavSeries(btn, name, e) {
    e.stopPropagation();
    e.preventDefault();
    var wasActive = btn.classList.contains('active');
    var want = !wasActive;
    btn.classList.toggle('active', want);
    btn.textContent = want ? '★' : '☆';
    fetch('/api/favorites/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({series_name: name})
    }).then(r => r.json()).then(data => {
        btn.classList.toggle('active', data.favorited);
        btn.textContent = data.favorited ? '★' : '☆';
    }).catch(function() {
        btn.classList.toggle('active', wasActive);
        btn.textContent = wasActive ? '★' : '☆';
    });
}
document.addEventListener('DOMContentLoaded', function() {
    const btns = document.querySelectorAll('.fav-series');
    const names = Array.from(btns).map(b => b.dataset.name);
    if (names.length === 0) return;
    fetch('/api/favorites/check_series_bulk', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({names: names})
    }).then(r => r.json()).then(data => {
        btns.forEach(btn => {
            if (data[btn.dataset.name]) {
                btn.classList.add('active');
                btn.textContent = '★';
            }
        });
    });
});
</script>
{% endblock %}