tinker_tickets/assets/js/dashboard.js

// XSS prevention helper
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Get ticket ID from URL (handles both /ticket/123 and ?id=123 formats)
function getTicketIdFromUrl() {
    const pathMatch = window.location.pathname.match(/\/ticket\/(\d+)/);
    if (pathMatch) return pathMatch[1];
    const params = new URLSearchParams(window.location.search);
    return params.get('id');
}

/**
 * Toggle sidebar visibility on desktop
 */
function toggleSidebar() {
    const sidebar = document.getElementById('dashboardSidebar');
    const layout = document.getElementById('dashboardLayout');
    if (sidebar && layout) {
        const isCollapsed = sidebar.classList.toggle('collapsed');
        layout.classList.toggle('sidebar-collapsed', isCollapsed);
        // Store state in localStorage
        localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
    }
}

/**
 * Mobile sidebar functions
 */
function openMobileSidebar() {
    const sidebar = document.getElementById('dashboardSidebar');
    const overlay = document.getElementById('mobileSidebarOverlay');
    if (sidebar) {
        sidebar.classList.add('mobile-open');
    }
    if (overlay) {
        overlay.classList.add('active');
    }
    document.body.style.overflow = 'hidden';
}

function closeMobileSidebar() {
    const sidebar = document.getElementById('dashboardSidebar');
    const overlay = document.getElementById('mobileSidebarOverlay');
    if (sidebar) {
        sidebar.classList.remove('mobile-open');
    }
    if (overlay) {
        overlay.classList.remove('active');
    }
    document.body.style.overflow = '';
}

// Initialize mobile elements
function initMobileSidebar() {
    const sidebar = document.getElementById('dashboardSidebar');
    const dashboardMain = document.querySelector('.dashboard-main');

    // Create overlay if it doesn't exist
    if (!document.getElementById('mobileSidebarOverlay')) {
        const overlay = document.createElement('div');
        overlay.id = 'mobileSidebarOverlay';
        overlay.className = 'mobile-sidebar-overlay';
        overlay.onclick = closeMobileSidebar;
        document.body.appendChild(overlay);
    }

    // Create mobile filter toggle button
    if (dashboardMain && !document.getElementById('mobileFilterToggle')) {
        const toggleBtn = document.createElement('button');
        toggleBtn.id = 'mobileFilterToggle';
        toggleBtn.className = 'mobile-filter-toggle';
        toggleBtn.innerHTML = '☰ Filters & Search Options';
        toggleBtn.onclick = openMobileSidebar;
        dashboardMain.insertBefore(toggleBtn, dashboardMain.firstChild);
    }

    // Create close button inside sidebar
    if (sidebar && !sidebar.querySelector('.mobile-sidebar-close')) {
        const closeBtn = document.createElement('button');
        closeBtn.className = 'mobile-sidebar-close';
        closeBtn.innerHTML = '×';
        closeBtn.onclick = closeMobileSidebar;
        sidebar.insertBefore(closeBtn, sidebar.firstChild);
    }

    // Create mobile bottom navigation
    if (!document.getElementById('mobileBottomNav')) {
        const nav = document.createElement('nav');
        nav.id = 'mobileBottomNav';
        nav.className = 'mobile-bottom-nav';
        nav.innerHTML = `
            <a href="/">
                <span class="nav-icon">🏠</span>
                <span>Home</span>
            </a>
            <button type="button" data-action="open-mobile-sidebar">
                <span class="nav-icon">🔍</span>
                <span>Filter</span>
            </button>
            <a href="/ticket/create">
                <span class="nav-icon">➕</span>
                <span>New</span>
            </a>
            <button type="button" data-action="open-settings-modal">
                <span class="nav-icon">⚙️</span>
                <span>Settings</span>
            </button>
        `;
        document.body.appendChild(nav);
    }
}

// Restore sidebar state on page load
document.addEventListener('DOMContentLoaded', function() {
    const savedState = localStorage.getItem('sidebarCollapsed');
    const sidebar = document.getElementById('dashboardSidebar');
    const layout = document.getElementById('dashboardLayout');
    if (savedState === 'true' && sidebar && layout) {
        sidebar.classList.add('collapsed');
        layout.classList.add('sidebar-collapsed');
    }
});

// Main initialization
document.addEventListener('DOMContentLoaded', function() {
    // Initialize mobile sidebar for dashboard
    initMobileSidebar();

    // Check if we're on the dashboard page
    const hasTable = document.querySelector('table');
    const isTicketPage = window.location.pathname.includes('/ticket/') ||
                         window.location.href.includes('ticket.php') ||
                         document.querySelector('.ticket-details') !== null;
    const isDashboard = hasTable && !isTicketPage;

    if (isDashboard) {
        // Dashboard-specific initialization
        initStatusFilter();
        initTableSorting();
        initSidebarFilters();
    }

    // Initialize for all pages
    initSettingsModal();

    // Force dark mode only (terminal aesthetic - no theme switching)
    document.documentElement.setAttribute('data-theme', 'dark');
    document.body.classList.add('dark-mode');

    // Event delegation for dynamically created modals
    document.addEventListener('click', function(e) {
        const target = e.target.closest('[data-action]');
        if (!target) return;

        const action = target.dataset.action;
        switch (action) {
            // Bulk operations
            case 'perform-bulk-assign':
                performBulkAssign();
                break;
            case 'close-bulk-assign-modal':
                closeBulkAssignModal();
                break;
            case 'perform-bulk-priority':
                performBulkPriority();
                break;
            case 'close-bulk-priority-modal':
                closeBulkPriorityModal();
                break;
            case 'perform-bulk-status':
                performBulkStatusChange();
                break;
            case 'close-bulk-status-modal':
                closeBulkStatusModal();
                break;
            case 'perform-bulk-delete':
                performBulkDelete();
                break;
            case 'close-bulk-delete-modal':
                closeBulkDeleteModal();
                break;
            // Quick actions
            case 'perform-quick-status':
                performQuickStatusChange(target.dataset.ticketId);
                break;
            case 'close-quick-status-modal':
                closeQuickStatusModal();
                break;
            case 'perform-quick-assign':
                performQuickAssign(target.dataset.ticketId);
                break;
            case 'close-quick-assign-modal':
                closeQuickAssignModal();
                break;
            // Mobile navigation
            case 'open-mobile-sidebar':
                if (typeof openMobileSidebar === 'function') openMobileSidebar();
                break;
            case 'open-settings-modal':
                if (typeof openSettingsModal === 'function') openSettingsModal();
                break;
            // Filter badge actions
            case 'remove-filter':
                removeFilter(target.dataset.filterType, target.dataset.filterValue);
                break;
            case 'clear-all-filters':
                clearAllFilters();
                break;
        }
    });
});

