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

// Get today's champion
$todaysChampion = getTodaysChampion($pdo);
$todaysChampionId = $todaysChampion['id'];

// Fetch all items
$stmt = $pdo->query("
    SELECT 
        i.id,
        i.title,
        i.subtitle,
        i.image_path,
        i.item_url,
        i.stats_json,
        i.champion_id,
        c.name AS champion_name
    FROM items i
    LEFT JOIN champions c ON c.id = i.champion_id
    ORDER BY i.id DESC
");
$items = $stmt->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Inventory</title>
    <link rel="stylesheet" href="../assets/css/style.css">
    <style>
        .inventory-container {
            width: 900px;
            margin: 0 auto;
            color: #eee;
        }

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

        .inventory-grid {
            display: grid;
            grid-template-columns: repeat(8, 70px);
            grid-auto-rows: 70px;
            gap: 6px;
            background: #111;
            padding: 10px;
            border: 1px solid #444;
        }

        .slot {
            background: #1a1a1f;
            border: 1px solid #333;
            position: relative;
            cursor: pointer;
        }

        .slot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .restricted {
            opacity: 0.3;
            filter: grayscale(100%);
        }

        #tooltip {
            position: fixed;
            background: rgba(0,0,0,0.9);
            color: #fff;
            padding: 10px;
            border: 1px solid #aaa;
            border-radius: 6px;
            display: none;
            z-index: 9999;
            max-width: 250px;
            font-size: 13px;
        }

        .item-title {
            font-weight: bold;
            color: #ffcc66;
        }

        .item-subtitle {
            font-size: 12px;
            color: #ccc;
        }

        .restricted-note {
            color: #ff6666;
            font-size: 12px;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<div class="inventory-container">

    <h1 class="inventory-title">Inventory</h1>
    <h3 style="text-align:center; margin-bottom:20px;">
        Today’s Champion: <?= $todaysChampion['name'] ?> (<?= $todaysChampion['class_name'] ?>)
    </h3>

    <div class="inventory-grid">

        <?php foreach ($items as $item): ?>

            <?php
            // Determine if item is usable today
            $restricted = ($item['champion_id'] !== null && $item['champion_id'] != $todaysChampionId);
            ?>

            <div class="slot <?= $restricted ? 'restricted' : '' ?>"
                 data-title="<?= htmlspecialchars($item['title']) ?>"
                 data-subtitle="<?= htmlspecialchars($item['subtitle']) ?>"
                 data-url="<?= htmlspecialchars($item['item_url']) ?>"
                 data-stats='<?= htmlspecialchars($item['stats_json']) ?>'
                 data-restricted="<?= $restricted ? '1' : '0' ?>"
                 data-champion="<?= htmlspecialchars($item['champion_name']) ?>">

                <?php if ($item['image_path']): ?>
                    <img src="../<?= $item['image_path'] ?>" alt="">
                <?php endif; ?>

            </div>

        <?php endforeach; ?>

    </div>

</div>

<div id="tooltip"></div>

<script>
const tooltip = document.getElementById("tooltip");

document.querySelectorAll(".slot").forEach(slot => {

    slot.addEventListener("mousemove", e => {
        const title = slot.dataset.title;
        const subtitle = slot.dataset.subtitle;
        const stats = JSON.parse(slot.dataset.stats || "{}");
        const restricted = slot.dataset.restricted === "1";
        const restrictedTo = slot.dataset.champion;

        let html = `<div class='item-title'>${title}</div>`;
        if (subtitle) html += `<div class='item-subtitle'>${subtitle}</div>`;

        html += "<hr>";

        for (const key in stats) {
            html += `<div><strong>${key}:</strong> ${stats[key]}</div>`;
        }

        if (restricted) {
            html += `<div class='restricted-note'>Usable only by ${restrictedTo}</div>`;
        }

        tooltip.innerHTML = html;
        tooltip.style.left = (e.pageX + 15) + "px";
        tooltip.style.top = (e.pageY + 15) + "px";
        tooltip.style.display = "block";
    });

    slot.addEventListener("mouseleave", () => {
        tooltip.style.display = "none";
    });

});
</script>

</body>
</html>