import { fileIcons } from './config/file_type_icons.js';

var currentPathAuto = '';
var currentPathManual = '';

function showSpinner() {
    document.getElementById('globalSpinner').style.display = 'block';
}

function hideSpinner() {
    document.getElementById('globalSpinner').style.display = 'none';
}

function attachDeleteFolderFormListeners() {
    document.querySelectorAll('.delete-folder-form').forEach(form => {
        if (!form.dataset.listenerAdded) {
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                const folderPath = form.querySelector('[name="folder_path"]').value;
                
                // Add confirmation dialog
                if (!confirm(`Are you sure you want to delete the folder ${folderPath} FROM DISK?`)) {
                    console.log("Deletion cancelled by user");
                    return; // Exit the function if user cancels
                }

                showSpinner();
                const csrfToken = CSRFUtils.getToken();

                console.log("Attempting to delete folder with path:", folderPath);

                fetch('/delete_folder', {
                    method: 'POST',
                    headers: CSRFUtils.getHeaders({ 'Content-Type': 'application/json' }),
                    body: JSON.stringify({folder_path: folderPath})
                })
                .then(response => response.json())
                .then(data => {
                    console.log("Server response:", data);

                    if(data.status === 'success') {
                        console.log("Deletion successful, removing row.");
                        form.closest('tr').remove();
                    } else {
                        console.log("Deletion not successful:", data.message);
                        if (data.message === "The specified path does not exist or is not a folder. Entry removed if it was in the database.") {
                            console.log("Folder does not exist, removing row.");
                            form.closest('tr').remove();
                        }
                    }
                    alert(data.message);
                })
                .catch(error => {
                    console.error('Fetch error:', error);
                })
                .finally(() => {
                    hideSpinner();
                });
            });
            form.dataset.listenerAdded = 'true';
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    console.log("Document loaded. Setting up form submission handlers and tab activation based on activeTab.");

    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

    // Simple table references - no DataTables initialization needed
    const scanJobsTableBody = document.getElementById('jobsTableBody');
    const unmatchedTableBody = document.getElementById('unmatchedFoldersTableBody');

    const urlParams = new URLSearchParams(window.location.search);
    const urlActiveTab = urlParams.get('active_tab');
    const metaActiveTab = document.querySelector('meta[name="active-tab"]').getAttribute('content');
    const storedActiveTab = localStorage.getItem('scan_management_active_tab');

    // Priority: URL parameter > localStorage > meta tag > default 'auto'
    const activeTab = urlActiveTab || storedActiveTab || metaActiveTab || 'auto';
    console.log("Active tab determined:", activeTab, {urlActiveTab, storedActiveTab, metaActiveTab});

    switch (activeTab) {
        case 'manual':
            console.log("Activating manualScan tab.");
            new bootstrap.Tab(document.querySelector('#manualScan-tab')).show();
            break;
        case 'unmatched':
            console.log("Activating unmatchedFolders tab.");
            new bootstrap.Tab(document.querySelector('#unmatchedFolders-tab')).show();
            break;
        case 'scan_filters':
            console.log("Activating scanFilters tab.");
            new bootstrap.Tab(document.querySelector('#scanFilters-tab')).show();
            break;
        case 'file_extensions':
            console.log("Activating fileExtensions tab.");
            new bootstrap.Tab(document.querySelector('#fileExtensions-tab')).show();
            break;
        case 'image_queue':
            console.log("Activating imageQueue tab.");
            new bootstrap.Tab(document.querySelector('#imageQueue-tab')).show();
            break;
        case 'deleteLibrary':
            console.log("Activating deleteLibrary tab.");
            new bootstrap.Tab(document.querySelector('#deleteLibrary-tab')).show();
            break;
        default:
            console.log("Defaulting to activating autoScan tab.");
            new bootstrap.Tab(document.querySelector('#autoScan-tab')).show();
    }

    // Add event listeners to all tab links to update URL and localStorage when clicked
    document.querySelectorAll('.admin_manage_scanjobs-nav-tabs .nav-link').forEach(tab => {
        tab.addEventListener('shown.bs.tab', function(event) {
            const tabId = event.target.getAttribute('href').substring(1); // Remove # from href
            let activeTabValue = 'auto';

            switch(tabId) {
                case 'manualScan':
                    activeTabValue = 'manual';
                    break;
                case 'unmatchedFolders':
                    activeTabValue = 'unmatched';
                    break;
                case 'scanFilters':
                    activeTabValue = 'scan_filters';
                    break;
                case 'fileExtensions':
                    activeTabValue = 'file_extensions';
                    break;
                case 'imageQueue':
                    activeTabValue = 'image_queue';
                    break;
                default:
                    activeTabValue = 'auto';
            }

            // Store in localStorage for persistence
            localStorage.setItem('scan_management_active_tab', activeTabValue);

            // Update URL without page reload
            const url = new URL(window.location.href);
            url.searchParams.set('active_tab', activeTabValue);
            window.history.replaceState({}, '', url.toString());
        });
    });

    // Prevent form submission on pressing Enter and trigger Browse Folders click (Auto Scan Tab)
    const autoScanForm = document.querySelector('#autoScan form');
    if (autoScanForm) {
        autoScanForm.addEventListener('keydown', function(event) {
            // Only prevent default and trigger browse folders on Enter key press
            if (event.key === 'Enter') {
                event.preventDefault();
                const browseFoldersBtn = document.querySelector('#browseFoldersBtn');
                if (browseFoldersBtn) {
                    browseFoldersBtn.click();
                }
            }
        });
    }

    // Same for manual scan form
    const manualScanForm = document.querySelector('#manualScan form');
    if (manualScanForm) {
        manualScanForm.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                const browseFoldersBtnManual = document.querySelector('#browseFoldersBtnManual');
                if (browseFoldersBtnManual) {
                    browseFoldersBtnManual.click();
                }
            }
        });
    }

    setupFolderBrowse('#browseFoldersBtn', '#folderContents', '#loadingSpinner', '#upFolderBtn', '#folder_path', 'currentPathAuto');
    setupFolderBrowse('#browseFoldersBtnManual', '#folderContentsManual', '#loadingSpinnerManual', '#upFolderBtnManual', '#manualFolderPath', 'currentPathManual');

    // No complex toggle functionality needed for simplified table

    var csrfToken = CSRFUtils.getToken();

    // Helper function to get user-friendly status display
    function getDisplayStatus(job) {
        if (job.status === 'Failed' && job.error_message) {
            if (job.error_message === 'Scan cancelled by user') {
                return 'Cancelled';
            } else if (job.error_message === 'Scan job interrupted by server restart') {
                return 'Interrupted by server restart';
            }
        }
        return job.status;
    }

    const updateScanJobs = () => {
        fetch('/api/scan_jobs_status', {cache: 'no-store'})
            .then(response => response.json())
            .then(data => {
                // Sort the data array to ensure the latest scan is at the top
                data.sort((a, b) => new Date(b.last_run) - new Date(a.last_run));
                
                // Clear the table body
                scanJobsTableBody.innerHTML = '';
                
                const isAnyJobRunning = data.some(j => j.status === 'Running');
                
                data.forEach(job => {
                    // Create progress column content
                    let progressColumn = '';
                    if (job.status === 'Running' && job.total_folders > 0) {
                        const percentage = job.progress_percentage || 0;
                        const processed = job.folders_success + job.folders_failed;
                        progressColumn = `
                            <div class="scan-progress">
                                <div class="progress mb-1" style="height: 20px;">
                                    <div class="progress-bar" style="width: ${percentage}%"></div>
                                </div>
                                <div class="progress-info">
                                    <span class="progress-numbers">${processed}/${job.total_folders} (${percentage}%)</span>
                                </div>
                                <div class="progress-status">
                                    <small class="text-bright-green">${job.current_processing || 'Processing...'}</small>
                                </div>
                            </div>
                        `;
                    } else if (job.status === 'Completed') {
                        progressColumn = `<span class="text-success"><i class="fas fa-check"></i> ${job.folders_success + job.folders_failed}/${job.total_folders}</span>`;
                    } else if (job.status === 'Failed') {
                        progressColumn = `<span class="text-danger"><i class="fas fa-times"></i> ${job.folders_success + job.folders_failed}/${job.total_folders}</span>`;
                    } else {
                        progressColumn = '-';
                    }

                    // Create actions column content
                    const actionsColumn = `
                        ${job.status === 'Running' ? 
                            `<form action="/cancel_scan_job/${job.id}" method="post" style="display: inline-block;">
                                <input type="hidden" name="csrf_token" value="${csrfToken}">
                                <button type="submit" class="btn btn-warning btn-sm" title="Cancel Scan"><i class="fas fa-stop"></i></button>
                            </form>` : 
                            `${isAnyJobRunning ? 
                                `<button class="btn btn-info btn-sm" disabled title="Cannot restart while another scan is running"><i class="fas fa-sync"></i></button>` :
                                `<form action="/restart_scan_job/${job.id}" method="post" style="display: inline-block;">
                                    <input type="hidden" name="csrf_token" value="${csrfToken}">
                                    <button type="submit" class="btn btn-info btn-sm" title="Restart Scan"><i class="fas fa-sync"></i></button>
                                </form>`
                            }`
                        }
                    `;
                    
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${job.id.substring(0, 8)}</td>
                        <td>${job.library_name || 'N/A'}</td>
                        <td>${job.scan_folder || 'N/A'}</td>
                        <td>${getDisplayStatus(job)}</td>
                        <td>${progressColumn}</td>
                        <td>${actionsColumn}</td>
                    `;
                    scanJobsTableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error fetching scan jobs status:', error));
    };

    const updateUnmatchedFolders = () => {
        showSpinner();
        return fetch('/api/unmatched_folders', {cache: 'no-store'})
            .then(response => response.json())
            .then(data => {
                // Clear the table body
                unmatchedTableBody.innerHTML = '';
                
                data.forEach(folder => {
                    const actionsColumn = `
                        <button 
                            onclick="window.toggleIgnoreStatus('${folder.id}', this)" 
                            class="btn ${folder.status === 'Ignore' ? 'btn-warning' : 'btn-secondary'} btn-sm"
                            title="Ignored folders are not scanned">
                            <i class="fas ${folder.status === 'Ignore' ? 'fa-eye-slash' : 'fa-eye'}"></i>
                        </button>
                        <button onclick="clearEntry('${folder.id}')" class="btn btn-info btn-sm" title="Remove from unmatched list"><i class="fas fa-eraser"></i></button>
                        <form class="delete-folder-form" style="display: inline;">
                            <input type="hidden" name="csrf_token" value="${csrfToken}">
                            <input type="hidden" name="folder_path" value="${folder.folder_path}">
                            <button type="submit" class="btn btn-danger btn-sm" title="Delete the folder from disk"><i class="fas fa-trash-alt"></i></button>
                        </form>
                        <form action="/add_game_manual" method="GET" style="display: inline;">
                            <input type="hidden" name="full_disk_path" value="${folder.folder_path}">
                            <input type="hidden" name="library_uuid" value="${folder.library_uuid}">
                            <input type="hidden" name="platform_name" value="${folder.platform_name}">
                            <input type="hidden" name="platform_id" value="${folder.platform_id}">
                            <input type="hidden" name="from_unmatched" value="true">
                            <button type="submit" class="btn btn-primary btn-sm" title="Attempt manual IGDB search"><i class="fas fa-search"></i></button>
                        </form>
                    `;
                    
                    const row = document.createElement('tr');
                    row.setAttribute('data-status', folder.status);
                    row.setAttribute('data-folder-path', folder.folder_path.toLowerCase());
                    row.setAttribute('data-library-name', folder.library_name.toLowerCase());
                    row.setAttribute('data-platform-name', folder.platform_name.toLowerCase());
                    row.innerHTML = `
                        <td><i class="fas fa-folder"></i> ${folder.folder_path}</td>
                        <td><span class="status-${folder.status.toLowerCase()}">${folder.status}</span></td>
                        <td>${folder.library_name}</td>
                        <td>${folder.platform_name}</td>
                        <td>${actionsColumn}</td>
                    `;
                    unmatchedTableBody.appendChild(row);
                });
                // Attach event listeners to the new forms
                attachDeleteFolderFormListeners();

                // Update results counter after data load
                updateResultsCounter();
            })
            .catch(error => {
                console.error('Error fetching unmatched folders:', error);
            })
            .finally(() => {
                hideSpinner();
            });
    };

    // Filtering functionality
    let currentFilter = 'all';
    let currentSearch = '';

    // Notification system
    function showSuccessNotification(message) {
        // Remove any existing notification
        const existingNotification = document.querySelector('.success-notification');
        if (existingNotification) {
            existingNotification.remove();
        }

        // Create new notification
        const notification = document.createElement('div');
        notification.className = 'success-notification';
        notification.innerHTML = `
            <i class="fas fa-check-circle"></i>
            <span>${message}</span>
        `;

        document.body.appendChild(notification);

        // Show notification
        setTimeout(() => notification.classList.add('show'), 10);

        // Hide and remove notification after 3 seconds
        setTimeout(() => {
            notification.classList.add('hide');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }

    function filterUnmatchedRows() {
        const unmatchedRows = document.querySelectorAll('#unmatchedFoldersTableBody tr');
        let visibleCount = 0;

        unmatchedRows.forEach(row => {
            const status = row.getAttribute('data-status');
            const folderPath = row.getAttribute('data-folder-path') || '';
            const libraryName = row.getAttribute('data-library-name') || '';
            const platformName = row.getAttribute('data-platform-name') || '';

            // Check status filter
            const statusMatch = currentFilter === 'all' || status === currentFilter;

            // Check search filter
            const searchMatch = currentSearch === '' ||
                folderPath.includes(currentSearch) ||
                libraryName.includes(currentSearch) ||
                platformName.includes(currentSearch);

            // Special handling for ignored items
            let shouldShow = statusMatch && searchMatch;

            // For Option 2 behavior: Hide ignored items unless viewing "All" or "Ignored"
            if (status === 'Ignore' && currentFilter !== 'all' && currentFilter !== 'Ignore') {
                shouldShow = false;
            }

            if (shouldShow) {
                row.style.display = '';
                row.classList.remove('row-fade-out'); // Remove fade-out class if present
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        updateResultsCounter(visibleCount, unmatchedRows.length);
    }

    function updateResultsCounter(visible = null, total = null) {
        const resultsInfo = document.getElementById('resultsInfo');
        if (!resultsInfo) return;

        if (visible === null || total === null) {
            const unmatchedRows = document.querySelectorAll('#unmatchedFoldersTableBody tr');
            total = unmatchedRows.length;
            visible = Array.from(unmatchedRows).filter(row => row.style.display !== 'none').length;
        }

        if (currentFilter === 'all' && currentSearch === '') {
            resultsInfo.textContent = `Showing all ${total} entries`;
        } else {
            const filterText = currentFilter !== 'all' ? ` (${currentFilter})` : '';
            const searchText = currentSearch ? ` matching "${currentSearch}"` : '';
            resultsInfo.textContent = `Showing ${visible} of ${total} entries${filterText}${searchText}`;
        }
    }

    function setupUnmatchedFilters() {
        // Filter button event listeners
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // Remove active class from all buttons
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));

                // Add active class to clicked button
                this.classList.add('active');

                // Update current filter
                currentFilter = this.getAttribute('data-filter');

                // Apply filtering
                filterUnmatchedRows();
            });
        });

        // Search input event listener
        const searchInput = document.getElementById('unmatchedSearch');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                currentSearch = this.value.toLowerCase();
                filterUnmatchedRows();
            });
        }
    }

    // Set up filter controls
    setupUnmatchedFilters();

    // Run immediately on load
    updateScanJobs();
    updateUnmatchedFolders();

    // Set up periodic updates
    setInterval(updateScanJobs, 3000);  // Update every 3 seconds
    setInterval(() => {
        updateUnmatchedFolders().then(() => {
            // Reapply current filters after periodic refresh
            filterUnmatchedRows();
        });
    }, 30000);  // Update every 30 seconds

    // Global functions for table interactions
    window.toggleIgnoreStatus = function(folderId, button) {
        const row = button.closest('tr');
        const currentStatus = row.getAttribute('data-status');
        const isBeingIgnored = currentStatus !== 'Ignore';

        // Show immediate visual feedback
        if (isBeingIgnored) {
            // If we're ignoring the item and not viewing "All" or "Ignored", hide it immediately
            if (currentFilter !== 'all' && currentFilter !== 'Ignore') {
                row.classList.add('row-fade-out');
                setTimeout(() => {
                    row.style.display = 'none';
                    updateResultsCounter();
                }, 300);
            }
        }

        fetch(`/toggle_ignore_status/${folderId}`, {
            method: 'POST',
            headers: CSRFUtils.getHeaders({
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // Show success notification
                const action = isBeingIgnored ? 'ignored' : 'un-ignored';
                showSuccessNotification(`Folder ${action} successfully`);

                // Update table data in background
                updateUnmatchedFolders().then(() => {
                    // Reapply current filters after data refresh
                    filterUnmatchedRows();
                });
            } else {
                // If there was an error, restore the row if it was hidden
                if (isBeingIgnored && currentFilter !== 'all' && currentFilter !== 'Ignore') {
                    row.classList.remove('row-fade-out');
                    row.style.display = '';
                }
                console.error('Error toggling ignore status:', data.message);
            }
        })
        .catch(error => {
            // If there was an error, restore the row if it was hidden
            if (isBeingIgnored && currentFilter !== 'all' && currentFilter !== 'Ignore') {
                row.classList.remove('row-fade-out');
                row.style.display = '';
            }
            console.error('Error toggling ignore status:', error);
        });
    };

    window.clearEntry = function(folderId) {
        if (confirm('Remove this entry from the unmatched list?')) {
            const button = event.target.closest('button');
            const row = button.closest('tr');

            // Immediate visual feedback - fade out the row
            row.classList.add('row-fade-out');
            setTimeout(() => {
                row.style.display = 'none';
                updateResultsCounter();
            }, 300);

            fetch(`/clear_unmatched_entry/${folderId}`, {
                method: 'POST',
                headers: CSRFUtils.getHeaders({
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showSuccessNotification('Entry removed successfully');

                    // Update table data in background
                    updateUnmatchedFolders().then(() => {
                        // Reapply current filters after data refresh
                        filterUnmatchedRows();
                    });
                } else {
                    // If there was an error, restore the row
                    row.classList.remove('row-fade-out');
                    row.style.display = '';
                    console.error('Error clearing entry:', data.message);
                }
            })
            .catch(error => {
                // If there was an error, restore the row
                row.classList.remove('row-fade-out');
                row.style.display = '';
                console.error('Error clearing entry:', error);
            });
        }
    };
});

// Folder browse setup function
function setupFolderBrowse(browseButtonId, folderContentsId, spinnerId, upButtonId, inputFieldId, currentPathVar) {
    // Store the initial library selection
    var initialLibrarySelection = $(inputFieldId).closest('form').find('select[name="library_uuid"]').val();
    
    $(browseButtonId).click(function() {
        window[currentPathVar] = ''; // Reset the current path
        $(upButtonId).hide(); // Initially hide the "Up" button
        // Preserve the library selection
        var librarySelect = $(inputFieldId).closest('form').find('select[name="library_uuid"]');
        if (!librarySelect.val() && initialLibrarySelection) {
            librarySelect.val(initialLibrarySelection);
        }
        fetchFolders('', folderContentsId, spinnerId, upButtonId, inputFieldId, currentPathVar);
    });

    $(upButtonId).click(function() {
        var segments = window[currentPathVar].split('/').filter(Boolean);
        if (segments.length > 0) {
            // Remove the last segment to go up one level
            segments.pop();
            if (segments.length > 0) {
                window[currentPathVar] = segments.join('/') + '/';
            } else {
                window[currentPathVar] = ''; // Reset to base directory if no segments left
            }
        } else {
            window[currentPathVar] = ''; // Already at base directory
        }

        fetchFolders(window[currentPathVar], folderContentsId, spinnerId, upButtonId, inputFieldId, currentPathVar);

        // Update the input field with the new current path
        $(inputFieldId).val(window[currentPathVar]);

        if (segments.length < 1) {
            $(upButtonId).hide();
        } else {
            $(upButtonId).show();
        }
    });
}

function fetchFolders(path, folderContentsId, spinnerId, upButtonId, inputFieldId, currentPathVar) {
    console.log("Fetching folders for path:", path);
    $(spinnerId).show();
    $.ajax({
        url: '/api/browse_folders_ss',
        data: { path: path },
        success: function(data) {
            $(spinnerId).hide();
            $(folderContentsId).empty();
            
            // Check if we're using the new response format or the old one
            const items = data.items || data;
            
            // Display warning if there were errors
            if (data.hasErrors) {
                $(folderContentsId).append(
                    $('<div class="alert alert-warning">').html(
                        `<i class="fas fa-exclamation-triangle"></i> Some items (${data.skippedItems}) could not be accessed and were skipped.`
                    )
                );
            }
            
            items.forEach(function(item) {
                var itemElement;
                if (item.isDir) {
                    itemElement = $('<div>').html('<i class="fas fa-folder text-warning"></i> ' + item.name);
                    var fullPath = path + item.name + "/";
                    $(itemElement).addClass('folder-item').attr('data-path', fullPath);
                } else {
                    // Get file extension and appropriate icon
                    var ext = item.ext ? item.ext.toLowerCase() : '';
                    var iconClass = fileIcons[ext] || fileIcons['default'];
                    
                    // Format file size
                    var sizeText = formatFileSize(item.size);
                    
                    // Create file element with icon, name, and size
                    itemElement = $('<div>').html(
                        '<i class="fas ' + iconClass + '"></i> ' + 
                        item.name + 
                        '<span class="file-size">(' + sizeText + ')</span>'
                    );
                    $(itemElement)
                        .addClass('file-item')
                        .attr('title', item.name + ' - ' + sizeText)
                        .css('cursor', 'default');
                }
                $(folderContentsId).append(itemElement);
            });

            // Only attach click handlers to folders
            $('.folder-item').click(function() {
                var newPath = $(this).data('path');
                window[currentPathVar] = newPath; 
                fetchFolders(newPath, folderContentsId, spinnerId, upButtonId, inputFieldId, currentPathVar);
                $(inputFieldId).val(newPath); 
            });
            if (path) {
                $(upButtonId).show();
            } else {
                $(upButtonId).hide();
            }
        },
        error: function(error) {
            $(spinnerId).hide();
            console.error("Error fetching folders:", error);
        }
    });
}

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