{% extends "base.html" %}
{% block title %}Filmes{% 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; }
    }
    .watched-badge {
        position: absolute;
        bottom: 8px;
        right: 8px;
        background: var(--green);
        color: #fff;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75em;
        font-weight: 700;
        z-index: 2;
        display: none;
    }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Filmes</h1>
    <p>{{ filmes.total }} filmes disponíveis</p>
</div>

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

<div class="group-filter-wrap" id="movieGroupFilterWrap">
    <button type="button" class="group-filter-toggle" id="movieGroupFilterToggle" onclick="toggleMovieGroupFilter()"><span>Categorias <span class="count">({{ groups|length + 1 }})</span></span><span class="arrow">▼</span></button>
    <div class="group-filter">
    <a href="{{ url_for('filmes') }}" class="{% if not current_group and not show_fav %}active{% endif %}">Todos</a>
    <a href="{{ url_for('filmes', 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('filmes', 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('filmes', group=g) }}" class="{% if current_group == g %}active{% endif %}">{{ g }}</a>
    {% endfor %}
    </div>
</div>
<script>
function toggleMovieGroupFilter() { const wrap=document.getElementById('movieGroupFilterWrap'); const btn=document.getElementById('movieGroupFilterToggle'); wrap.classList.toggle('open'); btn.classList.toggle('open'); }
{% if current_group or show_fav %}document.addEventListener('DOMContentLoaded',()=>{document.getElementById('movieGroupFilterWrap').classList.add('open');document.getElementById('movieGroupFilterToggle').classList.add('open');});{% endif %}
</script>

<div class="grid">
    {% for f in filmes.items %}
    <div class="card" onclick="location.href='{{ url_for('movie_detail', item_id=f.id) }}'">
        <button class="fav-btn" data-id="{{ f.id }}" onclick="toggleFav(this, {{ f.id }}, event)">☆</button>
        <button class="fav-btn" style="right:40px" onclick="event.stopPropagation();trocoShare('{{ f.name }}', '{{ url_for('player', tipo='movie', item_id=f.id, _external=True) }}')">🔗</button>
        <div class="card-thumb">
            <div class="watched-badge" data-id="{{ f.id }}">✓</div>
            {% if f.logo %}
            <img loading="lazy" src="{{ f.logo|proxy_logo }}" alt="{{ f.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="{{ f.name }}">{{ f.name }}</h3>
            <div class="meta">
                {{ f.group_title }}
                {% if f.view_count %} · {{ f.view_count }} views{% endif %}
            </div>
            {% if f.description %}
            <div style="font-size:0.78em; color:var(--text-muted); margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4;">{{ f.description }}</div>
            {% endif %}
            <span class="badge">FILME</span>
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">
        Nenhum filme encontrado.
    </div>
    {% endfor %}
</div>

{% if filmes.pages > 1 %}
<div class="pagination">
    {% if filmes.has_prev %}
    <a href="{{ url_for('filmes', page=filmes.prev_num, q=search, group=current_group) }}">← Anterior</a>
    {% endif %}
    <span class="current">{{ filmes.page }} / {{ filmes.pages }}</span>
    {% if filmes.has_next %}
    <a href="{{ url_for('filmes', page=filmes.next_num, q=search, group=current_group) }}">Próximo →</a>
    {% endif %}
</div>
{% endif %}
<script>
(function loadWatchedMovies() {
    const badges = document.querySelectorAll('.watched-badge');
    if (badges.length === 0) return;
    const ids = Array.from(badges).map(b => parseInt(b.dataset.id));
    fetch('/api/watched_ids').then(r => r.json()).then(data => {
        const watched = data.ids || [];
        badges.forEach(b => {
            if (watched.includes(parseInt(b.dataset.id))) b.style.display = 'flex';
        });
    });
})();
</script>
{% endblock %}