// UI utilities and common functions

// Page navigation
function showPage(pageId) {
    try {
        console.log('=== showPage called with pageId:', pageId, '===');
        
        // Hide all pages
        const pages = document.querySelectorAll('.page');
        console.log('Found pages:', pages.length);
        pages.forEach((page, index) => {
            console.log(`Page ${index}: ${page.id}, currently visible: ${page.style.display !== 'none'}`);
            page.style.display = 'none';
        });

        // Show the selected page
        const targetPageId = pageId + 'Page';
        const targetPage = document.getElementById(targetPageId);
        console.log('Looking for page with ID:', targetPageId);
        console.log('Target page element:', targetPage);
        
        if (targetPage) {
            console.log('Setting target page display to block');
            targetPage.style.display = 'block';
            console.log('Target page is now visible:', targetPage.style.display === 'block');
            
            // Update URL hash only if it's different to avoid loops
            const currentHash = window.location.hash.substring(1);
            if (currentHash !== pageId) {
                console.log('Updating URL hash from', currentHash, 'to:', pageId);
                window.location.hash = pageId;
            } else {
                console.log('Hash already correct, not updating');
            }
            
            // Update navigation active state
            updateNavActiveState(pageId);
            
            // Update app state
            if (window.SeReactApp) {
                window.SeReactApp.currentPage = pageId;
            }
            
            // Load page data if needed
            console.log('About to load page data for:', pageId);
            loadPageData(pageId);
            console.log('=== showPage completed for:', pageId, '===');
        } else {
            console.error('Target page not found:', targetPageId);
            console.log('Available page IDs:', Array.from(document.querySelectorAll('.page')).map(p => p.id));
        }
    } catch (error) {
        console.error('Error in showPage:', error);
        showAlert('Error loading page: ' + error.message, 'danger');
    }
}

// Update navigation active state
function updateNavActiveState(activePageId) {
    const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
    navLinks.forEach(link => {
        link.classList.remove('active');
        const onclick = link.getAttribute('onclick');
        if (onclick && onclick.includes(`'${activePageId}'`)) {
            link.classList.add('active');
        }
    });
}

// Load page-specific data
function loadPageData(pageId) {
    console.log('=== loadPageData called with pageId:', pageId, '===');
    try {
        switch (pageId) {
            case 'config':
                console.log('Loading config page - about to call initializeConfigForm');
                // Add a small delay to ensure the page is visible before initializing the form
                setTimeout(() => {
                    console.log('Timeout fired, calling initializeConfigForm now');
                    initializeConfigForm();
                }, 100);
                break;
            case 'images':
                console.log('Loading images page');
                loadImages();
                break;
            case 'teams':
                console.log('Loading teams page');
                loadTeams();
                break;
            case 'users':
                console.log('Loading users page');
                loadUsers();
                break;
            case 'apiKeys':
                console.log('Loading apiKeys page');
                loadApiKeys();
                break;
            case 'search':
                console.log('Loading search page');
                initializeSearchForm();
                break;
            default:
                console.log('No specific loader for page:', pageId);
        }
        console.log('=== loadPageData completed for:', pageId, '===');
    } catch (error) {
        console.error('Error in loadPageData:', error);
    }
}

