document.addEventListener("DOMContentLoaded", () => {
    let buildingNames = {};
    let unitNames = {};

    // Fetch building names first
    fetch("/api/buildings")
        .then(res => res.json())
        .then(data => {
            buildingNames = data;
        });

    // Fetch unit names
    fetch("/api/units")
        .then(res => res.json())
        .then(data => {
            unitNames = data;
        });

    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);
                        showTownMenu(selectedTown);
                    });
                });
            }

            // Step 2: Show town menu
            function showTownMenu(town) {
                let html = `<h4>${town.town_name}</h4>`;
                html += `<p>Select info to view:</p>`;
                html += `
                    <select id="town-info-select" class="form-select mb-2">
                        <option value="main">Main Info</option>
                        <option value="buildingOrder">Building Order</option>
                        <option value="researches">Researches</option>
                        <option value="units">Units</option>
                    </select>
                    <div id="town-info-display"></div>
                `;
                playerDetails.innerHTML = html;

                const infoSelect = document.getElementById("town-info-select");
                const infoDisplay = document.getElementById("town-info-display");

                function renderInfo(option) {
                    let displayHTML = "";
                    if (option === "main") {
                        displayHTML += `<h5>Main Info</h5>`;
                        displayHTML += `<ul>
                            <li>Sea: ${town.sea}</li>
                            <li>Wood: ${town.wood}</li>
                            <li>Stone: ${town.stone}</li>
                            <li>Iron: ${town.iron}</li>
                            <li>Population: ${town.population}</li>
                            <li>Points: ${town.points}</li>
                        </ul>`;
                        displayHTML += `<h5>Buildings</h5><ul>`;
                        Object.entries(town.buildings).forEach(([b, lvl]) => {
                            if (b !== "id") {
                                const name = buildingNames[b]?.name || b;
                                displayHTML += `<li>${name}: ${lvl}</li>`;
                            }
                        });
                        displayHTML += `</ul>`;
                    } else if (option === "buildingOrder") {
                        displayHTML += `<h5>Building Order</h5><ul>`;
                        town.buildingOrder.forEach(b => {
                            const name = buildingNames[b.building_type]?.name || b.building_type;
                            displayHTML += `<li>${name} (ID: ${b.id}) - To complete at: ${b.to_be_completed_at}</li>`;
                        });
                        displayHTML += `</ul>`;
                    } else if (option === "researches") {
                        displayHTML += `<h5>Researches</h5><ul>`;
                        Object.entries(town.researches).forEach(([r, val]) => {
                            if (r !== "id" && val) displayHTML += `<li>${r}</li>`;
                        });
                        displayHTML += `</ul>`;
                    } else if (option === "units") {
                        displayHTML += `<h5>Units</h5><ul>`;
                        Object.entries(town.units).forEach(([u, val]) => {
                            const name = unitNames[u]?.name || u;  // <-- Use Greek name mapping
                            displayHTML += `<li>${name}: ${val}</li>`;
                        });
                        displayHTML += `</ul>`;
                    }
                    infoDisplay.innerHTML = displayHTML;
                }

                // Initial render
                renderInfo(infoSelect.value);

                // Update on selection change
                infoSelect.addEventListener("change", () => {
                    renderInfo(infoSelect.value);
                });
            }
        });
});