<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Pragma: no-cache");

$paths = [
    __DIR__ . '/api/db/panaci_futebol_premium.db',
    __DIR__ . '/db/panaci_futebol_premium.db',
    $_SERVER['DOCUMENT_ROOT'] . '/2026/api/db/panaci_futebol_premium.db'
];

$db_path = null;
foreach ($paths as $path) {
    if (file_exists($path)) {
        $db_path = $path;
        break;
    }
}

if (!$db_path) {
    die("<body style='background:transparent; color:#fff; display:flex; align-items:center; justify-content:center; height:100vh;'>BANCO NÃO ENCONTRADO</body>");
}

try {
    $pdo = new PDO("sqlite:" . $db_path);
    $all_games = $pdo->query("SELECT * FROM game_settings WHERE show_games = 1 ORDER BY id DESC")->fetchAll(PDO::FETCH_ASSOC);
    
    // Lógica para quando não houver jogos
    $no_games = empty($all_games);
    $chunks = !$no_games ? array_chunk($all_games, 2) : [];
} catch(PDOException $e) { exit(); }

$caminho_escudos = file_exists(__DIR__ . '/escudos') ? 'escudos/' : '../escudos/';
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* Fundo Totalmente Transparente */
        html, body { 
            width: 100%; height: 100%; 
            overflow: hidden; 
            background-color: transparent !important; 
            font-family: sans-serif; 
        }
        
        body { 
            display: flex; align-items: center; justify-content: center; 
        }

        .container {
            width: 100%; height: 100%; 
            background: transparent; 
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }

        /* Mensagem de Erro/Sem Jogos - Transparente e Branco */
        .msg-vazio {
            background: transparent; 
            padding: 30px;
            text-align: center;
            color: #FFFFFF; /* Cor alterada para branco */
            font-weight: bold;
            font-size: 1.5rem;
            line-height: 1.4;
        }

        .img-bola-vazio {
            width: 120px; /* Tamanho da bola */
            margin-bottom: 15px;
        }

        .topo-data-container {
            display: flex; align-items: center; 
            width: 35%; 
            margin-bottom: 20px;
        }
        .linha { flex: 1; height: 1px; background: rgba(255,255,255,0.5); }
        .texto-data { padding: 0 8px; color: white; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap; }

        .dupla-jogos { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; width: 100%; }
        .card-individual { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 45%; }

        .campeonato-nome { font-size: 0.7rem; font-weight: 700; margin-bottom: 10px; text-shadow: 1px 1px 3px #000; text-transform: uppercase; }
        .match-area { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .escudo { width: 85px; height: 85px; object-fit: contain; } 
        .vs-img { width: 35px; }
        .hora-jogo { font-size: 1.2rem; font-weight: 900; margin-bottom: 2px; text-shadow: 2px 2px 4px #000; }
        .watch-label { font-size: 0.65rem; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; opacity: 0.8; }

        .canal-box { 
            padding: 4px 15px; 
            border-radius: 50px; 
            font-weight: 800; 
            font-size: 0.75rem; 
            box-shadow: 0 2px 5px #000; 
            text-align: center; 
            min-width: 100px;
        }

        /* --- TV MANTÉM TAMANHO --- */
        .is-tv .topo-data-container { width: 50%; margin-bottom: 40px; }
        .is-tv .linha { height: 2px; background: white; }
        .is-tv .texto-data { font-size: 1.8rem; padding: 0 15px; }
        .is-tv .campeonato-nome { font-size: 1rem !important; margin-bottom: 20px !important; }
        .is-tv .match-area { gap: 25px !important; margin-bottom: 25px !important; }
        .is-tv .escudo { width: 110px !important; height: 110px !important; }
        .is-tv .vs-img { width: 45px !important; }
        .is-tv .hora-jogo { font-size: 1.8rem !important; }
        .is-tv .watch-label { font-size: 0.9rem !important; }
        .is-tv .canal-box { font-size: 1.2rem !important; padding: 10px 40px !important; }
        
        .fade { animation: fadeIn 0.8s; }
        @keyframes fadeIn { from { opacity: 0.3; } to { opacity: 1; } }
    </style>
</head>
<body id="bgBody">
    <div class="container" id="mainContainer">
        <?php if ($no_games): ?>
            <div class="msg-vazio">
                <img src="https://i.postimg.cc/4xQ2Bc7P/semjogosrelevanteshoje.png" class="img-bola-vazio"><br>
                SEM JOGOS RELEVANTES HOJE!<br>VOLTE AMANHÃ 👋
            </div>
        <?php else: ?>
            <div class="topo-data-container" id="topoData">
                <div class="linha"></div>
                <div class="texto-data" id="txtDataTop">JOGOS</div>
                <div class="linha"></div>
            </div>
            <div id="gameContent" class="dupla-jogos fade"></div>
        <?php endif; ?>
    </div>

    <script>
        const chunks = <?= json_encode($chunks) ?>;
        const caminhoEscudos = '<?= $caminho_escudos ?>';
        let currentIndex = 0;

        function updateGame() {
            if (chunks.length === 0) return;

            const pair = chunks[currentIndex];
            const content = document.getElementById('gameContent');
            const dataTop = document.getElementById('txtDataTop');
            
            dataTop.innerText = pair[0].game_data_top || "JOGOS";
            
            let html = '';
            pair.forEach(g => {
                let imgCasa = g.game_casa.startsWith('http') ? g.game_casa : caminhoEscudos + g.game_casa + ".png";
                let imgFora = g.game_fora.startsWith('http') ? g.game_fora : caminhoEscudos + g.game_fora + ".png";
                
                html += `
                <div class="card-individual">
                    <div class="campeonato-nome" style="color: ${g.top_text_color}">${g.game_top}</div>
                    <div class="match-area">
                        <img src="${imgCasa}" class="escudo" onerror="this.src='https://placehold.co/100/0f172a/fff?text=?'">
                        <img src="${g.vs_url}" class="vs-img">
                        <img src="${imgFora}" class="escudo" onerror="this.src='https://placehold.co/100/0f172a/fff?text=?'">
                    </div>
                    <div class="hora-jogo" style="color: ${g.label_watch_color}">${g.game_hora}</div>
                    <div class="watch-label" style="color: ${g.label_watch_color}">Onde Assistir</div>
                    <div class="canal-box" style="color: ${g.canal_text_color}; background-color: ${g.canal_bg_color}">
                        ${g.game_canal}
                    </div>
                </div>`;
            });

            content.innerHTML = html;
            currentIndex = (currentIndex + 1) % chunks.length;
        }

        (function() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.includes("tv") || ua.includes("smarttv") || (window.innerWidth >= 1200)) {
                document.getElementById('mainContainer').classList.add('is-tv');
            }
        })();

        if (chunks.length > 0) {
            updateGame();
            if (chunks.length > 1) { setInterval(updateGame, 8000); }
        }
    </script>
</body>
</html>