/**
 * Remove a single filter and reload page
 */
function removeFilter(filterType, filterValue) {
    const params = new URLSearchParams(window.location.search);

    if (filterType === 'status') {
        const currentStatuses = (params.get('status') || '').split(',').filter(s => s.trim());
        const newStatuses = currentStatuses.filter(s => s !== filterValue);
        if (newStatuses.length > 0) {
            params.set('status', newStatuses.join(','));
        } else {
            params.delete('status');
        }
    } else if (filterType === 'priority') {
        const currentPriorities = (params.get('priority') || '').split(',').filter(p => p.trim());
        const newPriorities = currentPriorities.filter(p => p !== filterValue);
        if (newPriorities.length > 0) {
            params.set('priority', newPriorities.join(','));
        } else {
            params.delete('priority');
        }
    } else if (filterType === 'search') {
        params.delete('search');
    } else {
        params.delete(filterType);
    }

    // Reset to page 1 when changing filters
    params.delete('page');

    window.location.search = params.toString();
}

/**
 * Clear all filters and reload page
 */
function clearAllFilters() {
    const params = new URLSearchParams(window.location.search);

    // Remove all filter parameters
    params.delete('status');
    params.delete('priority');
    params.delete('category');
    params.delete('type');
    params.delete('assigned_to');
    params.delete('search');
    params.delete('date_from');
    params.delete('date_to');
    params.delete('page');

    // Keep sort parameters
    const sortParams = new URLSearchParams();
    if (params.has('sort')) sortParams.set('sort', params.get('sort'));
    if (params.has('dir')) sortParams.set('dir', params.get('dir'));

    window.location.search = sortParams.toString();
}

function initTableSorting() {
    const tableHeaders = document.querySelectorAll('th');
    tableHeaders.forEach((header, index) => {
        header.style.cursor = 'pointer';
        header.addEventListener('click', () => {
            const table = header.closest('table');
            sortTable(table, index);
        });
    });
}

function initSidebarFilters() {
    const applyFiltersBtn = document.getElementById('apply-filters-btn');
    const clearFiltersBtn = document.getElementById('clear-filters-btn');

    if (applyFiltersBtn) {
        applyFiltersBtn.addEventListener('click', () => {
            const params = new URLSearchParams(window.location.search);

            // Collect selected statuses
            const selectedStatuses = Array.from(
                document.querySelectorAll('.filter-group input[name="status"]:checked')
            ).map(cb => cb.value);

            // Collect selected categories
            const selectedCategories = Array.from(
                document.querySelectorAll('.filter-group input[name="category"]:checked')
            ).map(cb => cb.value);

            // Collect selected types
            const selectedTypes = Array.from(
                document.querySelectorAll('.filter-group input[name="type"]:checked')
            ).map(cb => cb.value);

            // Update URL parameters
            if (selectedStatuses.length > 0) {
                params.set('status', selectedStatuses.join(','));
            } else {
                params.delete('status');
            }

            if (selectedCategories.length > 0) {
                params.set('category', selectedCategories.join(','));
            } else {
                params.delete('category');
            }

            if (selectedTypes.length > 0) {
                params.set('type', selectedTypes.join(','));
            } else {
                params.delete('type');
            }

            // Reset to page 1 when filters change
            params.set('page', '1');

            // Reload with new parameters
            window.location.search = params.toString();
        });
    }

    if (clearFiltersBtn) {
        clearFiltersBtn.addEventListener('click', () => {
            const params = new URLSearchParams(window.location.search);

            // Remove filter parameters
            params.delete('status');
            params.delete('category');
            params.delete('type');
            params.set('page', '1');

            // Reload with cleared filters
            window.location.search = params.toString();
        });
    }
}

function initSettingsModal() {
    const settingsIcon = document.querySelector('.settings-icon');
    if (settingsIcon) {
        settingsIcon.addEventListener('click', function(e) {
            e.preventDefault();
            // openSettingsModal is defined in settings.js
            if (typeof openSettingsModal === 'function') {
                openSettingsModal();
            }
        });
    }
}

function sortTable(table, column) {
    const headers = table.querySelectorAll('th');
    headers.forEach(header => {
        header.classList.remove('sort-asc', 'sort-desc');
    });

    const rows = Array.from(table.querySelectorAll('tbody tr'));
    const currentDirection = table.dataset.sortColumn == column 
        ? (table.dataset.sortDirection === 'asc' ? 'desc' : 'asc')
        : 'asc';
    
    table.dataset.sortColumn = column;
    table.dataset.sortDirection = currentDirection;
    
    rows.sort((a, b) => {
        const aValue = a.children[column].textContent.trim();
        const bValue = b.children[column].textContent.trim();

        // Check if this is a date column
        const headerText = headers[column].textContent.toLowerCase();
        if (headerText === 'created' || headerText === 'updated') {
            const dateA = new Date(aValue);
            const dateB = new Date(bValue);
            return currentDirection === 'asc' ? dateA - dateB : dateB - dateA;
        }

        // Special handling for "Assigned To" column
        if (headerText === 'assigned to') {
            const aUnassigned = aValue === 'Unassigned';
            const bUnassigned = bValue === 'Unassigned';

            // Both unassigned - equal
            if (aUnassigned && bUnassigned) return 0;

            // Put unassigned at the end regardless of sort direction
            if (aUnassigned) return 1;
            if (bUnassigned) return -1;

            // Otherwise sort names normally
            return currentDirection === 'asc'
                ? aValue.localeCompare(bValue)
                : bValue.localeCompare(aValue);
        }

        // Numeric comparison
        const numA = parseFloat(aValue);
        const numB = parseFloat(bValue);

        if (!isNaN(numA) && !isNaN(numB)) {
            return currentDirection === 'asc' ? numA - numB : numB - numA;
        }

        // String comparison
        return currentDirection === 'asc'
            ? aValue.localeCompare(bValue)
            : bValue.localeCompare(aValue);
    });
    
    const currentHeader = headers[column];
    currentHeader.classList.add(currentDirection === 'asc' ? 'sort-asc' : 'sort-desc');
    
    const tbody = table.querySelector('tbody');
    rows.forEach(row => tbody.appendChild(row));
}

