// Admin panel JavaScript
let adminMap = null;
let startMarker = null;
let storedQRCodes = {};

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    checkAdminAuth();
    initializeAdminMap();
    loadCurrentStartLocation();
    setupEventListeners();
    setupNavigation();
    loadWalkSheetConfig();
});

// Check if user is authenticated as admin
async function checkAdminAuth() {
    try {
        const response = await fetch('/api/auth/check');
        const data = await response.json();
        
        if (!data.authenticated || !data.user?.isAdmin) {
            window.location.href = '/login.html';
            return;
        }
        
        // Display admin info
        document.getElementById('admin-info').innerHTML = `
            <span>👤 ${escapeHtml(data.user.email)}</span>
            <button id="logout-btn" class="btn btn-secondary btn-sm">Logout</button>
        `;
        
        document.getElementById('logout-btn').addEventListener('click', handleLogout);
        
    } catch (error) {
        console.error('Auth check failed:', error);
        window.location.href = '/login.html';
    }
}

// Initialize the admin map
function initializeAdminMap() {
    adminMap = L.map('admin-map').setView([53.5461, -113.4938], 11);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 19,
        minZoom: 2
    }).addTo(adminMap);
    
    // Add crosshair to center of map
    const crosshairIcon = L.divIcon({
        className: 'crosshair',
        iconSize: [20, 20],
        html: '<div style="width: 20px; height: 20px; position: relative;"><div style="position: absolute; top: 9px; left: 0; width: 20px; height: 2px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div><div style="position: absolute; top: 0; left: 9px; width: 2px; height: 20px; background: #333; box-shadow: 0 0 3px rgba(255,255,255,0.8);"></div></div>'
    });
    
    const crosshair = L.marker(adminMap.getCenter(), {
        icon: crosshairIcon,
        interactive: false,
        zIndexOffset: 1000
    }).addTo(adminMap);
    
    // Update crosshair position when map moves
    adminMap.on('move', function() {
        crosshair.setLatLng(adminMap.getCenter());
    });
    
    // Add click handler to set location
    adminMap.on('click', handleMapClick);
    
    // Update coordinates when map moves
    adminMap.on('moveend', updateCoordinatesFromMap);
}

// Load current start location
async function loadCurrentStartLocation() {
    try {
        const response = await fetch('/api/admin/start-location');
        const data = await response.json();
        
        if (data.success) {
            const { latitude, longitude, zoom } = data.location;
            
            // Update form fields
            document.getElementById('start-lat').value = latitude;
            document.getElementById('start-lng').value = longitude;
            document.getElementById('start-zoom').value = zoom;
            
            // Update map
            adminMap.setView([latitude, longitude], zoom);
            updateStartMarker(latitude, longitude);
            
            // Show source info
            if (data.source) {
                const sourceText = data.source === 'database' ? 'Loaded from database' :
                                 data.source === 'environment' ? 'Using environment defaults' :
                                 'Using system defaults';
                showStatus(sourceText, 'info');
            }
        }
        
    } catch (error) {
        console.error('Failed to load start location:', error);
        showStatus('Failed to load current start location', 'error');
    }
}

// Handle map click
function handleMapClick(e) {
    const { lat, lng } = e.latlng;
    
    document.getElementById('start-lat').value = lat.toFixed(6);
    document.getElementById('start-lng').value = lng.toFixed(6);
    
    updateStartMarker(lat, lng);
}

// Update marker position
function updateStartMarker(lat, lng) {
    if (startMarker) {
        startMarker.setLatLng([lat, lng]);
    } else {
        startMarker = L.marker([lat, lng], {
            draggable: true,
            title: 'Start Location'
        }).addTo(adminMap);
        
        // Update coordinates when marker is dragged
        startMarker.on('dragend', (e) => {
            const position = e.target.getLatLng();
            document.getElementById('start-lat').value = position.lat.toFixed(6);
            document.getElementById('start-lng').value = position.lng.toFixed(6);
        });
    }
}

// Update coordinates from current map view
function updateCoordinatesFromMap() {
    const center = adminMap.getCenter();
    const zoom = adminMap.getZoom();
    
    document.getElementById('start-zoom').value = zoom;
}

