// Show day details
function showDayDetails(date) {
    document.getElementById('loading').classList.add('active');

    // Fetch day details from API
    fetch('api.php?action=get_day_details&date=' + date)
        .then(response => response.json())
        .then(data => {
            document.getElementById('loading').classList.remove('active');

            if (!data.success) {
                alert('حدث خطأ: ' + (data.message || 'خطأ غير معروف'));
                return;
            }

            displayDayDetails(data.data, date);

            // Show modal
            document.getElementById('modal-title').textContent = '📅 تفاصيل يوم ' + date;
            document.getElementById('modal-overlay').classList.add('active');
            document.getElementById('details-modal').classList.add('active');
        })
        .catch(error => {
            document.getElementById('loading').classList.remove('active');
            alert('حدث خطأ أثناء جلب التفاصيل');
            console.error('Error:', error);
        });
}

function displayDayDetails(data, date) {
    let html = '<div class="stats-grid">';

    // Content type breakdown
    html += '<div class="stat-card"><h3>توزيع المحتوى</h3><div class="value">' +
        (data.content_breakdown ? Object.keys(data.content_breakdown).length : 0) +
        '</div><div class="subtitle">أنواع مختلفة</div></div>';

    // Video processing stats
    html += '<div class="stat-card" style="background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);"><h3 style="color: #2d3436;">فيديوهات معلقة</h3><div class="value" style="color: #2d3436;">' +
        (data.videos_pending || 0) + '</div></div>';

    html += '<div class="stat-card" style="background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);"><h3 style="color: white;">فيديوهات مكتملة</h3><div class="value" style="color: white;">' +
        (data.videos_completed || 0) + '</div></div>';

    html += '</div>';

    // Content breakdown table
    if (data.content_breakdown) {
        html += '<h3 style="margin-top: 20px;">تفاصيل أنواع المحتوى</h3>';
        html += '<table><thead><tr><th>نوع المحتوى</th><th>العدد</th></tr></thead><tbody>';

        const contentTypeNames = {
            1: 'صورة',
            2: 'يوتيوب',
            3: 'عاجل/خاص',
            6: 'صور متعددة',
            10: 'فيديو عام',
            15: 'نص فقط',
            21: 'فيديو تويتر'
        };

        for (const [type, count] of Object.entries(data.content_breakdown)) {
            html += '<tr><td>' + (contentTypeNames[type] || 'غير محدد') + '</td><td>' + count + '</td></tr>';
        }

        html += '</tbody></table>';
    }

    document.getElementById('modal-content').innerHTML = html;
}