// Old settings modal functions removed - now using settings.js with new settings modal

function initStatusFilter() {
    const filterContainer = document.createElement('div');
    filterContainer.className = 'status-filter-container';
    
    const dropdown = document.createElement('div');
    dropdown.className = 'status-dropdown';
    
    const dropdownHeader = document.createElement('div');
    dropdownHeader.className = 'dropdown-header';
    dropdownHeader.textContent = 'Status Filter';
    
    const dropdownContent = document.createElement('div');
    dropdownContent.className = 'dropdown-content';
    
    const statuses = ['Open', 'In Progress', 'Closed'];
    statuses.forEach(status => {
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.value = status;
        checkbox.id = `status-${status.toLowerCase().replace(/\s+/g, '-')}`;
        
        const urlParams = new URLSearchParams(window.location.search);
        const currentStatuses = urlParams.get('status') ? urlParams.get('status').split(',') : [];
        const showAll = urlParams.get('show_all');
        
        // FIXED LOGIC: Determine checkbox state
        if (showAll === '1') {
            // If show_all=1 parameter exists, all should be checked
            checkbox.checked = true;
        } else if (currentStatuses.length === 0) {
            // No status parameter - default: Open and In Progress checked, Closed unchecked
            checkbox.checked = status !== 'Closed';
        } else {
            // Status parameter exists - check if this status is in the list
            checkbox.checked = currentStatuses.includes(status);
        }
        
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(' ' + status));
        dropdownContent.appendChild(label);
    });
    
    const saveButton = document.createElement('button');
    saveButton.className = 'btn save-filter';
    saveButton.textContent = 'Apply Filter';
    
    saveButton.onclick = () => {
        const checkedBoxes = dropdownContent.querySelectorAll('input:checked');
        const selectedStatuses = Array.from(checkedBoxes).map(cb => cb.value);
        
        const params = new URLSearchParams(window.location.search);
        
        if (selectedStatuses.length === 0) {
            // No statuses selected - show default (Open + In Progress)
            params.delete('status');
            params.delete('show_all');
        } else if (selectedStatuses.length === 3) {
            // All statuses selected - show all tickets
            params.delete('status');
            params.set('show_all', '1');
        } else {
            // Some statuses selected - set the parameter
            params.set('status', selectedStatuses.join(','));
            params.delete('show_all');
        }
        
        params.set('page', '1');
        window.location.search = params.toString();
        dropdown.classList.remove('active');
    };
    
    dropdownHeader.onclick = () => {
        dropdown.classList.toggle('active');
    };
    
    dropdown.appendChild(dropdownHeader);
    dropdown.appendChild(dropdownContent);
    dropdownContent.appendChild(saveButton);
    filterContainer.appendChild(dropdown);
    
    const tableActions = document.querySelector('.table-controls .table-actions');
    if (tableActions) {
        tableActions.prepend(filterContainer);
    }
}

function quickSave() {
    if (!window.ticketData) {
        console.error('No ticket data available');
        return;
    }
    
    const statusSelect = document.getElementById('status-select');
    const prioritySelect = document.getElementById('priority-select');
    
    if (!statusSelect || !prioritySelect) {
        console.error('Status or priority select not found');
        return;
    }
    
    const data = {
        ticket_id: parseInt(window.ticketData.id),
        status: statusSelect.value,
        priority: parseInt(prioritySelect.value)
    };
    
    fetch('/api/update_ticket.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify(data)
    })
    .then(response => {
        return response.text().then(text => {
            try {
                return JSON.parse(text);
            } catch (e) {
                throw new Error('Invalid JSON response: ' + text);
            }
        });
    })
    .then(result => {
        if (result.success) {
            // Update the hamburger menu display
            const hamburgerStatus = document.getElementById('hamburger-status');
            const hamburgerPriority = document.getElementById('hamburger-priority');
            
            if (hamburgerStatus) hamburgerStatus.textContent = statusSelect.value;
            if (hamburgerPriority) hamburgerPriority.textContent = 'P' + prioritySelect.value;
            
            // Update window.ticketData
            window.ticketData.status = statusSelect.value;
            window.ticketData.priority = parseInt(prioritySelect.value);
            
            // Update main page elements if they exist
            const statusDisplay = document.getElementById('statusDisplay');
            if (statusDisplay) {
                statusDisplay.className = `status-${statusSelect.value}`;
                statusDisplay.textContent = statusSelect.value;
            }

            // Close hamburger menu after successful save
            const hamburgerContent = document.querySelector('.hamburger-content');
            if (hamburgerContent) {
                hamburgerContent.classList.remove('open');
                document.body.classList.remove('menu-open');
            }
            
        } else {
            console.error('Error updating ticket:', result.error || 'Unknown error');
            toast.error('Error updating ticket: ' + (result.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error updating ticket:', error);
        toast.error('Error updating ticket: ' + error.message, 5000);
    });
}


// Ticket page functions (if needed)
function saveTicket() {
    const editables = document.querySelectorAll('.editable');
    const data = {};
    const ticketId = getTicketIdFromUrl();

    editables.forEach(field => {
        if (field.dataset.field) {
            data[field.dataset.field] = field.value;
        }
    });

    fetch('/api/update_ticket.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            ...data
        })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            const statusDisplay = document.getElementById('statusDisplay');
            if (statusDisplay) {
                statusDisplay.className = `status-${data.status}`;
                statusDisplay.textContent = data.status;
            }
        }
    });
}
/**
 * Load template data into the create ticket form
 */