// Setup event listeners
function setupEventListeners() {
    // Use current view button
    const useCurrentViewBtn = document.getElementById('use-current-view');
    if (useCurrentViewBtn) {
        useCurrentViewBtn.addEventListener('click', () => {
            const center = adminMap.getCenter();
            const zoom = adminMap.getZoom();
            
            document.getElementById('start-lat').value = center.lat.toFixed(6);
            document.getElementById('start-lng').value = center.lng.toFixed(6);
            document.getElementById('start-zoom').value = zoom;
            
            updateStartMarker(center.lat, center.lng);
            showStatus('Captured current map view', 'success');
        });
    }
    
    // Save button
    const saveLocationBtn = document.getElementById('save-start-location');
    if (saveLocationBtn) {
        saveLocationBtn.addEventListener('click', saveStartLocation);
    }
    
    // Coordinate input changes
    const startLatInput = document.getElementById('start-lat');
    const startLngInput = document.getElementById('start-lng');
    const startZoomInput = document.getElementById('start-zoom');
    
    if (startLatInput) startLatInput.addEventListener('change', updateMapFromInputs);
    if (startLngInput) startLngInput.addEventListener('change', updateMapFromInputs);
    if (startZoomInput) startZoomInput.addEventListener('change', updateMapFromInputs);
    
    // Walk Sheet buttons
    const saveWalkSheetBtn = document.getElementById('save-walk-sheet');
    const previewWalkSheetBtn = document.getElementById('preview-walk-sheet');
    const printWalkSheetBtn = document.getElementById('print-walk-sheet');
    const refreshPreviewBtn = document.getElementById('refresh-preview');
    
    if (saveWalkSheetBtn) saveWalkSheetBtn.addEventListener('click', saveWalkSheetConfig);
    if (previewWalkSheetBtn) previewWalkSheetBtn.addEventListener('click', generateWalkSheetPreview);
    if (printWalkSheetBtn) printWalkSheetBtn.addEventListener('click', printWalkSheet);
    if (refreshPreviewBtn) refreshPreviewBtn.addEventListener('click', generateWalkSheetPreview);
    
    // Auto-update preview on input change
    const walkSheetInputs = document.querySelectorAll(
        '#walk-sheet-title, #walk-sheet-subtitle, #walk-sheet-footer, ' +
        '[id^="qr-code-"][id$="-url"], [id^="qr-code-"][id$="-label"]'
    );
    
    walkSheetInputs.forEach(input => {
        if (input) {
            input.addEventListener('input', debounce(() => {
                generateWalkSheetPreview();
            }, 500));
        }
    });
    
    // Add URL change listeners to detect when QR codes need regeneration
    for (let i = 1; i <= 3; i++) {
        const urlInput = document.getElementById(`qr-code-${i}-url`);
        if (urlInput) {
            let previousUrl = urlInput.value;
            
            urlInput.addEventListener('change', () => {
                if (urlInput.value !== previousUrl) {
                    // URL changed, clear stored QR code
                    delete storedQRCodes[i];
                    previousUrl = urlInput.value;
                }
            });
        }
    }
}

// Setup navigation between admin sections
function setupNavigation() {
    const navLinks = document.querySelectorAll('.admin-nav a');
    const sections = document.querySelectorAll('.admin-section');
    
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            
            // Get target section ID
            const targetId = link.getAttribute('href').substring(1);
            
            // Hide all sections
            sections.forEach(section => {
                section.style.display = 'none';
            });
            
            // Show target section
            const targetSection = document.getElementById(targetId);
            if (targetSection) {
                targetSection.style.display = 'block';
            }
            
            // Update active nav link
            navLinks.forEach(navLink => {
                navLink.classList.remove('active');
            });
            link.classList.add('active');
            
            // If switching to walk sheet, generate preview
            if (targetId === 'walk-sheet') {
                generateWalkSheetPreview();
            }
        });
    });
}

