document.addEventListener('DOMContentLoaded', function() {

    // --- Global State ---
    let myFavorites = []; // Holds the user's favorite players state
    let comparisonPlayer1 = null;
    let comparisonPlayer2 = null;

    // --- DOM Elements ---
    const authLinks = document.getElementById('auth-links');
    const searchInput = document.getElementById('playerSearch');
    const searchResultsSection = document.getElementById('search-results');
    const searchResultsContainer = document.getElementById('search-results-container');
    const favoritePlayersSection = document.getElementById('favorite-players');
    const favoritePlayersContainer = favoritePlayersSection.querySelector('.row');
    const popularPlayersSection = document.getElementById('popular-players');
    const popularPlayersContainer = popularPlayersSection.querySelector('.row');
    // Comparison elements
    const player1SearchInput = document.getElementById('player1-search');
    const player2SearchInput = document.getElementById('player2-search');
    const player1Results = document.getElementById('player1-results');
    const player2Results = document.getElementById('player2-results');
    const compareBtn = document.getElementById('compare-btn');

    // --- Auth Logic ---
    const updateAuthUI = (user) => {
        if (user) {
            let adminLink = user.role === 'admin' ? '<a href="/admin.php" class="btn btn-outline-warning me-3">Admin</a>' : '';
            authLinks.innerHTML = `
                ${adminLink}
                <span class="navbar-text me-3">Welcome, ${user.username}</span>
                <button id="logout-btn" class="btn btn-outline-light">Logout</button>
            `;
            document.getElementById('logout-btn').addEventListener('click', logout);
            favoritePlayersSection.style.display = 'block';
            loadFavorites();
        } else {
            authLinks.innerHTML = `
                <a href="/login.php" class="btn btn-outline-light me-2">Login</a>
                <a href="/register.php" class="btn btn-light">Register</a>
            `;
            favoritePlayersSection.style.display = 'none';
        }
    };

    const logout = () => {
        fetch('/api/logout.php').then(() => {
            myFavorites = [];
            window.location.reload();
        });
    };

    const checkSession = () => {
        fetch('/api/check_session.php')
            .then(response => response.json())
            .then(data => {
                updateAuthUI(data.loggedIn ? data.user : null);
            });
    };

    // --- Comparison Logic ---
    const setupComparisonSearch = (input, resultsContainer, playerNumber) => {
        input.addEventListener('keyup', function() {
            const searchTerm = input.value.trim();
            if (searchTerm.length < 3) {
                resultsContainer.innerHTML = '';
                resultsContainer.style.display = 'none';
                return;
            }

            fetch(`/api/search.php?name=${encodeURIComponent(searchTerm)}`)
                .then(response => response.json())
                .then(data => {
                    resultsContainer.innerHTML = '';
                    if (data.player) {
                        resultsContainer.style.display = 'block';
                        data.player.slice(0, 5).forEach(player => {
                            const item = document.createElement('div');
                            item.classList.add('result-item');
                            item.textContent = `${player.strPlayer} (${player.strTeam})`;
                            item.addEventListener('click', () => {
                                if (playerNumber === 1) {
                                    comparisonPlayer1 = player;
                                    input.value = player.strPlayer;
                                } else {
                                    comparisonPlayer2 = player;
                                    input.value = player.strPlayer;
                                }
                                resultsContainer.innerHTML = '';
                                resultsContainer.style.display = 'none';
                                checkCompareReady();
                            });
                            resultsContainer.appendChild(item);
                        });
                    } else {
                        resultsContainer.style.display = 'none';
                    }
                });
        });
    };

    const checkCompareReady = () => {
        if (comparisonPlayer1 && comparisonPlayer2) {
            compareBtn.disabled = false;
        }
    };

    if (compareBtn) {
        compareBtn.addEventListener('click', () => {
            if (comparisonPlayer1 && comparisonPlayer2) {
                window.location.href = `/compare.php?p1=${comparisonPlayer1.idPlayer}&p2=${comparisonPlayer2.idPlayer}`;
            }
        });
    }

    // --- Database-backed Favorites Logic (My Favorites) ---
    const loadFavorites = () => {
        fetch('/api/get_favorites.php')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    myFavorites = data.favorites;
                    renderFavorites();
                }
            });
    };

    const renderFavorites = () => {
        favoritePlayersContainer.innerHTML = '';
        if (myFavorites.length === 0) {
            favoritePlayersContainer.innerHTML = '<div class="col"><p class="text-center text-secondary">No favorite players added yet.</p></div>';
            return;
        }
        myFavorites.forEach(player => {
            const playerCard = `
                <div class="col-md-4 player-column">
                    <a href="/player.php?id=${player.id}" class="player-link">
                        <div class="player-card text-center">
                            <img src="${player.image_url || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.name}" class="img-fluid">
                            <div class="player-name">${player.name}</div>
                            <div class="player-team">${player.team}</div>
                        </div>
                    </a>
                    <button class="btn btn-sm btn-outline-danger mt-3 remove-favorite-btn" data-player-id="${player.id}">Remove</button>
                </div>
            `;
            favoritePlayersContainer.innerHTML += playerCard;
        });
        document.querySelectorAll('.remove-favorite-btn').forEach(button => {
            button.addEventListener('click', function() {
                removeFromFavorites(this.dataset.playerId);
            });
        });
    };

    const isFavorite = (playerId) => {
        return myFavorites.some(p => p.id == playerId);
    };

    const addToFavorites = (player) => {
        fetch('/api/add_favorite.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(player) })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                myFavorites.push({ id: player.idPlayer, name: player.strPlayer, team: player.strTeam, image_url: player.strCutout });
                renderFavorites();
                loadPopularPlayers();
            } else {
                alert(data.message);
            }
        });
    };

    const removeFromFavorites = (playerId) => {
        fetch('/api/remove_favorite.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ player_id: playerId }) })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                myFavorites = myFavorites.filter(p => p.id != playerId);
                renderFavorites();
            }
        });
    };

    // --- Database Logic (Popular Players) ---
    const renderPopularPlayers = (players) => {
        popularPlayersContainer.innerHTML = '';
        if (!players || players.length === 0) {
            popularPlayersContainer.innerHTML = '<div class="col"><p class="text-center text-secondary">No popular players yet.</p></div>';
            return;
        }
        players.forEach(player => {
            const playerCard = `
                <div class="col-md-4 player-column">
                    <a href="/player.php?id=${player.id}" class="player-link">
                        <div class="player-card text-center">
                            <img src="${player.image_url || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.name}" class="img-fluid">
                            <div class="player-name">${player.name}</div>
                            <div class="player-team">${player.team}</div>
                            <div class="player-stats">Favorited: ${player.favorite_count} times</div>
                        </div>
                    </a>
                </div>
            `;
            popularPlayersContainer.innerHTML += playerCard;
        });
    };

    const loadPopularPlayers = () => {
        fetch('/api/get_popular_players.php')
            .then(response => response.json())
            .then(data => {
                if (data.players) renderPopularPlayers(data.players);
            })
            .catch(error => console.error('Error loading popular players:', error));
    };

    // --- Main Search Logic ---
    if (searchInput) {
        searchInput.addEventListener('keyup', function() {
            const searchTerm = searchInput.value.trim();
            if (searchTerm.length > 2) {
                document.getElementById('favorite-players').style.display = 'none';
                document.getElementById('popular-players').style.display = 'none';
                searchResultsSection.style.display = 'block';
                fetch(`/api/search.php?name=${encodeURIComponent(searchTerm)}`)
                    .then(response => response.json())
                    .then(data => {
                        searchResultsContainer.innerHTML = '';
                        if (data.player) {
                            data.player.forEach(player => {
                                const disabled = isFavorite(player.idPlayer) ? 'disabled' : '';
                                const playerCard = `
                                    <div class="col-md-4 player-column">
                                        <a href="/player.php?id=${player.idPlayer}" class="player-link">
                                            <div class="player-card text-center">
                                                <img src="${player.strCutout || 'https://picsum.photos/seed/placeholder/150/150'}" alt="Headshot of ${player.strPlayer}" class="img-fluid">
                                                <div class="player-name">${player.strPlayer}</div>
                                                <div class="player-team">${player.strTeam}</div>
                                            </div>
                                        </a>
                                        <div class="text-center">
                                            <button class="btn btn-sm btn-outline-info mt-2 add-favorite-btn" 
                                                data-player='${JSON.stringify(player)}' ${disabled}>
                                                ${disabled ? 'Favorited' : 'Add to Favorites'}
                                            </button>
                                        </div>
                                    </div>
                                `;
                                searchResultsContainer.innerHTML += playerCard;
                            });
                            document.querySelectorAll('.add-favorite-btn').forEach(button => {
                                button.addEventListener('click', function() {
                                    const playerData = JSON.parse(this.dataset.player);
                                    addToFavorites(playerData);
                                    this.textContent = 'Favorited';
                                    this.disabled = true;
                                });
                            });
                        } else {
                            searchResultsContainer.innerHTML = '<p class="text-center text-light">No players found.</p>';
                        }
                    });
            } else {
                document.getElementById('favorite-players').style.display = 'block';
                document.getElementById('popular-players').style.display = 'block';
                searchResultsSection.style.display = 'none';
                searchResultsContainer.innerHTML = '';
            }
        });
    }

    // --- Initial Render ---
    checkSession();
    loadPopularPlayers();
    if (player1SearchInput && player2SearchInput) {
        setupComparisonSearch(player1SearchInput, player1Results, 1);
        setupComparisonSearch(player2SearchInput, player2Results, 2);
    }
});