function loadTemplate() {
    const templateSelect = document.getElementById('templateSelect');
    const templateId = templateSelect.value;

    if (!templateId) {
        // Clear form when "No Template" is selected
        document.getElementById('title').value = '';
        document.getElementById('description').value = '';
        document.getElementById('priority').value = '4';
        document.getElementById('category').value = 'General';
        document.getElementById('type').value = 'Issue';
        return;
    }

    // Fetch template data
    fetch(`/api/get_template.php?template_id=${templateId}`, {
        credentials: 'same-origin'
    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch template');
            }
            return response.json();
        })
        .then(data => {
            if (data.success && data.template) {
                const template = data.template;

                // Populate form fields with template data
                if (template.title_template) {
                    document.getElementById('title').value = template.title_template;
                }

                if (template.description_template) {
                    document.getElementById('description').value = template.description_template;
                }

                if (template.category) {
                    document.getElementById('category').value = template.category;
                }

                if (template.type) {
                    document.getElementById('type').value = template.type;
                }

                if (template.default_priority) {
                    document.getElementById('priority').value = template.default_priority;
                }
            } else {
                console.error('Failed to load template:', data.error);
                toast.error('Failed to load template: ' + (data.error || 'Unknown error'), 4000);
            }
        })
        .catch(error => {
            console.error('Error loading template:', error);
            toast.error('Error loading template: ' + error.message, 4000);
        });
}

/**
 * Bulk Actions Functions (Admin only)
 */

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAllCheckbox');
    const checkboxes = document.querySelectorAll('.ticket-checkbox');

    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });

    updateSelectionCount();
}

/**
 * Toggle checkbox when clicking anywhere in the checkbox cell
 */
function toggleRowCheckbox(event, cell) {
    // Prevent double-toggle if clicking directly on the checkbox
    if (event.target.type === 'checkbox') return;
    event.stopPropagation();
    const cb = cell.querySelector('.ticket-checkbox');
    if (cb) {
        cb.checked = !cb.checked;
        updateSelectionCount();
    }
}

function updateSelectionCount() {
    const checkboxes = document.querySelectorAll('.ticket-checkbox:checked');
    const count = checkboxes.length;
    const toolbar = document.querySelector('.bulk-actions-inline');
    const countDisplay = document.getElementById('selected-count');
    const exportDropdown = document.getElementById('exportDropdown');
    const exportCount = document.getElementById('exportCount');

    if (toolbar && countDisplay) {
        if (count > 0) {
            toolbar.style.display = 'flex';
            countDisplay.textContent = count;
        } else {
            toolbar.style.display = 'none';
        }
    }

    // Show/hide export dropdown based on selection
    if (exportDropdown) {
        if (count > 0) {
            exportDropdown.style.display = '';
            if (exportCount) exportCount.textContent = count;
        } else {
            exportDropdown.style.display = 'none';
        }
    }
}

function getSelectedTicketIds() {
    const checkboxes = document.querySelectorAll('.ticket-checkbox:checked');
    return Array.from(checkboxes).map(cb => parseInt(cb.value));
}

function clearSelection() {
    document.querySelectorAll('.ticket-checkbox').forEach(cb => cb.checked = false);
    const selectAll = document.getElementById('selectAllCheckbox');
    if (selectAll) selectAll.checked = false;
    updateSelectionCount();
}

function bulkClose() {
    const ticketIds = getSelectedTicketIds();

    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }

    showConfirmModal(
        `Close ${ticketIds.length} Ticket(s)?`,
        'Are you sure you want to close these tickets?',
        'warning',
        () => performBulkCloseAction(ticketIds)
    );
}

function performBulkCloseAction(ticketIds) {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            operation_type: 'bulk_close',
            ticket_ids: ticketIds
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.failed > 0) {
                toast.warning(`Bulk close: ${data.processed} succeeded, ${data.failed} failed`, 5000);
            } else {
                toast.success(`Successfully closed ${data.processed} ticket(s)`, 4000);
            }
            setTimeout(() => window.location.reload(), 1500);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error performing bulk close:', error);
        toast.error('Bulk close failed: ' + error.message, 5000);
    });
}

function showBulkAssignModal() {
    const ticketIds = getSelectedTicketIds();

    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }

    // Create modal HTML
    const modalHtml = `
        <div class="modal-overlay" id="bulkAssignModal">
            <div class="modal-content ascii-frame-outer">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body">
                            <label for="bulkAssignUser">Assign to:</label>
                            <select id="bulkAssignUser" class="editable">
                                <option value="">Select User...</option>
                                <!-- Users will be loaded dynamically -->
                            </select>
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-bulk-assign" class="btn btn-bulk">Assign</button>
                        <button data-action="close-bulk-assign-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);

    // Fetch users for the dropdown
    fetch('/api/get_users.php', {
        credentials: 'same-origin'
    })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.users) {
                const select = document.getElementById('bulkAssignUser');
                data.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.user_id;
                    option.textContent = user.display_name || user.username;
                    select.appendChild(option);
                });
            }
        })
        .catch(error => {
            console.error('Error loading users:', error);
        });
}

function closeBulkAssignModal() {
    const modal = document.getElementById('bulkAssignModal');
    if (modal) {
        modal.remove();
    }
}

function performBulkAssign() {
    const userId = document.getElementById('bulkAssignUser').value;
    const ticketIds = getSelectedTicketIds();

    if (!userId) {
        toast.warning('Please select a user', 2000);
        return;
    }

    fetch('/api/bulk_operation.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            operation_type: 'bulk_assign',
            ticket_ids: ticketIds,
            parameters: { assigned_to: parseInt(userId) }
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeBulkAssignModal();
            if (data.failed > 0) {
                toast.warning(`Bulk assign: ${data.processed} succeeded, ${data.failed} failed`, 5000);
            } else {
                toast.success(`Successfully assigned ${data.processed} ticket(s)`, 4000);
            }
            setTimeout(() => window.location.reload(), 1500);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error performing bulk assign:', error);
        toast.error('Bulk assign failed: ' + error.message, 5000);
    });
}

function showBulkPriorityModal() {
    const ticketIds = getSelectedTicketIds();

    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }

    const modalHtml = `
        <div class="modal-overlay" id="bulkPriorityModal">
            <div class="modal-content ascii-frame-outer">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body">
                            <label for="bulkPriority">Priority:</label>
                            <select id="bulkPriority" class="editable">
                                <option value="">Select Priority...</option>
                                <option value="1">P1 - Critical Impact</option>
                                <option value="2">P2 - High Impact</option>
                                <option value="3">P3 - Medium Impact</option>
                                <option value="4">P4 - Low Impact</option>
                                <option value="5">P5 - Minimal Impact</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-bulk-priority" class="btn btn-bulk">Update</button>
                        <button data-action="close-bulk-priority-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

