<?php
require_once 'header.php';

$db = getDB();

// Get all champions with progress
$stmt = $db->query("
    SELECT c.*, cp.level, cp.xp 
    FROM champions c 
    LEFT JOIN champion_progress cp ON c.id = cp.champion_id 
    ORDER BY cp.level DESC, cp.xp DESC
");
$champions = $stmt->fetchAll();
?>

<div class="ladder-container mb-20">
    <div class="ladder-header">
        <h2 style="color: var(--gold); font-size: 1.8rem;">🏆 Champion Ladder 🏆</h2>
        <p style="color: #888; margin-top: 5px;">All-Time Legend Rankings</p>
    </div>
    <?php foreach ($champions as $index => $champ): ?>
    <div class="ladder-row">
        <div class="ladder-rank">#<?php echo $index + 1; ?></div>
        <div class="ladder-champion">
            <div class="ladder-avatar">
                <img src="<?php echo getChampionImage($champ['name'], 'card'); ?>" 
                     alt="<?php echo $champ['name']; ?>"
                     onerror="this.parentElement.innerHTML='<span style=\'font-size: 2rem;\'><?php echo $champ['emoji']; ?></span>'">
            </div>
            <div class="ladder-info">
                <h3><?php echo $champ['name']; ?></h3>
                <p><?php echo $champ['title']; ?></p>
            </div>
        </div>
        <div class="ladder-stat">
            <div class="ladder-stat-value"><?php echo $champ['level']; ?></div>
            <div class="ladder-stat-label">Level</div>
        </div>
        <div class="ladder-stat">
            <div class="ladder-stat-value"><?php echo $champ['xp']; ?></div>
            <div class="ladder-stat-label">XP</div>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<div class="quest-grid">
    <?php foreach ($champions as $champ): 
        $maxXP = $champ['level'] * 100;
        $xpPercent = ($champ['xp'] / $maxXP) * 100;
    ?>
    <div class="champion-card" style="border-color: <?php echo $champ['color']; ?>">
        <img src="<?php echo getChampionImage($champ['name'], 'flyer'); ?>" 
             alt="<?php echo $champ['name']; ?>"
             class="champion-card-img"
             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
        <div style="display: none; height: 200px; align-items: center; justify-content: center; font-size: 4rem; background: #1a1a1a; border-radius: 5px; margin-bottom: 15px; border: 2px solid <?php echo $champ['color']; ?>;">
            <?php echo $champ['emoji']; ?>
        </div>
        <h3 style="color: <?php echo $champ['color']; ?>; font-size: 1.5rem; margin-bottom: 5px;"><?php echo $champ['name']; ?></h3>
        <p style="color: #888; font-size: 0.9rem; margin-bottom: 10px;"><?php echo $champ['title']; ?></p>
        
        <div class="xp-bar-container" style="height: 20px; margin: 10px 0;">
            <div class="xp-bar-fill" style="width: <?php echo $xpPercent; ?>%; font-size: 0.7rem;">
                Lvl <?php echo $champ['level']; ?>
            </div>
        </div>
        
        <p style="margin-top: 10px; font-size: 0.9rem; color: #aaa; text-align: center;">"<?php echo $champ['tagline']; ?>"</p>
        <p style="margin-top: 10px; font-size: 0.8rem; color: #666;"><?php echo $champ['description']; ?></p>
    </div>
    <?php endforeach; ?>
</div>

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


