// --- Define essential variables here ---
// Make sure these are set correctly before using the functions
const apiUrl = 'https://app.sitegeeky.com/football-api'; // Or the full URL to your api.php file
const YOUR_TOKEN_VARIABLE = 'YOUR_API_TOKEN'; // Replace with your actual API token
const YOUR_DOMAIN_VARIABLE = window.location.hostname; // Or your registered domain
let lastUpdated = '1970-01-01 00:00:00'; // Initial timestamp for long polling
let urlParams; // Will hold URL parameters, defined globally for access in longPoll

// ------------------------------------

/**
 * Fetches the list of recent matches from the API.
 */
function fetchRecentMatches() {
    // Construct the API URL with necessary parameters
    const fetchUrl = `${apiUrl}/matches?token=${YOUR_TOKEN_VARIABLE}&domain=${YOUR_DOMAIN_VARIABLE}`;
    console.log("Fetching recent matches:", fetchUrl); // Log the URL for debugging

    fetch(fetchUrl)
        .then(response => {
            if (!response.ok) { // Check if HTTP status code is 2xx
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json(); // Parse the JSON response body
        })
        .then(response => {
            if (response.success) {
                updateMatchList(response.data); // Update the UI with the fetched matches
            } else {
                // Log and display API-specific errors
                console.error('API Error (fetchRecentMatches):', response.message);
                displayError('حدث خطأ أثناء جلب المباريات: ' + response.message);
            }
        })
        .catch(error => {
            // Log and display network or parsing errors
            console.error('Fetch Error (fetchRecentMatches):', error);
            displayError('حدث خطأ في الشبكة أثناء جلب المباريات. تحقق من اتصالك.');
        });
}

/**
 * Fetches the details for a specific match from the API.
 * @param {string} matchId The ID of the match to fetch.
 */
function fetchMatchDetails(matchId) {
    // Construct the API URL with necessary parameters
    const fetchUrl = `${apiUrl}/match/${matchId}?token=${YOUR_TOKEN_VARIABLE}&domain=${YOUR_DOMAIN_VARIABLE}`;
    console.log("Fetching match details:", fetchUrl); // Log the URL for debugging

    fetch(fetchUrl)
        .then(response => {
             if (!response.ok) {
                throw new Error(`HTTP error! Status: ${response.status}`);
            }
            return response.json();
        })
        .then(response => {
            if (response.success) {
                updateMatchDetails(response.data); // Update the UI with match details
            } else {
                console.error('API Error (fetchMatchDetails):', response.message);
                displayError('حدث خطأ أثناء جلب تفاصيل المباراة: ' + response.message);
            }
        })
        .catch(error => {
            console.error('Fetch Error (fetchMatchDetails):', error);
            displayError('حدث خطأ في الشبكة أثناء جلب تفاصيل المباراة.');
        });
}

/**
 * ★ تعديل: Updates the match list table in the HTML.
 * @param {Array} matches An array of match objects.
 */
function updateMatchList(matches) {
    const tableBody = document.querySelector("#btolat-matches-table tbody");
    if(!tableBody){
        console.error("Match table body (#btolat-matches-table tbody) not found in HTML.");
        displayError("خطأ: لم يتم العثور على جدول عرض المباريات في الصفحة.");
        return;
    }
    tableBody.innerHTML = ""; // Clear previous content

    // Group matches by date
    const matchesByDate = matches.reduce((acc, match) => {
        const date = match.date; 
        if (!acc[date]) {
            acc[date] = [];
        }
        acc[date].push(match);
        return acc;
    }, {});


    // Display matches, grouped by date
    for (const date in matchesByDate) {
        if (matchesByDate.hasOwnProperty(date)) {
            const matchesForDate = matchesByDate[date];

            // Add a header row for the date
            const headerRow = document.createElement("tr");
            headerRow.classList.add("date-header-row"); 
            const headerCell = document.createElement("th");
            headerCell.colSpan = 10; // ★★★ تم تغيير العدد إلى 10 (ليشمل الملعب والقنوات) ★★★
            headerCell.textContent = formatDate(date); 
            headerRow.appendChild(headerCell);
            tableBody.appendChild(headerRow);

            // Sort matches for the current date by time
            matchesForDate.sort((a, b) => {
                const timeA = a.time || '00:00:00';
                const timeB = b.time || '00:00:00';
                return timeA.localeCompare(timeB);
            });


            // Add rows for each match on this date
            matchesForDate.forEach(match => {
                const row = document.createElement("tr");
                row.setAttribute('data-match-id', match.match_id);

                const timeOrTimerDisplay = formatMatchTime(match);

                // ★★★ تم تعديل innerHTML لإضافة الملعب والقنوات في أماكنها الصحيحة ★★★
                row.innerHTML = `
                    <td>${match.league || '-'}</td>
                    <td>${match.date || '-'}</td>
                    <td class="match-time-cell">${timeOrTimerDisplay}</td>
                    <td><img src="${match.team1_logo || '/assets/images/icon/team.png'}" alt="${match.team1 || 'Team 1'}" width="30" loading="lazy"> ${match.team1 || 'الفريق الأول'}</td>
                    <td><img src="${match.team2_logo || '/assets/images/icon/team.png'}" alt="${match.team2 || 'Team 2'}" width="30" loading="lazy"> ${match.team2 || 'الفريق الثاني'}</td>
                    <td class="match-score-cell">${match.score || '-:-'}</td>
                    <td class="match-status-cell">${getStatusText(match.status)}</td>
                    <td class="match-stadium-cell">${match.stadium || '-'}</td> 
                    <td class="match-channels-cell">${match.channels && Array.isArray(match.channels) ? match.channels.join(', ') : '-'}</td>
                    <td><a href="?match_id=${match.match_id}">تفاصيل</a></td>
                `;
                tableBody.appendChild(row);
            });
        }
    }
}

/**
 * Updates the details section for a single match view.
 * (This function remains largely unchanged from your original code)
 * @param {object} match The match details object.
 */
function updateMatchDetails(match) {
    if (!match) {
        console.error("updateMatchDetails called with invalid data");
        return;
    }

    const detailsSection = document.getElementById('btolat-match-details');
    const tableSection = document.getElementById('btolat-matches-table');
    if (detailsSection) detailsSection.style.display = 'block';
    if (tableSection) tableSection.style.display = 'none';

    const matchDetailsTitle = document.getElementById('match-details-title');
    if (matchDetailsTitle) {
        matchDetailsTitle.textContent = `تفاصيل مباراة ${match.team1 || ''} ضد ${match.team2 || ''}`;
    }
    
    // ★★★ إضافة تحديث الملعب ★★★
    const stadiumElement = document.getElementById('match-details-stadium');
    if (stadiumElement && match.stadium) {
        stadiumElement.textContent = `الملعب: ${match.stadium}`;
        stadiumElement.style.display = 'block'; // (إظهاره)
    } else if (stadiumElement) {
        stadiumElement.style.display = 'none'; // (إخفاؤه إذا كان فارغاً)
    }
    // ★★★ نهاية إضافة الملعب ★★★

    const scoreElement = document.querySelector(".btolat-match-details__uppergraph");
    if (scoreElement) {
        const scoreParts = match.score ? match.score.split('-') : ['',''];
        const displayStatus = formatMatchTime(match); // Show timer/minute if live, otherwise status text

        scoreElement.innerHTML = `
            <div class="btolat-match-details__score">
                <div>
                    <span class="btolat-match-details__score-team1">${scoreParts[0]?.trim() || '0'}</span>
                    <span class="btolat-match-details__score-separator">:</span>
                    <span class="btolat-match-details__score-team2">${scoreParts[1]?.trim() || '0'}</span>
                </div>
            </div>
            <div class="btolat-match-details__timer">
                <span>${displayStatus}</span>
            </div>
        `;
    }

    const eventsList = document.getElementById('btolat-events-list');
    if (eventsList) {
        eventsList.innerHTML = ''; // Clear previous events
        if (match.events && Array.isArray(match.events) && match.events.length > 0) {
            match.events.forEach(event => {
                const eventElement = document.createElement('li');
                let eventClasses = [];

                if (event.type === 'title') {
                    eventClasses.push('btolat-event-title'); // Assuming you have CSS for this class
                    eventElement.innerHTML = `<div>${event.description || ''}</div>`;
                } else {
                    eventClasses.push(event.team === 'team1' ? 'btolat-event-team1' : 'btolat-event-team2'); // Assuming CSS classes
                    eventElement.className = eventClasses.join(' ');

                    let eventContent = `
                        <div>
                            ${event.time ? `<time>${event.time}'</time>` : ''}
                            ${event.type ? `<img src="${getEventIcon(event.type)}" alt="${event.alt || event.type}">` : ''}
                            ${event.player ? `<b>${event.player}</b>` : ''}
                    `;
                    if (event.type === 'substitution' && event.substitute_player) {
                        eventContent += `<span> ← ${event.substitute_player}</span>`;
                    }
                    eventContent += `</div>`;
                    eventElement.innerHTML = eventContent;
                }
                 // Add class based on team for timeline styling (left/right)
                 eventElement.classList.add(event.team === 'team1' ? 'rightTL' : 'leftTL'); // Assuming rightTL for team1, leftTL for team2
                eventsList.appendChild(eventElement);
            });
        } else {
            eventsList.innerHTML = '<li>لا توجد أحداث متاحة لهذه المباراة.</li>';
        }
    }

    const lineupsContainer = document.querySelector('.btolat-match-details__field-container');
    if(lineupsContainer){
        lineupsContainer.innerHTML = ''; // Clear previous lineups
        if(match.lineups && match.lineups.team1 && match.lineups.team2){
            const renderPlayers = (players) => {
                const ul = document.createElement('ul');
                (players || []).forEach(player => {
                    const li = document.createElement('li');
                    li.innerHTML = `
                        ${player.image ? `<img src="${player.image}" alt="${player.name || ''}" loading="lazy">` : ''}
                        ${player.name || '?'}
                        ${player.number ? ` (${player.number})` : ''}
                    `;
                    ul.appendChild(li);
                });
                return ul;
            };

            // Team 1 Lineup
            const team1Div = document.createElement('div');
            team1Div.classList.add('btolat-match-details__lineup-hometeam'); // Use specific class
            const team1StartingTitle = document.createElement('h3');
            team1StartingTitle.textContent = `تشكيلة ${match.team1 || ''}`;
            team1Div.appendChild(team1StartingTitle);
            team1Div.appendChild(renderPlayers(match.lineups.team1.starting));
             if (match.lineups.team1.substitutes && match.lineups.team1.substitutes.length > 0) {
                 const team1SubsTitle = document.createElement('h4');
                 team1SubsTitle.textContent = `البدلاء`;
                 team1Div.appendChild(team1SubsTitle);
                 team1Div.appendChild(renderPlayers(match.lineups.team1.substitutes));
             }
            lineupsContainer.appendChild(team1Div);

            // Team 2 Lineup
            const team2Div = document.createElement('div');
             team2Div.classList.add('btolat-match-details__lineup-awayteam'); // Use specific class
            const team2StartingTitle = document.createElement('h3');
            team2StartingTitle.textContent = `تشكيلة ${match.team2 || ''}`;
            team2Div.appendChild(team2StartingTitle);
            team2Div.appendChild(renderPlayers(match.lineups.team2.starting));
            if (match.lineups.team2.substitutes && match.lineups.team2.substitutes.length > 0) {
                 const team2SubsTitle = document.createElement('h4');
                 team2SubsTitle.textContent = `البدلاء`;
                 team2Div.appendChild(team2SubsTitle);
                 team2Div.appendChild(renderPlayers(match.lineups.team2.substitutes));
             }
            lineupsContainer.appendChild(team2Div);

        } else {
          lineupsContainer.innerHTML = '<p>التشكيلات غير متاحة حالياً.</p>';
        }
    }

     // --- إضافة عرض الإحصائيات التاريخية ---
     const statsContainer = document.getElementById('btolat-match-stats'); // تأكد من وجود هذا العنصر في HTML
     if (statsContainer && match.statistics) {
         renderMatchStatsHistory(statsContainer, match.statistics);
     }
     // --- نهاية إضافة عرض الإحصائيات ---

}

/**
 * Helper function to get the icon URL based on event type.
 * @param {string} eventType The type of the event (e.g., 'goal').
 * @returns {string} The URL of the event icon.
 */
function getEventIcon(eventType) {
    // Ensure you have these images hosted or use full URLs
    const baseUrl = 'https://static.btolat.com/images/'; // Base URL for icons
    switch (eventType ? eventType.toLowerCase() : '') {
        case 'goal': return baseUrl + 'goal.png';
        case 'yellow_card': return baseUrl + 'yellowcard.png';
        case 'red_card': return baseUrl + 'redcard.png';
        case 'substitution': return baseUrl + 'subst.png';
        // Add more cases if needed (e.g., var, penalty miss)
        default: return ''; // Return empty string or a default icon URL
    }
}

/**
 * Formats a date string into a localized, readable format.
 * @param {string} dateString The date string (YYYY-MM-DD).
 * @returns {string} The formatted date string or the original string on error.
 */
function formatDate(dateString) {
    if (!dateString) return '';
    try {
        // Use Arabic locale for Egypt
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        return new Date(dateString).toLocaleDateString('ar-EG', options);
    } catch (e) {
        console.error("Error formatting date:", dateString, e);
        return dateString; // Fallback to original string
    }
}


/**
 * ★★★ (مُعدّل: V2 - إصلاح منطق العداد والوقت بدل الضائع) ★★★
 * Formats the match time display based on the match status.
 * Shows start time if not started/ended, shows current minute if live.
 * Requires Moment.js and Moment Timezone library.
 * @param {object} match The match object containing status, time, date, timer.
 * @returns {string} The formatted time or timer string.
 */
function formatMatchTime(match) {
    if (!match || typeof match.status === 'undefined') {
        return '-'; // Return a placeholder if data is missing
    }

    const status = match.status ? match.status.toString().toLowerCase() : '';
    const timer = match.timer || ''; // Use timer value from DB (e.g., "90+4")

    // Check if Moment.js is available
    const momentAvailable = typeof moment !== 'undefined' && typeof moment.tz !== 'undefined';

    // --- ★★★ بداية التعديل: منطق جديد لتحديد "مباشر" ★★★ ---
    
    // (يتحقق إذا كان العداد يحتوي على أي أرقام، مثل "45", "90+4", "115'")
    // (regex \d يبحث عن أي رقم)
    const isTimerNumeric = timer && /\d/.test(timer); 

    // 1. Live Match States (Direct timer display)
    const liveStates = ['مباشر', 'الشوط الأول', 'الشوط الثانى', 'وقت إضافي أول', 'وقت إضافي ثاني', 'ركلات ترجيح'];
    
    // (الشرط الجديد: إذا كان العداد رقمياً "isTimerNumeric" أو الحالة نص "مباشر")
    if (isTimerNumeric || liveStates.includes(status)) {
        if (timer) {
             return timer; // (الأولوية للعداد: "90+4" أو "88'")
        }
        return getStatusText(status); // (إذا كان العداد فارغاً، اعرض الحالة: "مباشر")
    }
    // --- ★★★ نهاية التعديل ★★★ ---

    // 2. Intermediate States (Halftime, etc.)
    const intermediateStates = ['بين الشوطين', 'ht'];
     if (intermediateStates.includes(status)) {
        return 'بين الشوطين';
    }

    // 3. Not Started or Ended (Show formatted start time)
    // (لا تغيير هنا)
     if (match.time && match.date && momentAvailable) {
        try {
            // Assumes match.time is 'HH:MM:SS' and match.date is 'YYYY-MM-DD'
            const serverDateTime = moment.tz(`${match.date} ${match.time}`, "Africa/Cairo"); // Server Timezone
            const userDateTime = serverDateTime.clone().tz(moment.tz.guess()); // Convert to user's local timezone
            return userDateTime.format('hh:mm A'); // Format as 12-hour clock (e.g., 04:00 PM)
        } catch (e) {
            console.error("Moment.js Error formatting time:", match.date, match.time, e);
            // Fallback if Moment fails
            return match.timer || match.time || '-'; // Show original timer, raw time, or placeholder
        }
    } else if (match.timer && (match.timer.includes('م') || match.timer.includes('ص'))) {
         // Fallback if Moment isn't available but timer looks like a time
         return match.timer;
     }

    // 4. Fallback for any other status or missing time/date
    return getStatusText(status); // (مثل: "انتهت" أو "تأجلت")
}


/**
 * ★★★ (مُعدّل: V2 - إصلاح منطق الحالة الافتراضية) ★★★
 * Gets the Arabic display text for a given match status key.
 * @param {string} status The status key (e.g., 'ended', 'live').
 * @returns {string} The display text for the status.
 */
function getStatusText(status) {
    const statusMap = {
        // (حالات الانتهاء)
        'ended': 'انتهت',
        'ft': 'انتهت',
        'انتهت': 'انتهت',
        
        // (حالات "مباشر" - كنص عام)
        'live': 'مباشر',
        'مباشر': 'مباشر',
        
        // (حالات "لم تبدأ")
        'notyet': 'لم تبدأ',
        'لم تبدأ': 'لم تبدأ',
        
        // (حالات أخرى)
        'postponed': 'تأجلت',
        'تأجلت': 'تأجلت',
        'تم التخلي': 'تأجلت', // ★★★ أضف هذا السطر هنا ★★★
        'first half': 'الشوط الأول',
        'الشوط الأول': 'الشوط الأول',
        'halftime': 'بين الشوطين',
        'ht': 'بين الشوطين',
        'بين الشوطين': 'بين الشوطين',
        'second half': 'الشوط الثاني',
        'الشوط الثانى': 'الشوط الثاني', // (إضافة ياء)
        'وقت إضافي أول': 'وقت إضافي أول',
        'وقت إضافي ثاني': 'وقت إضافي ثاني',
        'ركلات ترجيح': 'ركلات ترجيح'
        // (ملاحظة: "90+4" ليست حالة، بل هي "عداد"، لذلك لن تكون هنا)
    };
    
    // ★★★ التعديل الأهم ★★★
    // (إذا لم نجد الحالة في القائمة، لا تفترض أنها "لم تبدأ")
    // (بل اعرض الحالة كما هي، لأنها قد تكون "90+4" أو "115'")
    const normalizedStatus = status ? status.toLowerCase() : '';
    
    // (إذا كانت الحالة موجودة في القائمة، أرجعها)
    if (statusMap[normalizedStatus]) {
        return statusMap[normalizedStatus];
    }
    
    // (إذا لم تكن موجودة، ولكنها تحتوي على أرقام، فهي "عداد"، اعرضها كما هي)
    if (normalizedStatus && /\d/.test(normalizedStatus)) {
        return status; // (مثال: سيعرض "90+4" كما هي)
    }

    // (إذا لم تكن أي مما سبق، استخدم "لم تبدأ" كافتراضي)
    return 'لم تبدأ';
}

// --- التصحيح: استبدل دالة startSSE بهذا الكود ---

function startSSE(matchId = null) {
    // بناء الرابط
    const sseUrl = new URL(`${apiUrl}/sse`);
    sseUrl.searchParams.append('token', YOUR_TOKEN_VARIABLE);
    sseUrl.searchParams.append('domain', YOUR_DOMAIN_VARIABLE);
    
    if (matchId) {
        sseUrl.searchParams.append('match_id', matchId);
    }

    console.log("Connecting to SSE:", sseUrl.toString());
    const eventSource = new EventSource(sseUrl);

    eventSource.addEventListener('update', (event) => {
        try {
            const data = JSON.parse(event.data);
            console.log("SSE Update Received:", data);

            if (Array.isArray(data) && data.length > 0) {
                if (matchId) {
                    // نحن في صفحة التفاصيل: تحديث الصفحة بالكامل بالبيانات الجديدة
                    updateMatchDetails(data[0]);
                } else {
                    // نحن في الصفحة الرئيسية: تحديث الصفوف الموجودة فقط (دون مسح الجدول)
                    handlePartialUpdates(data);
                }
            }
        } catch (e) {
            console.error("Error parsing SSE data:", e);
        }
    });

    eventSource.onerror = (err) => {
        console.error("SSE connection error:", err);
        // المتصفح يحاول إعادة الاتصال تلقائياً، لا داعي لتدخل يدوي
    };
}

/**
 * دالة جديدة: تقوم بتحديث بيانات المباريات في الجدول دون مسحه
 */
function handlePartialUpdates(updatedMatches) {
    updatedMatches.forEach(match => {
        // البحث عن الصف الخاص بالمباراة
        const existingRow = document.querySelector(`#btolat-matches-table tbody tr[data-match-id="${match.match_id}"]`);
        
        if (existingRow) {
            // تحديث الوقت/العداد
            const timeCell = existingRow.querySelector('.match-time-cell');
            if (timeCell) timeCell.textContent = formatMatchTime(match);

            // تحديث النتيجة
            const scoreCell = existingRow.querySelector('.match-score-cell');
            if (scoreCell) scoreCell.textContent = match.score || '-:-';

            // تحديث الحالة
            const statusCell = existingRow.querySelector('.match-status-cell');
            if (statusCell) statusCell.textContent = getStatusText(match.status);

            // تحديث الملعب (إن وجد)
            const stadiumCell = existingRow.querySelector('.match-stadium-cell');
            if (stadiumCell) stadiumCell.textContent = match.stadium || '-';

            // تحديث القنوات (إن وجدت)
            const channelsCell = existingRow.querySelector('.match-channels-cell');
            if (channelsCell) {
                channelsCell.textContent = match.channels && Array.isArray(match.channels) ? match.channels.join(', ') : '-';
            }

            // مؤثر بصري بسيط ( وميض) عند التحديث (اختياري)
            existingRow.style.backgroundColor = '#e8f5e9'; // لون أخضر فاتح
            setTimeout(() => { existingRow.style.backgroundColor = ''; }, 1000);
        }
    });
}


/**
 * Renders the historical statistics into a designated container.
 * @param {HTMLElement} container The container element to render stats into.
 * @param {object} stats The statistics object fetched from the API.
 */
function renderMatchStatsHistory(container, stats) {
    if (!container) return; // 1. التحقق من الحاوية فقط

    // 2. التحقق من وجود بيانات فعلية قبل المسح
    //    (stats && Object.keys(stats).length > 0) يتأكد أن stats ليست null وليست {} أو []
    if (stats && Object.keys(stats).length > 0) {

        let html = ''; // 3. بناء الـ HTML

        // (الكود من 452 إلى 509 يبقى كما هو)
        // 1. Head-to-Head Summary
        if (stats.h2h_summary) {
            html += `<h2>تاريخ المواجهات (${stats.h2h_summary.team1_name || 'الفريق الأول'} ضد ${stats.h2h_summary.team2_name || 'الفريق الثاني'})</h2>`;
            html += `<div class="stats-card">`; // Use a card-like div
            html += `<p>فوز ${stats.h2h_summary.team1_name || 'الأول'}: ${stats.h2h_summary.team1_wins || 0}</p>`;
            html += `<p>تعادل: ${stats.h2h_summary.draws || 0}</p>`;
            html += `<p>فوز ${stats.h2h_summary.team2_name || 'الثاني'}: ${stats.h2h_summary.team2_wins || 0}</p>`;
            // Simple bar visualization (optional, requires CSS)
            const totalH2H = (stats.h2h_summary.team1_wins || 0) + (stats.h2h_summary.draws || 0) + (stats.h2h_summary.team2_wins || 0);
            if (totalH2H > 0) {
                const w1P = ((stats.h2h_summary.team1_wins || 0) / totalH2H) * 100;
                const drP = ((stats.h2h_summary.draws || 0) / totalH2H) * 100;
                const w2P = ((stats.h2h_summary.team2_wins || 0) / totalH2H) * 100;
                html += `<div class="h2h-bar">
                            <div class="h2h-bar-t1" style="width:${w1P}%"></div>
                            <div class="h2h-bar-dr" style="width:${drP}%"></div>
                            <div class="h2h-bar-t2" style="width:${w2P}%"></div>
                         </div>`;
            }
            html += `</div>`;
        }

        // 2. Head-to-Head Matches
        if (stats.h2h_matches && stats.h2h_matches.length > 0) {
            html += `<h2>آخر المواجهات المباشرة</h2>`;
            html += `<ul class="stats-list">`;
            stats.h2h_matches.slice(0, 5).forEach(m => { // Show max 5
                html += `<li>${m.date || ''}: ${m.teamA_name || '?'} ${m.teamA_score || '-'} : ${m.teamB_score || '-'} ${m.teamB_name || '?'}</li>`;
            });
            html += `</ul>`;
        }

        // 3. Standings
        if (stats.standings && stats.standings.length > 0) {
            html += `<h2>الترتيب الحالي</h2>`;
            html += `<table class="stats-table"><thead><tr><th>#</th><th>الفريق</th><th>لعب</th><th>ف</th><th>ت</th><th>خ</th><th>+/-</th><th>نقاط</th></tr></thead><tbody>`;
            stats.standings.forEach(s => {
                html += `<tr><td>${s.rank || '-'}</td><td>${s.team_name || '?'}</td><td>${s.played || '0'}</td><td>${s.wins || '0'}</td><td>${s.draws || '0'}</td><td>${s.losses || '0'}</td><td>${s.goal_diff || '0'}</td><td><b>${s.points || '0'}</b></td></tr>`;
            });
            html += `</tbody></table>`;
        }

        // 4. Last 5 Matches Team 1
        if (stats.last5_team1 && stats.last5_team1.length > 0 && stats.h2h_summary?.team1_name) {
            html += `<h2>آخر 5 مباريات لـ ${stats.h2h_summary.team1_name}</h2>`;
            html += `<ul class="stats-list">`;
            stats.last5_team1.forEach(m => {
                html += `<li>${m.date || ''}: ${m.teamA_name || '?'} ${m.teamA_score || '-'} : ${m.teamB_score || '-'} ${m.teamB_name || '?'}</li>`;
            });
            html += `</ul>`;
        }

        // 5. Last 5 Matches Team 2
        if (stats.last5_team2 && stats.last5_team2.length > 0 && stats.h2h_summary?.team2_name) {
            html += `<h2>آخر 5 مباريات لـ ${stats.h2h_summary.team2_name}</h2>`;
            html += `<ul class="stats-list">`;
            stats.last5_team2.forEach(m => {
                html += `<li>${m.date || ''}: ${m.teamA_name || '?'} ${m.teamA_score || '-'} : ${m.teamB_score || '-'} ${m.teamB_name || '?'}</li>`;
            });
            html += `</ul>`;
        }

        // 4. المسح والعرض فقط إذا كان هناك HTML جديد
        container.innerHTML = html; 

    } else if (!stats) {
         // 5. (اختياري) إذا كانت البيانات null، امسح المحتوى
         container.innerHTML = '';
    }
    // 6. إذا كانت stats هي []، لا تفعل شيئًا (لا تمسح المحتوى)
}

/**
 * Displays an error message to the user.
 * @param {string} message The error message to display.
 */
function displayError(message) {
    let errorContainer = document.getElementById('error-message-container');
    if (!errorContainer) {
      errorContainer = document.createElement('div');
      errorContainer.id = 'error-message-container';
      // Basic styling for visibility
      errorContainer.style.color = 'white';
      errorContainer.style.backgroundColor = '#d9534f'; // Red background
      errorContainer.style.textAlign = 'center';
      errorContainer.style.padding = '10px';
      errorContainer.style.margin = '10px 0';
      errorContainer.style.border = '1px solid #d43f3a';
      errorContainer.style.borderRadius = '4px';

      // Try to insert before the main table or details section
      const mainTable = document.getElementById('btolat-matches-table');
      const detailsSection = document.getElementById('btolat-match-details');
      const insertBeforeElement = mainTable || detailsSection;

      if (insertBeforeElement) {
        insertBeforeElement.parentNode.insertBefore(errorContainer, insertBeforeElement);
      } else {
         document.body.prepend(errorContainer); // Fallback to beginning of body
      }
    }
  errorContainer.textContent = message;
  // Optional: Hide error after some time
  // setTimeout(() => { errorContainer.style.display = 'none'; }, 10000);
}


// --- Initial Setup: Run code after the DOM is fully loaded ---
document.addEventListener('DOMContentLoaded', () => {
    urlParams = new URLSearchParams(window.location.search);
    const matchId = urlParams.get('match_id');

    // Check if Moment.js libraries are loaded
    if (typeof moment === 'undefined' || typeof moment.tz === 'undefined') {
        console.error("Moment.js or Moment Timezone library not loaded!");
        displayError("خطأ: مكتبة التوقيت غير محملة. قد تظهر بعض التوقيتات بشكل غير صحيح.");
        // Decide if you want to proceed without Moment.js or stop
    }

    // Fetch initial data based on URL
    if (matchId) {
        fetchMatchDetails(matchId);
    } else {
        fetchRecentMatches();
    }

    // Start long polling after a short delay
    console.log("Starting long polling...");
    startSSE(matchId);
});


// --- Ensure Moment.js and Moment Timezone are loaded in your HTML ---
// Add these script tags to your HTML's <head> section BEFORE this app.js script:
/*
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js" integrity="sha512-rjmacQUxc9cmwJpFYyP8u6vpytS86vjG23aMHX6y8+Mau56fF2k05fKvM7WMMT/rpL26gM8ohwXb55H4uKxUg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
*/