/**
 * Orders Management JavaScript
 */

// المتغيرات العامة
let currentOrders = [];
let currentFilter = 'all';

/**
 * تحميل الطلبات حسب الحالة
 */
function loadOrders(status = 'all', silent = false) {
    if (!silent) {
        showLoading();
    }
    
    fetch(`api/get_orders.php?status=${status}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                currentOrders = data.orders;
                currentFilter = status;
                displayOrders(data.orders);
                updateStats(data.stats);
            }
        })
        .catch(error => {
            console.error('Error loading orders:', error);
            if (!silent) {
                showNotification('حدث خطأ في تحميل الطلبات', 'error');
            }
        })
        .finally(() => {
            if (!silent) {
                hideLoading();
            }
        });
}

/**
 * عرض الطلبات في الشبكة
 */
function displayOrders(orders) {
    const container = document.getElementById('ordersContainer');
    
    if (!container) return;
    
    if (!orders || orders.length === 0) {
        container.innerHTML = `
            <div class="text-center py-5">
                <i class="bi bi-inbox fs-1 text-muted d-block mb-3"></i>
                <h5 class="text-muted">لا توجد طلبات</h5>
            </div>
        `;
        return;
    }
    
    let html = '<div class="orders-grid">';
    
    orders.forEach(order => {
        const statusClass = getStatusBadge(order.status);
        const statusText = getStatusText(order.status);
        const timeAgo = getTimeAgo(order.created_at);
        
        let itemsHtml = '';
        if (order.items && order.items.length > 0) {
            itemsHtml = order.items.slice(0, 3).map(item => `
                <div class="order-item">
                    <span>${item.quantity}x ${escapeHtml(item.meal_name)}</span>
                    <span>${formatMoney(item.price)}</span>
                </div>
            `).join('');
            
            if (order.items.length > 3) {
                itemsHtml += `<div class="order-item text-muted">+${order.items.length - 3} أصناف أخرى</div>`;
            }
        }
        
        let actionsHtml = '';
        if (order.status === 'pending') {
            actionsHtml = `
                <button class="action-btn accept" onclick="acceptOrder(${order.id})">
                    <i class="bi bi-check-lg"></i> قبول
                </button>
                <button class="action-btn reject" onclick="showRejectModal(${order.id})">
                    <i class="bi bi-x-lg"></i> رفض
                </button>
                <button class="action-btn view" onclick="viewOrder(${order.id})">
                    <i class="bi bi-eye"></i>
                </button>
            `;
        } else if (['accepted', 'preparing', 'ready', 'on_the_way'].includes(order.status)) {
            actionsHtml = `
                <button class="action-btn update" onclick="showUpdateModal(${order.id}, '${order.status}')">
                    <i class="bi bi-arrow-right"></i> تحديث
                </button>
                <button class="action-btn view" onclick="viewOrder(${order.id})">
                    <i class="bi bi-eye"></i>
                </button>
            `;
        } else {
            actionsHtml = `
                <button class="action-btn view" onclick="viewOrder(${order.id})">
                    <i class="bi bi-eye"></i> عرض
                </button>
            `;
        }
        
        html += `
            <div class="order-card ${order.status}" data-order-id="${order.id}">
                <div class="order-header">
                    <span class="order-id">#${order.id}</span>
                    <span class="order-status ${statusClass}">${statusText}</span>
                </div>
                
                <div class="order-body">
                    <div class="customer-info">
                        <div><i class="bi bi-person"></i> ${escapeHtml(order.customer_name)}</div>
                        <div><i class="bi bi-telephone"></i> <span dir="ltr">${order.customer_phone}</span></div>
                        <div><i class="bi bi-geo-alt"></i> ${order.customer_address || 'لا يوجد عنوان'}</div>
                        <div><i class="bi bi-clock"></i> ${timeAgo}</div>
                    </div>
                    
                    <div class="order-items">
                        ${itemsHtml}
                    </div>
                    
                    <div class="order-total">
                        <span>الإجمالي:</span>
                        <span class="total-price">${formatMoney(order.total)}</span>
                    </div>
                    
                    <div class="order-actions">
                        ${actionsHtml}
                    </div>
                </div>
            </div>
        `;
    });
    
    html += '</div>';
    container.innerHTML = html;
}

/**
 * تحديث إحصائيات العداد
 */
function updateStats(stats) {
    if (!stats) return;
    
    const elements = {
        pending: document.querySelector('.stat-card.pending .stat-value'),
        accepted: document.querySelector('.stat-card.accepted .stat-value'),
        preparing: document.querySelector('.stat-card.preparing .stat-value'),
        ready: document.querySelector('.stat-card.ready .stat-value'),
        ontheway: document.querySelector('.stat-card.ontheway .stat-value'),
        delivered: document.querySelector('.stat-card.delivered .stat-value'),
        cancelled: document.querySelector('.stat-card.cancelled .stat-value')
    };
    
    if (elements.pending) elements.pending.textContent = stats.pending_count || 0;
    if (elements.accepted) elements.accepted.textContent = stats.accepted_count || 0;
    if (elements.preparing) elements.preparing.textContent = stats.preparing_count || 0;
    if (elements.ready) elements.ready.textContent = stats.ready_count || 0;
    if (elements.ontheway) elements.ontheway.textContent = stats.ontheway_count || 0;
    if (elements.delivered) elements.delivered.textContent = stats.delivered_count || 0;
    if (elements.cancelled) elements.cancelled.textContent = stats.cancelled_count || 0;
}

/**
 * قبول الطلب
 */
function acceptOrder(orderId) {
    if (!confirm('هل أنت متأكد من قبول هذا الطلب؟')) return;
    
    fetch('api/accept_order.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ order_id: orderId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('تم قبول الطلب بنجاح', 'success');
            loadOrders(currentFilter, true);
        } else {
            showNotification(data.message || 'حدث خطأ', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('حدث خطأ في الاتصال', 'error');
    });
}

/**
 * إظهار مودال الرفض
 */
function showRejectModal(orderId) {
    document.getElementById('reject_order_id').value = orderId;
    new bootstrap.Modal(document.getElementById('rejectModal')).show();
}

/**
 * إظهار مودال تحديث الحالة
 */
function showUpdateModal(orderId, currentStatus) {
    document.getElementById('update_order_id').value = orderId;
    document.getElementById('update_status').value = currentStatus;
    
    // إظهار اختيار الكابتن فقط لحالة "في الطريق"
    document.getElementById('update_status').addEventListener('change', function() {
        const captainContainer = document.getElementById('captain_select_container');
        captainContainer.style.display = this.value === 'on_the_way' ? 'block' : 'none';
    });
    
    // تفعيل الحالة الأولية
    document.getElementById('update_status').dispatchEvent(new Event('change'));
    
    new bootstrap.Modal(document.getElementById('updateStatusModal')).show();
}

/**
 * عرض تفاصيل الطلب
 */
function viewOrder(orderId) {
    fetch(`api/get_orders.php?id=${orderId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.order) {
                displayOrderDetails(data.order);
            }
        });
}