// Alert system
function showAlert(message, type = 'info', persistent = false) {
    const alertContainer = document.getElementById('alertContainer');
    
    const alertId = 'alert-' + Date.now();
    const alertHtml = `
        <div id="${alertId}" class="alert alert-${type} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    alertContainer.insertAdjacentHTML('beforeend', alertHtml);
    
    // Auto-dismiss non-persistent alerts
    if (!persistent) {
        setTimeout(() => {
            const alertElement = document.getElementById(alertId);
            if (alertElement) {
                const bsAlert = new bootstrap.Alert(alertElement);
                bsAlert.close();
            }
        }, 5000);
    }
}

// Clear all alerts
function clearAlerts() {
    const alertContainer = document.getElementById('alertContainer');
    alertContainer.innerHTML = '';
}

// Modal utilities
function createModal(id, title, body, footer = '') {
    const modalHtml = `
        <div class="modal fade" id="${id}" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">${title}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        ${body}
                    </div>
                    ${footer ? `<div class="modal-footer">${footer}</div>` : ''}
                </div>
            </div>
        </div>
    `;
    
    const modalContainer = document.getElementById('modalContainer');
    modalContainer.insertAdjacentHTML('beforeend', modalHtml);
    
    return new bootstrap.Modal(document.getElementById(id));
}

// Remove modal from DOM
function removeModal(id) {
    const modal = document.getElementById(id);
    if (modal) {
        modal.remove();
    }
}

// Loading state utilities
function setLoadingState(element, loading = true) {
    if (loading) {
        element.disabled = true;
        element.dataset.originalText = element.innerHTML;
        element.innerHTML = '<span class="loading-spinner"></span> Loading...';
    } else {
        element.disabled = false;
        element.innerHTML = element.dataset.originalText || element.innerHTML;
    }
}

// Format date for display
function formatDate(dateString) {
    const date = new Date(dateString);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

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

// Truncate text
function truncateText(text, maxLength = 100) {
    if (text.length <= maxLength) return text;
    return text.substring(0, maxLength) + '...';
}

// Escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// Debounce function
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Confirm dialog
function confirmAction(message, callback) {
    if (confirm(message)) {
        callback();
    }
}

// Copy to clipboard
async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        showAlert('Copied to clipboard!', 'success');
    } catch (err) {
        console.error('Failed to copy: ', err);
        showAlert('Failed to copy to clipboard', 'danger');
    }
}

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

// Initialize popovers
function initializePopovers() {
    const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
    });
}

// Handle file drag and drop
function setupFileDropZone(element, callback) {
    element.addEventListener('dragover', (e) => {
        e.preventDefault();
        element.classList.add('dragover');
    });

    element.addEventListener('dragleave', (e) => {
        e.preventDefault();
        element.classList.remove('dragover');
    });

    element.addEventListener('drop', (e) => {
        e.preventDefault();
        element.classList.remove('dragover');
        
        const files = Array.from(e.dataTransfer.files);
        callback(files);
    });
}

// Validate file type and size
function validateFile(file, allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], maxSize = 10 * 1024 * 1024) {
    if (!allowedTypes.includes(file.type)) {
        throw new Error(`File type ${file.type} is not allowed. Allowed types: ${allowedTypes.join(', ')}`);
    }
    
    if (file.size > maxSize) {
        throw new Error(`File size ${formatFileSize(file.size)} exceeds maximum allowed size of ${formatFileSize(maxSize)}`);
    }
    
    return true;
}

// Create image preview
function createImagePreview(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
    });
}

// Initialize UI components (called from app.js)
function initializeUI() {
    console.log('UI initialization called from app.js');
    
    // Initialize tooltips and popovers
    initializeTooltips();
    initializePopovers();
    
    // Update navigation state
    updateNavigationState();
    
    // Show initial page
    const hash = window.location.hash.substring(1);
    const initialPage = hash || 'home';
    console.log('Initial page:', initialPage);
    
    // Set initial app state
    if (window.SeReactApp) {
        window.SeReactApp.currentPage = initialPage;
    }
    
    showPage(initialPage);
}

// Test function for debugging
function testPageNavigation() {
    console.log('Testing page navigation...');
    console.log('Available pages:', document.querySelectorAll('.page').length);
    
    const pages = ['home', 'config', 'teams', 'users'];
    pages.forEach(pageId => {
        const pageElement = document.getElementById(pageId + 'Page');
        console.log(`Page ${pageId}:`, pageElement ? 'Found' : 'NOT FOUND');
    });
    
    // Test showing teams page
    console.log('Testing showPage("teams")...');
    showPage('teams');
}

// Make test function available globally
window.testPageNavigation = testPageNavigation;