{% extends spa_base or "base.html" %}
{% block title %}{{ item.name }}{% endblock %}
{% block extra_head %}
<script src="{{ url_for('static', filename='mpegts.min.js') }}"></script>
<style>
    .player-wrapper {
        max-width: 1200px;
        margin: 0 auto;
    }
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.9em;
        font-weight: 500;
        margin-bottom: 20px;
        transition: var(--transition);
    }
    .back-link:hover { color: var(--text-primary); }

    /* Timer Bar */
    .timer-bar {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 16px 24px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid var(--border);
        flex-wrap: wrap;
        gap: 12px;
    }
    .timer-info {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-secondary);
        font-size: 0.9em;
    }
    .timer-info strong { color: var(--text-primary); }
    .premium-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(70,211,105,0.1);
        color: var(--green);
        padding: 6px 14px;
        border-radius: 100px;
        font-size: 0.85em;
        font-weight: 600;
    }

    /* Player Info */
    .player-info {
        margin-bottom: 16px;
    }
    .player-title {
        font-size: 1.5em;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 6px;
    }
    .player-meta {
        color: var(--text-muted);
        font-size: 0.9em;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .player-meta .views { color: var(--text-muted); }
    .player-meta #online-badge { color: var(--green); font-weight: 600; }

    /* Video Container */
    .video-container {
        background: #000;
        border-radius: var(--radius-lg);
        overflow: hidden;
        border: 1px solid var(--border);
        margin-bottom: 16px;
    }
    .video-container video {
        width: 100%;
        aspect-ratio: 16/9;
        display: block;
        background: #000;
    }
    /* Overlay de carregamento/erro: o usuario NUNCA fica preso olhando o
       spinner nativo do navegador sem saber se vai pegar ou nao. */
    .video-container { position: relative; }
    /* Overlay de carregamento/erro: casa exatamente com a caixa do vídeo
       (aspect-ratio 16/9, igual ao <video>), então termina logo acima da
       .controls-bar. O conteúdo encolhido cabe dentro de 16/9 até em tela de
       320px, e o overflow:hidden impede que algo estoura e invada a barra. */
    .vp-overlay {
        position: absolute;
        inset: 0 0 auto 0;
        aspect-ratio: 16/9;
        overflow: hidden;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        text-align: center;
        padding: 12px;
        background: rgba(6, 1, 1, .82);
        backdrop-filter: blur(6px);
        z-index: 5;
    }
    .vp-overlay.active { display: flex; }
    .vp-overlay .vp-spin {
        width: 34px;
        height: 34px;
        border: 3px solid rgba(255, 255, 255, .15);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: vpspin .9s linear infinite;
    }
    .vp-overlay.error .vp-spin { display: none; }
    @keyframes vpspin { to { transform: rotate(360deg); } }
    .vp-overlay .vp-msg { color: #fff; font-weight: 600; font-size: .95em; }
    .vp-overlay .vp-sub { color: var(--text-secondary); font-size: .78em; max-width: 42ch; }
    /* Chip de som: o navegador so libera autoplay COM som depois de um toque do
       usuario. Ate la o canal toca mudo e este botao e a unica saida honesta. */
    .vp-som {
        position: absolute;
        right: 10px;
        bottom: 58px;
        z-index: 6;
        border: none;
        border-radius: 999px;
        padding: 8px 14px;
        background: var(--primary, #e50914);
        color: #fff;
        font-weight: 700;
        font-size: .82em;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    }
    .vp-som[hidden] { display: none; }
    /* nowrap + linha única: sem isso os 3 botões quebravam em duas linhas e
       empurravam o overlay para dentro da barra de controles. */
    .vp-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
    .vp-actions button, .vp-actions a {
        border: none;
        border-radius: 8px;
        padding: 8px 14px;
        font-size: .85em;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }
    .vp-actions .vp-retry { background: var(--primary); color: #fff; }
    .vp-actions .vp-back { background: rgba(255, 255, 255, .14); color: #fff; }
    @media (prefers-reduced-motion: reduce) {
        .vp-overlay .vp-spin { animation-duration: 2.4s; }
    }

    /* Controls Bar */
    .controls-bar {
        background: var(--bg-card);
        padding: 12px 16px;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        border-top: 1px solid var(--border);
    }
    .controls-bar button {
        background: var(--bg-surface);
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 8px 14px;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 0.8em;
        font-weight: 500;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        white-space: nowrap;
    }
    .controls-bar button:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
        color: var(--text-primary);
    }
    .controls-bar .fav-player.active {
        background: rgba(245,197,24,0.1);
        border-color: var(--gold);
        color: var(--gold);
    }
    /* Deixa Favoritar com a mesma largura do Compartilhar e texto centralizado sem cortar */
    .controls-bar .fav-player,
    .controls-bar button:nth-child(2) {
        min-width: 132px;
        justify-content: center;
        white-space: nowrap;
    }
    .controls-bar .channel-name {
        color: var(--text-muted);
        font-size: 0.8em;
        margin-left: auto;
    }
    .controls-bar .report-btn {
        background: rgba(229,9,20,0.1);
        color: var(--primary);
        border-color: rgba(229,9,20,0.2);
    }
    .controls-bar .report-btn:hover {
        background: rgba(229,9,20,0.2);
        color: var(--primary-hover);
        border-color: var(--primary);
    }
    .controls-bar .report-btn.reported {
        background: rgba(245,197,24,0.1);
        border-color: var(--gold);
        color: var(--gold);
        pointer-events: none;
    }
    @media (max-width: 480px) {
        .controls-bar {
            gap: 6px;
            padding: 10px 12px;
        }
        .controls-bar button {
            padding: 7px 10px;
            font-size: 0.75em;
            border-radius: var(--radius-sm);
        }
        .controls-bar .channel-name {
            width: 100%;
            margin-left: 0;
            margin-top: 6px;
            text-align: center;
            order: 999;
        }
    }

    /* Report Modal */
    .report-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    .report-overlay.active { display: flex; }
    .report-modal {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        width: 90%;
        max-width: 480px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 0;
        border: 1px solid var(--border);
        position: relative;
    }
    .report-modal-header {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 10;
        padding: 20px 28px 12px;
        border-bottom: 1px solid var(--border);
    }
    .report-modal-body {
        padding: 20px 28px 28px;
    }
    .report-modal h3 {
        color: var(--text-primary);
        margin-bottom: 6px;
        font-size: 1.1em;
        font-weight: 700;
    }
    .report-modal .subtitle {
        color: var(--text-muted);
        font-size: 0.85em;
        margin-bottom: 0;
    }
    .report-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.5em;
        cursor: pointer;
    }
    .report-close:hover { color: var(--text-primary); }
    .report-options {
        display: grid;
        gap: 10px;
    }
    .report-option {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 14px 18px;
        cursor: pointer;
        transition: var(--transition);
        color: var(--text-secondary);
        font-size: 0.9em;
        font-weight: 500;
    }
    .report-option:hover {
        border-color: var(--border-hover);
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
    .report-option .icon {
        font-size: 1.3em;
        min-width: 28px;
        text-align: center;
    }
    .report-success {
        display: none;
        text-align: center;
        padding: 20px 0;
    }
    .report-success .icon { font-size: 3em; margin-bottom: 12px; }
    .report-success p { color: var(--text-secondary); font-size: 0.9em; }

    /* Offline Banner */
    .offline-banner {
        background: rgba(229,9,20,0.1);
        border: 1px solid rgba(229,9,20,0.3);
        border-radius: var(--radius-lg);
        padding: 16px 24px;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--primary);
        font-size: 0.9em;
        font-weight: 500;
    }

    /* EPG Bar */
    .epg-bar {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        padding: 20px 24px;
        margin-top: 16px;
        border: 1px solid var(--border);
        display: flex;
        gap: 24px;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .epg-section { flex: 1; min-width: 200px; }
    .epg-label {
        font-size: 0.7em;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
        font-weight: 600;
    }
    .epg-title {
        color: var(--text-primary);
        font-size: 0.95em;
        font-weight: 600;
    }
    .epg-time {
        color: var(--primary);
        font-size: 0.85em;
        margin-top: 4px;
    }
    .epg-remaining {
        color: var(--green);
        font-size: 0.85em;
        margin-top: 4px;
    }
    .epg-btn {
        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);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        align-self: flex-end;
    }
    .epg-btn:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
    }

    /* EPG Modal */
    .epg-modal-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.85);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    .epg-modal-overlay.active { display: flex; }
    .epg-modal {
        background: var(--bg-card);
        border-radius: var(--radius-lg);
        width: 90%;
        max-width: 700px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 0;
        border: 1px solid var(--border);
        position: relative;
    }
    .epg-modal-header {
        position: sticky;
        top: 0;
        background: var(--bg-card);
        z-index: 10;
        padding: 20px 24px 12px;
        border-bottom: 1px solid var(--border);
    }
    .epg-modal-body {
        padding: 12px 24px 24px;
    }
    .epg-modal h3 {
        color: var(--text-primary);
        margin-bottom: 0;
        font-size: 1.1em;
    }
    .epg-close {
        position: absolute;
        top: 16px;
        right: 20px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 1.5em;
        cursor: pointer;
    }
    .epg-close:hover { color: var(--text-primary); }
    .prog-item {
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .prog-item:last-child { border-bottom: none; }
    .prog-time {
        color: var(--primary);
        font-weight: 600;
        font-size: 0.85em;
    }
    .prog-title {
        color: var(--text-primary);
        font-size: 0.9em;
        margin-top: 2px;
    }
    .prog-desc {
        color: var(--text-muted);
        font-size: 0.8em;
        margin-top: 2px;
    }

    @media (max-width: 768px) {
        .epg-bar {
            flex-direction: column;
        }
    }
</style>
{% endblock %}
{% block content %}
<div class="player-wrapper">
    <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:16px;">
        {% if item.tipo == 'live' %}
        <a class="back-link" style="margin-bottom:0;" href="{{ url_for('canais') }}">← Voltar para Canais</a>
        {% elif item.tipo == 'movie' %}
        <a class="back-link" style="margin-bottom:0;" href="{{ url_for('movie_detail', item_id=item.id) }}">← Voltar para o Filme</a>
        {% else %}
        <a class="back-link" style="margin-bottom:0;" href="{{ url_for('series_detail', series_name=item.series_name or item.name) }}">← Voltar para a Série</a>
        {% endif %}
    </div>

    <div class="timer-bar" id="timerBar">
        {% if current_user.is_premium_active or current_user.is_admin %}
        <div class="timer-info">
            <span class="premium-badge">⭐ Premium - Acesso Ilimitado</span>
        </div>
        {% else %}
        <div class="timer-info">
            ⏱️ Tempo restante: <strong id="remainingDisplay">{{ horas }}h {{ minutos }}m</strong>
        </div>
        {% endif %}
    </div>

    <div class="player-info">
        <div class="player-title">{{ item.name }}</div>
        <div class="player-meta">
            <span>{{ item.group_title }}</span>
            <span class="views" id="online-badge">🟢 <span id="online-count">0</span> Online</span>
            <span class="views" id="views-badge">👁️ <span id="views-count">{{ item.view_count or 0 }}</span> views</span>
        </div>
        {% if item.description %}
        <p style="color:var(--text-secondary); font-size:0.9em; line-height:1.6; margin-top:10px;">{{ item.description }}</p>
        {% endif %}
    </div>

    {% if item.is_hidden %}
    <div class="offline-banner">
        ⚠️ Este conteúdo foi marcado como <strong style="margin:0 4px;">OFFLINE</strong> pelo administrador. Pode apresentar problemas de reprodução.
    </div>
    {% endif %}

    {% set vp_back_url = url_for('canais') if tipo == 'live' else (url_for('movie_detail', item_id=item.id) if tipo == 'movie' else url_for('series_detail', series_name=item.series_name or item.name)) %}
    {% set vp_back_label = '← Voltar para os Canais' if tipo == 'live' else ('← Voltar para o Filme' if tipo == 'movie' else '← Voltar para a Série') %}
    <div class="video-container">
        <video id="videoPlayer" controls autoplay playsinline aria-label="Reprodutor de vídeo do Troço Play"></video>
        {# O "Carregando..." ja sai do servidor: no primeiro pixel do bloco o #}
        {# usuario ve o que esta acontecendo, sem esperar o JavaScript. #}
        <div class="vp-overlay active" id="vpOverlay" role="status" aria-live="polite">
            <div class="vp-spin" aria-hidden="true"></div>
            <div class="vp-msg" id="vpOverlayMsg">Carregando transmissão...</div>
            <div class="vp-sub" id="vpOverlaySub">Isso pode levar alguns segundos.</div>
            <div class="vp-actions" id="vpOverlayActions">
                <button type="button" class="vp-retry" id="vpTapBtn" hidden>▶ Assistir agora</button>
                <button type="button" class="vp-retry" id="vpRetryBtn">🔄 Tentar novamente</button>
                <a class="vp-back" id="vpBackBtn" href="{{ vp_back_url }}">{{ vp_back_label }}</a>
                <a class="vp-back" href="{{ url_for('canais') }}">🏠 Início</a>
            </div>
        </div>
        <button type="button" class="vp-som" id="vpSomChip" hidden>🔇 Sem som — tocar aqui</button>
        <noscript><style>.vp-overlay{display:none!important}</style></noscript>
        <div class="controls-bar">
            <button class="fav-player" id="favBtnPlayer" onclick="toggleFavPlayer()" aria-label="Adicionar aos favoritos" aria-pressed="false">☆ Favoritar</button>
            <button onclick="trocoShare('{{ item.name }}', window.location.href)">🔗 Compartilhar</button>
            <button onclick="toggleFullscreen()">⛶ Tela Cheia</button>
            <button onclick="togglePIP()">📺 PiP</button>
            <button class="report-btn" id="reportBtn" onclick="openReportModal()">⚠️ Reportar Problema</button>
            <span class="channel-name">🔴 {{ item.name }}</span>
        </div>
    </div>

    <div class="report-overlay" id="reportModal">
        <div class="report-modal">
            <div class="report-modal-header">
                <button class="report-close" onclick="closeReportModal()">&times;</button>
                <div id="reportForm">
                    <h3>⚠️ Reportar Problema</h3>
                    <p class="subtitle">{{ item.name }}</p>
                </div>
            </div>
            <div class="report-modal-body">
                <div id="reportFormOptions">
                    <div class="report-options">
                        <div class="report-option" onclick="submitReport('sem_audio')">
                            <span class="icon">🔇</span>
                            <span>Sem áudio</span>
                        </div>
                        <div class="report-option" onclick="submitReport('nao_pega')">
                            <span class="icon">📡</span>
                            <span>Não pega / Sem sinal</span>
                        </div>
                        <div class="report-option" onclick="submitReport('tela_preta')">
                            <span class="icon">🖥️</span>
                            <span>Tela preta</span>
                        </div>
                        <div class="report-option" onclick="submitReport('travando')">
                            <span class="icon">⏸️</span>
                            <span>Travando / Engasgando</span>
                        </div>
                        <div class="report-option" onclick="submitReport('offline')">
                            <span class="icon">❌</span>
                            <span>Conteúdo offline</span>
                        </div>
                    </div>
                </div>
                <div class="report-success" id="reportSuccess">
                    <div class="icon">✅</div>
                    <p>Reporte enviado com sucesso!<br>Obrigado por nos ajudar.</p>
                </div>
            </div>
        </div>
    </div>

    {% if tipo == 'live' %}
    <div class="epg-bar" id="epgBar" style="display:none;">
        <div class="epg-section">
            <div class="epg-label">📺 Agora</div>
            <div class="epg-title" id="epgNowTitle">--</div>
            <div class="epg-time" id="epgNowTime"></div>
            <div class="epg-remaining" id="epgRemaining"></div>
        </div>
        <div class="epg-section">
            <div class="epg-label">⏭️ Próximo</div>
            <div class="epg-title" id="epgNextTitle">--</div>
            <div class="epg-time" id="epgNextTime"></div>
        </div>
        <div style="display:flex; align-items:flex-end;">
            <button class="epg-btn" onclick="openEpgModal()">📺 Guia Completo</button>
        </div>
    </div>
    <div class="epg-modal-overlay" id="epgModal">
        <div class="epg-modal">
            <div class="epg-modal-header">
                <button class="epg-close" onclick="closeEpgModal()">&times;</button>
                <h3>📺 Guia de Programas</h3>
            </div>
            <div class="epg-modal-body" id="epgModalList"></div>
        </div>
    </div>
    {% endif %}


</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='hls.min.js') }}"></script>
<script>
    var video = document.getElementById('videoPlayer');

    // ─── Motores de vídeo SEMPRE disponíveis ─────────────────────────────
    // hls.js/mpegts.js são servidos de /static (mesmo domínio). Depender de
    // CDN externo era a causa clássica de um PC isolado "não achar nada":
    // se o jsdelivr fosse bloqueado (rede/extensão de bloqueio/DNS), nenhum
    // motor iniciava, o player caía no vídeo nativo com um .m3u8 e mostrava
    // "canal offline" para CANAIS, FILMES E SÉRIES — mesmo com tudo online.
    var HLS_LIB = '{{ url_for("static", filename="hls.min.js") }}';
    var MPEGS_LIB = '{{ url_for("static", filename="mpegts.min.js") }}';

    function _loadScript(src) {
        return new Promise(function (resolve) {
            if (!src) { resolve(false); return; }
            var s = document.createElement('script');
            s.src = src;
            s.onload = function () { resolve(true); };
            s.onerror = function () { resolve(false); };
            document.head.appendChild(s);
        });
    }

    function ensureEngines() {
        var p = Promise.resolve(true);
        if (typeof Hls === 'undefined') {
            p = p.then(function () {
                return _loadScript(HLS_LIB).then(function (ok) {
                    if (ok || typeof Hls !== 'undefined') return true;
                    // Última tentativa: CDN conhecido (o /static resolve o caso normal).
                    return _loadScript('https://cdn.jsdelivr.net/npm/hls.js@1.5.17/dist/hls.min.js');
                });
            });
        }
        if (typeof mpegts === 'undefined') {
            p = p.then(function () {
                return _loadScript(MPEGS_LIB).then(function (ok) {
                    if (ok || typeof mpegts !== 'undefined') return true;
                    return _loadScript('https://cdn.jsdelivr.net/npm/mpegts.js@1.8.0/dist/mpegts.min.js');
                });
            });
        }
        return p;
    }
    var _enginesReady = ensureEngines();

    var streamToken = '{{ stream_token }}';
    var isHls = {{ 'true' if stream_is_hls else 'false' }};
    var isLive = {{ 'true' if tipo == 'live' else 'false' }};
    var isLikelyMpegTs = !isHls && {{ 'false' if item.stream_url.lower().split('?')[0].endswith('.mp4') else 'true' }};
    var serverChannelId = '{{ stream_channel_id }}';

    var isPremium = {{ 'true' if current_user.is_premium_active or current_user.is_admin else 'false' }};
    var canPlay = {{ 'true' if can_play is defined and can_play else 'false' }};
    var blockDevice = {{ (block_device if block_device is defined and block_device else none)|tojson }};
    var streamAlreadyRegistered = {{ 'true' if stream_already_registered is defined and stream_already_registered else 'false' }};
    var watchInterval = null;
    var totalWatched = 0;
    var currentChannelId = null;
    var heartbeatInterval = null;
    var deviceHeartbeatInterval = null;
    var itemId = {{ item.id }};

    // stopLive e redefinido no bloco do gerenciador abaixo (uma unica versao vale)

    async function refreshStreamToken(forceTs) {
        try {
            const qs = forceTs ? '?force_ts=1' : '';
            const response = await fetch('/api/stream/refresh/' + itemId + qs, {headers: {'Accept': 'application/json'}});
            const data = await response.json();
            if (data.can_play && data.stream_token) {
                streamToken = data.stream_token;
                if (typeof data.is_hls === 'boolean') _useHls = data.is_hls;
                return true;
            }
        } catch (error) {}
        return false;
    }

    function buildStreamUrl() {
        return new URL('/proxy?token=' + encodeURIComponent(streamToken), window.location.href).href;
    }

    // ══════════ Gerenciador unico do player ══════════
    // Uma unica instancia Hls/mpegts por vez; sem listeners duplicados;
    // retries limitados; watchdog anti-travamento. Evita o loop pesado que
    // acumulava SourceBuffers removidos (InvalidStateError) e travava a aba.
    var _retryCount = 0;
    var _retryTimer = null;
    var _stallTimer = null;
    var _stallTicks = 0;
    var _lowReadyTicks = 0;
    var _healthyTicks = 0;
    var _lastRecoverAt = 0;
    // VOD (filmes/séries): corte prematuro da origem também congela no "fim".
    // _suspectCutAt marca o último stall; _vodResumed limita a 1 retomada
    // automática por reprodução (fim legítimo nunca é reaberto em loop).
    var _suspectCutAt = 0;
    var _pendingSeek = null;
    var _vodResumed = false;
    var _lastPlayTime = 0;
    var _stopped = false;
    // Live insiste mais: canal ao vivo deve se recuperar sozinho de falhas
    // transitorias da origem em vez de parar e exigir reload manual.
    var MAX_RETRIES = isLive ? 8 : 3;
    // Motor atual (HLS pode sofrer downgrade p/ TS no meio da reprodução).
    var _useHls = isHls;
    var _downgradedTs = false;
    // Preenchidos no startPlay: usados pelo _diag para dizer QUAL motor e
    // QUAL url estavam ativos quando travou.
    var _diagEngine = '-';
    var _engineUrl = '';

    // ─── Intenção do usuário tem prioridade absoluta ──────────────────────
    // Origem do "ele despausa sozinho": o hls.js continua baixando segmentos
    // com o vídeo pausado (enche o buffer à frente) e cada FRAG_LOADED
    // chamava video.play(). Pausava, o próximo segmento chegava, e o player
    // voltava a tocar contra a vontade do usuário.
    // _userPaused é a única fonte de verdade: nenhum caminho automático pode
    // dar play enquanto ela for true.
    var _userPaused = false;
    // A reprodução está rodando por intenção do usuário (play real, não um
    // play() nosso). Sem isso não dá para distinguir "o usuário pausou" de
    // um pause() interno: usar uma flag "pause programático" deixava uma
    // marca pendurada e a PRIMEIRA pausa do usuário era engolida.
    var _playingIntent = false;

    function _autoPlay() {
        if (_stopped || _userPaused) return;
        _tentarTocar();
    }

    // O navegador so deixa ligar o SOM depois de um toque do usuario; autoplay
    // mudo e liberado. Negar o play() e engolir a rejeicao (como era antes)
    // deixava o bloco preto com "carregando para sempre" — o tal player que
    // "nao carrega". Agora: tenta com som, cai para mudo e oferece o botao.
    function _tentarTocar() {
        var p;
        try { p = video.play(); } catch (e) { p = null; }
        if (p && typeof p.catch === 'function') {
            p.catch(function () { _semGesto(); });
            return;
        }
        if (!p && video.paused) _semGesto();
    }

    function _semGesto() {
        if (_stopped || _userPaused) return;
        if (!video.muted) {
            video.muted = true;
            var q;
            try { q = video.play(); } catch (e) { q = null; }
            if (q && typeof q.catch === 'function') {
                q.catch(function () { video.muted = false; vpShowTap(); });
            }
            return;
        }
        vpShowTap();
    }

    function _clearRetry() {
        if (_retryTimer) { clearTimeout(_retryTimer); _retryTimer = null; }
    }

    function _killInstance() {
        _clearRetry();
        try { if (window._hlsPlayer) { window._hlsPlayer.destroy(); } } catch (e) {}
        window._hlsPlayer = null;
        try { if (window._mpegtsPlayer) { window._mpegtsPlayer.destroy(); } } catch (e) {}
        window._mpegtsPlayer = null;
        _playingIntent = false;
        try { video.pause(); } catch (e) {}
        currentChannelId = null;
    }

    function stopLive() {
        _stopped = true;
        _killInstance();
        try { if (deviceHeartbeatInterval) { clearInterval(deviceHeartbeatInterval); deviceHeartbeatInterval = null; } } catch (e) {}
        try { if (heartbeatInterval) { clearInterval(heartbeatInterval); heartbeatInterval = null; } } catch (e) {}
        try { if (watchInterval) { clearInterval(watchInterval); watchInterval = null; } } catch (e) {}
    }

    function hardStop(msg) {
        if (_stopped) return;
        _stopped = true;
        _killInstance();
        try { if (deviceHeartbeatInterval) { clearInterval(deviceHeartbeatInterval); deviceHeartbeatInterval = null; } } catch (e) {}
        try { if (heartbeatInterval) { clearInterval(heartbeatInterval); heartbeatInterval = null; } } catch (e) {}
        try { if (watchInterval) { clearInterval(watchInterval); watchInterval = null; } } catch (e) {}
        showPlayerError(msg || 'Não foi possível carregar o conteúdo.');
    }

    // ═══ RECUPERAÇÃO AUTOMÁTICA DESATIVADA ═══════════════════════════════
    // Estas funções existem para registrar o evento no app.log (para o
    // diagnóstico continuar funcionando) e NÃO fazem mais nada. Antes cada
    // uma delas derrubava o player (_killInstance) e voltava a dar play,
    // sozinha, contra a vontade do usuário — era o "reiniciando sozinho" e o
    // "despausou sozinho". Quem recupera agora é o botão Tentar novamente
    // (_reconnectNow), que é um clique explícito.
    function _retryLater() {
        _diag('auto-recuperacao-desativada', _diagEngine, 'HLS/erro fatal');
    }

    function _retryLaterTs() {
        _diag('auto-recuperacao-desativada', _diagEngine, 'downgrade para TS');
    }

    function _recoverFromStall(reason) {
        _diag('auto-recuperacao-desativada', _diagEngine, reason || '');
    }

    // Reconexão manual (botão "Tentar novamente"): reconecta no lugar, sem
    // recarregar a página — religia heartbeats e re-registra a sessão.
    function _reconnectNow() {
        _stopped = false;
        _retryCount = 0;
        _stallTicks = 0;
        _lowReadyTicks = 0;
        _healthyTicks = 0;
        _vodResumed = false;
        _pendingSeek = null;
        _useHls = isHls;
        _downgradedTs = false;
        _vpPlaying = false;
        // Clique explícito do usuário = nova intenção de reproduzir.
        _userPaused = false;
        try { if (watchInterval) { clearInterval(watchInterval); watchInterval = null; } } catch (e) {}
        vpShowLoading('Reconectando...');
        vpStartWatch();
        try { startHeartbeat(); } catch (e) {}
        try { startDeviceHeartbeat(); } catch (e) {}
        try { sendDeviceStreamStart(); } catch (e) {}
        playStream();
        _startStallWatch();
    }
    try { window._playerReconnect = _reconnectNow; } catch (e) {}

    // ══════════ Overlay de carregamento / erro ══════════
    // Garante que o usuario nunca fique preso num "carregando infinito":
    // se nada comecar a tocar em VP_LOAD_TIMEOUT segundos, mostramos erro
    // com os botoes Tentar novamente / Voltar / Inicio (o site segue vivo).
    var _vpOverlay = document.getElementById('vpOverlay');
    var _vpMsg = document.getElementById('vpOverlayMsg');
    var _vpSub = document.getElementById('vpOverlaySub');
    var _vpLoadTimer = null;
    var _vpPlaying = false;
    var VP_LOAD_TIMEOUT = isLive ? 30000 : 25000;

    function vpShowLoading(msg) {
        if (_vpPlaying || !_vpOverlay) return;
        _vpOverlay.classList.remove('error');
        _vpOverlay.classList.add('active');
        if (msg) _vpMsg.textContent = msg;
        _vpSub.textContent = 'Isso pode levar alguns segundos.';
        var tap = document.getElementById('vpTapBtn');
        if (tap) tap.hidden = true;
        var rtr = document.getElementById('vpRetryBtn');
        if (rtr) rtr.hidden = false;
    }

    // Estado "esta tudo pronto, so falta o seu toque": nunca e um erro, e nunca
    // e uma tela preta esperando o usuario adivinhar.
    function vpShowTap() {
        if (!_vpOverlay) return;
        if (_vpLoadTimer) { clearTimeout(_vpLoadTimer); _vpLoadTimer = null; }
        _vpOverlay.classList.remove('error');
        _vpOverlay.classList.add('active');
        _vpMsg.textContent = 'Toque para começar a assistir';
        _vpSub.textContent = 'O canal já está pronto. Por causa do navegador, o som só liga depois de um toque seu.';
        var tap = document.getElementById('vpTapBtn');
        if (tap) tap.hidden = false;
        var rtr = document.getElementById('vpRetryBtn');
        if (rtr) rtr.hidden = true;
    }

    // Solta as conexoes de rede do player. Senao, hls.js/mpegts.js ficam
    // re-tentando em background e enchem o limite de conexoes do navegador
    // para o dominio — ai NENHUMA outra pagina do site abre ("trava tudo e
    // nao consigo sair").
    function vpAbortNetwork() {
        try { if (window._hlsPlayer) { window._hlsPlayer.destroy(); } } catch (e) {}
        window._hlsPlayer = null;
        try { if (window._mpegtsPlayer) { window._mpegtsPlayer.destroy(); } } catch (e) {}
        window._mpegtsPlayer = null;
        try { video.pause(); } catch (e) {}
        try { video.removeAttribute('src'); video.load(); } catch (e) {}
        // Para de contar como "assistindo" na hora que o player falha — antes
        // a conta ficava presa como se ainda estivesse reproduzindo.
        try { sendDeviceStreamStop(); } catch (e) {}
    }

    function vpShowError(msg, sub) {
        if (!_vpOverlay) return;
        if (_vpLoadTimer) { clearTimeout(_vpLoadTimer); _vpLoadTimer = null; }
        vpAbortNetwork();
        _vpOverlay.classList.add('active');
        _vpOverlay.classList.add('error');
        _vpMsg.textContent = msg;
        _vpSub.textContent = sub || 'O conteúdo pode estar offline ou a origem está lenta. Tente novamente ou volte.';
        var tap = document.getElementById('vpTapBtn');
        if (tap) tap.hidden = true;
        var rtr = document.getElementById('vpRetryBtn');
        if (rtr) rtr.hidden = false;
    }

    // So esconde quando o video ESTA tocando. "loadeddata" nao e tocar: com o
    // autoplay bloqueado pelo navegador escondiamos o aviso e sobrava um
    // quadrado preto no meio da pagina.
    function vpHide() {
        if (video.paused) return;
        _vpPlaying = true;
        if (_vpOverlay) _vpOverlay.classList.remove('active');
        var tap = document.getElementById('vpTapBtn');
        if (tap) tap.hidden = true;
        var rtr = document.getElementById('vpRetryBtn');
        if (rtr) rtr.hidden = false;
        var som = document.getElementById('vpSomChip');
        if (som) som.hidden = !video.muted;
        if (_vpLoadTimer) { clearTimeout(_vpLoadTimer); _vpLoadTimer = null; }
    }

    function vpStartWatch() {
        if (_vpLoadTimer) clearTimeout(_vpLoadTimer);
        _vpLoadTimer = setTimeout(function () {
            if (_vpPlaying) return;
            if (video.readyState >= 2 && !_userPaused) { vpShowTap(); return; }
            vpShowError('Não foi possível carregar este conteúdo.',
                'O canal/filme pode estar offline ou o servidor de origem está lento. Tente novamente ou volte — o site continua funcionando.');
        }, VP_LOAD_TIMEOUT);
    }

    (function wireVpOverlay() {
        var retry = document.getElementById('vpRetryBtn');
        if (retry) retry.addEventListener('click', function () { _reconnectNow(); });
        var tap = document.getElementById('vpTapBtn');
        if (tap) tap.addEventListener('click', function () {
            _userPaused = false;
            video.muted = false;
            vpShowLoading('Carregando transmissão...');
            vpStartWatch();
            _tentarTocar();
        });
        var som = document.getElementById('vpSomChip');
        if (som) som.addEventListener('click', function () {
            video.muted = false;
            try { video.volume = 1; } catch (e) {}
            som.hidden = true;
        });
        // O "Carregando..." ja esta na tela desde o HTML: o relogio de seguranca
        // comeca junto, para nenhum caminho (token, sessao, motor) deixar o
        // usuario olhando um spinner eterno.
        vpStartWatch();
    })();

    function playStream() {
        if (_stopped) return;
        // Garante os motores ANTES de iniciar. Na 1ª carga eles já vêm prontos
        // de /static; em "Tentar novamente" ensureEngines só tenta o que faltar
        // — nada de "canal offline" por motor ausente.
        _enginesReady = ensureEngines();
        _enginesReady.then(function () { _startPlayEngine(); },
                           function () { _startPlayEngine(); });
    }

    function _startPlayEngine() {
        if (_stopped) return;
        _killInstance();
        vpShowLoading(_retryCount > 0 ? 'Reconectando...' : 'Carregando transmissão...');
        var url = buildStreamUrl();

        // Motor de verdade indisponível neste navegador/rede → avisa em vez
        // de deixar o player "cair" no vídeo nativo com um .m3u8 e reportar
        // o enganoso "canal offline" do usuário.
        var _nativeHls = !!video.canPlayType('application/vnd.apple.mpegurl');
        var engineMissing = (_useHls && !_nativeHls && typeof Hls === 'undefined') ||
                            (!_useHls && isLikelyMpegTs && typeof mpegts === 'undefined');
        if (engineMissing) {
            _diag('motor-ausente', '-', 'hls.js/mpegts.js nao carregaram');
            vpShowError('Reprodutor indisponível neste navegador.',
                'Não foi possível carregar os módulos de vídeo (hls.js/mpegts.js). Atualize o navegador ou libere os bloqueios de conteúdo e toque em Tentar novamente.');
            return;
        }

        // ⚠ IMPORTANTE: seleciona o engine conforme o tipo REAL do stream.
        // Hls.js SO entende m3u8 — forcar Hls.js em TS cru/MP4 quebra a reproducao.
        if (_useHls && typeof Hls !== 'undefined' && Hls.isSupported()) {
            var hls = new Hls({
                liveSyncDurationCount: 6,
                liveMaxLatencyDurationCount: 12,
                enableWorker: true,
                lowLatencyMode: false,
                maxBufferLength: 90,
                maxMaxBufferLength: 180,
                backBufferLength: 30,
                maxBufferSize: 250 * 1000 * 1000,
                // Retries/fusoes mais curtos: com o servidor saturado ou a
                // origem fora do ar, os valores antigos (4/6 tentativas com
                // timeouts longos) geravam uma enxurrada de requests em
                // /proxy e o navegador travava a aba inteira.
                manifestLoadingTimeOut: 15000,
                manifestLoadingMaxRetry: 2,
                levelLoadingTimeOut: 15000,
                levelLoadingMaxRetry: 2,
                fragLoadingTimeOut: 30000,
                fragLoadingMaxRetry: 3,
                fragLoadingRetryDelay: 1000,
                manifestLoadingRetryDelay: 1000,
                levelLoadingRetryDelay: 1000,
                startFragPrefetch: false,
            });
            window._hlsPlayer = hls;
            _diagEngine = 'hls.js';
            _engineUrl = url;
            _diag('motor-iniciado', 'hls.js', '');
            hls.loadSource(url);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                try { _autoPlay(); } catch (e) {}
            });
            // NÃO chama video.play() aqui. O hls.js continua baixando
            // segmentos enquanto o vídeo está pausado; cada FRAG_LOADED dando
            // play era o que fazia o player despausar sozinho. Quem manda é o
            // usuário. O 'waiting' listener abaixo (que só age quando o vídeo
            // JÁ está tocando) é quem retoma após underrun.
            hls.on(Hls.Events.ERROR, function (event, data) {
                if (!data) return;
                // TODO erro vai para o app.log, inclusive os não-fatais: é o
                // 404 de segmento que trava o canal sem aparecer no console.
                _diag('hls-' + (data.fatal ? 'FATAL' : 'leve'),
                    'hls.js',
                    'type=' + data.type + ' details=' + data.details +
                    (data.response && data.response.code ? ' code=' + data.response.code : ''));
                if (!data.fatal) return;
                if (window._hlsPlayer !== hls) return; // instancia descartada
                // Sem reinício automático. O player fica como está (inclusive
                // pausado se o usuário pausou) e a única saída é o botão
                // "Tentar novamente", que é um clique explícito.
                showPlayerError('Conexão com o vídeo interrompida. Toque em Tentar novamente.');
            });
            return;
        }

        // Safari/iOS: HLS nativo (sem MSE)
        if (_useHls && video.canPlayType('application/vnd.apple.mpegurl')) {
            _diagEngine = 'hls-nativo';
            _engineUrl = url;
            _diag('motor-iniciado', 'hls-nativo', '');
            video.src = url;
            try { _autoPlay(); } catch (e) {}
            return;
        }

        // MPEG-TS cru (canais sem m3u8): so com mpegts.js
        if (isLikelyMpegTs && typeof mpegts !== 'undefined' && mpegts.isSupported()) {
            _diagEngine = 'mpegts.js';
            _engineUrl = url;
            _diag('motor-iniciado', 'mpegts.js', '');
            var mpegPlayer = mpegts.createPlayer({ type: 'mpegts', isLive: isLive, url: url }, { enableWorker: true, lazyLoad: false, autoCleanupSourceBuffer: true, enableStashBuffer: true, stashInitialSize: 32 * 1024 * 1024 });
            mpegPlayer.attachMediaElement(video);
            mpegPlayer.load();
            if (!_userPaused) _tentarTocar();
            mpegPlayer.on(mpegts.Events.ERROR, function () {
                if (_stopped) return;
                // Sem reinício automático: registra e oferece o retry manual.
                _diag('mpegts-erro', _diagEngine, 'sem recuperacao automatica');
                showPlayerError('Conexão com o vídeo interrompida. Toque em Tentar novamente.');
            });
            window._mpegtsPlayer = mpegPlayer;
            return;
        }

        // Demais (MP4/VOD direto, etc.): player nativo do navegador
        video.src = url;
        if (!_userPaused && !_stopped) {
            video.addEventListener('error', function () {
                if (_stopped) return;
                _diag('erro-vod', _diagEngine, 'sem recuperacao automatica');
                showPlayerError('Não foi possível reproduzir o conteúdo. Toque em Tentar novamente.');
            }, { once: true });
            _tentarTocar();
        }
    }

    // ── Diagnóstico para o app.log ──────────────────────────────────────
    // Sem isto, "os bytes chegam mas a imagem não sai" é um mistério. O
    // servidor passa a enxergar readyState/buffered/currentTime e a url que
    // falhou. É o caminho curto entre o sintoma e a causa.
    function _diagBuf() {
        var b = null;
        try {
            if (video.buffered && video.buffered.length) {
                b = video.buffered.end(video.buffered.length - 1) - video.buffered.start(0);
            }
        } catch (e) { b = -1; }
        return b;
    }
    function _diag(ev, engine, err) {
        try {
            // FormData, e nao URLSearchParams: sendBeacon manda URLSearchParams
            // como text/plain e o Flask perde todos os campos (payload vazio).
            var body = new FormData();
            body.append('ev', ev);
            body.append('engine', engine || '-');
            body.append('readyState', video.readyState);
            body.append('networkState', video.networkState);
            body.append('currentTime', video.currentTime || 0);
            body.append('duration', isFinite(video.duration) ? video.duration : -1);
            body.append('buffered', _diagBuf());
            body.append('pending', (typeof video.seekable !== 'undefined' && video.seekable.length)
                ? video.seekable.end(video.seekable.length - 1) : 0);
            body.append('paused', video.paused ? 1 : 0);
            body.append('err', err || (video.error ? (video.error.code + ':' + video.error.message) : ''));
            body.append('url', _engineUrl || video.currentSrc || '');
            if (navigator.sendBeacon) {
                navigator.sendBeacon('/api/player_diag', body);
            } else {
                fetch('/api/player_diag', {
                    method: 'POST', body: body, keepalive: true,
                    headers: { 'X-Requested-With': 'fetch' }
                }).catch(function () {});
            }
        } catch (e) { /* diagnóstico nunca pode derrubar o player */ }
    }

    // (A busca automática na live edge foi removida junto com o auto-restart:
    // ela mudava o currentTime do usuário sem ele pedir. Quem navega é o
    // próprio controle de seek do navegador.)
    function _startStallWatch() {
        if (_stallTimer) clearInterval(_stallTimer);
        _stallTimer = setInterval(function () {
            if (_stopped || video.paused || video.seeking) {
                if (!video.seeking) { _lastPlayTime = video.currentTime || 0; }
                return;
            }
            var t = video.currentTime || 0;
            if (t !== _lastPlayTime) {
                // Progredindo = saudável. 60s seguidos de saúde zeram as
                // tentativas: stalls transitorios nunca mais matam o player.
                _lastPlayTime = t;
                _stallTicks = 0;
                _lowReadyTicks = 0;
                _healthyTicks++;
                if (_healthyTicks >= 12) { _retryCount = 0; _healthyTicks = 0; }
                return;
            }
            if (video.readyState >= 2) {
                _stallTicks++;
                _lowReadyTicks = 0;
                _suspectCutAt = Date.now();
                // Registra todo tick de travamento: ver os segundos seguidos com
                // buffer cheio e currentTime parado separa "não chegou dado"
                // de "chegou e não decodificou".
                _diag('travado-com-dados', _diagEngine, 'currentTime parado');
            } else {
                // Girando sem dados (readyState < 2): era o ponto cego que
                // deixava o spinner infinito sem recuperar nem avisar.
                _lowReadyTicks++;
                _stallTicks = 0;
                _suspectCutAt = Date.now();
                if (_lowReadyTicks === 1) { _diag('sem-dados', _diagEngine, 'readyState<2'); }
            }
        }, 5000);
    }

    // Escrita segura na barra de status (nunca explode se o elemento sumir).
    function setTimerBar(html) {
        try {
            var t = document.getElementById('timerBar');
            if (t) t.innerHTML = html;
        } catch (e) {}
    }

    function initPlayer() {
        if (!canPlay) {
            if ((blockDevice || '').indexOf('credenciais') !== -1) {
                setTimerBar(
                    '<div style="width:100%;text-align:center;">' +
                    '<div style="font-size:1.8em;margin-bottom:8px;">&#x23f3;</div>' +
                    '<div style="color:var(--gold);font-weight:700;font-size:1.1em;margin-bottom:6px;">Servidor Ocupado</div>' +
                    '<div style="color:var(--text-secondary);font-size:0.9em;">Todas as vias de transmissão estão em uso no momento. Aguarde alguns instantes e toque em Tentar novamente.</div>' +
                    '</div>');
                vpShowError('Servidor ocupado.',
                    'Todas as vias de transmissão estão em uso. Aguarde alguns instantes e toque em Tentar novamente.');
                return;
            }
            setTimerBar(
                '<div style="width:100%;text-align:center;">' +
                '<div style="font-size:1.8em;margin-bottom:8px;">&#x1f6ab;</div>' +
                '<div style="color:var(--primary);font-weight:700;font-size:1.1em;margin-bottom:6px;">Acesso Bloqueado</div>' +
                '<div style="color:var(--text-secondary);font-size:0.9em;margin-bottom:4px;">Esta conta ja esta reproduzindo conteudo em <strong>' + (blockDevice || 'outro dispositivo') + '</strong>.</div>' +
                '<div style="color:var(--text-muted);font-size:0.85em;">Cada conta permite apenas <strong>1 dispositivo simultaneo</strong>. Encerra a reproducao no outro aparelho para assistir aqui.</div>' +
                '</div>');
            vpShowError('Acesso bloqueado neste dispositivo.',
                'Esta conta ja esta reproduzindo conteudo em ' + (blockDevice || 'outro aparelho') + '. Encerre a outra reproducao para assistir aqui.');
            return;
        }

        startDeviceHeartbeat();
        if (isLive && serverChannelId) {
            currentChannelId = serverChannelId;
        }
        vpShowLoading('Carregando transmissão...');
        vpStartWatch();
        playStream();
        _startStallWatch();
    }
    initPlayer();

    // Listeners unicos (nao acumulam a cada tentativa)
    // Só retoma se o vídeo JÁ estava tocando (readyState caiu por underrun).
    // A guarda !video.paused/_userPaused é o que impede o "despausa sozinho":
    // um buffering normal enquanto o usuário está pausado não pode virar play.
    video.addEventListener('waiting', function () {
        try {
            if (video.paused || _userPaused || _stopped) return;
            if (video.readyState >= 3 && window._hlsPlayer) { _autoPlay(); }
        } catch (e) {}
    });
    video.addEventListener('play', function () {
        _userPaused = false;
        _playingIntent = true;
        _stallTicks = 0; _lowReadyTicks = 0; _lastPlayTime = video.currentTime || 0;
    });
    video.addEventListener('playing', function () {
        _stallTicks = 0; _lowReadyTicks = 0; _lastPlayTime = video.currentTime || 0; vpHide();
        _diag('reproduzindo', _diagEngine, '');
    });
    video.addEventListener('error', function () {
        _diag('erro-video', _diagEngine,
            video.error ? ('code=' + video.error.code + ' ' + video.error.message) : 'desconhecido');
    });
    video.addEventListener('stalled', function () { _diag('evento-stalled', _diagEngine, ''); });
    video.addEventListener('seeking', function () { _diag('seeking', _diagEngine, 'alvo=' + video.currentTime); });
    video.addEventListener('seeked', function () { _diag('seeked', _diagEngine, 'agora=' + video.currentTime); });
    video.addEventListener('loadeddata', function () {
        if (!video.paused) { vpHide(); return; }
        if (_stopped || _userPaused) return;
        // Dados prontos e o video parado: ou o autoplay foi negado, ou o play()
        // nem chegou a ser chamado. Tenta de novo e mantem o usuario informado.
        _tentarTocar();
        vpStartWatch();
    });
    video.addEventListener('canplay', function () {
        // Retomada de VOD após corte: volta para onde parou (1x).
        if (_pendingSeek != null && !isLive) {
            try { video.currentTime = _pendingSeek; } catch (e) {}
            _pendingSeek = null;
        }
        vpHide();
    });
    video.addEventListener('error', function () {
        try {
            if (video.error && video.error.code === 4 && window._hlsPlayer && !_stopped) {
                window._hlsPlayer.startLoad();
            }
        } catch (e) {}
    });

    window.addEventListener('beforeunload', function () {
        try { stopLive(); } catch (e) {}
        try { sendDeviceStreamStop(); } catch (e) {}
    });

    function startDeviceHeartbeat() {
        if (deviceHeartbeatInterval) return;
        if (!streamAlreadyRegistered) {
            sendDeviceStreamStart();
        }
        deviceHeartbeatInterval = setInterval(sendDeviceHeartbeat, 10000);
    }
    function stopDeviceHeartbeat() {
        if (deviceHeartbeatInterval) { clearInterval(deviceHeartbeatInterval); deviceHeartbeatInterval = null; }
    }
    function sendDeviceHeartbeat() {
        fetch('/api/device_heartbeat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId, content_name: '{{ item.name | e }}'})
        }).then(r => r.json()).then(data => {
            if (!data.can_play) {
                video.pause();
                stopDeviceHeartbeat();
                if (watchInterval) { clearInterval(watchInterval); watchInterval = null; }
                setTimerBar(
                    '<div style="width:100%;text-align:center;">' +
                    '<div style="font-size:1.8em;margin-bottom:8px;">&#x1f6ab;</div>' +
                    '<div style="color:var(--primary);font-weight:700;font-size:1.1em;margin-bottom:6px;">Reproducao Interrompida</div>' +
                    '<div style="color:var(--text-secondary);font-size:0.9em;">Outro dispositivo iniciou reproducao nesta conta. <strong>Apenas 1 acesso simultaneo e permitido.</strong></div>' +
                    '</div>');
            }
        }).catch(() => {});
    }
    function sendDeviceStreamStart() {
        fetch('/api/device_stream_start', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId, content_name: '{{ item.name | e }}'})
        }).then(r => r.json()).then(data => {
            if (!data.can_play) {
                video.pause();
                if (watchInterval) { clearInterval(watchInterval); watchInterval = null; }
                var _msg = data.message || 'Esta conta ja esta reproduzindo em outro dispositivo.';
                if (_msg.indexOf('credenciais') !== -1) {
                    _msg = 'Servidor ocupado: todas as vias de transmissão estão em uso. Tente novamente em instantes.';
                }
                setTimerBar(
                    '<div style="width:100%;text-align:center;">' +
                    '<div style="font-size:1.8em;margin-bottom:8px;">&#x1f6ab;</div>' +
                    '<div style="color:var(--primary);font-weight:700;font-size:1.1em;margin-bottom:6px;">Acesso Bloqueado</div>' +
                    '<div style="color:var(--text-secondary);font-size:0.9em;">' + _msg + '</div>' +
                    '</div>');
            }
        }).catch(() => {});
    }
    function sendDeviceStreamStop() {
        // sendBeacon entrega a requisicao mesmo na saida da pagina; o fetch
        // comum era cancelado pelo navegador no unload (conta ficava "presa").
        if (typeof window.trocoStreamStop === 'function') {
            window.trocoStreamStop();
            return;
        }
        try {
            fetch('/api/device_stream_stop', {
                method: 'POST',
                keepalive: true,
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({})
            }).catch(() => {});
        } catch (e) {}
    }

    function updateRemaining(seconds) {
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        try {
            var _rd = document.getElementById('remainingDisplay');
            if (_rd) _rd.textContent = h + 'h ' + m + 'm';
        } catch (e) {}
        if (seconds <= 0 && !isPremium) {
            setTimerBar('<div style="color:var(--primary);">⏰ Tempo esgotado! <a href="{{ url_for('planos') }}" style="color:var(--green);">Assine Premium</a></div>');
            video.pause();
            if (watchInterval) clearInterval(watchInterval);
        }
    }

    if (isPremium) {
        try {
            var _tb = document.getElementById('timerBar');
            var _ti = _tb && _tb.querySelector('.timer-info');
            if (_ti) _ti.innerHTML = '<span class="premium-badge">⭐ Premium - Acesso Ilimitado</span>';
        } catch (e) {}
    }

    function sendWatchTime() {
        if (totalWatched > 0) {
            fetch('{{ url_for('consume_time') }}', {
                method: 'POST',
                keepalive: true,
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({seconds: totalWatched})
            }).then(r => r.json()).then(data => {
                if (!isPremium) updateRemaining(data.remaining);
            });
            totalWatched = 0;
        }
    }

    video.addEventListener('play', () => {
        if (watchInterval) clearInterval(watchInterval);
        watchInterval = setInterval(() => { totalWatched += 5; }, 5000);
        startHeartbeat();
        startDeviceHeartbeat();
    });
    video.addEventListener('pause', () => {
        // Só conta como "pausou o usuário" se a reprodução estava rodando por
        // intenção dele. Um pause() interno (desmontar o player) não marca.
        if (_playingIntent) { _userPaused = true; _playingIntent = false; }
        sendWatchTime(); sendWatchStop(); stopHeartbeat();
    });
    video.addEventListener('ended', function () {
        sendWatchTime(); sendWatchStop(); stopHeartbeat();
        if (_stopped) return;
        // NÃO reconecta sozinho. Um EOS de origem não é motivo para
        // destravar o player contra a vontade do usuário — e se ele estava
        // pausado, respeita a pausa. Fim legítimo de filme/série não faz nada.
        if (isLive) {
            _diag('eos-ao-vivo', _diagEngine, 'sem reconexao automatica');
            return;
        }
        if (Date.now() - _suspectCutAt < 20000) {
            _diag('eos-prematuro-vod', _diagEngine, 'sem retomada automatica');
        }
    });
    // Novo salto do usuário = nova intenção: libera outra retomada automática.
    video.addEventListener('seeked', () => { _vodResumed = false; });
    window.addEventListener('beforeunload', () => { sendWatchTime(); sendWatchStop(); sendDeviceStreamStop(); if (watchInterval) clearInterval(watchInterval); stopHeartbeat(); stopDeviceHeartbeat(); });
    var watchFlushInterval = setInterval(() => { if (totalWatched >= 30) sendWatchTime(); }, 10000);

    function startHeartbeat() {
        if (heartbeatInterval) return;
        sendHeartbeat();
        heartbeatInterval = setInterval(sendHeartbeat, 15000);
    }
    function stopHeartbeat() {
        if (heartbeatInterval) { clearInterval(heartbeatInterval); heartbeatInterval = null; }
    }
    function sendHeartbeat() {
        fetch('/api/watch_heartbeat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId})
        }).catch(() => {});
    }
    function sendWatchStop() {
        // sendBeacon/keepalive: sobrevive ao fechamento da pagina. Antes o fetch
        // era cancelado pelo navegador e a conta continuava "assistindo".
        if (typeof window.trocoBeacon === 'function') {
            window.trocoBeacon('/api/watch_stop', {canal_id: itemId});
            return;
        }
        try {
            fetch('/api/watch_stop', {
                method: 'POST',
                keepalive: true,
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({canal_id: itemId})
            }).catch(() => {});
        } catch (e) {}
    }

    function toggleFullscreen() {
        if (video.requestFullscreen) video.requestFullscreen();
        else if (video.webkitRequestFullscreen) video.webkitRequestFullscreen();
    }
    async function togglePIP() {
        // No app Android o video roda em MSE (/proxy) e a WebView nao
        // suporta document.pictureInPictureEnabled. PiP web NUNCA vai
        // funcionar ali, entao mandamos para o player nativo (ExoPlayer)
        // em modo PiP. Fora do app, segue o PiP do navegador.
        if (typeof Android !== 'undefined' && (Android.enterPictureInPicture || Android.playStreamPip)) {
            var pipUrl = (typeof _engineUrl !== 'undefined' && _engineUrl) ? _engineUrl : (video.currentSrc || video.src);
            var pipName = (document.title || 'Canal').replace(/\s*[—-]\s*Troço Play.*$/i, '').trim() || 'Canal';
            var pipId = Number(itemId) || 0;
            try {
                if (Android.enterPictureInPicture) Android.enterPictureInPicture(pipUrl, pipName, pipId);
                else Android.playStreamPip(pipUrl, pipName, pipId);
                return;
            } catch (e) {}
        }
        try {
            if (!document.pictureInPictureEnabled && !video.requestPictureInPicture) {
                if (typeof vpShowToast === 'function') vpShowToast('PiP não disponível neste navegador.');
                else if (window.notifyUI) window.notifyUI('PiP não disponível neste navegador.');
                return;
            }
            if (document.pictureInPictureElement) await document.exitPictureInPicture();
            else await video.requestPictureInPicture();
        } catch (err) {}
    }

    var favBtnPlayer = document.getElementById('favBtnPlayer');

    function toggleFavPlayer() {
        var wasActive = favBtnPlayer.classList.contains('active');
        var want = !wasActive;
        favBtnPlayer.classList.toggle('active', want);
        favBtnPlayer.textContent = want ? '★ Favoritado' : '☆ Favoritar';
        favBtnPlayer.setAttribute('aria-pressed', want ? 'true' : 'false');
        favBtnPlayer.setAttribute('aria-label', want ? 'Remover dos favoritos' : 'Adicionar aos favoritos');
        fetch('/api/favorites/toggle', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId})
        }).then(r => r.json()).then(data => {
            favBtnPlayer.classList.toggle('active', data.favorited);
            favBtnPlayer.textContent = data.favorited ? '★ Favoritado' : '☆ Favoritar';
        }).catch(function() {
            favBtnPlayer.classList.toggle('active', wasActive);
            favBtnPlayer.textContent = wasActive ? '★ Favoritado' : '☆ Favoritar';
        });
    }

    (function checkPlayerFav() {
        fetch('/api/favorites/check_bulk', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ids: [itemId]})
        }).then(r => r.json()).then(data => {
            if (data[itemId]) {
                favBtnPlayer.classList.add('active');
                favBtnPlayer.textContent = '★ Favoritado';
            }
        });
    })();

    {% if tipo == 'live' %}
    function loadEpg() {
        const epgBar = document.getElementById('epgBar');
        if (!epgBar) return;
        fetch('/api/epg/{{ item.id }}')
            .then(r => r.json())
            .then(data => {
                if (!data.current && !data.next) { epgBar.style.display = 'none'; return; }
                epgBar.style.display = 'flex';
                if (data.current) {
                    document.getElementById('epgNowTitle').textContent = data.current.title;
                    document.getElementById('epgNowTime').textContent = data.current.start_brt + ' - ' + data.current.end_brt;
                    document.getElementById('epgRemaining').textContent = data.remaining ? '⏳ Faltam ' + data.remaining : '';
                }
                if (data.next) {
                    document.getElementById('epgNextTitle').textContent = data.next.title;
                    document.getElementById('epgNextTime').textContent = '🕐 ' + data.next.start_brt;
                }
                window._epgPrograms = data.programs || [];
            })
            .catch(() => {});
    }
    loadEpg();
    setInterval(loadEpg, 10000);

    function openEpgModal() {
        const modal = document.getElementById('epgModal');
        const list = document.getElementById('epgModalList');
        const progs = window._epgPrograms || [];
        if (progs.length === 0) {
            list.innerHTML = '<p style="color:var(--text-muted); padding:20px; text-align:center;">Nenhum programa encontrado.</p>';
        } else {
            list.innerHTML = progs.map(p => {
                const currentClass = p.is_current ? ' style="background:rgba(229,9,20,0.08); border-left:3px solid var(--primary); padding-left:12px; margin-left:-12px; border-radius:0 var(--radius-md) var(--radius-md) 0;"' : '';
                const liveTag = p.is_current ? ' <span style="background:var(--primary); color:#fff; padding:2px 8px; border-radius:4px; font-size:0.7em; font-weight:600; margin-left:8px;">AO VIVO</span>' : '';
                return '<div class="prog-item"' + currentClass + '><span class="prog-time">' + p.start_brt + ' - ' + p.end_brt + '</span>' + liveTag + '<div class="prog-title">' + p.title + '</div>' + (p.description ? '<div class="prog-desc">' + p.description + '</div>' : '') + '</div>';
            }).join('');
        }
        modal.classList.add('active');
    }
    function closeEpgModal() {
        document.getElementById('epgModal').classList.remove('active');
    }
    document.getElementById('epgModal').addEventListener('click', function(e) {
        if (e.target === this) closeEpgModal();
    });
    {% endif %}

    function openReportModal() {
        document.getElementById('reportModal').classList.add('active');
    }
    function closeReportModal() {
        document.getElementById('reportModal').classList.remove('active');
        setTimeout(() => {
            document.getElementById('reportFormOptions').style.display = 'block';
            document.getElementById('reportSuccess').style.display = 'none';
        }, 300);
    }
    document.getElementById('reportModal').addEventListener('click', function(e) {
        if (e.target === this) closeReportModal();
    });
    function submitReport(issueType) {
        fetch('/api/report', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId, issue_type: issueType})
        }).then(r => r.json()).then(data => {
            if (data.ok) {
                document.getElementById('reportFormOptions').style.display = 'none';
                document.getElementById('reportSuccess').style.display = 'block';
                document.getElementById('reportBtn').classList.add('reported');
                document.getElementById('reportBtn').textContent = '✅ Reportado';
            } else {
                alert(data.error || 'Erro ao enviar reporte.');
            }
        }).catch(() => alert('Erro ao enviar reporte.'));
    }
    (function checkReportStatus() {
        fetch('/api/report/check/' + itemId)
            .then(r => r.json())
            .then(data => {
                if (data.reported) {
                    document.getElementById('reportBtn').classList.add('reported');
                    document.getElementById('reportBtn').textContent = '✅ Reportado';
                }
            });
    })();
    function updateOnlineViewers() {
        fetch('/api/online_viewers/' + itemId)
            .then(r => r.json())
            .then(data => {
                document.getElementById('online-count').textContent = data.online || 0;
                document.getElementById('views-count').textContent = data.views || 0;
            })
            .catch(() => {});
    }
    updateOnlineViewers();
    setInterval(updateOnlineViewers, 60000);

    // Cleanup video on page unload to prevent stuck players
    window.addEventListener('beforeunload', function() {
        var videos = document.querySelectorAll('video');
        videos.forEach(function(v) { v.pause(); v.src = ''; v.load(); });
        var iframes = document.querySelectorAll('iframe');
        iframes.forEach(function(f) { f.src = 'about:blank'; });
    });

    function showPlayerError(msg) {
        vpShowError(msg || 'Não foi possível carregar este conteúdo.');
        var tb = document.getElementById('timerBar');
        if (!tb) return;
        tb.innerHTML = '<div style="width:100%;text-align:center;padding:10px;">' +
            '<div style="color:var(--primary);font-weight:700;font-size:1.05em;margin-bottom:6px;">' + msg + '</div>' +
            '<div style="font-size:0.85em;color:var(--text-secondary);margin-bottom:8px;">Tente novamente ou use o botão voltar do navegador para sair.</div>' +
            '<button onclick="if(window._playerReconnect)window._playerReconnect()" style="background:var(--primary);color:#fff;border:none;border-radius:6px;padding:8px 16px;margin:4px;cursor:pointer;">🔄 Tentar novamente</button>' +
            '</div>';
    }


    // Limpeza ao sair da pagina (botao voltar do navegador, gesto no celular)
    window.addEventListener('pagehide', function () {
        try { stopLive(); } catch (e) {}
        try { sendWatchTime(); sendWatchStop(); } catch (e) {}
        try { sendDeviceStreamStop(); } catch (e) {}
        try { if (watchFlushInterval) { clearInterval(watchFlushInterval); watchFlushInterval = null; } } catch (e) {}
        try { video.pause(); } catch (e) {}
        try { if (document.fullscreenElement) { document.exitFullscreen(); } } catch (e) {}
    });

    // Erro de reproducao sem player ativo: registra e oferece o retry manual
    // (nunca reinicia sozinho).
    video.addEventListener('error', function () {
        try {
            if (_stopped) return;
            if (video.error && !window._hlsPlayer && !window._mpegtsPlayer) {
                _diag('erro-video-sem-player', _diagEngine, 'sem recuperacao automatica');
                showPlayerError('Não foi possível reproduzir o conteúdo. Toque em Tentar novamente.');
            }
        } catch (e) {}
    });
</script>

{% endblock %}