/**
 * عرض تفاصيل الطلب في المودال
 */
function displayOrderDetails(order) {
    const modalBody = document.getElementById('orderModalBody');
    
    let itemsHtml = '';
    order.items.forEach(item => {
        itemsHtml += `
            <tr>
                <td>${item.quantity}</td>
                <td>${escapeHtml(item.meal_name)}</td>
                <td>${formatMoney(item.price)}</td>
                <td>${formatMoney(item.price * item.quantity)}</td>
            </tr>
        `;
    });
    
    modalBody.innerHTML = `
        <div class="order-details">
            <div class="details-section">
                <h6>معلومات العميل</h6>
                <p><strong>الاسم:</strong> ${escapeHtml(order.customer_name)}</p>
                <p><strong>الهاتف:</strong> ${order.customer_phone}</p>
                <p><strong>العنوان:</strong> ${order.customer_address || 'لا يوجد'}</p>
            </div>
            
            <div class="details-section">
                <h6>معلومات الطلب</h6>
                <p><strong>رقم الطلب:</strong> #${order.id}</p>
                <p><strong>التاريخ:</strong> ${new Date(order.created_at).toLocaleString('ar-EG')}</p>
                <p><strong>الحالة:</strong> <span class="order-status ${getStatusBadge(order.status)}">${getStatusText(order.status)}</span></p>
                ${order.captain_name ? `<p><strong>الكابتن:</strong> ${escapeHtml(order.captain_name)}</p>` : ''}
                ${order.notes ? `<p><strong>ملاحظات:</strong> ${escapeHtml(order.notes)}</p>` : ''}
            </div>
            
            <div class="details-section">
                <h6>عناصر الطلب</h6>
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>الكمية</th>
                            <th>الوجبة</th>
                            <th>السعر</th>
                            <th>الإجمالي</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${itemsHtml}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="3" class="text-end"><strong>الإجمالي الكلي:</strong></td>
                            <td><strong>${formatMoney(order.total)}</strong></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    `;
    
    // تخزين بيانات الطلب للطباعة
    window.currentOrder = order;
    
    new bootstrap.Modal(document.getElementById('orderModal')).show();
}

