{% extends spa_base or "tv_base.html" %}
{% block title %}Canais ao Vivo{% endblock %}
{% block extra_head %}
<style>
    .tv-groups {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 0 16px;
        margin-bottom: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .tv-group-btn {
        flex: 0 0 auto;
        padding: 10px 24px;
        border-radius: var(--tv-radius);
        font-size: 0.75em;
        font-weight: 600;
        border: 2px solid var(--tv-highlight);
        background: transparent;
        color: var(--tv-text-secondary);
        cursor: pointer;
        transition: var(--tv-transition);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 48px;
        outline: none;
        white-space: nowrap;
    }
    .tv-group-btn.active {
        background: var(--tv-primary);
        border-color: var(--tv-primary);
        color: #fff;
    }
    .tv-group-btn:focus,
    .tv-group-btn.tv-focused {
        outline: 3px solid var(--tv-focus);
        outline-offset: 3px;
        border-color: var(--tv-focus);
    }
    .tv-search-row {
        margin-bottom: 16px;
        display: flex;
    }
    .tv-search-input:focus {
        border-color: var(--tv-focus);
        outline: none;
    }
    .tv-search-btn:focus {
        outline: 3px solid var(--tv-focus);
        outline-offset: 2px;
    }
    .tv-card-epg {
        margin-top: 8px;
        padding: 6px 10px;
        background: rgba(255,255,255,0.08);
        border-radius: var(--tv-radius);
        border-left: 3px solid var(--tv-primary);
    }
    .tv-card-epg-now {
        font-size: 0.7em;
        color: var(--tv-text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tv-card-epg-remain {
        font-size: 0.6em;
        color: var(--tv-text-muted);
        margin-top: 2px;
    }
</style>
{% endblock %}
{% block content %}
<div class="tv-search-row">
    <form method="GET" action="{{ url_for('tv_canais') }}" style="display:flex; gap:8px; width:100%; max-width:600px;">
        <input type="text" name="q" class="tv-search-input" placeholder="Buscar canal..." value="{{ search }}" style="flex:1; padding:12px 16px; border-radius:var(--tv-radius); border:2px solid var(--tv-highlight); background:var(--tv-surface); color:var(--tv-text-primary); font-size:0.85em; outline:none;">
        <button type="submit" class="tv-search-btn" style="padding:12px 24px; border-radius:var(--tv-radius); border:none; background:var(--tv-primary); color:#fff; font-weight:600; font-size:0.85em; cursor:pointer;">Buscar</button>
        {% if search or current_group %}
        <a href="{{ url_for('tv_canais') }}" class="tv-search-btn" style="padding:12px 24px; border-radius:var(--tv-radius); border:2px solid var(--tv-highlight); background:transparent; color:var(--tv-text-secondary); font-weight:600; font-size:0.85em; text-decoration:none; display:inline-flex; align-items:center;">Limpar</a>
        {% endif %}
    </form>
</div>
<div class="tv-groups" id="tvGroupFilter">
    <a href="{{ url_for('tv_canais') }}" class="tv-group-btn tv-focusable {% if not current_group %}active{% endif %}">Todas</a>
    {% for g in groups %}
    <a href="{{ url_for('tv_canais', group=g.key) }}" class="tv-group-btn tv-focusable {% if current_group == g.key %}active{% endif %}">{{ g.label }}</a>
    {% endfor %}
</div>
<div class="tv-row">
    <div class="tv-row-header">
        <h2 class="tv-row-title">{% if is_top_group %}Mais Assistidos{% elif current_group %}{{ current_group }}{% else %}Todos os Canais{% endif %}</h2>
        {% if is_top_group %}
        <span class="tv-row-count">Top {{ canais.total }}</span>
        {% else %}
        <span class="tv-row-count">{{ canais.total }} canais</span>
        {% endif %}
    </div>
    <div class="tv-row-scroll" id="tvRowAll">
        {% for c in canais.items %}
        <div class="tv-card tv-focusable"
             tabindex="0"
             data-canal-id="{{ c.id }}"
             data-canal-name="{{ c.name }}"
             data-canal-logo="{{ c.logo|proxy_logo if c.logo else '' }}"
             data-canal-group="{{ c.group_title or '' }}"
             data-stream-url="{{ url_for('tv_player', tipo='live', item_id=c.id) }}"
             onclick="openTVChannelPopup(this)">
              <div class="tv-card-thumb">
                 {% if c.logo %}
                 <img src="{{ c.logo|proxy_logo }}" alt="{{ c.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" loading="lazy" decoding="async">
                 <span style="display:none;">📺</span>
                 {% else %}
                 <span>📺</span>
                 {% endif %}
             </div>
            <div class="tv-card-body">
                <h3>{{ c.name }}</h3>
                <div class="tv-card-meta">
                    {{ c.group_title }}
                    {% if online_counts and online_counts.get(c.id) %}
                    · <span class="online">{{ online_counts[c.id] }} online</span>
                    {% endif %}
                    {% if is_top_group and c.view_count %}
                    · <span style="color:var(--gold);">{{ c.view_count }} views</span>
                    {% endif %}
                </div>
                <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
                <span class="tv-card-badge">AO VIVO</span>
                </div>
                {% if channel_health and channel_health.get(c.id) and not channel_health[c.id].is_online %}
                <span class="tv-card-badge" style="background:var(--tv-text-muted);">OFFLINE</span>
                {% endif %}
                {% if epg_data and epg_data.get(c.id) %}
                <div class="tv-card-epg">
                    <div class="tv-card-epg-now">{{ epg_data[c.id].title }}</div>
                    <div class="tv-card-epg-remain">⏳ {{ epg_data[c.id].remaining }}</div>
                </div>
                {% endif %}
            </div>
        </div>
        {% else %}
        <div class="tv-empty">
            <div class="icon">📺</div>
            <h2>Nenhum canal encontrado</h2>
            <p>Tente novamente mais tarde.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Auto-refresh EPG and online counts every 60s
(function() {
    var canalIds = [];
    document.querySelectorAll('.tv-card[data-canal-id]').forEach(function(card) {
        canalIds.push(parseInt(card.getAttribute('data-canal-id')));
    });
    if (canalIds.length === 0) return;

    function refreshChannelStatus() {
        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('.tv-card[data-canal-id="' + cid + '"]');
                if (!card) return;
                var epgDiv = card.querySelector('.tv-card-epg');
                if (epgDiv) {
                    epgDiv.querySelector('.tv-card-epg-now').textContent = epg.title;
                    epgDiv.querySelector('.tv-card-epg-remain').textContent = '\u23f3 ' + epg.remaining;
                } else {
                    var body = card.querySelector('.tv-card-body');
                    if (body) {
                        var div = document.createElement('div');
                        div.className = 'tv-card-epg';
                        div.innerHTML = '<div class="tv-card-epg-now">' + epg.title + '</div><div class="tv-card-epg-remain">\u23f3 ' + epg.remaining + '</div>';
                        body.appendChild(div);
                    }
                }
            });
            Object.keys(data.online).forEach(function(cid) {
                var count = data.online[cid];
                var card = document.querySelector('.tv-card[data-canal-id="' + cid + '"]');
                if (!card) return;
                var meta = card.querySelector('.tv-card-meta');
                if (meta) {
                    var span = meta.querySelector('.online');
                    if (span) {
                        span.textContent = count + ' online';
                    } else {
                        meta.innerHTML += ' · <span class="online">' + count + ' online</span>';
                    }
                }
            });
        })
        .catch(function() {});
    }

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