<?php
session_start();

if (!isset($_SESSION['cliente_logado']) || $_SESSION['cliente_logado'] !== true) {
    header('Location: login.php');
    exit;
}

$jogos = json_decode(file_get_contents('../dados/jogos.json'), true) ?? [];

// Ordena por nome
usort($jogos, function($a, $b) {
    return strcmp($a['nome'], $b['nome']);
});

// Filtro por console
$consoleFiltro = $_GET['console'] ?? '';
if ($consoleFiltro) {
    $jogos = array_filter($jogos, function($j) use ($consoleFiltro) {
        return $j['console'] === $consoleFiltro;
    });
}

// Busca
$busca = $_GET['busca'] ?? '';
if ($busca) {
    $jogos = array_filter($jogos, function($j) use ($busca) {
        return stripos($j['nome'], $busca) !== false;
    });
}

// Consoles disponíveis
$consoles = array_unique(array_column($jogos, 'console'));
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Biblioteca de Jogos</title>
    <link rel="stylesheet" href="../admin/css/estilo.css">
    <style>
        /* Estilos específicos do cliente */
        .cliente-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .cliente-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: white;
            border-radius: 15px;
            box-shadow: var(--sombra);
            margin-bottom: 30px;
        }
        
        .cliente-header h1 {
            color: var(--azul-metalico);
            font-size: 28px;
        }
        
        .cliente-header .user-info {
            color: var(--cinza-escuro);
            font-weight: bold;
        }
        
        .cliente-header .user-info a {
            color: #ff4444;
            text-decoration: none;
            margin-left: 15px;
        }
        
        .filtros {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .filtros select,
        .filtros input,
        .filtros button {
            padding: 12px 20px;
            border: 2px solid var(--cinza-celeste);
            border-radius: 10px;
            font-size: 16px;
        }
        
        .filtros button {
            background: var(--azul-metalico);
            color: white;
            border: none;
            cursor: pointer;
            transition: 0.3s;
        }
        
        .filtros button:hover {
            background: var(--azul-metalico-claro);
        }
        
        .grid-jogos {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 25px;
        }
        
        .card-jogo {
            background: white;
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            box-shadow: var(--sombra);
            transition: 0.3s;
            border: 2px solid transparent;
        }
        
        .card-jogo:hover {
            transform: translateY(-10px);
            border-color: var(--azul-metalico);
        }
        
        .card-jogo .capa-jogo {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 10px;
            display: block;
            margin-bottom: 10px;
        }
        .card-jogo .console-icon {
            font-size: 32px;
        }
        
        .card-jogo .jogo-nome {
            font-weight: bold;
            font-size: 18px;
            color: var(--azul-metalico);
            margin: 10px 0;
        }
        
        .card-jogo .jogo-console {
            color: #666;
            font-size: 14px;
        }
        
        .card-jogo .btn-jogar {
            display: inline-block;
            margin-top: 15px;
            padding: 10px 25px;
            background: var(--azul-metalico);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            transition: 0.3s;
        }
        
        .card-jogo .btn-jogar:hover {
            background: var(--azul-metalico-claro);
            transform: scale(1.05);
        }
        
        .sem-jogos {
            text-align: center;
            padding: 50px;
            font-size: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="cliente-container">
        <div class="cliente-header">
            <div>
                <h1>🎮 Biblioteca de Jogos</h1>
                <span style="color: #666;">Bem-vindo, <?php echo htmlspecialchars($_SESSION['cliente_nome']); ?>!</span>
            </div>
            <div class="user-info">
                🕹️ <?php echo count($jogos); ?> jogos disponíveis
                <a href="logout.php">🚪 Sair</a>
            </div>
        </div>
        
        <!-- Filtros -->
        <div class="filtros">
            <form method="GET" style="display: flex; gap: 15px; flex-wrap: wrap; width: 100%;">
                <input type="text" name="busca" placeholder="🔍 Buscar jogo..." 
                       value="<?php echo htmlspecialchars($busca); ?>">
                
                <select name="console">
                    <option value="">Todos os Consoles</option>
                    <?php foreach ($consoles as $c): ?>
                        <option value="<?php echo $c; ?>" <?php echo $consoleFiltro === $c ? 'selected' : ''; ?>>
                            <?php echo $c; ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                
                <button type="submit">🔎 Filtrar</button>
                
                <?php if ($busca || $consoleFiltro): ?>
                    <a href="index.php" style="padding: 12px 20px; background: #666; color: white; text-decoration: none; border-radius: 10px;">
                        ✖️ Limpar
                    </a>
                <?php endif; ?>
            </form>
        </div>
        
        <!-- Grid de Jogos -->
        <div class="grid-jogos">
            <?php if (empty($jogos)): ?>
                <div class="sem-jogos" style="grid-column: 1/-1;">
                    😕 Nenhum jogo encontrado...
                    <?php if ($busca || $consoleFiltro): ?>
                        <br>Tente outros filtros!
                    <?php else: ?>
                        <br>Volte mais tarde, novos jogos serão adicionados!
                    <?php endif; ?>
                </div>
            <?php else: ?>
                <?php foreach ($jogos as $jogo): ?>
                    <div class="card-jogo">
                        <img class="capa-jogo"
                             src="<?php echo !empty($jogo['capa']) ? '../dados/capas/' . htmlspecialchars($jogo['capa']) : '../admin/' . htmlspecialchars($jogo['capa_padrao']); ?>"
                             alt="<?php echo htmlspecialchars($jogo['nome']); ?>">
                        <span class="console-icon">
                            <?php
                            $icones = [
                                'NES' => '🕹️',
                                'SNES' => '🎮',
                                'Mega Drive' => '⚡',
                                'Master System' => '📺',
                                'Arcade' => '🪙',
                                'Game Boy' => '🔋'
                            ];
                            echo $icones[$jogo['console']] ?? '🎯';
                            ?>
                        </span>
                        <div class="jogo-nome"><?php echo htmlspecialchars($jogo['nome']); ?></div>
                        <div class="jogo-console"><?php echo $jogo['console']; ?></div>
                        <a href="jogar.php?id=<?php echo $jogo['id']; ?>" class="btn-jogar">▶️ Jogar</a>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</body>
</html>