{% extends "base.html" %}
{% block title %}Favoritos{% 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; }
    .category-tabs { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin:0 0 18px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
    .category-tab { flex:0 0 auto; white-space:nowrap; border:1px solid var(--border); border-radius:999px; padding:9px 14px; color:var(--text-secondary); text-decoration:none; font-size:.9em; background:var(--bg-card); }
    .category-tab:hover, .category-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
    .category-tab strong { margin-left:4px; font-weight:700; }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Favoritos</h1>
    <p>Organize seus conteúdos favoritos por categoria.</p>
</div>
<nav class="category-tabs" aria-label="Categorias de favoritos">
    <a class="category-tab {% if category == 'all' %}active{% endif %}" href="{{ url_for('favoritos', tipo='all') }}">Todos <strong>{{ counts.all }}</strong></a>
    <a class="category-tab {% if category == 'canais' %}active{% endif %}" href="{{ url_for('favoritos', tipo='canais') }}">Canais <strong>{{ counts.canais }}</strong></a>
    <a class="category-tab {% if category == 'filmes' %}active{% endif %}" href="{{ url_for('favoritos', tipo='filmes') }}">Filmes <strong>{{ counts.filmes }}</strong></a>
    <a class="category-tab {% if category == 'series' %}active{% endif %}" href="{{ url_for('favoritos', tipo='series') }}">Séries <strong>{{ counts.series }}</strong></a>
</nav>
<p style="color:var(--text-muted); margin-bottom:16px; font-size:0.9em;">{{ items.total }} favoritos nesta categoria</p>
<div class="grid">
    {% for c in items.items %}
    <div class="card" onclick="location.href='{% if c.tipo == 'series' %}{{ url_for('series_detail', series_name=c.name) }}{% else %}{{ url_for('player', tipo=c.tipo, item_id=c.id) }}{% endif %}'">
        <button class="fav-btn fav-series" data-name="{{ c.name|urldecode }}" data-id="{{ c.id }}" onclick="{% if c.tipo == 'series' %}toggleFavSeries(this, '{{ c.name|urldecode|e }}', event){% else %}toggleFav(this, {{ c.id }}, event){% endif %}">⭐</button>
        <div class="card-thumb">
            {% if c.logo %}<img src="{{ c.logo|proxy_logo }}" alt="{{ c.name|urldecode }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';"><span style="display:none;">{% if c.tipo == 'movie' %}🎬{% elif c.tipo == 'series' %}🎞️{% else %}📺{% endif %}</span>
            {% else %}<span>{% if c.tipo == 'movie' %}🎬{% elif c.tipo == 'series' %}🎞️{% else %}📺{% endif %}</span>{% endif %}
            <div class="play-overlay">▶</div>
        </div>
        <div class="card-body">
            <h3 title="{{ c.name|urldecode }}">{{ c.name|urldecode }}</h3>
            {% if c.tipo == 'series' and c.episode_count is defined %}
            <div class="meta">{{ c.season_count }} temporada{{ 's' if c.season_count != 1 }} · {{ c.episode_count }} episodio{{ 's' if c.episode_count != 1 }}</div>
            {% else %}
            <div class="meta">{{ c.group_title }}</div>
            {% endif %}
            <span class="badge">{% if c.tipo == 'live' %}AO VIVO{% elif c.tipo == 'series' %}SÉRIE{% else %}FILME{% endif %}</span>
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">Nenhum favorito encontrado nesta categoria.</div>
    {% endfor %}
</div>
{% if items.pages > 1 %}
<div class="pagination">
    {% if items.has_prev %}<a href="{{ url_for('favoritos', page=items.prev_num, tipo=category) }}">← Anterior</a>{% endif %}
    <span class="current">{{ items.page }} / {{ items.pages }}</span>
    {% if items.has_next %}<a href="{{ url_for('favoritos', page=items.next_num, tipo=category) }}">Próximo →</a>{% endif %}
</div>
{% endif %}
<script>
function toggleFav(btn, id, e) {
    e.stopPropagation();
    e.preventDefault();
    fetch('/api/favorites/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({canal_id: id})
    }).then(r => r.json()).then(data => {
        if (!data.favorited) { btn.closest('.card').remove(); }
        else { btn.textContent = data.favorited ? '⭐' : '☆'; }
    });
}
function toggleFavSeries(btn, name, e) {
    e.stopPropagation();
    e.preventDefault();
    fetch('/api/favorites/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({series_name: name})
    }).then(r => r.json()).then(data => {
        if (!data.favorited) { btn.closest('.card').remove(); }
        else { btn.textContent = data.favorited ? '⭐' : '☆'; }
    });
}
</script>
{% endblock %}