{% extends "tv_base.html" %}
{% block title %}{{ item.name }}{% endblock %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/mpegts.js@1.8.0/dist/mpegts.min.js"></script>
<style>
    .tv-content {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #tvNav, .tv-nav, .tv-nav:not(.hidden) { display: none !important; }
    .tv-player-info-bar { display: none !important; }
    :fullscreen .tv-nav,
    :-webkit-full-screen .tv-nav { display: none !important; }

    /* Report Modal */
    .tv-report-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.8);
        z-index: 6000;
        justify-content: center;
        align-items: center;
        padding: 40px;
    }
    .tv-report-overlay.active { display: flex; }
    .tv-report-modal {
        background: var(--tv-surface);
        border-radius: var(--tv-radius-lg);
        width: 100%;
        max-width: 480px;
        border: 1px solid var(--tv-highlight);
        animation: tvFadeIn 0.2s ease;
        overflow: hidden;
    }
    html, body { height: 100%; overflow: hidden !important; }
    #tvContent.tv-content { height: 100vh !important; max-height: 100vh !important; min-height: 0 !important; padding: 0 !important; overflow: hidden !important; }
    #tvContent .tv-footer-bar { display: none !important; }
    .tv-player-page { height: 100%; min-height: 0; width: 100%; overflow: hidden; display: flex; flex-direction: column; }
    .tv-player-video { flex: 1 1 auto; min-height: 0; height: auto !important; }
    .tv-player-video video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
    .tv-player-overlay { max-height: 100vh; overflow-y: auto; }
    .tv-report-header {
        padding: 24px 28px 12px;
        border-bottom: 1px solid var(--tv-highlight);
    }
    .tv-report-header h3 {
        font-size: 1.1em;
        font-weight: 700;
        color: var(--tv-text);
    }
    .tv-report-header p {
        font-size: 0.8em;
        color: var(--tv-text-muted);
        margin-top: 4px;
    }
    .tv-report-body { padding: 16px 28px 28px; }
    .tv-report-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .tv-report-option {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border-radius: var(--tv-radius);
        background: var(--tv-elevated);
        border: 2px solid transparent;
        cursor: pointer;
        transition: var(--tv-transition);
        min-height: 56px;
        outline: none;
        color: var(--tv-text);
        font-size: 0.85em;
        font-weight: 500;
    }
    .tv-report-option:focus,
    .tv-report-option.tv-focused {
        border-color: var(--tv-focus);
        outline: 3px solid var(--tv-focus);
        outline-offset: 2px;
    }
    .tv-report-option:hover {
        background: var(--tv-highlight);
    }
    .tv-report-option .icon { font-size: 1.4em; }
    .tv-report-success {
        display: none;
        text-align: center;
        padding: 24px 0;
    }
    .tv-report-success .icon { font-size: 3em; margin-bottom: 12px; }
    .tv-report-success p { color: var(--tv-text-secondary); font-size: 0.9em; line-height: 1.6; }
    .tv-report-success strong { color: var(--tv-green); }
    .tv-report-already { color: var(--tv-text-muted) !important; cursor: default !important; }
    .tv-report-already .icon { opacity: 0.5; }
    .tv-playback-controls { margin: 12px 0 8px; padding: 10px 14px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; }
    .tv-time-row { display: flex; align-items: center; gap: 10px; color: var(--tv-text); font-size: 0.85em; }
    .tv-time-row span { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
    #tvProgress { flex: 1; min-width: 180px; accent-color: var(--tv-focus); cursor: pointer; }
    #tvProgress:disabled { opacity: 0.55; cursor: default; }
    .tv-playback-actions { display: flex; justify-content: center; gap: 10px; margin-top: 9px; }
    .tv-playback-actions button { min-width: 92px; }
    @media (max-width: 900px), (max-height: 600px) {
        .tv-player-top { padding: 16px 20px; }
        .tv-player-bottom { padding: 16px 20px; gap: 8px; }
        .tv-player-action, .tv-player-btn-back, .tv-player-epg-btn { min-height: 42px; padding: 9px 12px; font-size: 0.78em; }
        .tv-playback-controls { margin: 6px 12px; padding: 8px 10px; }
        .tv-playback-actions button { min-width: 76px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="tv-player-page">
    <div class="tv-player-video">
        <video id="tvVideoPlayer" muted autoplay playsinline></video>
        <div class="tv-player-info-bar" id="tvPlayerInfoBar">
            <span class="tv-player-info-text" id="tvPlayerInfoText">
                {% if current_user.is_premium_active or current_user.is_admin %}
                    ⭐ Premium - Acesso Ilimitado
                {% else %}
                    ⏱️ Restam {{ horas }}h {{ minutos }}m
                {% endif %}
            </span>
        </div>
    </div>

    <div class="tv-player-overlay" id="tvPlayerOverlay">
        <div class="tv-player-top">
            <div class="tv-player-info">
                <div class="tv-player-channel">{{ item.name }}
                    <span class="tv-player-plan">
                        {% if current_user.is_premium_active or current_user.is_admin %}
                            ⭐ Premium
                        {% else %}
                            ⏱️ {{ horas }}h {{ minutos }}m
                        {% endif %}
                    </span>
                </div>
                <div class="tv-player-group">{{ item.group_title }}</div>
                <div class="tv-player-online" id="tvPlayerOnline">🟢 <span id="tvPlayerOnlineCount">0</span> online</div>
            </div>
            <a href="javascript:void(0)" onclick="window.history.back();return false;" class="tv-player-btn-back tv-focusable" id="tvBackBtn">← Voltar</a>
        <script>
        (function(){
            var tipo='{{tipo}}', url = tipo==='movie'?'{{url_for("tv_filmes")}}':tipo==='series'?'{{url_for("tv_series")}}':'{{url_for("tv_canais")}}';
            document.getElementById('tvBackBtn').onclick=function(){window.history.length>2?window.history.back():window.location.href=url;};
        })();
        </script>
        </div>

        {% if tipo == 'live' %}
        <div class="tv-player-epg" id="tvPlayerEpg" style="display:none;">
            <div class="tv-player-epg-section">
                <div class="tv-player-epg-label">📺 Agora</div>
                <div class="tv-player-epg-title" id="tvEpgNowTitle">--</div>
                <div class="tv-player-epg-time" id="tvEpgNowTime"></div>
            </div>
            <div class="tv-player-epg-section">
                <div class="tv-player-epg-label">⏭️ Próximo</div>
                <div class="tv-player-epg-title" id="tvEpgNextTitle">--</div>
                <div class="tv-player-epg-time" id="tvEpgNextTime"></div>
            </div>
        </div>
        <div class="tv-player-guide-row" style="display:flex; justify-content:center; margin-top:8px;">
            <button class="tv-player-epg-btn tv-focusable" onclick="openTVEpg()">📺 Guia Completo</button>
        </div>
        {% endif %}

        <div class="tv-playback-controls" id="tvPlaybackControls">
            <div class="tv-time-row">
                <span id="tvCurrentTime">00:00</span>
                <input id="tvProgress" class="tv-focusable" type="range" min="0" max="1000" value="0" step="1" aria-label="Progresso do conteúdo">
                <span id="tvDuration">--:--</span>
            </div>
            <div class="tv-playback-actions">
                <button class="tv-player-action tv-focusable" onclick="seekTV(-10)">↶ 10s</button>
                <button class="tv-player-action tv-focusable" id="tvPlayPauseBtn" onclick="toggleTVPlayPause()">▶ Reproduzir</button>
                <button class="tv-player-action tv-focusable" onclick="seekTV(10)">10s ↷</button>
            </div>
        </div>

        <div class="tv-player-bottom">
            <button class="tv-player-action tv-focusable" id="tvPlayerFavBtn" onclick="toggleTVFav()">☆ Favoritar</button>
            <button class="tv-player-action tv-focusable" onclick="trocoShare('{{ item.name }}', window.location.href)">🔗 Compartilhar</button>
            <button class="tv-player-action tv-focusable" onclick="toggleTVFullscreen()">⛶ Tela Cheia</button>
            <button class="tv-player-action tv-focusable" onclick="toggleTVPip()">📺 PiP</button>
            <button class="tv-player-action tv-focusable" id="tvReportBtn" onclick="openTVReport()">⚠️ Reportar</button>
        </div>
    </div>

    <!-- TV Report Modal -->
    <div class="tv-report-overlay" id="tvReportModal">
        <div class="tv-report-modal">
            <div class="tv-report-header">
                <h3>⚠️ Reportar Problema</h3>
                <p>{{ item.name }}</p>
            </div>
            <div class="tv-report-body">
                <div id="tvReportFormOptions">
                    <div class="tv-report-options">
                        <div class="tv-report-option tv-focusable" tabindex="0" onclick="submitTVReport('sem_audio')">
                            <span class="icon">🔇</span>
                            <span>Sem áudio</span>
                        </div>
                        <div class="tv-report-option tv-focusable" tabindex="0" onclick="submitTVReport('nao_pega')">
                            <span class="icon">📡</span>
                            <span>Não pega / Sem sinal</span>
                        </div>
                        <div class="tv-report-option tv-focusable" tabindex="0" onclick="submitTVReport('tela_preta')">
                            <span class="icon">🖥️</span>
                            <span>Tela preta</span>
                        </div>
                        <div class="tv-report-option tv-focusable" tabindex="0" onclick="submitTVReport('travando')">
                            <span class="icon">⏸️</span>
                            <span>Travando / Engasgando</span>
                        </div>
                        <div class="tv-report-option tv-focusable" tabindex="0" onclick="submitTVReport('offline')">
                            <span class="icon">❌</span>
                            <span>Conteúdo offline</span>
                        </div>
                    </div>
                </div>
                <div class="tv-report-success" id="tvReportSuccess">
                    <div class="icon">✅</div>
                    <p>Reporte enviado com sucesso!<br><strong>Obrigado por nos ajudar.</strong></p>
                </div>
            </div>
        </div>
    </div>

    <div class="tv-player-error" id="tvPlayerError" style="display:none;">
        <div class="icon">❌</div>
        <h2>Canal Indisponível</h2>
        <p>Não foi possível carregar este canal. Pode estar offline ou com problemas técnicos.</p>
        <a href="{{ url_for('tv_canais') }}" class="tv-player-btn-back tv-focusable" style="margin-top:16px;">← Voltar aos Canais</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
(function() {
    var tvVideo = document.getElementById('tvVideoPlayer');
    var tvOverlay = document.getElementById('tvPlayerOverlay');
    var tvError = document.getElementById('tvPlayerError');
    var overlayVisible = false;
    var overlayTimer = null;

    var streamToken = {{ stream_token|tojson }};
    var isHls = {{ 'true' if stream_is_hls else 'false' }};
    var isLikelyMpegTs = !isHls && {{ 'false' if item.stream_url.lower().split('?')[0].endswith('.mp4') else 'true' }};
    var streamChannelId = {{ stream_channel_id|tojson }};
    var itemId = {{ item.id }};
    var itemTipo = {{ tipo|tojson }};
    var itemSeriesName = {{ (item.series_name or '')|tojson }};
    var isPremium = {{ 'true' if current_user.is_premium_active or current_user.is_admin else 'false' }};
    var nativeStreamUrl = {{ native_stream_url|tojson }};
    if (typeof nativeStreamUrl === 'undefined') nativeStreamUrl = '';

    var playbackStarted = false;
    var playbackTimer = null;
    window.addEventListener('tvnavready', function() {
        if (overlayVisible && typeof TVNav !== 'undefined') {
            TVNav.setScope(tvOverlay);
            TVNav.focusFirst();
        }
    });
    var tvProgress = document.getElementById('tvProgress');
    var tvCurrentTime = document.getElementById('tvCurrentTime');
    var tvDuration = document.getElementById('tvDuration');
    var tvPlayPauseBtn = document.getElementById('tvPlayPauseBtn');

    function formatTVTime(seconds) {
        if (!isFinite(seconds) || seconds < 0) return '--:--';
        seconds = Math.floor(seconds);
        var hours = Math.floor(seconds / 3600);
        var minutes = Math.floor((seconds % 3600) / 60);
        var secs = seconds % 60;
        return (hours > 0 ? String(hours).padStart(2, '0') + ':' : '') + String(minutes).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
    }

    function updateTVProgress() {
        if (!tvVideo || !tvProgress) return;
        tvCurrentTime.textContent = formatTVTime(tvVideo.currentTime);
        if (isFinite(tvVideo.duration) && tvVideo.duration > 0) {
            tvDuration.textContent = formatTVTime(tvVideo.duration);
            tvProgress.disabled = false;
            tvProgress.value = Math.round((tvVideo.currentTime / tvVideo.duration) * 1000);
        } else {
            tvDuration.textContent = streamChannelId ? 'AO VIVO' : '--:--';
            tvProgress.disabled = true;
            tvProgress.value = 0;
        }
        tvPlayPauseBtn.textContent = tvVideo.paused ? '▶ Reproduzir' : '⏸ Pausar';
    }

    function toggleTVPlayPause() {
        if (tvVideo.paused) tvVideo.play().catch(function() {});
        else tvVideo.pause();
        updateTVProgress();
    }

    function seekTV(seconds) {
        if (!isFinite(tvVideo.duration)) return;
        tvVideo.currentTime = Math.max(0, Math.min(tvVideo.duration, tvVideo.currentTime + seconds));
        updateTVProgress();
    }

    if (tvProgress) {
        tvProgress.addEventListener('input', function() {
            if (isFinite(tvVideo.duration) && tvVideo.duration > 0) {
                tvVideo.currentTime = (Number(tvProgress.value) / 1000) * tvVideo.duration;
            }
        });
    }
    ['loadedmetadata', 'durationchange', 'timeupdate', 'play', 'pause', 'ended', 'progress'].forEach(function(eventName) {
        tvVideo.addEventListener(eventName, updateTVProgress);
    });
    updateTVProgress();

    tvVideo.addEventListener('playing', function() {
        playbackStarted = true;
        if (playbackTimer) clearTimeout(playbackTimer);
        tvVideo.muted = false;
        setTimeout(function() {
            if (playbackStarted) { hideTVOverlay(); }
        }, 5000);
    });
    tvVideo.addEventListener('error', function() {
        var err = tvVideo.error;
        if (err && !playbackStarted) {
            showTVError('Erro de Video', 'Erro do reprodutor: ' + (err.message || 'codigo ' + err.code));
        }
    });

    if (!streamToken) {
        showTVError('Erro de Reprodução', 'Token de acesso inválido. Tente novamente.');
    } else {
        initTVPlayer();
    }

    // Proteção contra InvalidStateError do SourceBuffer
    tvVideo.addEventListener('waiting', () => {
        try { if (!tvVideo.paused && tvVideo.readyState >= 3) tvVideo.play(); } catch (e) { /* ignora */ }
    });
    tvVideo.addEventListener('error', () => {
        try { if (tvVideo.error && tvVideo.error.code === 4) {
            if (window._tvHls) { try { window._tvHls.startLoad(); } catch (e) { /* ignora */ } }
        } } catch (e) { /* ignora */ }
    });
    tvVideo.addEventListener('seeking', () => {
        try { if (tvVideo.buffered && tvVideo.buffered.length > 0) { /* SourceBuffer acessível */ } } catch (e) { /* ignora InvalidStateError */ }
    });

    async function refreshTVStreamToken() {
        try {
            var response = await fetch('/api/stream/refresh/' + itemId, {headers: {'Accept': 'application/json'}});
            var data = await response.json();
            if (data.can_play && data.stream_token) {
                streamToken = data.stream_token;
                return true;
            }
        } catch (error) {}
        return false;
    }

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

    function initTVPlayer() {
        var streamUrl = buildTVStreamUrl();

        if (isHls && typeof Hls !== 'undefined' && Hls.isSupported()) {
            loadTVHls(streamUrl, 0);
        } else {
            playDirect(streamUrl);
        }

        playbackTimer = setTimeout(function() {
            if (!playbackStarted) {
                showTVError('Demorando muito', 'O canal esta demorando para carregar. Pode estar offline.');
            }
        }, 60000);
    }

    function playDirect(url) {
        if (isLikelyMpegTs && typeof mpegts !== 'undefined' && mpegts.isSupported()) {
            var mpegPlayer = mpegts.createPlayer({type: 'mpegts', isLive: false, url: url}, {enableWorker: true, lazyLoad: false, autoCleanupSourceBuffer: true});
            mpegPlayer.attachMediaElement(tvVideo);
            mpegPlayer.load();
            mpegPlayer.play().catch(function() {});
            mpegPlayer.on(mpegts.Events.ERROR, function() {
                showTVError('Erro de Reprodução', 'Não foi possível carregar o conteúdo. Tente novamente.');
            });
            window._mpegtsPlayer = mpegPlayer;
            return;
        }
        tvVideo.src = url;
        try { tvVideo.play(); } catch (err) {
            var msg = 'Nao foi possivel reproduzir. ';
            if (err.name === 'NotAllowedError') msg += 'Toque na tela para iniciar.';
            else msg += err.message || 'Erro desconhecido.';
            showTVError('Erro de Reprodução', msg);
        }
    }

    var _tvRetryCount = 0;
    var _tvMaxRetries = 100;

    function loadTVHls(url, retries) {
        if (typeof retries !== 'undefined') _tvRetryCount = retries;
        if (typeof Hls === 'undefined') {
            playDirect(url);
            return;
        }
        var hls;
        try {
            hls = new Hls({
                liveSyncDurationCount: 3,
                liveMaxLatencyDurationCount: 8,
                enableWorker: true,
                lowLatencyMode: false,
                maxBufferLength: 30,
                backBufferLength: 15,
                manifestLoadingTimeOut: 15000,
                manifestLoadingMaxRetry: 4,
                levelLoadingTimeOut: 15000,
                fragLoadingTimeOut: 30000,
                startFragPrefetch: true,
            });
        } catch(e) {
            playDirect(url);
            return;
        }

        hls.loadSource(url);
        hls.attachMedia(tvVideo);

        hls.on(Hls.Events.MANIFEST_PARSED, function() {
            try { var p = tvVideo.play(); if (p && typeof p.catch === 'function') p.catch(function(err) {
                if (err.name === 'NotAllowedError') { showTVOverlay(); }
            }); } catch (e) { /* ignora InvalidStateError do SourceBuffer */ }
        });

        hls.on(Hls.Events.FRAG_LOADED, function() {
            try { tvVideo.play(); } catch (e) { /* ignora */ }
        });

        hls.on(Hls.Events.ERROR, function(event, data) {
            if (data.fatal) {
                if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
                    hls.destroy();
                    _tvRetryCount++;
                    if (_tvRetryCount < _tvMaxRetries) {
                        refreshTVStreamToken().finally(function() { setTimeout(function() { loadTVHls(buildTVStreamUrl(), _tvRetryCount); }, Math.min(15000, 3000 + _tvRetryCount * 1000)); });
                    } else {
                        showTVError('Canal Indisponivel', 'Canal offline ou sem sinal apos ' + _tvMaxRetries + ' tentativas.');
                    }
                } else {
                    hls.destroy();
                    _tvRetryCount++;
                    if (_tvRetryCount < _tvMaxRetries) {
                        refreshTVStreamToken().finally(function() { setTimeout(function() { loadTVHls(buildTVStreamUrl(), _tvRetryCount); }, Math.min(15000, 4000 + _tvRetryCount * 1000)); });
                    } else {
                        playDirect(url);
                    }
                }
            }
        });

        window._tvHls = hls;
    }

    function showTVError(title, message) {
        tvVideo.style.display = 'none';
        tvError.style.display = 'flex';
        tvError.querySelector('h2').textContent = title || 'Canal Indisponível';
        if (message) {
            tvError.querySelector('p').innerHTML = message;
        }
    }

    function setNavbarVisible() {
        var nav = document.getElementById('tvNav');
        if (nav) nav.classList.add('hidden');
    }

    function isModalOpen() {
        return document.querySelector('.tv-modal-overlay.active, .tv-popup-overlay.active') !== null;
    }

    function showTVOverlay() {
        overlayVisible = true;
        tvOverlay.classList.add('visible');
        setNavbarVisible(false);
        if (typeof TVNav !== 'undefined' && TVNav.setScope) TVNav.setScope(tvOverlay);
        if (overlayTimer) clearTimeout(overlayTimer);
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }
        overlayTimer = setTimeout(hideTVOverlay, 5000);
        setTimeout(function() {
            var first = tvOverlay.querySelector('.tv-focusable');
            if (first) {
                first.focus();
                if (typeof TVNav !== 'undefined' && TVNav.refresh) TVNav.refresh();
            }
        }, 100);
    }

    function hideTVOverlay() {
        overlayVisible = false;
        tvOverlay.classList.remove('visible');
        setNavbarVisible(false);
        if (typeof TVNav !== 'undefined' && TVNav.clearScope) TVNav.clearScope();
        if (playbackStarted && !document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        }
    }

    function toggleTVOverlay() {
        if (isModalOpen()) return;
        if (overlayVisible) { hideTVOverlay(); }
        else { showTVOverlay(); }
    }

    tvVideo.addEventListener('click', function() {
        if (isModalOpen()) return;
        if (overlayVisible) { hideTVOverlay(); }
        else { showTVOverlay(); }
    });

    document.addEventListener('keydown', function(e) {
        if (isModalOpen()) {
            // Let TVNav handle modal navigation — do nothing here
            return;
        }
        if (e.key === 'Backspace' || e.key === 'Escape') {
            if (overlayVisible) {
                hideTVOverlay();
                e.preventDefault();
            } else {
                showTVOverlay();
                e.preventDefault();
            }
            return;
        }
        if (!playbackStarted && tvVideo.paused && (e.key === 'Enter' || e.key === ' ')) {
            e.preventDefault();
            tvVideo.play().then(function() {
                playbackStarted = true;
                tvVideo.muted = false;
                if (playbackTimer) clearTimeout(playbackTimer);
                showTVOverlay();
            }).catch(function() {});
            return;
        }
        if (!overlayVisible) {
            showTVOverlay();
        }
    });

    tvVideo.addEventListener('play', function() { showTVOverlay(); });

    document.addEventListener('fullscreenchange', function() {
        if (!document.fullscreenElement && !overlayVisible && playbackStarted) {
            showTVOverlay();
        }
    });

    // Favorites
    var tvFavBtn = document.getElementById('tvPlayerFavBtn');

    function updateTVFavButton(favorited) {
        if (!tvFavBtn) return;
        tvFavBtn.classList.toggle('active', !!favorited);
        tvFavBtn.textContent = favorited ? '⭐ Favoritado' : '☆ Favoritar';
        tvFavBtn.setAttribute('aria-pressed', favorited ? 'true' : 'false');
    }

    function toggleTVFav() {
        if (!tvFavBtn || tvFavBtn.disabled) return;
        tvFavBtn.disabled = true;
        var payload = itemTipo === 'series' && itemSeriesName
            ? {series_name: itemSeriesName}
            : {canal_id: itemId};
        fetch('/api/favorites/toggle', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (!r.ok) throw new Error('favorite request failed');
            return r.json();
        }).then(function(data) {
            if (data && typeof data.favorited !== 'undefined') updateTVFavButton(data.favorited);
            showTVOverlay();
        }).catch(function() {
            showTVOverlay();
        }).finally(function() {
            tvFavBtn.disabled = false;
        });
    }

    fetch('/api/favorites/check/' + itemId)
        .then(function(r) { return r.json(); })
        .then(function(data) { updateTVFavButton(data.favorited); })
        .catch(function() {});

    // Fullscreen & PiP
    function toggleTVFullscreen() {
        if (document.fullscreenElement) { document.exitFullscreen(); }
        else { document.documentElement.requestFullscreen(); }
        showTVOverlay();
    }

    function toggleTVPip() {
        try {
            if (document.pictureInPictureElement) { document.exitPictureInPicture(); }
            else { tvVideo.requestPictureInPicture(); }
        } catch (err) {}
        showTVOverlay();
    }

    // EPG
    {% if tipo == 'live' %}
    (function() {
        var epgBar = document.getElementById('tvPlayerEpg');
        if (!epgBar) return;

        function loadTVEpg() {
            fetch('/api/epg/' + itemId)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data.current && !data.next) { epgBar.style.display = 'none'; return; }
                    epgBar.style.display = 'flex';
                    if (data.current) {
                        document.getElementById('tvEpgNowTitle').textContent = data.current.title;
                        document.getElementById('tvEpgNowTime').textContent = data.current.start_brt + ' - ' + data.current.end_brt;
                    }
                    if (data.next) {
                        document.getElementById('tvEpgNextTitle').textContent = data.next.title;
                        document.getElementById('tvEpgNextTime').textContent = '\uD83D\uDD50 ' + data.next.start_brt;
                    }
                    window._tvEpgPrograms = data.programs || [];
                })
                .catch(function() {});
        }
        loadTVEpg();
        setInterval(loadTVEpg, 30000);
    })();
    {% endif %}

    function openTVEpg() {
        var modal = document.getElementById('tvEpgModal');
        if (!modal) return;
        var list = document.getElementById('tvEpgList');

        function renderEpg(progs) {
            if (!progs || progs.length === 0) {
                list.innerHTML = '<p style="color:var(--tv-text-muted); padding:20px; text-align:center;">Nenhum programa encontrado.</p>';
            } else {
                list.innerHTML = progs.map(function(p) {
                    var cur = p.is_current ? ' is-current' : '';
                    var liveTag = p.is_current ? ' <span class="tv-epg-live-tag">AO VIVO</span>' : '';
                    return '<div class="tv-epg-item' + cur + ' tv-focusable" tabindex="0"><div class="tv-epg-item-time">' + p.start_brt + ' - ' + p.end_brt + liveTag + '</div><div class="tv-epg-item-title">' + p.title + '</div>' + (p.description ? '<div class="tv-epg-item-desc">' + p.description + '</div>' : '') + '</div>';
                }).join('');
            }
            modal.classList.add('active');
            setTimeout(function() {
                if (typeof TVNav !== 'undefined' && TVNav.setScope) {
                    TVNav.setScope(modal);
                }
            }, 200);
        }

        var progs = window._tvEpgPrograms;
        if (progs && progs.length > 0) {
            renderEpg(progs);
        } else {
            fetch('/api/epg/' + itemId)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    window._tvEpgPrograms = data.programs || [];
                    renderEpg(window._tvEpgPrograms);
                })
                .catch(function() {
                    renderEpg([]);
                });
        }
    }

    function closeTVEpg() {
        document.getElementById('tvEpgModal').classList.remove('active');
        TVNav.clearScope();
        showTVOverlay();
        setTimeout(function() {
            var btn = document.querySelector('.tv-player-epg-btn');
            if (btn) btn.focus();
            TVNav.refresh();
        }, 100);
    }

    // ═══════════════════════════════════════════════
    // Watch Time Tracking & Remaining Time Updates
    // ═══════════════════════════════════════════════
    var totalWatched = 0;
    var watchInterval = null;

    function updateTVRemaining(seconds) {
        var bar = document.getElementById('tvPlayerInfoText');
        if (!bar) return;
        if (isPremium) {
            bar.innerHTML = '⭐ Premium - Acesso Ilimitado';
            return;
        }
        var h = Math.floor(seconds / 3600);
        var m = Math.floor((seconds % 3600) / 60);
        if (seconds <= 0) {
            bar.innerHTML = '⏰ Tempo esgotado! <span style="color:var(--gold);">Assine Premium</span>';
            tvVideo.pause();
        } else {
            bar.innerHTML = '⏱️ Restam ' + h + 'h ' + m + 'm';
        }
    }

    function sendTVWatchTime() {
        if (totalWatched > 0) {
            fetch('/api/consume_time', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({seconds: totalWatched})
            }).then(function(r) { return r.json(); }).then(function(data) {
                if (!isPremium) updateTVRemaining(data.remaining);
            }).catch(function() {});
            totalWatched = 0;
        }
    }

    var tvHeartbeatInterval = null;
    function sendTVHeartbeat() {
        fetch('/api/watch_heartbeat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId})
        }).catch(function() {});
    }
    function startTVHeartbeat() {
        if (tvHeartbeatInterval) return;
        sendTVHeartbeat();
        tvHeartbeatInterval = setInterval(sendTVHeartbeat, 15000);
    }
    function stopTVHeartbeat() {
        if (tvHeartbeatInterval) { clearInterval(tvHeartbeatInterval); tvHeartbeatInterval = null; }
    }
    function sendTVWatchStop() {
        fetch('/api/watch_stop', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId})
        }).catch(function() {});
    }
    tvVideo.addEventListener('play', function() {
        if (watchInterval) clearInterval(watchInterval);
        watchInterval = setInterval(function() { totalWatched += 5; }, 5000);
        startTVHeartbeat();
    });
    tvVideo.addEventListener('pause', function() { sendTVWatchTime(); sendTVWatchStop(); stopTVHeartbeat(); });
    tvVideo.addEventListener('ended', function() { sendTVWatchTime(); sendTVWatchStop(); stopTVHeartbeat(); });
    window.addEventListener('beforeunload', function() { sendTVWatchTime(); sendTVWatchStop(); stopTVHeartbeat(); if (watchInterval) clearInterval(watchInterval); });
    setInterval(function() { if (totalWatched >= 30) sendTVWatchTime(); }, 10000);

    // Online Viewers
    function updateTVOnlineViewers() {
        fetch('/api/online_viewers/' + itemId)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                document.getElementById('tvPlayerOnlineCount').textContent = data.online || 0;
            })
            .catch(function() {});
    }
    updateTVOnlineViewers();
    setInterval(updateTVOnlineViewers, 60000);

    // Initial overlay
    setTimeout(function() { showTVOverlay(); }, 1000);

    // ═══════════════════════════════════════════════
    // Report Problem (TV Player)
    // ═══════════════════════════════════════════════
    function openTVReport() {
        var m = document.getElementById('tvReportModal');
        m.classList.add('active');
        setTimeout(function() {
            TVNav.setScope(m);
            var first = m.querySelector('.tv-focusable');
            if (first) { first.focus(); TVNav.refresh(); }
        }, 200);
    }

    function closeTVReport() {
        var m = document.getElementById('tvReportModal');
        m.classList.remove('active');
        TVNav.clearScope();
        showTVOverlay();
    }

    document.getElementById('tvReportModal').addEventListener('click', function(e) {
        if (e.target === this) closeTVReport();
    });

    function submitTVReport(issueType) {
        fetch('/api/report', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId, issue_type: issueType})
        }).then(function(r) { return r.json(); }).then(function(data) {
            if (data.ok) {
                document.getElementById('tvReportFormOptions').style.display = 'none';
                document.getElementById('tvReportSuccess').style.display = 'block';
                var btn = document.getElementById('tvReportBtn');
                btn.textContent = '✅ Reportado';
                btn.classList.add('active');
                btn.onclick = null;
                setTimeout(closeTVReport, 2000);
            } else {
                alert(data.error || 'Erro ao enviar reporte.');
            }
        }).catch(function() { alert('Erro ao enviar reporte.'); });
    }

    (function checkTVReportStatus() {
        fetch('/api/report/check/' + itemId)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.reported) {
                    var btn = document.getElementById('tvReportBtn');
                    btn.textContent = '✅ Reportado';
                    btn.classList.add('active');
                    btn.onclick = null;
                }
            });
    })();

    // Os botoes usam onclick no markup e o player roda dentro de um IIFE.
    // Expor as acoes evita que Enter/clique encontre funcoes indefinidas.
    window.seekTV = seekTV;
    window.toggleTVPlayPause = toggleTVPlayPause;
    window.toggleTVFav = toggleTVFav;
    window.toggleTVFullscreen = toggleTVFullscreen;
    window.toggleTVPip = toggleTVPip;
    window.openTVReport = openTVReport;
    window.closeTVReport = closeTVReport;
    window.submitTVReport = submitTVReport;
})();
</script>
{% endblock %}