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

    let gamesData = []; // To store games data for CSV export

    const playerDetailContainer = document.getElementById('player-detail-container');
    const authLinks = document.getElementById('auth-links');

    // --- Auth Logic ---
    const updateAuthUI = (user) => {
        if (user) {
            authLinks.innerHTML = `
                <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);
        } 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>
            `;
        }
    };

    const logout = () => {
        fetch('/api/logout.php').then(() => window.location.href = '/');
    };

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

    // --- Player Detail Logic ---
    const renderPlayerDetails = (playerData) => {
        const details = playerData.details;
        gamesData = playerData.recent_games; // Store for export

        let biographyHtml = `
            <div class="row">
                <div class="col-md-4">
                    <div class="player-card text-center">
                        <img src="${details.strCutout || details.strThumb || 'https://picsum.photos/seed/placeholder/400/400'}" class="img-fluid rounded-circle" alt="${details.strPlayer}">
                        <h2 class="mt-3">${details.strPlayer}</h2>
                        <p class="text-secondary">${details.strTeam}</p>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="player-card">
                        <h3>Biography</h3>
                        <p>${details.strDescriptionEN || 'No biography available.'}</p>
                        <hr>
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>Position:</strong> ${details.strPosition}</p>
                                <p><strong>Height:</strong> ${details.strHeight}</p>
                                <p><strong>Weight:</strong> ${details.strWeight}</p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>Nationality:</strong> ${details.strNationality}</p>
                                <p><strong>Date of Birth:</strong> ${details.dateBorn}</p>
                                <p><strong>Sport:</strong> ${details.strSport}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        let gamesHtml = '';
        if (gamesData && gamesData.length > 0) {
            gamesHtml = `
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="player-card">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h3>Recent Games</h3>
                                <button id="download-games-csv" class="btn btn-sm btn-success">Download as CSV</button>
                            </div>
                            <table class="table table-dark table-striped">
                                <thead>
                                    <tr>
                                        <th>Date</th>
                                        <th>Event</th>
                                        <th>Home Team</th>
                                        <th>Away Team</th>
                                        <th>Score</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${gamesData.map(game => `
                                        <tr>
                                            <td>${game.dateEvent}</td>
                                            <td>${game.strEvent}</td>
                                            <td>${game.strHomeTeam}</td>
                                            <td>${game.strAwayTeam}</td>
                                            <td>${game.intHomeScore} - ${game.intAwayScore}</td>
                                        </tr>
                                    `).join('')}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            `;
        }

        playerDetailContainer.innerHTML = biographyHtml + gamesHtml;

        const downloadBtn = document.getElementById('download-games-csv');
        if (downloadBtn) {
            downloadBtn.addEventListener('click', () => {
                exportToCsv(`${details.strPlayer}_recent_games.csv', gamesData);
            });
        }
    };

    const loadPlayerDetails = () => {
        const urlParams = new URLSearchParams(window.location.search);
        const playerId = urlParams.get('id');

        if (!playerId) {
            playerDetailContainer.innerHTML = '<div class="alert alert-danger">No player ID provided.</div>';
            return;
        }

        fetch(`/api/get_player_details.php?id=${playerId}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    renderPlayerDetails(data.player);
                } else {
                    playerDetailContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            })
            .catch(error => {
                console.error('Error loading player details:', error);
                playerDetailContainer.innerHTML = '<div class="alert alert-danger">An error occurred while fetching player data.</div>';
            });
    };

    // --- Initial Load ---
    checkSession();
    loadPlayerDetails();
});