{% extends "base.html" %}
{% block title %}Canais ao Vivo{% 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; }

    /* Collapsible Group Filter */
    .group-filter-wrap {
        margin-bottom: 24px;
    }
    .group-filter-toggle {
        display: none;
        align-items: center;
        gap: 8px;
        background: var(--bg-surface);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 10px 18px;
        border-radius: var(--radius-md);
        font-size: 0.85em;
        font-weight: 500;
        cursor: pointer;
        transition: var(--transition);
        margin-bottom: 8px;
        width: 100%;
        text-align: left;
    }
    .group-filter-toggle:hover {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
    .group-filter-toggle .arrow {
        margin-left: auto;
        transition: transform 0.2s;
    }
    .group-filter-toggle.open .arrow {
        transform: rotate(180deg);
    }
    .group-filter-toggle .count {
        color: var(--text-muted);
        font-weight: 400;
        margin-left: 4px;
    }
    .group-filter-collapse {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .group-filter-collapse.collapsed .group-filter-item:nth-child(n+7) {
        display: none;
    }
    .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: 0.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); }

    @media (max-width: 768px) {
        .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: 0.75em;
            padding: 8px 12px;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Canais ao Vivo</h1>
    <p>{% if is_top_group %}Top {{ canais.total }} mais assistidos{% else %}{{ canais.total }} canais disponiveis{% endif %}</p>
</div>

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

<div class="group-filter-wrap" id="groupFilterWrap">
    <button class="group-filter-toggle" id="groupFilterToggle" onclick="toggleGroupFilter()">
        <span>Categorias <span class="count">({{ groups|length }})</span></span>
        <span class="arrow">▼</span>
    </button>
    <div class="group-filter">
        <a href="{{ url_for('canais') }}" class="{% if not current_group and not show_fav %}active{% endif %}">Todos</a>
        <a href="{{ url_for('canais', 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>
        {% for g in groups %}
        <a href="{{ url_for('canais', group=g.key) }}" class="{% if current_group == g.key %}active{% endif %}">{{ g.label }}</a>
        {% endfor %}
    </div>
</div>

<script>
function toggleGroupFilter() {
    var wrap = document.getElementById('groupFilterWrap');
    var toggle = document.getElementById('groupFilterToggle');
    wrap.classList.toggle('open');
    toggle.classList.toggle('open');
}
{% if current_group %}
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('groupFilterWrap').classList.add('open');
    document.getElementById('groupFilterToggle').classList.add('open');
});
{% endif %}
</script>

<div class="grid">
    {% for c in canais.items %}
    <div class="card" onclick="location.href='{{ url_for('player', tipo='live', item_id=c.id) }}'">
        <button class="fav-btn" data-id="{{ c.id }}" onclick="toggleFav(this, {{ c.id }}, event)">☆</button>
        <button class="fav-btn" style="right:40px" onclick="event.stopPropagation();trocoShare('{{ c.name }}', '{{ url_for('player', tipo='live', item_id=c.id, _external=True) }}')">🔗</button>
        <div class="card-thumb">
            {% if c.logo %}
            <img src="{{ c.logo|proxy_logo }}" alt="{{ c.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="{{ c.name }}">{{ c.name }}</h3>
            <div class="meta">{{ c.group_title }}{% if c.view_count %} · {{ c.view_count }} views{% endif %}{% if online_counts and online_counts.get(c.id) %} · <span class="online-count">{{ online_counts[c.id] }} online</span>{% endif %}</div>
            <span class="badge">AO VIVO</span>
            {% if channel_health and channel_health.get(c.id) and not channel_health[c.id].is_online %}
            <span class="badge" style="background:var(--text-muted); color:#fff;">OFFLINE</span>
            {% endif %}
            {% if epg_data and epg_data.get(c.id) %}
            <div class="epg-info">
                <div class="epg-now" title="{{ epg_data[c.id].title }}">📺 {{ epg_data[c.id].title }}</div>
                <div class="epg-remain">⏳ {{ epg_data[c.id].remaining }}</div>
            </div>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">
        Nenhum canal encontrado.
    </div>
    {% endfor %}
</div>

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

{% block scripts %}
<script>
// Auto-refresh EPG and online counts every 60s
(function() {
    var canalIds = [];
    document.querySelectorAll('.card').forEach(function(card) {
        var link = card.getAttribute('onclick');
        if (link) {
            var m = link.match(/item_id=(\d+)/);
            if (m) canalIds.push(parseInt(m[1]));
        }
    });
    if (canalIds.length === 0) return;

    function refreshStatus() {
        fetch('/api/canais/status', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_ids: canalIds})
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            Object.keys(data.epg).forEach(function(cid) {
                var epg = data.epg[cid];
                var card = document.querySelector('.card[onclick*="item_id=' + cid + '"]');
                if (!card) return;
                var epgDiv = card.querySelector('.epg-info');
                if (epgDiv) {
                    epgDiv.querySelector('.epg-now').textContent = '\uD83D\uDCFA ' + epg.title;
                    epgDiv.querySelector('.epg-remain').textContent = '\u23F3 ' + epg.remaining;
                }
            });
            Object.keys(data.online).forEach(function(cid) {
                var count = data.online[cid];
                var card = document.querySelector('.card[onclick*="item_id=' + cid + '"]');
                if (!card) return;
                var span = card.querySelector('.online-count');
                if (span) span.textContent = count + ' online';
            });
        })
        .catch(function() {});
    }

    setInterval(refreshStatus, 60000);
})();
</script>
{% endblock %}