document.addEventListener("DOMContentLoaded", () => {
    fetch("/api/data")
        .then(res => res.json())
        .then(data => {
            const playerList = document.getElementById("player-list");
            const playerDetails = document.getElementById("player-details");
            const attacksList = document.getElementById("attacks-list");

            // Fill player list
            Object.keys(data.players).forEach(name => {
                const div = document.createElement("div");
                div.className = "player-item";
                div.textContent = name;
                div.addEventListener("click", () => {
                    showTownSelection(data.players[name]);
                });
                playerList.appendChild(div);
            });

            // Fill incoming attacks panel
            if (data.attacks.length === 0) {
                attacksList.innerHTML = "<p class='p-2'>No incoming attacks</p>";
            } else {
                data.attacks.forEach(atk => {
                    const div = document.createElement("div");
                    div.className = "p-2 border-bottom";
                    div.innerHTML = `<strong>${atk.player}</strong>: ${atk.target_town} (${atk.units || 'Unknown units'}) ETA: ${atk.eta}`;
                    attacksList.appendChild(div);
                });
            }

            // Step 1: Show list of towns for selected player
            function showTownSelection(player) {
                if (player.error) {
                    playerDetails.innerHTML = `<p style='color:red'>${player.error}</p>`;
                    return;
                }
                let html = `<h3>${player.player} (${player.player_id})</h3>`;
                html += `<p><strong>Last Update:</strong> ${player.timestamp}</p>`;
                html += `<h5>Select a town:</h5><ul>`;
                player.towns.forEach(town => {
                    html += `<li class="town-item" style="cursor:pointer;color:blue" data-townid="${town.town_id}">
                                ${town.town_name}
                             </li>`;
                });
                html += `</ul>`;
                playerDetails.innerHTML = html;

                // Attach click events for towns
                document.querySelectorAll(".town-item").forEach(item => {
                    item.addEventListener("click", () => {
                        const townId = parseInt(item.dataset.townid);
                        const selectedTown = player.towns.find(t => t.town_id === townId);
                        showTownDetails(selectedTown);
                    });
                });
            }

            // Step 2: Show town data
            function showTownDetails(town) {
                let html = `<h4>${town.town_name}</h4>`;
                html += `<p><strong>Points:</strong> ${town.points} | <strong>Population:</strong> ${town.population}</p>`;
                html += `<h5>Resources</h5>
                         <ul>
                            <li>Wood: ${town.wood}</li>
                            <li>Stone: ${town.stone}</li>
                            <li>Iron: ${town.iron}</li>
                         </ul>`;
                html += `<h5>Buildings</h5><ul>`;
                Object.entries(town.buildings).forEach(([b, lvl]) => {
                    if (b !== "id") {
                        html += `<li>${b}: ${lvl}</li>`;
                    }
                });
                html += `</ul>`;
                playerDetails.innerHTML = html;
            }
        });
});