{% extends "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>
    .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;
    }

    /* Controls Bar */
    .controls-bar {
        background: var(--bg-card);
        padding: 14px 20px;
        display: flex;
        gap: 10px;
        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: 10px 18px;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 0.85em;
        font-weight: 500;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .controls-bar button:hover {
        background: var(--bg-elevated);
        border-color: var(--border-hover);
        color: var(--text-primary);
    }
    .controls-bar .fav-player {
        background: var(--bg-surface);
        font-size: 1em;
        min-width: 44px;
        justify-content: center;
    }
    .controls-bar .fav-player.active {
        background: rgba(245,197,24,0.1);
        border-color: var(--gold);
        color: var(--gold);
    }
    .controls-bar .channel-name {
        color: var(--text-muted);
        font-size: 0.85em;
        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);
    }
    .controls-bar .report-btn.reported {
        background: rgba(245,197,24,0.1);
        border-color: var(--gold);
        color: var(--gold);
        pointer-events: none;
    }

    /* 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">
    <a href="javascript:void(0)" onclick="window.history.back(); return false;" class="back-link" id="backBtn">
        ← Voltar
    </a>
    <script>
    (function(){
        if (document.referrer && document.referrer.includes(location.hostname)) {
            document.getElementById('backBtn').onclick = function(){ window.history.back(); };
        } else {
            var tipo = '{{ tipo }}';
            var url = tipo === 'movie' ? '/filmes' : tipo === 'series' ? '/series' : '/canais';
            document.getElementById('backBtn').onclick = function(){ window.location.href = url; };
        }
    })();
    </script>

    <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 %}

    <div class="video-container">
        <video id="videoPlayer" controls autoplay playsinline></video>
        <div class="controls-bar">
            <button class="fav-player" id="favBtnPlayer" onclick="toggleFavPlayer()">☆</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="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    const video = document.getElementById('videoPlayer');
    let streamToken = '{{ stream_token }}';
    const isHls = {{ 'true' if stream_is_hls else 'false' }};
    const isLive = isHls && {{ 'true' if stream_channel_id else 'false' }};
    const isLikelyMpegTs = !isHls && {{ 'false' if item.stream_url.lower().split('?')[0].endswith('.mp4') else 'true' }};
    const serverChannelId = '{{ stream_channel_id }}';

    const isPremium = {{ 'true' if current_user.is_premium_active or current_user.is_admin else 'false' }};
    const canPlay = {{ 'true' if can_play is defined and can_play else 'false' }};
    const blockDevice = {{ '"' + block_device + '"' if block_device is defined and block_device else 'null' }};
    const streamAlreadyRegistered = {{ 'true' if stream_already_registered is defined and stream_already_registered else 'false' }};
    let watchInterval = null;
    let totalWatched = 0;
    let currentChannelId = null;
    let heartbeatInterval = null;
    let deviceHeartbeatInterval = null;
    const itemId = {{ item.id }};

    function stopLive() {
        if (window._hlsPlayer) {
            window._hlsPlayer.destroy();
        }
        currentChannelId = null;
    }

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

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

    function initPlayer() {
        if (!canPlay) {
            document.getElementById('timerBar').innerHTML =
                '<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>';
            return;
        }

        startDeviceHeartbeat();
        if (isLive && serverChannelId) {
            currentChannelId = serverChannelId;
            const streamUrl = buildStreamUrl();
            let retryCount = 0;
            const maxRetries = 5;

            function tryLoad() {
                if (Hls.isSupported()) {
                    const hls = new Hls({
                        liveSyncDurationCount: 3,
                        liveMaxLatencyDurationCount: 8,
                        enableWorker: true,
                        lowLatencyMode: false,
                        maxBufferLength: 30,
                        manifestLoadingTimeOut: 15000,
                        manifestLoadingMaxRetry: 4,
                        levelLoadingTimeOut: 15000,
                        fragLoadingTimeOut: 30000,
                        startFragPrefetch: true,
                    });
                    hls.loadSource(streamUrl);
                    hls.attachMedia(video);
                    hls.on(Hls.Events.MANIFEST_PARSED, () => {
                        try {
                            const p = video.play();
                            if (p && typeof p.catch === 'function') p.catch(() => {});
                        } catch (e) {
                            // Ignora InvalidStateError do SourceBuffer
                        }
                    });
                    hls.on(Hls.Events.ERROR, (event, data) => {
                        if (data.fatal) {
                            if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
                                hls.destroy();
                                retryCount++;
                                if (retryCount < maxRetries) {
                                    refreshStreamToken().finally(() => setTimeout(tryLoad, Math.min(15000, 3000 + retryCount * 1000)));
                                } else {
                                    document.getElementById('timerBar').innerHTML =
                                        '<div style="color:var(--primary);">❌ Canal offline ou indisponível.</div>';
                                }
                            } else {
                                hls.destroy();
                                retryCount++;
                                if (retryCount < maxRetries) {
                                    refreshStreamToken().finally(() => setTimeout(tryLoad, Math.min(15000, 4000 + retryCount * 1000)));
                                }
                            }
                        }
                    });
                    hls.on(Hls.Events.FRAG_LOADED, () => {
                        try { video.play(); } catch (e) { /* ignora */ }
                    });
                    video.addEventListener('waiting', () => {
                        try { if (!video.paused && video.readyState >= 3) video.play(); } catch (e) { /* ignora */ }
                    });
                    video.addEventListener('error', () => {
                        try { if (video.error && video.error.code === 4) { hls && hls.startLoad(); } } catch (e) { /* ignora */ }
                    });
                    window._hlsPlayer = hls;
                } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                    video.src = streamUrl;
                    try { video.play(); } catch (e) { /* ignora */ }
                }
            }
            tryLoad();
            return;
        }

        const streamUrl = buildStreamUrl();
        if (isHls && Hls.isSupported()) {
            const hls = new Hls({ maxBufferLength: 30, manifestLoadingMaxRetry: 6, levelLoadingMaxRetry: 6, fragLoadingMaxRetry: 6 });
            hls.loadSource(streamUrl);
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, () => {
                try { const p = video.play(); if (p && typeof p.catch === 'function') p.catch(() => {}); } catch (e) { /* ignora */ }
            });
            hls.on(Hls.Events.FRAG_LOADED, () => {
                try { video.play(); } catch (e) { /* ignora */ }
            });
            video.addEventListener('waiting', () => {
                try { if (!video.paused && video.readyState >= 3) video.play(); } catch (e) { /* ignora */ }
            });
            video.addEventListener('error', () => {
                try { if (video.error && video.error.code === 4) { hls && hls.startLoad(); } } catch (e) { /* ignora */ }
            });
            let vodRetryCount = 0;
            hls.on(Hls.Events.ERROR, (event, data) => {
                if (!data.fatal) return;
                hls.destroy();
                vodRetryCount++;
                refreshStreamToken().finally(() => setTimeout(initPlayer, Math.min(15000, 3000 + vodRetryCount * 1000)));
            });
        } else if (isHls && video.canPlayType('application/vnd.apple.mpegurl')) {
            video.src = streamUrl;
            try { video.play(); } catch (e) { /* ignora */ }
        } else if (isLikelyMpegTs && typeof mpegts !== 'undefined' && mpegts.isSupported()) {
            const mpegPlayer = mpegts.createPlayer({type: 'mpegts', isLive: false, url: streamUrl}, {enableWorker: true, lazyLoad: false, autoCleanupSourceBuffer: true});
            mpegPlayer.attachMediaElement(video);
            mpegPlayer.load();
            mpegPlayer.play().catch(() => {});
            mpegPlayer.on(mpegts.Events.ERROR, function() {
                document.getElementById('timerBar').innerHTML = '<div style="color:var(--primary);">Erro ao carregar o conteúdo. Tente novamente.</div>';
            });
            window._mpegtsPlayer = mpegPlayer;
        } else {
            video.src = streamUrl;
            video.play().catch(() => {});
        }
    }
    initPlayer();

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

    window.addEventListener('beforeunload', () => { stopLive(); sendDeviceStreamStop(); });

    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; }
                document.getElementById('timerBar').innerHTML =
                    '<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; }
                document.getElementById('timerBar').innerHTML =
                    '<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;">' + (data.message || 'Esta conta ja esta reproduzindo em outro dispositivo.') + '</div>' +
                    '</div>';
            }
        }).catch(() => {});
    }
    function sendDeviceStreamStop() {
        fetch('/api/device_stream_stop', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({})
        }).catch(() => {});
    }

    function updateRemaining(seconds) {
        const h = Math.floor(seconds / 3600);
        const m = Math.floor((seconds % 3600) / 60);
        document.getElementById('remainingDisplay').textContent = h + 'h ' + m + 'm';
        if (seconds <= 0 && !isPremium) {
            document.getElementById('timerBar').innerHTML = '<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) document.getElementById('timerBar').querySelector('.timer-info').innerHTML = '<span class="premium-badge">⭐ Premium - Acesso Ilimitado</span>';

    function sendWatchTime() {
        if (totalWatched > 0) {
            fetch('{{ url_for('consume_time') }}', {
                method: 'POST',
                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', () => { sendWatchTime(); sendWatchStop(); stopHeartbeat(); });
    video.addEventListener('ended', () => { sendWatchTime(); sendWatchStop(); stopHeartbeat(); });
    window.addEventListener('beforeunload', () => { sendWatchTime(); sendWatchStop(); sendDeviceStreamStop(); if (watchInterval) clearInterval(watchInterval); stopHeartbeat(); stopDeviceHeartbeat(); });
    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() {
        fetch('/api/watch_stop', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({canal_id: itemId})
        }).catch(() => {});
    }

    function toggleFullscreen() {
        if (video.requestFullscreen) video.requestFullscreen();
        else if (video.webkitRequestFullscreen) video.webkitRequestFullscreen();
    }
    async function togglePIP() {
        try {
            if (document.pictureInPictureElement) await document.exitPictureInPicture();
            else await video.requestPictureInPicture();
        } catch (err) {}
    }

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

    function toggleFavPlayer() {
        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 ? '⭐' : '☆';
        });
    }

    (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 = '⭐';
            }
        });
    })();

    {% 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'; });
    });

    // Push history so back button works
    if (window.history && window.history.pushState) {
        window.history.pushState({player: true}, '', window.location.href);
        window.addEventListener('popstate', function(e) {
            window.location.href = '{{ url_for("canais") if tipo == "live" else url_for("filmes") if tipo == "movie" else url_for("series") }}';
        });
    }
</script>

/* Floating back button */
<style>
.floating-back {
    position: fixed; top: 12px; left: 12px; z-index: 9999;
    background: rgba(0,0,0,0.7); color: #fff; border: none; border-radius: 50%;
    width: 44px; height: 44px; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); transition: all 0.2s;
}
.floating-back:hover { background: rgba(114,137,218,0.9); transform: scale(1.1); }
</style>
<button class="floating-back" onclick="window.history.back()" title="Voltar">←</button>
{% endblock %}