<?php
require_once "../includes/db.php";
require_once "../includes/functions.php";

// Fetch champion stats
$stmt = $pdo->query("
    SELECT 
        c.id,
        c.name,
        c.class_name,
        cs.total_xp,
        cs.level
    FROM champions c
    LEFT JOIN champion_stats cs ON cs.champion_id = c.id
    ORDER BY cs.total_xp DESC
");
$champions = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Champion Ladder</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .ladder-container {
            width: 900px;
            margin: 0 auto;
            color: #eee;
        }

        .ladder-title {
            text-align: center;
            color: #ffcc66;
            margin-bottom: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: #1a1a1f;
            border: 1px solid #444;
        }

        th, td {
            padding: 10px;
            border-bottom: 1px solid #333;
        }

        th {
            background: #2a2a30;
            color: #ffcc66;
        }

        tr:hover {
            background: #222;
        }

        .chart-container {
            margin-top: 40px;
            background: #1a1a1f;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #444;
        }
    </style>
</head>
<body>

<div class="ladder-container">

    <h1 class="ladder-title">Champion Ladder</h1>

    <table>
        <tr>
            <th>Rank</th>
            <th>Champion</th>
            <th>Class</th>
            <th>Level</th>
            <th>Total XP</th>
        </tr>

        <?php
        $rank = 1;
        foreach ($champions as $champ):
        ?>
            <tr>
                <td><?= $rank ?></td>
                <td>
                    <a href="champion_detail.php?id=<?= $champ['id'] ?>" style="color:#ffcc66;">
                        <?= $champ['name'] ?>
                    </a>
                </td>
                <td><?= $champ['class_name'] ?></td>
                <td><?= $champ['level'] ?></td>
                <td><?= number_format($champ['total_xp']) ?></td>
            </tr>
        <?php
        $rank++;
        endforeach;
        ?>
    </table>

    <div class="chart-container">
        <h2 style="color:#ffcc66; text-align:center;">XP Comparison</h2>
        <canvas id="xpChart"></canvas>
    </div>

</div>

<script>
const ctx = document.getElementById('xpChart').getContext('2d');

const xpChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            <?php foreach ($champions as $c) echo "'" . $c['name'] . "',"; ?>
        ],
        datasets: [{
            label: 'Total XP',
            data: [
                <?php foreach ($champions as $c) echo $c['total_xp'] . ","; ?>
            ],
            backgroundColor: [
                'rgba(255, 204, 102, 0.7)',
                'rgba(102, 153, 255, 0.7)',
                'rgba(153, 255, 153, 0.7)',
                'rgba(255, 153, 153, 0.7)',
                'rgba(204, 153, 255, 0.7)',
                'rgba(255, 102, 102, 0.7)',
                'rgba(102, 255, 204, 0.7)'
            ],
            borderColor: '#ffcc66',
            borderWidth: 1
        }]
    },
    options: {
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: { color: '#eee' }
            },
            x: {
                ticks: { color: '#eee' }
            }
        }
    }
});
</script>

</body>
</html>