function closeBulkPriorityModal() {
    const modal = document.getElementById('bulkPriorityModal');
    if (modal) {
        modal.remove();
    }
}

function performBulkPriority() {
    const priority = document.getElementById('bulkPriority').value;
    const ticketIds = getSelectedTicketIds();

    if (!priority) {
        toast.warning('Please select a priority', 2000);
        return;
    }

    fetch('/api/bulk_operation.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            operation_type: 'bulk_priority',
            ticket_ids: ticketIds,
            parameters: { priority: parseInt(priority) }
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeBulkPriorityModal();
            if (data.failed > 0) {
                toast.warning(`Priority update: ${data.processed} succeeded, ${data.failed} failed`, 5000);
            } else {
                toast.success(`Successfully updated priority for ${data.processed} ticket(s)`, 4000);
            }
            setTimeout(() => window.location.reload(), 1500);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error performing bulk priority update:', error);
        toast.error('Bulk priority update failed: ' + error.message, 5000);
    });
}

// Make table rows clickable
document.addEventListener('DOMContentLoaded', function() {
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        // Skip if row already has click handler
        if (row.dataset.clickable) return;
        
        row.dataset.clickable = 'true';
        row.style.cursor = 'pointer';
        
        row.addEventListener('click', function(e) {
            // Don't navigate if clicking on a link, button, checkbox, or select
            if (e.target.tagName === 'A' || 
                e.target.tagName === 'BUTTON' || 
                e.target.tagName === 'INPUT' ||
                e.target.tagName === 'SELECT' ||
                e.target.closest('a') ||
                e.target.closest('button')) {
                return;
            }
            
            // Find the ticket link in the row
            const ticketLink = row.querySelector('.ticket-link');
            if (ticketLink) {
                window.location.href = ticketLink.href;
            }
        });
        
        // Add hover effect
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = 'rgba(0, 255, 65, 0.08)';
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
});

// Bulk Status Change
function showBulkStatusModal() {
    const ticketIds = getSelectedTicketIds();
    
    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }
    
    const modalHtml = `
        <div class="modal-overlay" id="bulkStatusModal">
            <div class="modal-content ascii-frame-outer">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>
                
                <div class="ascii-section-header">Change Status for ${ticketIds.length} Ticket(s)</div>
                
                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body">
                            <label for="bulkStatus">New Status:</label>
                            <select id="bulkStatus" class="editable">
                                <option value="">Select Status...</option>
                                <option value="Open">Open</option>
                                <option value="Pending">Pending</option>
                                <option value="In Progress">In Progress</option>
                                <option value="Closed">Closed</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="ascii-divider"></div>
                
                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-bulk-status" class="btn btn-bulk">Update</button>
                        <button data-action="close-bulk-status-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

function closeBulkStatusModal() {
    const modal = document.getElementById('bulkStatusModal');
    if (modal) {
        modal.remove();
    }
}

function performBulkStatusChange() {
    const status = document.getElementById('bulkStatus').value;
    const ticketIds = getSelectedTicketIds();

    if (!status) {
        toast.warning('Please select a status', 2000);
        return;
    }

    fetch('/api/bulk_operation.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            operation_type: 'bulk_status',
            ticket_ids: ticketIds,
            parameters: { status: status }
        })
    })
    .then(response => response.json())
    .then(data => {
        closeBulkStatusModal();
        if (data.success) {
            if (data.failed > 0) {
                toast.warning(`Status update: ${data.processed} succeeded, ${data.failed} failed`, 5000);
            } else {
                toast.success(`Successfully updated status for ${data.processed} ticket(s)`, 4000);
            }
            setTimeout(() => window.location.reload(), 1500);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error performing bulk status change:', error);
        toast.error('Bulk status change failed: ' + error.message, 5000);
    });
}

// Bulk Delete
function showBulkDeleteModal() {
    const ticketIds = getSelectedTicketIds();
    
    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }
    
    const modalHtml = `
        <div class="modal-overlay" id="bulkDeleteModal">
            <div class="modal-content ascii-frame-outer">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>
                
                <div class="ascii-section-header" style="color: var(--status-closed);">⚠ Delete ${ticketIds.length} Ticket(s)</div>
                
                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body" style="text-align: center; padding: 2rem;">
                            <p style="color: var(--terminal-amber); font-size: 1.1rem; margin-bottom: 1rem;">
                                This action cannot be undone!
                            </p>
                            <p style="color: var(--terminal-green);">
                                You are about to permanently delete ${ticketIds.length} ticket(s).<br>
                                All associated comments and history will be lost.
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="ascii-divider"></div>
                
                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-bulk-delete" class="btn btn-bulk" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
                        <button data-action="close-bulk-delete-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

function closeBulkDeleteModal() {
    const modal = document.getElementById('bulkDeleteModal');
    if (modal) {
        modal.remove();
    }
}

function performBulkDelete() {
    const ticketIds = getSelectedTicketIds();

    fetch('/api/bulk_operation.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            operation_type: 'bulk_delete',
            ticket_ids: ticketIds
        })
    })
    .then(response => response.json())
    .then(data => {
        closeBulkDeleteModal();
        if (data.success) {
            toast.success(`Successfully deleted ${ticketIds.length} ticket(s)`, 4000);
            setTimeout(() => window.location.reload(), 1500);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 5000);
        }
    })
    .catch(error => {
        console.error('Error performing bulk delete:', error);
        toast.error('Bulk delete failed: ' + error.message, 5000);
    });
}

// ============================================
// TERMINAL-STYLE MODAL UTILITIES
// ============================================

/**
 * Show a terminal-style confirmation modal
 * @param {string} title - Modal title
 * @param {string} message - Message body
 * @param {string} type - 'warning', 'error', 'info' (affects color)
 * @param {function} onConfirm - Callback when user confirms
 * @param {function} onCancel - Optional callback when user cancels
 */
