<script>
const userPermissions = `<%- JSON.stringify(userInfo.permissions) %>`;
$(document).ready(function() {
    const lang = `<%= lang %>`;
    const table = $('.ordersTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: `<%= '/admin/orders' %>`,
            type: 'GET',
            dataType: 'json',
            data: function(d) {
                const statusFilter = $('#statusFilter').val();
                d.status = statusFilter;
            }
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'products.productSnapshot.title.content',
                render: function(data) {
                    if (!data) return `<%= trans.global.not_available %>`;
                    const words = data.split(' ');
                    return words.length > 30 ? words.slice(0, 10).join(' ') + '...' : data;
                }
            },
            {
                data: 'buyer',
                render: function(data) {
                    if (data) {
                        return `${data.first_name || ''} ${data.last_name || ''} <br> (${data.email || ''})`;
                    }
                    return `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'seller',
                render: function(data) {
                    if (data) {
                        return `${data.first_name || ''} ${data.last_name || ''} <br> (${data.email || ''})`;
                    }
                    return `<%= trans.global.not_available %>`;
                }
            },
            {
                data: 'status',
                render: function(data, type, row) {
                    const statusMap = {
                        pending: ['bg-warning', 'Pending'],
                        processing: ['bg-info', 'Processing'],
                        shipped: ['bg-primary', 'Shipped'],
                        out_for_delivery: ['bg-secondary', 'Out for Delivery'],
                        delivered: ['bg-success', 'Delivered'],
                        cancelled: ['bg-danger', 'Cancelled'],
                        returned: ['bg-dark', 'Returned'],
                        not_received: ['bg-danger', 'Not Received']
                    };

                    const [badgeClass, label] = statusMap[data?.toLowerCase()] || ['bg-secondary', 'Unknown'];
                    return `<span class="badge ${badgeClass}">${label}</span>`;

                }

            },
            {
                data: 'createdAt',
                render: function(data) {
                    return data ? new Date(data).toLocaleDateString(lang) : `<%= trans.global.not_available %>`;
                }
            },
           {
                data: '_id',
                render: function(data, type, row) {
                    const canView = userPermissions.includes('view_order');
                    const canDispute = userPermissions.includes('order_dispute');
                    const canViewEvidence = userPermissions.includes('order_evidence');
                    const isDisputed = row?.isDisputed || false;
                    const isEvidence = row?.isEvidence || false;
                    return `<div class="d-flex gap-1">
                                ${createViewButton(data, canView)}
                                ${isEvidence ? createEvidenceButton(data, canViewEvidence) : ''}
                                ${isDisputed ? createDisputeButton(data, canDispute) : ''}
                            </div>`;
                },
                orderable: false
            }

        ],
        responsive: true,
        lengthMenu: [10, 25, 50, 100],
        stateSave: false,
        order: [[5, 'desc']],
        language: languageConfig
    });


    /* 
    ** Order evidence modal
    */
    /* $(document).on('click', '.view-evidence', function () {
        const orderId = $(this).data('id');
        
        $('#actionBox').removeClass('d-none');
        $('#evidenceStatus').val('');
        $('#evidenceMessage').val('');

        $.get(`/admin/order/${orderId}/evidence`, function (res) {
            if (!res.success) {
                alert(res.message || 'Error loading evidence');
                return;
            }

            const container = $('#chatContainer');
            container.empty();
            
            const evidenceData = res.data.evidenceData;
            const isLatestPending = res.data.isLatestPending;

            if (!evidenceData.length) {
                container.append(`
                    <div class="evidence-empty-state">
                        <i class="fas fa-inbox"></i>
                        <p>No evidence submitted yet</p>
                    </div>
                `);
                $('#actionBox').addClass('d-none');
                $('#saveEvidence').data('order', orderId);
                new bootstrap.Modal('#evidenceModal').show();
                return;
            }

            const groupedByDate = {};
            evidenceData.forEach(ev => {
                const date = new Date(ev.createdAt).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                if (!groupedByDate[date]) {
                    groupedByDate[date] = [];
                }
                groupedByDate[date].push(ev);
            });

            Object.keys(groupedByDate).forEach(date => {
                container.append(`
                    <div class="evidence-date-divider">
                        <span>${date}</span>
                    </div>
                `);

                groupedByDate[date].forEach((ev, index) => {
                    if (ev.sellerMessage || ev.evidence?.length) {
                        let messageHTML = `
                            <div class="evidence-message-wrapper evidence-other">
                                <div class="evidence-avatar evidence-other-avatar">U</div>
                                <div class="evidence-message-content">
                        `;
                        if (ev.sellerMessage) {
                            messageHTML += `
                                <div class="evidence-message-bubble">
                                    <p style="margin: 0;">${ev.sellerMessage}</p>
                                </div>
                            `;
                        }

                        if (ev.evidence?.length) {
                            ev.evidence.forEach(file => {
                                const fileUrl = file.filepath || '';
                                const originalName = file.originalName || file.filename || 'Unknown File';
                                const fileExt = originalName.split('.').pop()?.toLowerCase() || '';
                                
                                let fileIcon = 'fa-file';
                                if (['pdf'].includes(fileExt)) fileIcon = 'fa-file-pdf';
                                else if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(fileExt)) fileIcon = 'fa-file-image';
                                else if (['doc', 'docx'].includes(fileExt)) fileIcon = 'fa-file-word';
                                else if (['xls', 'xlsx', 'csv'].includes(fileExt)) fileIcon = 'fa-file-excel';
                                else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(fileExt)) fileIcon = 'fa-file-archive';
                                else if (['txt', 'text'].includes(fileExt)) fileIcon = 'fa-file-alt';

                                const fileSize = file.size ? formatFileSize(file.size) : 'Unknown size';

                                messageHTML += `
                                    <div class="evidence-file-attachment" onclick="window.open('${fileUrl}', '_blank')">
                                        <div class="evidence-file-icon">
                                            <i class="fas ${fileIcon}"></i>
                                        </div>
                                        <div class="evidence-file-info">
                                            <span class="evidence-file-name">${originalName}</span>
                                            <span class="evidence-file-size">${fileSize}</span>
                                        </div>
                                    </div>
                                `;
                            });
                        }

                        if (ev.status === 'pending') {
                            messageHTML += `
                                <div class="evidence-status-indicator evidence-status-pending">
                                    <i class="fas fa-clock"></i>
                                    Awaiting Review
                                </div>
                            `;
                        }

                        messageHTML += `
                                    <div class="evidence-message-meta">
                                        <span>${new Date(ev.createdAt).toLocaleTimeString('en-US', { 
                                            hour: '2-digit', 
                                            minute: '2-digit' 
                                        })}</span>
                                    </div>
                                </div>
                            </div>
                        `;

                        container.append(messageHTML);
                    }

                    if (ev.systemReview || ev.status === 'approved' || ev.status === 'rejected') {
                        const status = ev.status;
                        const reviewMessage = ev.systemReview?.message || '';
                        const reviewedAt = ev.systemReview?.reviewedAt || ev.createdAt;

                        if (status !== 'pending') {
                            const statusClass = status === 'approved' ? 'evidence-approved' : 'evidence-rejected';
                            const statusIcon = status === 'approved' ? 'fa-check-circle' : 'fa-times-circle';
                            const statusText = status === 'approved' ? 'Approved' : 'Rejected';

                            const adminHTML = `
                                <div class="evidence-message-wrapper evidence-admin">
                                    <div class="evidence-avatar evidence-admin-avatar">A</div>
                                    <div class="evidence-message-content">
                                        <div class="evidence-message-meta">
                                        </div>
                                        ${reviewMessage ? `
                                            <div class="evidence-message-bubble">
                                                <p style="margin: 0;">${reviewMessage}</p>
                                            </div>
                                        ` : ''}
                                        <div class="evidence-status-badge ${statusClass}">
                                            <i class="fas ${statusIcon}"></i>
                                            ${statusText}
                                        </div>
                                        <div class="evidence-message-meta">
                                            <span>${new Date(reviewedAt).toLocaleTimeString('en-US', { 
                                                hour: '2-digit', 
                                                minute: '2-digit' 
                                            })}</span>
                                        </div>
                                    </div>
                                </div>
                            `;

                            container.append(adminHTML);
                        }
                    }
                });
            });

            container.scrollTop(container.prop('scrollHeight'));

            if (isLatestPending) {
                $('#actionBox').removeClass('d-none');
            } else {
                $('#actionBox').addClass('d-none');
            }
            $('#saveEvidence').data('order', orderId);
            
            const evidenceModal = new bootstrap.Modal('#evidenceModal');
            evidenceModal.show();
        }).fail(function(xhr, status, error) {
            console.error('Error fetching evidence:', error);
            alert('Error loading evidence. Please try again.');
        });
    }); */

    
    $(document).on('click', '.view-evidence', function () {
        const orderId = $(this).data('id');

        $('#chatContainer').empty();
        $('#actionBox').removeClass('d-none');
        $('#evidenceStatus').val('');
        $('#evidenceMessage').val('');

        $.get(`/admin/order/${orderId}/evidence`, function (res) {
            if (!res.success) {
                alert(res.message || 'Error loading evidence');
                return;
            }

            const container = $('#chatContainer');
            container.empty();
            
            const evidenceData = res.data.evidenceData;
            const isLatestPending = res.data.isLatestPending;

            if (!evidenceData.length) {
                container.append(`
                    <div class="evidence-empty-state">
                        <i class="fas fa-inbox"></i>
                        <p>No evidence submitted yet</p>
                    </div>
                `);
                $('#actionBox').addClass('d-none');
                $('#saveEvidence').data('order', orderId);
                const evidenceModal = new bootstrap.Modal('#evidenceModal');
                evidenceModal.show();
                container.scrollTop(container.prop('scrollHeight'));
                return;
            }

            const groupedByDate = {};
            evidenceData.forEach(ev => {
                const date = new Date(ev.createdAt).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                
                if (!groupedByDate[date]) {
                    groupedByDate[date] = [];
                }
                groupedByDate[date].push(ev);
            });

            Object.keys(groupedByDate).forEach(date => {
                container.append(`
                    <div class="evidence-date-divider">
                        <span>${date}</span>
                    </div>
                `);

                groupedByDate[date].forEach((ev, index) => {
                    if (ev.sellerMessage || ev.evidence?.length) {
                        let messageHTML = `
                            <div class="evidence-message-wrapper evidence-other">
                                <div class="evidence-avatar evidence-other-avatar">U</div>
                                <div class="evidence-message-content">
                        `;
                        if (ev.sellerMessage) {
                            messageHTML += `
                                <div class="evidence-message-bubble">
                                    <p style="margin: 0;">${ev.sellerMessage}</p>
                                </div>
                            `;
                        }

                        if (ev.evidence?.length) {
                            ev.evidence.forEach(file => {
                                const fileUrl = file.filepath || '';
                                const originalName = file.originalName || file.filename || 'Unknown File';
                                const fileExt = originalName.split('.').pop()?.toLowerCase() || '';
                                
                                let fileIcon = 'fa-file';
                                if (['pdf'].includes(fileExt)) fileIcon = 'fa-file-pdf';
                                else if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(fileExt)) fileIcon = 'fa-file-image';
                                else if (['doc', 'docx'].includes(fileExt)) fileIcon = 'fa-file-word';
                                else if (['xls', 'xlsx', 'csv'].includes(fileExt)) fileIcon = 'fa-file-excel';
                                else if (['zip', 'rar', '7z', 'tar', 'gz'].includes(fileExt)) fileIcon = 'fa-file-archive';
                                else if (['txt', 'text'].includes(fileExt)) fileIcon = 'fa-file-alt';

                                const fileSize = file.size ? formatFileSize(file.size) : 'Unknown size';

                                messageHTML += `
                                    <div class="evidence-file-attachment" onclick="window.open('${fileUrl}', '_blank')">
                                        <div class="evidence-file-icon">
                                            <i class="fas ${fileIcon}"></i>
                                        </div>
                                        <div class="evidence-file-info">
                                            <span class="evidence-file-name">${originalName}</span>
                                            <span class="evidence-file-size">${fileSize}</span>
                                        </div>
                                    </div>
                                `;
                            });
                        }

                        if (ev.status === 'pending') {
                            messageHTML += `
                                <div class="evidence-status-indicator evidence-status-pending">
                                    <i class="fas fa-clock"></i>
                                    Awaiting Review
                                </div>
                            `;
                        }

                        messageHTML += `
                                    <div class="evidence-message-meta">
                                        <span>${new Date(ev.createdAt).toLocaleTimeString('en-US', { 
                                            hour: '2-digit', 
                                            minute: '2-digit' 
                                        })}</span>
                                    </div>
                                </div>
                            </div>
                        `;

                        container.append(messageHTML);
                    }

                    if (ev.systemReview || ev.status === 'approved' || ev.status === 'rejected') {
                        const status = ev.status;
                        const reviewMessage = ev.systemReview?.message || '';
                        const reviewedAt = ev.systemReview?.reviewedAt || ev.createdAt;

                        if (status !== 'pending') {
                            const statusClass = status === 'approved' ? 'evidence-approved' : 'evidence-rejected';
                            const statusIcon = status === 'approved' ? 'fa-check-circle' : 'fa-times-circle';
                            const statusText = status === 'approved' ? 'Approved' : 'Rejected';

                            const adminHTML = `
                                <div class="evidence-message-wrapper evidence-admin">
                                    <div class="evidence-avatar evidence-admin-avatar">A</div>
                                    <div class="evidence-message-content">
                                        <div class="evidence-message-meta">
                                        </div>
                                        ${reviewMessage ? `
                                            <div class="evidence-message-bubble">
                                                <p style="margin: 0;">${reviewMessage}</p>
                                            </div>
                                        ` : ''}
                                        <div class="evidence-status-badge ${statusClass}">
                                            <i class="fas ${statusIcon}"></i>
                                            ${statusText}
                                        </div>
                                        <div class="evidence-message-meta">
                                            <span>${new Date(reviewedAt).toLocaleTimeString('en-US', { 
                                                hour: '2-digit', 
                                                minute: '2-digit' 
                                            })}</span>
                                        </div>
                                    </div>
                                </div>
                            `;

                            container.append(adminHTML);
                        }
                    }
                });
            });

            container.scrollTop(container.prop('scrollHeight'));

            if (isLatestPending) {
                $('#actionBox').removeClass('d-none');
            } else {
                $('#actionBox').addClass('d-none');
            }
            $('#saveEvidence').data('order', orderId);
            
            const evidenceModal = new bootstrap.Modal('#evidenceModal');
            evidenceModal.show();
            
            setTimeout(() => {
                container.scrollTop(container.prop('scrollHeight'));
            }, 300);
        }).fail(function(xhr, status, error) {
            console.error('Error fetching evidence:', error);
            showNotificationPopup('Error loading evidence. Please try again.', 'error');
        });
    });


    $(document).on('click', '#saveEvidence', function () {
        const orderId = $(this).data('order');
        const status = $('#evidenceStatus').val();
        const message = $('#evidenceMessage').val().trim();

        if (!status) {
            showNotificationPopup('Please select a status (Approved or Rejected)', 'error');
            return;
        }

        const $btn = $(this);
        const originalHtml = $btn.html();
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

        $.ajax({
            url: `/admin/order/${orderId}/evidence-status/${status}`,
            type: 'POST',
            data: { message },
            success: function (res) {
                if (!res.success) {
                    showNotificationPopup(res.message || 'Failed to update evidence status', 'error');
                    return;
                }

                $('#evidenceMessage').val('');
                $('#evidenceStatus').val('');

                const container = $('#chatContainer');
                const time = new Date().toLocaleTimeString('en-US', { 
                    hour: '2-digit', 
                    minute: '2-digit' 
                });
                const statusClass = status === 'approved' ? 'evidence-approved' : 'evidence-rejected';
                const statusIcon = status === 'approved' ? 'fa-check-circle' : 'fa-times-circle';
                const statusText = status === 'approved' ? 'Approved' : 'Rejected';

                const adminHTML = `
                    <div class="evidence-message-wrapper evidence-admin">
                        <div class="evidence-avatar evidence-admin-avatar">A</div>
                        <div class="evidence-message-content">
                            <div class="evidence-message-meta">
                                <span class="evidence-sender-name">Admin Review</span>
                            </div>
                            <div class="evidence-message-bubble">
                                <p style="margin: 0;">${message}</p>
                            </div>
                            <div class="evidence-status-badge ${statusClass}">
                                <i class="fas ${statusIcon}"></i>
                                ${statusText}
                            </div>
                            <div class="evidence-message-meta">
                                <span>${time}</span>
                            </div>
                        </div>
                    </div>
                `;

                container.append(adminHTML);
                container.scrollTop(container.prop('scrollHeight'));

                
                $('#actionBox').addClass('d-none');
                
                showNotificationPopup('Evidence status updated successfully!', 'success');
                
                $('.evidence-other .evidence-latest-badge').remove();
                $('.evidence-status-pending').remove();
            },
            error: function(xhr, status, error) {
                console.error('Error updating evidence:', error);
                showNotificationPopup('Error updating evidence. Please try again.', 'error');
            },
            complete: function() {
                $btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    $(document).on('keypress', '#evidenceMessage', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            $('#saveEvidence').click();
        }
    });
    
});

function createViewButton(orderId, canView) {
  if (!canView) return '';
  return `<a href="/admin/order/${orderId}/view" class="btn btn-sm btn-info" title="View Order" aria-label="View Order">
            <i class="fas fa-eye"></i>
          </a>`;
}

function createDisputeButton(id, canDispute) {
    if (!canDispute) return '';
    return `<a href="/admin/dispute/order/${id}/view" class="btn btn-sm btn-warning viewOrderDispute1" title="Order Dispute" data-order-id='${id}'>
        <i class="fas fa-exclamation-triangle"></i>
    </a>`;
}

function createEvidenceButton(id, canViewEvidence) {
  if (!canViewEvidence) return '';
  return `<a href="javascript:void(0);" class="btn btn-sm btn-secondary view-evidence" data-id="${id}" title="Order Evidence"> <i class="fas fa-file-alt"></i></a>`;
}


function getStatusBadgeClass(status) {
    switch(status.toLowerCase()) {
        case 'opened': return 'warning';
        case 'discussion': return 'info';
        case 'resolved': return 'success';
        default: return 'dark';
    }
}

function formatFileSize(bytes) {
    if (!bytes || bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

/* function scrollChatToBottom() {
    const container = $('#chatContainer');
    container.scrollTop(container.prop('scrollHeight'));
} */

</script>