<?php
// URL da API
$url = "https://meusjogos.shop/dados_api.json";

// Tentar pegar os dados
$json = file_get_contents($url);

// Verificar se conseguiu pegar os dados
if ($json === false) {
    $erro = "Não foi possível conectar à API";
    $dados = [];
} else {
    $dados = json_decode($json, true);
    
    // Verificar se o JSON é válido
    if ($dados === null) {
        $erro = "Erro ao decodificar os dados";
        $dados = [];
    } else {
        $erro = null;
    }
}

// Separar os jogos
$andamento = [];
$finalizados = [];

if (!empty($dados) && is_array($dados)) {
    foreach ($dados as $jogo) {
        // Verificar se existe a chave 'status'
        if (isset($jogo['status'])) {
            $status = strtolower(trim($jogo['status']));
            
            if ($status == "em andamento" || $status == "andamento") {
                $andamento[] = $jogo;
            } elseif ($status == "finalizado") {
                $finalizados[] = $jogo;
            }
        }
    }
}

$total = count($dados);
?>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MEU FUT TOP - Jogos ao Vivo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(135deg, #0a0f1e 0%, #0a1927 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #fff;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 48px;
            background: linear-gradient(45deg, #00eaff, #00ffaa);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 30px rgba(0,234,255,0.3);
            margin-bottom: 10px;
        }

        .subtitle {
            color: #88aaff;
            font-size: 14px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .card {
            background: rgba(10, 25, 39, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            border: 1px solid rgba(0,234,255,0.3);
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 48px rgba(0,234,255,0.2);
        }

        .card-header {
            background: linear-gradient(135deg, rgba(0,234,255,0.2), rgba(0,255,170,0.1));
            padding: 20px;
            text-align: center;
            border-bottom: 2px solid #00eaff;
        }

        .card-header h2 {
            font-size: 24px;
            color: #00eaff;
        }

        .card-header .count {
            font-size: 14px;
            color: #88aaff;
            margin-top: 5px;
        }

        .jogos-list {
            max-height: 500px;
            overflow-y: auto;
            padding: 10px;
        }

        /* Scrollbar personalizada */
        .jogos-list::-webkit-scrollbar {
            width: 6px;
        }

        .jogos-list::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
        }

        .jogos-list::-webkit-scrollbar-thumb {
            background: #00eaff;
            border-radius: 10px;
        }

        .jogo-item {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 10px;
            transition: all 0.3s;
            border-left: 3px solid #00eaff;
        }

        .jogo-item:hover {
            background: rgba(0,234,255,0.1);
            transform: translateX(5px);
        }

        .times {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .time-casa, .time-fora {
            flex: 1;
            font-size: 16px;
        }

        .time-fora {
            text-align: right;
        }

        .placar {
            font-size: 24px;
            font-weight: bold;
            color: #00eaff;
            text-align: center;
            padding: 0 15px;
        }

        .vs {
            color: #88aaff;
            font-size: 12px;
            text-align: center;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #88aaff;
        }

        .empty-state .emoji {
            font-size: 48px;
            margin-bottom: 15px;
            display: block;
        }

        .total-card {
            background: rgba(0,234,255,0.1);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            border: 1px solid rgba(0,234,255,0.3);
        }

        .total-card h3 {
            color: #00eaff;
            font-size: 18px;
            margin-bottom: 10px;
        }

        .total-number {
            font-size: 36px;
            font-weight: bold;
            color: #fff;
        }

        .error-message {
            background: rgba(255,50,50,0.2);
            border: 1px solid #ff3333;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 32px;
            }
            
            .placar {
                font-size: 18px;
            }
            
            .time-casa, .time-fora {
                font-size: 14px;
            }
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }

        .ao-vivo-badge {
            display: inline-block;
            background: #ff3333;
            color: white;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 10px;
            animation: pulse 1.5s infinite;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>⚽ MEU FUT TOP ⚽</h1>
            <div class="subtitle">Acompanhe os jogos em tempo real</div>
        </div>

        <?php if(isset($erro) && $erro): ?>
            <div class="error-message">
                <strong>⚠️ Atenção:</strong> <?php echo $erro; ?><br>
                <small>Tentando carregar os dados...</small>
            </div>
        <?php endif; ?>

        <div class="grid">
            <!-- Jogos em Andamento -->
            <div class="card">
                <div class="card-header">
                    <h2>🎯 EM ANDAMENTO</h2>
                    <div class="count"><?php echo count($andamento); ?> jogos acontecendo agora</div>
                </div>
                <div class="jogos-list">
                    <?php if(count($andamento) > 0): ?>
                        <?php foreach($andamento as $jogo): ?>
                            <div class="jogo-item">
                                <div class="times">
                                    <div class="time-casa">
                                        <?php echo isset($jogo['casa']) ? htmlspecialchars($jogo['casa']) : (isset($jogo['time_casa']) ? htmlspecialchars($jogo['time_casa']) : 'Time Casa'); ?>
                                    </div>
                                    <div class="placar">
                                        <?php echo isset($jogo['placar']) ? htmlspecialchars($jogo['placar']) : (isset($jogo['gols']) ? htmlspecialchars($jogo['gols']) : '0x0'); ?>
                                    </div>
                                    <div class="time-fora">
                                        <?php echo isset($jogo['fora']) ? htmlspecialchars($jogo['fora']) : (isset($jogo['time_fora']) ? htmlspecialchars($jogo['time_fora']) : 'Time Fora'); ?>
                                    </div>
                                </div>
                                <div class="vs">
                                    <span class="ao-vivo-badge">AO VIVO</span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="empty-state">
                            <span class="emoji">⚽</span>
                            <p>Nenhum jogo em andamento no momento</p>
                            <small>Atualize a página para ver os últimos jogos</small>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Jogos Finalizados -->
            <div class="card">
                <div class="card-header">
                    <h2>🏁 FINALIZADOS</h2>
                    <div class="count"><?php echo count($finalizados); ?> jogos já encerrados</div>
                </div>
                <div class="jogos-list">
                    <?php if(count($finalizados) > 0): ?>
                        <?php foreach($finalizados as $jogo): ?>
                            <div class="jogo-item">
                                <div class="times">
                                    <div class="time-casa">
                                        <?php echo isset($jogo['casa']) ? htmlspecialchars($jogo['casa']) : (isset($jogo['time_casa']) ? htmlspecialchars($jogo['time_casa']) : 'Time Casa'); ?>
                                    </div>
                                    <div class="placar">
                                        <?php echo isset($jogo['placar']) ? htmlspecialchars($jogo['placar']) : (isset($jogo['gols']) ? htmlspecialchars($jogo['gols']) : '0x0'); ?>
                                    </div>
                                    <div class="time-fora">
                                        <?php echo isset($jogo['fora']) ? htmlspecialchars($jogo['fora']) : (isset($jogo['time_fora']) ? htmlspecialchars($jogo['time_fora']) : 'Time Fora'); ?>
                                    </div>
                                </div>
                                <div class="vs">
                                    ✓ Finalizado
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="empty-state">
                            <span class="emoji">📊</span>
                            <p>Nenhum jogo finalizado hoje</p>
                            <small>Os resultados aparecerão aqui</small>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Total de Jogos -->
        <div class="total-card">
            <h3>📊 Total de Jogos Hoje</h3>
            <div class="total-number"><?php echo $total; ?></div>
        </div>

        <!-- Debug: Mostrar estrutura dos dados se não houver jogos -->
        <?php if($total == 0 && !isset($erro)): ?>
            <div class="error-message" style="margin-top: 20px;">
                <strong>⚠️ Nenhum dado encontrado</strong><br>
                <small>A API não retornou nenhum jogo. Verifique a URL ou o formato dos dados.</small>
                <?php if($json): ?>
                    <details style="margin-top: 10px;">
                        <summary>Ver estrutura da resposta da API</summary>
                        <pre style="background: #000; padding: 10px; margin-top: 10px; overflow-x: auto; font-size: 12px;"><?php echo htmlspecialchars(substr($json, 0, 500)); ?></pre>
                    </details>
                <?php endif; ?>
            </div>
        <?php endif; ?>
    </div>

    <script>
        // Auto-refresh a cada 60 segundos
        setTimeout(function() {
            location.reload();
        }, 60000);
        
        // Animação suave para os itens
        const items = document.querySelectorAll('.jogo-item');
        items.forEach((item, index) => {
            item.style.animation = `fadeIn 0.5s ease ${index * 0.05}s`;
        });
        
        // Adicionar estilo para animação
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateX(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>