// Update map from input fields
function updateMapFromInputs() {
    const lat = parseFloat(document.getElementById('start-lat').value);
    const lng = parseFloat(document.getElementById('start-lng').value);
    const zoom = parseInt(document.getElementById('start-zoom').value);
    
    if (!isNaN(lat) && !isNaN(lng) && !isNaN(zoom)) {
        adminMap.setView([lat, lng], zoom);
        updateStartMarker(lat, lng);
    }
}

// Save start location
async function saveStartLocation() {
    const lat = parseFloat(document.getElementById('start-lat').value);
    const lng = parseFloat(document.getElementById('start-lng').value);
    const zoom = parseInt(document.getElementById('start-zoom').value);
    
    // Validate
    if (isNaN(lat) || isNaN(lng) || isNaN(zoom)) {
        showStatus('Please enter valid coordinates and zoom level', 'error');
        return;
    }
    
    if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
        showStatus('Coordinates out of valid range', 'error');
        return;
    }
    
    if (zoom < 2 || zoom > 19) {
        showStatus('Zoom level must be between 2 and 19', 'error');
        return;
    }
    
    try {
        const response = await fetch('/api/admin/start-location', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                latitude: lat,
                longitude: lng,
                zoom: zoom
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showStatus('Start location saved successfully!', 'success');
        } else {
            throw new Error(data.error || 'Failed to save');
        }
        
    } catch (error) {
        console.error('Save error:', error);
        showStatus(error.message || 'Failed to save start location', 'error');
    }
}

// Save walk sheet configuration
async function saveWalkSheetConfig() {
    const config = {
        walk_sheet_title: document.getElementById('walk-sheet-title')?.value || '',
        walk_sheet_subtitle: document.getElementById('walk-sheet-subtitle')?.value || '',
        walk_sheet_footer: document.getElementById('walk-sheet-footer')?.value || '',
        qr_code_1_url: document.getElementById('qr-code-1-url')?.value || '',
        qr_code_1_label: document.getElementById('qr-code-1-label')?.value || '',
        qr_code_2_url: document.getElementById('qr-code-2-url')?.value || '',
        qr_code_2_label: document.getElementById('qr-code-2-label')?.value || '',
        qr_code_3_url: document.getElementById('qr-code-3-url')?.value || '',
        qr_code_3_label: document.getElementById('qr-code-3-label')?.value || ''
    };
    
    // Show loading state
    const saveButton = document.getElementById('save-walk-sheet');
    if (!saveButton) {
        showStatus('Save button not found', 'error');
        return;
    }
    
    const originalText = saveButton.textContent;
    saveButton.textContent = 'Saving...';
    saveButton.disabled = true;
    
    try {
        const response = await fetch('/api/admin/walk-sheet-config', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(config)
        });
        
        const data = await response.json();
        
        if (data.success) {
            showStatus('Walk sheet configuration saved successfully!', 'success');
            
            // Update stored QR codes if new ones were generated
            if (data.qrCodes) {
                for (let i = 1; i <= 3; i++) {
                    if (data.qrCodes[`qr_code_${i}_image`]) {
                        storedQRCodes[`qr_code_${i}_image`] = data.qrCodes[`qr_code_${i}_image`];
                    }
                }
            }
            
            // Refresh preview with new QR codes
            generateWalkSheetPreview();
        } else {
            throw new Error(data.error || 'Failed to save');
        }
        
    } catch (error) {
        console.error('Save error:', error);
        showStatus(error.message || 'Failed to save walk sheet configuration', 'error');
    } finally {
        saveButton.textContent = originalText;
        saveButton.disabled = false;
    }
}