function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel = null) {
    const modalId = 'confirmModal' + Date.now();

    // Color scheme based on type
    const colors = {
        warning: 'var(--terminal-amber)',
        error: 'var(--status-closed)',
        info: 'var(--terminal-cyan)'
    };
    const color = colors[type] || colors.warning;

    // Icon based on type
    const icons = {
        warning: '⚠',
        error: '✗',
        info: 'ℹ'
    };
    const icon = icons[type] || icons.warning;

    // Escape user-provided content to prevent XSS
    const safeTitle = escapeHtml(title);
    const safeMessage = escapeHtml(message);

    const modalHtml = `
        <div class="modal-overlay" id="${modalId}">
            <div class="modal-content ascii-frame-outer" style="max-width: 500px;">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header" style="color: ${color};">
                    ${icon} ${safeTitle}
                </div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body" style="padding: 1.5rem; text-align: center;">
                            <p style="color: var(--terminal-green); white-space: pre-line;">
                                ${safeMessage}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="${modalId}_confirm">Confirm</button>
                        <button class="btn btn-secondary" id="${modalId}_cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);

    const modal = document.getElementById(modalId);
    const confirmBtn = document.getElementById(`${modalId}_confirm`);
    const cancelBtn = document.getElementById(`${modalId}_cancel`);

    confirmBtn.addEventListener('click', () => {
        modal.remove();
        if (onConfirm) onConfirm();
    });

    cancelBtn.addEventListener('click', () => {
        modal.remove();
        if (onCancel) onCancel();
    });

    // ESC key to cancel
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            modal.remove();
            if (onCancel) onCancel();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
}

/**
 * Show a terminal-style input modal
 * @param {string} title - Modal title
 * @param {string} label - Input field label
 * @param {string} placeholder - Input placeholder text
 * @param {function} onSubmit - Callback with input value when submitted
 * @param {function} onCancel - Optional callback when cancelled
 */
function showInputModal(title, label, placeholder = '', onSubmit, onCancel = null) {
    const modalId = 'inputModal' + Date.now();
    const inputId = modalId + '_input';

    // Escape user-provided content to prevent XSS
    const safeTitle = escapeHtml(title);
    const safeLabel = escapeHtml(label);
    const safePlaceholder = escapeHtml(placeholder);

    const modalHtml = `
        <div class="modal-overlay" id="${modalId}">
            <div class="modal-content ascii-frame-outer" style="max-width: 500px;">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header">
                    ${safeTitle}
                </div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body" style="padding: 1.5rem;">
                            <label for="${inputId}" style="display: block; margin-bottom: 0.5rem; color: var(--terminal-green);">
                                ${safeLabel}
                            </label>
                            <input
                                type="text"
                                id="${inputId}"
                                class="terminal-input"
                                placeholder="${safePlaceholder}"
                                style="width: 100%; padding: 0.5rem; background: var(--bg-primary); border: 1px solid var(--terminal-green); color: var(--terminal-green); font-family: var(--font-mono);"
                            />
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button class="btn btn-primary" id="${modalId}_submit">Save</button>
                        <button class="btn btn-secondary" id="${modalId}_cancel">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);

    const modal = document.getElementById(modalId);
    const input = document.getElementById(inputId);
    const submitBtn = document.getElementById(`${modalId}_submit`);
    const cancelBtn = document.getElementById(`${modalId}_cancel`);

    // Focus input
    setTimeout(() => input.focus(), 100);

    const handleSubmit = () => {
        const value = input.value.trim();
        modal.remove();
        if (onSubmit) onSubmit(value);
    };

    submitBtn.addEventListener('click', handleSubmit);

    // Enter key to submit
    input.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            handleSubmit();
        }
    });

    cancelBtn.addEventListener('click', () => {
        modal.remove();
        if (onCancel) onCancel();
    });

    // ESC key to cancel
    const escHandler = (e) => {
        if (e.key === 'Escape') {
            modal.remove();
            if (onCancel) onCancel();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);
}

// ========================================
// QUICK ACTIONS
// ========================================

/**
 * Quick status change from dashboard
 */
