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

    const comparisonContainer = document.getElementById('comparison-container');
    const authLinks = document.getElementById('auth-links');

    // --- 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);
        } 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);
            });
    };

    // --- Comparison Logic ---
    const renderComparison = (players) => {
        const [p1, p2] = players;

        comparisonContainer.innerHTML = `
            <div class="col-md-6">
                <div class="player-card text-center">
                    <img src="${p1.strCutout || p1.strThumb}" class="img-fluid rounded-circle" alt="${p1.strPlayer}">
                    <h2 class="mt-3">${p1.strPlayer}</h2>
                    <p class="text-secondary">${p1.strTeam}</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="player-card text-center">
                    <img src="${p2.strCutout || p2.strThumb}" class="img-fluid rounded-circle" alt="${p2.strPlayer}">
                    <h2 class="mt-3">${p2.strPlayer}</h2>
                    <p class="text-secondary">${p2.strTeam}</p>
                </div>
            </div>
            <div class="col-12 mt-4">
                <div class="player-card">
                    <h3 class="text-center">Stat Comparison</h3>
                    <table class="table table-dark table-striped">
                        <tbody>
                            ${createComparisonRow('Position', p1.strPosition, p2.strPosition)}
                            ${createComparisonRow('Height', p1.strHeight, p2.strHeight)}
                            ${createComparisonRow('Weight', p1.strWeight, p2.strWeight)}
                            ${createComparisonRow('Nationality', p1.strNationality, p2.strNationality)}
                            ${createComparisonRow('Date of Birth', p1.dateBorn, p2.dateBorn)}
                        </tbody>
                    </table>
                </div>
            </div>
        `;
    };

    const createComparisonRow = (label, val1, val2) => {
        return `
            <tr>
                <td class="text-end">${val1 || 'N/A'}</td>
                <th class="text-center">${label}</th>
                <td>${val2 || 'N/A'}</td>
            </tr>
        `;
    };

    const loadComparisonData = () => {
        const urlParams = new URLSearchParams(window.location.search);
        const p1Id = urlParams.get('p1');
        const p2Id = urlParams.get('p2');

        if (!p1Id || !p2Id) {
            comparisonContainer.innerHTML = '<div class="alert alert-danger">Two player IDs are required for comparison.</div>';
            return;
        }

        fetch(`/api/get_player_comparison.php?p1=${p1Id}&p2=${p2Id}`)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    renderComparison(data.players);
                } else {
                    comparisonContainer.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            })
            .catch(error => {
                console.error('Error loading comparison data:', error);
                comparisonContainer.innerHTML = '<div class="alert alert-danger">An error occurred.</div>';
            });
    };

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