document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('.tab-button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    // Handle tab navigation
    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('active'));
            tabPanes.forEach(pane => pane.classList.remove('active'));

            tab.classList.add('active');
            document.getElementById(tab.dataset.tab).classList.add('active');
        });
    });

    // Fetch and display top users by balance
    async function fetchTopUsers() {
        const sortBy = document.getElementById('sort-users').value;
        const response = await fetch(`/top-users?sortBy=${sortBy}`);
        const data = await response.json();

        const topUsersContainer = document.getElementById('top-users');
        topUsersContainer.innerHTML = data.map(player => `
            <div class="card">
                <h3>${player.name} ${player.status === 'bronze' ? '[🔺]' : player.status === 'silver' ? '[🔹]' : '[🔸]'}</h3>
                <p>Баланс: <span class="money">${player.money} ₽</span></p>
                <p>Уровень: ${player.level}</p>
            </div>
        `).join('');
    }

    // Fetch and display top characters by balance
    async function fetchTopCharacters() {
        const sortBy = document.getElementById('sort-characters').value;
        const response = await fetch(`/top-characters?sortBy=${sortBy}`);
        const data = await response.json();

        const topCharactersContainer = document.getElementById('top-characters');
        topCharactersContainer.innerHTML = data.map(character => `
            <div class="card">
                <h3>${character.name}</h3>
                <p>Грязные деньги: ${character.dirtymoney} ₽</p>
                <p>Уровень: ${character.level}</p>
                <p>Сила: ${character.force}</p>
                <p>Интеллект: ${character.intelligence}</p>
                <p>Устойчивость: ${character.resilience}</p>
                <p>Выносливость: ${character.endurance}</p>
            </div>
        `).join('');
    }

    // Fetch and display enterprises
    async function fetchEnterprises() {
        const response = await fetch('/enterprises');
        const data = await response.json();

        const enterprisesContainer = document.getElementById('enterprises-list');
        enterprisesContainer.innerHTML = data.map(enterprise => `
            <div class="card">
                <h3>${enterprise.name} ${enterprise.icon}</h3>
                <p>Тип ресурса: ${enterprise.resourceType}</p>
                <p>Уровень: ${enterprise.level}</p>
                <p>Производительность: ${enterprise.efficiency} ед./час</p>
                <p>Емкость склада: ${enterprise.warehouseCapacity} ед.</p>
                <p>Текущие ресурсы: ${enterprise.currentResources} ед.</p>
                <p>Владелец: ${enterprise.owner}</p>
            </div>
        `).join('');
    }

    // Fetch and display businesses
    async function fetchBusinesses() {
        const sortBy = document.getElementById('sort-businesses').value;
        const response = await fetch(`/businesses?sortBy=${sortBy}`);
        const data = await response.json();

        const businessesContainer = document.getElementById('businesses-list');
        businessesContainer.innerHTML = data.map(business => `
            <div class="card">
                <h3>${business.name}</h3>
                <p>Владелец: ${business.owner}</p>
                <p>Баланс: ${business.balance} ₽</p>
                <p>Пользователи: ${business.usersCount}</p>
            </div>
        `).join('');
    }

    // Initial fetches
    fetchTopUsers();
    fetchTopCharacters();
    fetchEnterprises();
    fetchBusinesses();
});