// Generate walk sheet preview
function generateWalkSheetPreview() {
    const title = document.getElementById('walk-sheet-title')?.value || 'Campaign Walk Sheet';
    const subtitle = document.getElementById('walk-sheet-subtitle')?.value || 'Door-to-Door Canvassing Form';
    const footer = document.getElementById('walk-sheet-footer')?.value || 'Thank you for your support!';
    
    let previewHTML = `
        <div class="ws-header">
            <h1 class="ws-title">${escapeHtml(title)}</h1>
            <p class="ws-subtitle">${escapeHtml(subtitle)}</p>
        </div>
    `;
    
    // Add QR codes section
    const qrCodesHTML = [];
    for (let i = 1; i <= 3; i++) {
        const urlInput = document.getElementById(`qr-code-${i}-url`);
        const labelInput = document.getElementById(`qr-code-${i}-label`);
        
        const url = urlInput?.value || '';
        const label = labelInput?.value || '';
        
        if (url) {
            qrCodesHTML.push(`
                <div class="ws-qr-item">
                    <div class="ws-qr-code" id="preview-qr-${i}">
                        <!-- QR code will be inserted here -->
                    </div>
                    <div class="ws-qr-label">${escapeHtml(label || `QR Code ${i}`)}</div>
                </div>
            `);
        }
    }
    
    if (qrCodesHTML.length > 0) {
        previewHTML += `
            <div class="ws-qr-section">
                ${qrCodesHTML.join('')}
            </div>
        `;
    }
    
    // Add form fields based on the main map form
    previewHTML += `
        <div class="ws-form-section">
            <div class="ws-form-row">
                <div class="ws-form-group">
                    <label class="ws-form-label">First Name</label>
                    <div class="ws-form-field"></div>
                </div>
                <div class="ws-form-group">
                    <label class="ws-form-label">Last Name</label>
                    <div class="ws-form-field"></div>
                </div>
            </div>
            
            <div class="ws-form-row">
                <div class="ws-form-group">
                    <label class="ws-form-label">Email</label>
                    <div class="ws-form-field"></div>
                </div>
                <div class="ws-form-group">
                    <label class="ws-form-label">Phone</label>
                    <div class="ws-form-field"></div>
                </div>
            </div>
            
            <div class="ws-form-row">
                <div class="ws-form-group">
                    <label class="ws-form-label">Address</label>
                    <div class="ws-form-field"></div>
                </div>
                <div class="ws-form-group">
                    <label class="ws-form-label">Unit Number</label>
                    <div class="ws-form-field"></div>
                </div>
            </div>
            
            <div class="ws-form-row">
                <div class="ws-form-group">
                    <label class="ws-form-label">Support Level (1-4)</label>
                    <div class="ws-form-field"></div>
                </div>
                <div class="ws-form-group">
                    <label class="ws-form-label">Sign Request</label>
                    <div class="ws-form-field" style="display: flex; gap: 20px;">
                        <span>☐ Yes</span>
                        <span>☐ No</span>
                    </div>
                </div>
            </div>
            
            <div class="ws-form-row">
                <div class="ws-form-group">
                    <label class="ws-form-label">Sign Size</label>
                    <div class="ws-form-field"></div>
                </div>
                <div class="ws-form-group">
                    <label class="ws-form-label">Visited Date</label>
                    <div class="ws-form-field"></div>
                </div>
            </div>
        </div>
        
        <div class="ws-notes-section">
            <div class="ws-notes-label">Notes & Comments</div>
            <div class="ws-notes-area"></div>
        </div>
    `;
    
    // Add footer
    if (footer) {
        previewHTML += `
            <div class="ws-footer">
                ${escapeHtml(footer)}
            </div>
        `;
    }
    
    // Update preview
    const previewContent = document.getElementById('walk-sheet-preview-content');
    if (previewContent) {
        previewContent.innerHTML = previewHTML;
        
        // Generate QR codes after DOM is updated
        setTimeout(() => {
            generatePreviewQRCodes();
        }, 100);
    } else {
        console.warn('Walk sheet preview content container not found');
    }
}

// Generate QR codes for preview
async function generatePreviewQRCodes() {
    for (let i = 1; i <= 3; i++) {
        const urlInput = document.getElementById(`qr-code-${i}-url`);
        const url = urlInput?.value || '';
        const qrContainer = document.getElementById(`preview-qr-${i}`);
        
        if (url && qrContainer) {
            try {
                // Use our local QR code generation endpoint
                const qrImageUrl = `/api/qr?text=${encodeURIComponent(url)}&size=100`;
                qrContainer.innerHTML = `<img src="${qrImageUrl}" alt="QR Code ${i}" style="width: 100px; height: 100px;">`;
            } catch (error) {
                console.error(`Failed to display QR code ${i}:`, error);
                qrContainer.innerHTML = '<div style="width: 100px; height: 100px; border: 1px dashed #ccc; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #999;">QR Error</div>';
            }
        } else if (qrContainer) {
            // Clear empty QR containers
            qrContainer.innerHTML = '';
        }
    }
}