/**
 * طباعة الفاتورة
 */
function printReceipt() {
    if (!window.currentOrder) return;
    
    const order = window.currentOrder;
    
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <html dir="rtl">
        <head>
            <title>فاتورة طلب #${order.id}</title>
            <style>
                body { font-family: 'Tajawal', sans-serif; padding: 20px; }
                .header { text-align: center; margin-bottom: 20px; }
                .info { margin-bottom: 15px; }
                table { width: 100%; border-collapse: collapse; margin: 15px 0; }
                th, td { padding: 8px; text-align: right; border-bottom: 1px solid #ddd; }
                th { background: #f5f5f5; }
                .total { font-size: 1.2rem; font-weight: bold; text-align: left; margin-top: 15px; }
                .footer { text-align: center; margin-top: 30px; color: #666; }
            </style>
        </head>
        <body>
            <div class="header">
                <h2>مطعم ماكس</h2>
                <p>فاتورة طلب #${order.id}</p>
                <p>${new Date(order.created_at).toLocaleString('ar-EG')}</p>
            </div>
            
            <div class="info">
                <p><strong>العميل:</strong> ${order.customer_name}</p>
                <p><strong>الهاتف:</strong> ${order.customer_phone}</p>
                <p><strong>العنوان:</strong> ${order.customer_address || 'لا يوجد'}</p>
            </div>
            
            <table>
                <thead>
                    <tr>
                        <th>الكمية</th>
                        <th>الصنف</th>
                        <th>السعر</th>
                        <th>الإجمالي</th>
                    </tr>
                </thead>
                <tbody>
                    ${order.items.map(item => `
                        <tr>
                            <td>${item.quantity}</td>
                            <td>${item.meal_name}</td>
                            <td>${formatMoney(item.price)}</td>
                            <td>${formatMoney(item.price * item.quantity)}</td>
                        </tr>
                    `).join('')}
                </tbody>
            </table>
            
            <div class="total">
                الإجمالي الكلي: ${formatMoney(order.total)}
            </div>
            
            <div class="footer">
                <p>شكراً لتسوقكم معنا</p>
            </div>
        </body>
        </html>
    `);
    printWindow.document.close();
    printWindow.print();
}

/**
 * إظهار مؤشر التحميل
 */
function showLoading() {
    const container = document.getElementById('ordersContainer');
    if (!container) return;
    
    container.innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">جاري التحميل...</span>
            </div>
            <p class="mt-2 text-muted">جاري تحميل الطلبات...</p>
        </div>
    `;
}

/**
 * إخفاء مؤشر التحميل
 */
function hideLoading() {
    // يتم استبدال التحميل عند عرض الطلبات
}

/**
 * دوال مساعدة
 */
function getStatusBadge(status) {
    const classes = {
        'pending': 'badge-pending',
        'accepted': 'badge-accepted',
        'preparing': 'badge-preparing',
        'ready': 'badge-ready',
        'on_the_way': 'badge-ontheway',
        'delivered': 'badge-delivered',
        'cancelled': 'badge-cancelled'
    };
    return classes[status] || 'badge-secondary';
}

function getStatusText(status) {
    const texts = {
        'pending': 'قيد الانتظار',
        'accepted': 'تم القبول',
        'preparing': 'جاري التحضير',
        'ready': 'جاهز',
        'on_the_way': 'في الطريق',
        'delivered': 'تم التوصيل',
        'cancelled': 'ملغي'
    };
    return texts[status] || status;
}

function formatMoney(amount) {
    return Number(amount).toLocaleString('ar-EG') + ' ريال';
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function getTimeAgo(timestamp) {
    const now = new Date();
    const past = new Date(timestamp);
    const diffSeconds = Math.floor((now - past) / 1000);
    
    if (diffSeconds < 60) {
        return 'منذ لحظات';
    } else if (diffSeconds < 3600) {
        const minutes = Math.floor(diffSeconds / 60);
        return `منذ ${minutes} دقيقة`;
    } else if (diffSeconds < 86400) {
        const hours = Math.floor(diffSeconds / 3600);
        return `منذ ${hours} ساعة`;
    } else {
        return past.toLocaleDateString('ar-EG');
    }
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    
    let icon = 'info-circle';
    if (type === 'success') icon = 'check-circle';
    if (type === 'error') icon = 'exclamation-circle';
    
    notification.innerHTML = `
        <i class="bi bi-${icon}"></i>
        <span>${message}</span>
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('fade-out');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}