<?php 
require_once 'session.php'; 
require_once 'db.php';

// On récupère uniquement les parcs possédant un slug d'API Queue-Times valide
try {
    $stmt = $pdo->query("SELECT id, nom, api_slug, cover_image, image_url FROM parcs WHERE api_slug IS NOT NULL AND api_slug != '' ORDER BY nom ASC");
    $parks = $stmt->fetchAll();
} catch (PDOException $e) {
    die("Erreur lors de la récupération des parcs : " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temps d'attentes | ParcoTrip</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/waittimes.css">
</head>
<body>

    <?php include_once 'sidebar.php'; ?>

    <main class="container" style="min-height: 75vh; padding: 40px 20px; max-width: 1200px; margin: 0 auto; box-sizing: border-box;">
        
        <div style="text-align: center; margin-bottom: 30px;">
            <h1 style="font-size: 2.3rem; font-weight: 800; color: #1a202c; margin-bottom: 10px;">Temps d'attente en direct ⏱️</h1>
            <p style="color: #718096; font-size: 1.1rem;">Découvrez l'affluence en temps réel et gérez vos rides.</p>
        </div>

        <div class="pt-grid-container">
            <?php if (empty($parks)): ?>
                <div style="grid-column: 1/-1; text-align: center; padding: 40px; color: #718096;">
                    <p>Aucun parc connecté à l'API n'est disponible pour le moment.</p>
                </div>
            <?php else: ?>
                <?php foreach ($parks as $park): ?>
                    
                    <div class="pt-park-card" 
                         data-slug="<?php echo htmlspecialchars($park['api_slug']); ?>" 
                         data-name="<?php echo htmlspecialchars($park['nom']); ?>"
                         onclick="ouvrirPopUp(this)">
                        
                        <div class="pt-cover-wrapper">
                            <?php if (!empty($park['cover_image']) && file_exists("img/covers/" . $park['cover_image'])): ?>
                                <img src="img/covers/<?php echo htmlspecialchars($park['cover_image']); ?>" alt="Photo" class="pt-park-img">
                            <?php elseif (!empty($park['image_url'])): ?>
                                <img src="<?php echo htmlspecialchars($park['image_url']); ?>" alt="Photo" class="pt-park-img">
                            <?php else: ?>
                                <img src="img/covers/default.jpg" alt="ParcoTrip" class="pt-park-img">
                            <?php endif; ?>
                        </div>

                        <div class="pt-card-details">
                            <h2><?php echo htmlspecialchars($park['nom']); ?></h2>
                            
                            <div class="pt-attendance-box" id="att-box-<?php echo htmlspecialchars($park['api_slug']); ?>">
                                <div class="pt-attendance-info">
                                    <span class="pt-text-info">Analyse en cours...</span>
                                    <span class="pt-badge low" style="background:#e2e8f0; color:#4a5568;">Attente</span>
                                </div>
                                <div class="pt-progress-bg">
                                    <div class="pt-progress-fill low" style="width: 0%;"></div>
                                </div>
                            </div>
                        </div>

                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </main>

    <div class="pt-modal-overlay" id="ridesModal">
        <div class="pt-modal-container">
            <div class="pt-modal-header">
                <h3 id="modalParkName">Nom du Parc</h3>
                <button class="pt-close-btn" id="closeModal" type="button" onclick="fermerPopUp()"><i class="fa-solid fa-xmark"></i></button>
            </div>
            <div class="pt-modal-scroll" id="modalRidesList"></div>
        </div>
    </div>

    <?php include_once 'footer.php'; ?>

    <script src="js/waittimes.js"></script>
</body>
</html>