// Print walk sheet
function printWalkSheet() {
    // First generate fresh preview to ensure QR codes are generated
    generateWalkSheetPreview();
    
    // Wait for QR codes to generate, then print
    setTimeout(() => {
        // Create a print-specific window
        const printContent = document.getElementById('walk-sheet-preview-content').innerHTML;
        const printWindow = window.open('', '_blank');
        
        printWindow.document.write(`
            <!DOCTYPE html>
            <html>
            <head>
                <title>Walk Sheet - Print</title>
                <link rel="stylesheet" href="/css/style.css">
                <link rel="stylesheet" href="/css/admin.css">
                <style>
                    @media print {
                        @page {
                            size: letter;
                            margin: 0;
                        }
                        body {
                            margin: 0;
                            padding: 0;
                        }
                        .walk-sheet-page {
                            width: 8.5in !important;
                            height: 11in !important;
                            padding: 0.5in !important;
                            margin: 0 !important;
                            box-shadow: none !important;
                            page-break-after: avoid !important;
                        }
                    }
                </style>
            </head>
            <body>
                <div class="walk-sheet-page">
                    ${printContent}
                </div>
            </body>
            </html>
        `);
        
        printWindow.document.close();
        
        // Wait for images to load
        printWindow.onload = function() {
            setTimeout(() => {
                printWindow.print();
                printWindow.close();
            }, 250);
        };
    }, 500);
}

// Load walk sheet configuration
async function loadWalkSheetConfig() {
    try {
        const response = await fetch('/api/admin/walk-sheet-config');
        const data = await response.json();
        
        if (data.success && data.data) {
            // Populate form fields
            const titleInput = document.getElementById('walk-sheet-title');
            const subtitleInput = document.getElementById('walk-sheet-subtitle');
            const footerInput = document.getElementById('walk-sheet-footer');
            
            if (titleInput) titleInput.value = data.data.walk_sheet_title || '';
            if (subtitleInput) subtitleInput.value = data.data.walk_sheet_subtitle || '';
            if (footerInput) footerInput.value = data.data.walk_sheet_footer || '';
            
            // Store QR code images if they exist
            for (let i = 1; i <= 3; i++) {
                const urlField = document.getElementById(`qr-code-${i}-url`);
                const labelField = document.getElementById(`qr-code-${i}-label`);
                
                if (urlField && data.data[`qr_code_${i}_url`]) {
                    urlField.value = data.data[`qr_code_${i}_url`];
                }
                if (labelField && data.data[`qr_code_${i}_label`]) {
                    labelField.value = data.data[`qr_code_${i}_label`];
                }
                
                // Store the QR code image URL if it exists
                if (data.data[`qr_code_${i}_image`]) {
                    storedQRCodes[`qr_code_${i}_image`] = data.data[`qr_code_${i}_image`];
                }
            }
            
            // Generate preview
            generateWalkSheetPreview();
        }
        
    } catch (error) {
        console.error('Failed to load walk sheet config:', error);
    }
}

// Handle logout
async function handleLogout() {
    if (!confirm('Are you sure you want to logout?')) {
        return;
    }
    
    try {
        const response = await fetch('/api/auth/logout', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        });
        
        if (response.ok) {
            window.location.href = '/login.html';
        } else {
            showStatus('Logout failed. Please try again.', 'error');
        }
    } catch (error) {
        console.error('Logout error:', error);
        showStatus('Logout failed. Please try again.', 'error');
    }
}

// Show status message
function showStatus(message, type = 'info') {
    const container = document.getElementById('status-container');
    
    const messageDiv = document.createElement('div');
    messageDiv.className = `status-message ${type}`;
    messageDiv.textContent = message;
    
    container.appendChild(messageDiv);
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        messageDiv.remove();
    }, 5000);
}

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

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