function quickStatusChange(ticketId, currentStatus) {
    const statuses = ['Open', 'Pending', 'In Progress', 'Closed'];
    const otherStatuses = statuses.filter(s => s !== currentStatus);

    const modalHtml = `
        <div class="modal-overlay" id="quickStatusModal">
            <div class="modal-content ascii-frame-outer" style="max-width: 400px;">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header">Quick Status Change</div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body" style="padding: 1rem;">
                            <p style="margin-bottom: 1rem;">Ticket #${escapeHtml(ticketId)}</p>
                            <p style="margin-bottom: 0.5rem; color: var(--terminal-amber);">Current: ${escapeHtml(currentStatus)}</p>
                            <label for="quickStatusSelect">New Status:</label>
                            <select id="quickStatusSelect" class="editable" style="width: 100%; margin-top: 0.5rem;">
                                ${otherStatuses.map(s => `<option value="${s}">${s}</option>`).join('')}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="btn btn-primary">Update</button>
                        <button data-action="close-quick-status-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);
}

function closeQuickStatusModal() {
    const modal = document.getElementById('quickStatusModal');
    if (modal) modal.remove();
}

function performQuickStatusChange(ticketId) {
    const newStatus = document.getElementById('quickStatusSelect').value;

    fetch('/api/update_ticket.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            status: newStatus
        })
    })
    .then(response => response.json())
    .then(data => {
        closeQuickStatusModal();
        if (data.success) {
            toast.success(`Status updated to ${newStatus}`, 3000);
            setTimeout(() => window.location.reload(), 1000);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 4000);
        }
    })
    .catch(error => {
        closeQuickStatusModal();
        console.error('Error:', error);
        toast.error('Error updating status', 4000);
    });
}

/**
 * Quick assign from dashboard
 */
function quickAssign(ticketId) {
    const modalHtml = `
        <div class="modal-overlay" id="quickAssignModal">
            <div class="modal-content ascii-frame-outer" style="max-width: 400px;">
                <span class="bottom-left-corner">╚</span>
                <span class="bottom-right-corner">╝</span>

                <div class="ascii-section-header">Quick Assign</div>

                <div class="ascii-content">
                    <div class="ascii-frame-inner">
                        <div class="modal-body" style="padding: 1rem;">
                            <p style="margin-bottom: 1rem;">Ticket #${escapeHtml(ticketId)}</p>
                            <label for="quickAssignSelect">Assign to:</label>
                            <select id="quickAssignSelect" class="editable" style="width: 100%; margin-top: 0.5rem;">
                                <option value="">Unassigned</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="ascii-divider"></div>

                <div class="ascii-content">
                    <div class="modal-footer">
                        <button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="btn btn-primary">Assign</button>
                        <button data-action="close-quick-assign-modal" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    `;

    document.body.insertAdjacentHTML('beforeend', modalHtml);

    // Load users
    fetch('/api/get_users.php', {
        credentials: 'same-origin'
    })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.users) {
                const select = document.getElementById('quickAssignSelect');
                data.users.forEach(user => {
                    const option = document.createElement('option');
                    option.value = user.user_id;
                    option.textContent = user.display_name || user.username;
                    select.appendChild(option);
                });
            }
        })
        .catch(error => console.error('Error loading users:', error));
}

function closeQuickAssignModal() {
    const modal = document.getElementById('quickAssignModal');
    if (modal) modal.remove();
}

function performQuickAssign(ticketId) {
    const assignedTo = document.getElementById('quickAssignSelect').value || null;

    fetch('/api/assign_ticket.php', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
        },
        body: JSON.stringify({
            ticket_id: ticketId,
            assigned_to: assignedTo
        })
    })
    .then(response => response.json())
    .then(data => {
        closeQuickAssignModal();
        if (data.success) {
            toast.success('Assignment updated', 3000);
            setTimeout(() => window.location.reload(), 1000);
        } else {
            toast.error('Error: ' + (data.error || 'Unknown error'), 4000);
        }
    })
    .catch(error => {
        closeQuickAssignModal();
        console.error('Error:', error);
        toast.error('Error updating assignment', 4000);
    });
}

// ========================================
// KANBAN / CARD VIEW
// ========================================

/**
 * Set the view mode (table or card)
 */
function setViewMode(mode) {
    const tableView = document.querySelector('.ascii-frame-outer');
    const cardView = document.getElementById('cardView');
    const tableBtn = document.getElementById('tableViewBtn');
    const cardBtn = document.getElementById('cardViewBtn');

    if (!tableView || !cardView) return;

    if (mode === 'card') {
        tableView.style.display = 'none';
        cardView.style.display = 'block';
        tableBtn.classList.remove('active');
        cardBtn.classList.add('active');
        populateKanbanCards();
    } else {
        tableView.style.display = 'block';
        cardView.style.display = 'none';
        tableBtn.classList.add('active');
        cardBtn.classList.remove('active');
    }

    // Store preference
    localStorage.setItem('ticketViewMode', mode);
}

/**
 * Populate Kanban cards from table data
 */
function populateKanbanCards() {
    const rows = document.querySelectorAll('tbody tr');
    const columns = {
        'Open': document.querySelector('.kanban-column[data-status="Open"] .kanban-cards'),
        'Pending': document.querySelector('.kanban-column[data-status="Pending"] .kanban-cards'),
        'In Progress': document.querySelector('.kanban-column[data-status="In Progress"] .kanban-cards'),
        'Closed': document.querySelector('.kanban-column[data-status="Closed"] .kanban-cards')
    };

    // Clear existing cards
    Object.values(columns).forEach(col => {
        if (col) col.innerHTML = '';
    });

    const counts = { 'Open': 0, 'Pending': 0, 'In Progress': 0, 'Closed': 0 };
    const isAdmin = document.getElementById('selectAllCheckbox') !== null;
    const offset = isAdmin ? 1 : 0;

    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        if (cells.length < 6) return; // Skip empty rows

        const ticketId = cells[0 + offset]?.querySelector('.ticket-link')?.textContent.trim() || '';
        const priority = cells[1 + offset]?.textContent.trim() || '';
        const title = cells[2 + offset]?.textContent.trim() || '';
        const category = cells[3 + offset]?.textContent.trim() || '';
        const status = cells[5 + offset]?.textContent.trim() || '';
        const assignedTo = cells[7 + offset]?.textContent.trim() || 'Unassigned';

        // Get initials for assignee
        const initials = assignedTo === 'Unassigned' ? '?' :
            assignedTo.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);

        const column = columns[status];
        if (column) {
            counts[status]++;

            const card = document.createElement('div');
            card.className = `kanban-card priority-${priority}`;
            card.onclick = () => window.location.href = `/ticket/${ticketId}`;
            card.innerHTML = `
                <div class="card-header">
                    <span class="card-id">#${escapeHtml(ticketId)}</span>
                    <span class="card-priority p${priority}">P${priority}</span>
                </div>
                <div class="card-title">${escapeHtml(title)}</div>
                <div class="card-footer">
                    <span class="card-category">${escapeHtml(category)}</span>
                    <span class="card-assignee" title="${escapeHtml(assignedTo)}">${escapeHtml(initials)}</span>
                </div>
            `;
            column.appendChild(card);
        }
    });

    // Update column counts
    Object.keys(counts).forEach(status => {
        const header = document.querySelector(`.kanban-column[data-status="${status}"] .column-count`);
        if (header) header.textContent = counts[status];
    });
}

// Restore view mode on page load
document.addEventListener('DOMContentLoaded', function() {
    const savedMode = localStorage.getItem('ticketViewMode');
    if (savedMode === 'card') {
        // Delay to ensure DOM is ready
        setTimeout(() => setViewMode('card'), 100);
    }
});

// ========================================
// INLINE TICKET PREVIEW
// ========================================

let previewTimeout = null;
let currentPreview = null;

function initTicketPreview() {
    // Create preview element
    const preview = document.createElement('div');
    preview.id = 'ticketPreview';
    preview.className = 'ticket-preview-popup';
    preview.style.display = 'none';
    document.body.appendChild(preview);
    currentPreview = preview;

    // Add event listeners to ticket links
    document.querySelectorAll('.ticket-link').forEach(link => {
        link.addEventListener('mouseenter', showTicketPreview);
        link.addEventListener('mouseleave', hideTicketPreview);
    });

    // Keep preview visible when hovering over it
    preview.addEventListener('mouseenter', () => {
        if (previewTimeout) {
            clearTimeout(previewTimeout);
            previewTimeout = null;
        }
    });

    preview.addEventListener('mouseleave', hideTicketPreview);
}

function showTicketPreview(event) {
    const link = event.target.closest('.ticket-link');
    if (!link) return;

    // Clear any pending hide
    if (previewTimeout) {
        clearTimeout(previewTimeout);
    }

    // Delay before showing
    previewTimeout = setTimeout(() => {
        const row = link.closest('tr');
        if (!row) return;

        // Extract data from the table row
        const cells = row.querySelectorAll('td');
        const isAdmin = document.getElementById('selectAllCheckbox') !== null;
        const offset = isAdmin ? 1 : 0;

        const ticketId = link.textContent.trim();
        const priority = cells[1 + offset]?.textContent.trim() || '';
        const title = cells[2 + offset]?.textContent.trim() || '';
        const category = cells[3 + offset]?.textContent.trim() || '';
        const type = cells[4 + offset]?.textContent.trim() || '';
        const status = cells[5 + offset]?.textContent.trim() || '';
        const createdBy = cells[6 + offset]?.textContent.trim() || '';
        const assignedTo = cells[7 + offset]?.textContent.trim() || '';

        // Build preview content
        currentPreview.innerHTML = `
            <div class="preview-header">
                <span class="preview-id">#${escapeHtml(ticketId)}</span>
                <span class="preview-status status-${status.replace(/\s+/g, '-')}">${escapeHtml(status)}</span>
            </div>
            <div class="preview-title">${escapeHtml(title)}</div>
            <div class="preview-meta">
                <div><strong>Priority:</strong> P${escapeHtml(priority)}</div>
                <div><strong>Category:</strong> ${escapeHtml(category)}</div>
                <div><strong>Type:</strong> ${escapeHtml(type)}</div>
                <div><strong>Assigned:</strong> ${escapeHtml(assignedTo)}</div>
            </div>
            <div class="preview-footer">Created by ${escapeHtml(createdBy)}</div>
        `;

        // Position the preview
        const rect = link.getBoundingClientRect();
        const previewWidth = 320;
        const previewHeight = 200;

        let left = rect.left + window.scrollX;
        let top = rect.bottom + window.scrollY + 5;

        // Adjust if going off-screen
        if (left + previewWidth > window.innerWidth) {
            left = window.innerWidth - previewWidth - 20;
        }
        if (top + previewHeight > window.innerHeight + window.scrollY) {
            top = rect.top + window.scrollY - previewHeight - 5;
        }

        currentPreview.style.left = left + 'px';
        currentPreview.style.top = top + 'px';
        currentPreview.style.display = 'block';
    }, 300);
}

function hideTicketPreview() {
    if (previewTimeout) {
        clearTimeout(previewTimeout);
    }
    previewTimeout = setTimeout(() => {
        if (currentPreview) {
            currentPreview.style.display = 'none';
        }
    }, 100);
}

// Initialize preview on page load
document.addEventListener('DOMContentLoaded', function() {
    const hasTable = document.querySelector('table');
    const isTicketPage = window.location.pathname.includes('/ticket/');
    if (hasTable && !isTicketPage) {
        initTicketPreview();
    }
});

/**
 * Toggle export dropdown menu
 */
function toggleExportMenu(event) {
    event.stopPropagation();
    const dropdown = document.getElementById('exportDropdown');
    const content = document.getElementById('exportDropdownContent');
    if (dropdown && content) {
        dropdown.classList.toggle('open');
    }
}

// Close export dropdown when clicking outside
document.addEventListener('click', function(event) {
    const dropdown = document.getElementById('exportDropdown');
    if (dropdown && !dropdown.contains(event.target)) {
        dropdown.classList.remove('open');
    }
});

/**
 * Export selected tickets to CSV or JSON
 */
function exportSelectedTickets(format) {
    const ticketIds = getSelectedTicketIds();

    if (ticketIds.length === 0) {
        toast.warning('No tickets selected', 2000);
        return;
    }

    // Build URL with selected ticket IDs
    const params = new URLSearchParams();
    params.set('format', format);
    params.set('ticket_ids', ticketIds.join(','));

    // Trigger download
    window.location.href = '/api/export_tickets.php?' + params.toString();

    // Close dropdown
    const dropdown = document.getElementById('exportDropdown');
    if (dropdown) dropdown.classList.remove('open');
}

// ========================================
// Skeleton Loading Helpers
// ========================================

/**
 * Generate skeleton table rows
 */
function generateSkeletonRows(count = 5) {
    let html = '';
    for (let i = 0; i < count; i++) {
        html += `
            <tr class="skeleton-row-tr">
                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 40px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: ${70 + Math.random() * 30}%;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 50px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
            </tr>
        `;
    }
    return html;
}

/**
 * Generate skeleton comments
 */
function generateSkeletonComments(count = 3) {
    let html = '';
    for (let i = 0; i < count; i++) {
        html += `
            <div class="skeleton-comment">
                <div class="skeleton-comment-header">
                    <div class="skeleton skeleton-avatar"></div>
                    <div class="skeleton-comment-meta">
                        <div class="skeleton skeleton-text short"></div>
                        <div class="skeleton skeleton-text" style="width: 100px;"></div>
                    </div>
                </div>
                <div class="skeleton skeleton-text long"></div>
                <div class="skeleton skeleton-text medium"></div>
                <div class="skeleton skeleton-text short"></div>
            </div>
        `;
    }
    return html;
}

/**
 * Generate skeleton stat cards
 */
function generateSkeletonStats(count = 4) {
    let html = '';
    for (let i = 0; i < count; i++) {
        html += `
            <div class="skeleton-stat skeleton">
                <div class="skeleton skeleton-value"></div>
                <div class="skeleton skeleton-label"></div>
            </div>
        `;
    }
    return html;
}

/**
 * Show loading overlay on element
 */
function showLoadingOverlay(element, message = 'Loading...') {
    // Remove existing overlay
    const existing = element.querySelector('.loading-overlay');
    if (existing) existing.remove();

    const overlay = document.createElement('div');
    overlay.className = 'loading-overlay';
    overlay.innerHTML = `
        <div class="loading-spinner"></div>
        <div class="loading-text">${message}</div>
    `;
    element.style.position = 'relative';
    element.appendChild(overlay);
}

/**
 * Hide loading overlay
 */
function hideLoadingOverlay(element) {
    const overlay = element.querySelector('.loading-overlay');
    if (overlay) {
        overlay.style.opacity = '0';
        overlay.style.transition = 'opacity 0.3s';
        setTimeout(() => overlay.remove(), 300);
    }
}

// Export for use in other scripts
window.generateSkeletonRows = generateSkeletonRows;
window.generateSkeletonComments = generateSkeletonComments;
window.showLoadingOverlay = showLoadingOverlay;
window.hideLoadingOverlay = hideLoadingOverlay;