// Global configuration
const CONFIG = {
    DEFAULT_LAT: parseFloat(document.querySelector('meta[name="default-lat"]')?.content) || 53.5461,
    DEFAULT_LNG: parseFloat(document.querySelector('meta[name="default-lng"]')?.content) || -113.4938,
    DEFAULT_ZOOM: parseInt(document.querySelector('meta[name="default-zoom"]')?.content) || 11,
    REFRESH_INTERVAL: 30000, // 30 seconds
    MAX_ZOOM: 19,
    MIN_ZOOM: 2
};

// Application state
let map = null;
let markers = [];
let userLocationMarker = null;
let isAddingLocation = false;
let refreshInterval = null;
let currentEditingLocation = null;
let currentUser = null;
let startLocationMarker = null;
let isStartLocationVisible = true;

// Initialize the application
document.addEventListener('DOMContentLoaded', async () => {
    console.log('DOM loaded, initializing application...');
    
    try {
        // First check authentication
        await checkAuth();
        
        // Then initialize the map
        await initializeMap();
        
        // Only load locations after map is ready
        await loadLocations();
        
        // Setup other features
        setupEventListeners();
        setupAutoRefresh();
        
    } catch (error) {
        console.error('Initialization error:', error);
        showStatus('Failed to initialize application', 'error');
    } finally {
        hideLoading();
    }
});

// Check authentication
async function checkAuth() {
    try {
        const response = await fetch('/api/auth/check');
        const data = await response.json();
        
        if (!data.authenticated) {
            window.location.href = '/login.html';
            // Throw error to stop further initialization
            throw new Error('Not authenticated');
        }
        
        currentUser = data.user;
        updateUserInterface();
        
    } catch (error) {
        console.error('Auth check failed:', error);
        window.location.href = '/login.html';
        // Re-throw to stop initialization chain
        throw error;
    }
}

// Update UI based on user
function updateUserInterface() {
    if (!currentUser) return;
    
    // Update user email in both desktop and mobile
    const userEmailElement = document.getElementById('user-email');
    const mobileUserEmailElement = document.getElementById('mobile-user-email');
    
    if (userEmailElement) {
        userEmailElement.textContent = currentUser.email;
    }
    if (mobileUserEmailElement) {
        mobileUserEmailElement.textContent = currentUser.email;
    }
    
    // Add admin link if user is admin
    if (currentUser.isAdmin) {
        // Add admin link to desktop header
        const headerActions = document.querySelector('.header-actions');
        if (headerActions) {
            const adminLink = document.createElement('a');
            adminLink.href = '/admin.html';
            adminLink.className = 'btn btn-secondary';
            adminLink.textContent = '⚙️ Admin';
            headerActions.insertBefore(adminLink, headerActions.firstChild);
        }
        
        // Add admin link to mobile dropdown
        const mobileDropdownContent = document.getElementById('mobile-dropdown-content');
        if (mobileDropdownContent) {
            // Check if admin link already exists
            if (!mobileDropdownContent.querySelector('.admin-link-mobile')) {
                const adminItem = document.createElement('div');
                adminItem.className = 'mobile-dropdown-item admin-link-mobile';
                
                const adminLink = document.createElement('a');
                adminLink.href = '/admin.html';
                adminLink.style.color = 'inherit';
                adminLink.style.textDecoration = 'none';
                adminLink.textContent = '⚙️ Admin Panel';
                
                adminItem.appendChild(adminLink);
                
                // Insert admin link at the top of the dropdown
                if (mobileDropdownContent.firstChild) {
                    mobileDropdownContent.insertBefore(adminItem, mobileDropdownContent.firstChild);
                } else {
                    mobileDropdownContent.appendChild(adminItem);
                }
            }
        }
    }
}

// Initialize the map
async function initializeMap() {
    try {
        // Get start location from server
        const response = await fetch('/api/admin/start-location');
        const data = await response.json();
        
        let startLat = CONFIG.DEFAULT_LAT;
        let startLng = CONFIG.DEFAULT_LNG;
        let startZoom = CONFIG.DEFAULT_ZOOM;
        
        if (data.success && data.location) {
            startLat = data.location.latitude;
            startLng = data.location.longitude;
            startZoom = data.location.zoom;
        }
        
        // Initialize map
        map = L.map('map').setView([startLat, startLng], startZoom);
        
        // Add tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            maxZoom: CONFIG.MAX_ZOOM,
            minZoom: CONFIG.MIN_ZOOM
        }).addTo(map);
        
        // Add start location marker
        addStartLocationMarker(startLat, startLng);
        
        console.log('Map initialized successfully');
        
    } catch (error) {
        console.error('Failed to initialize map:', error);
        showStatus('Failed to initialize map', 'error');
    }
}

// Add start location marker function
function addStartLocationMarker(lat, lng) {
    console.log(`Adding start location marker at: ${lat}, ${lng}`);
    
    // Remove existing start location marker if it exists
    if (startLocationMarker) {
        map.removeLayer(startLocationMarker);
    }
    
    // Create a very distinctive custom icon
    const startIcon = L.divIcon({
        html: `
            <div class="start-location-marker-wrapper">
                <div class="start-location-marker-pin">
                    <div class="start-location-marker-inner">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
                            <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
                        </svg>
                    </div>
                </div>
                <div class="start-location-marker-pulse"></div>
            </div>
        `,
        className: 'start-location-custom-marker',
        iconSize: [48, 48],
        iconAnchor: [24, 48],
        popupAnchor: [0, -48]
    });
    
    // Create the marker
    startLocationMarker = L.marker([lat, lng], {
        icon: startIcon,
        zIndexOffset: 1000
    }).addTo(map);
    
    // Add popup
    startLocationMarker.bindPopup(`
        <div class="popup-content start-location-popup-enhanced">
            <h3>📍 Map Start Location</h3>
            <p>This is todays starting location!</p>
            ${currentUser?.isAdmin ? '<p><a href="/admin.html">Edit in Admin Panel</a></p>' : ''}
        </div>
    `);
}

// Toggle start location visibility
function toggleStartLocationVisibility() {
    if (!startLocationMarker) return;
    
    isStartLocationVisible = !isStartLocationVisible;
    
    if (isStartLocationVisible) {
        map.addLayer(startLocationMarker);
        // Update both desktop and mobile button text
        const desktopBtn = document.querySelector('#toggle-start-location-btn .btn-text');
        if (desktopBtn) desktopBtn.textContent = 'Hide Start Location';
    } else {
        map.removeLayer(startLocationMarker);
        // Update both desktop and mobile button text
        const desktopBtn = document.querySelector('#toggle-start-location-btn .btn-text');
        if (desktopBtn) desktopBtn.textContent = 'Show Start Location';
    }
}

// Load locations from the API
async function loadLocations() {
    try {
        const response = await fetch('/api/locations');
        const data = await response.json();
        
        if (data.success) {
            displayLocations(data.locations);
            updateLocationCount(data.locations.length);
        } else {
            throw new Error(data.error || 'Failed to load locations');
        }
    } catch (error) {
        console.error('Error loading locations:', error);
        showStatus('Failed to load locations', 'error');
    }
}

// Display locations on the map
function displayLocations(locations) {
    // Clear existing markers
    markers.forEach(marker => {
        if (marker && map) {
            map.removeLayer(marker);
        }
    });
    markers = [];
    
    // Add new markers
    locations.forEach(location => {
        if (location.latitude && location.longitude) {
            const marker = createLocationMarker(location);
            if (marker) {  // Only add if marker was successfully created
                markers.push(marker);
            }
        }
    });
    
    console.log(`Displayed ${markers.length} locations`);
}

// Create a location marker
function createLocationMarker(location) {
    // Safety check - ensure map exists
    if (!map) {
        console.warn('Map not initialized, skipping marker creation');
        return null;
    }
    
    const lat = parseFloat(location.latitude);
    const lng = parseFloat(location.longitude);
    
    // Determine marker color based on support level
    let markerColor = 'blue';
    if (location['Support Level']) {
        const level = parseInt(location['Support Level']);
        switch(level) {
            case 1: markerColor = 'green'; break;
            case 2: markerColor = 'yellow'; break;
            case 3: markerColor = 'orange'; break;
            case 4: markerColor = 'red'; break;
        }
    }
    
    const marker = L.circleMarker([lat, lng], {
        radius: 8,
        fillColor: markerColor,
        color: '#fff',
        weight: 2,
        opacity: 1,
        fillOpacity: 0.8
    }).addTo(map);
    
    // Create popup content
    const popupContent = createPopupContent(location);
    marker.bindPopup(popupContent);
    
    // Store location data on marker for later use
    marker._locationData = location;
    
    return marker;
}

// Create popup content
function createPopupContent(location) {
    // Try to find the ID field
    const locationId = location.Id || location.id || location.ID || location._id;
    
    const name = [location['First Name'], location['Last Name']]
        .filter(Boolean).join(' ') || 'Unknown';
    const address = location.Address || 'No address';
    const supportLevel = location['Support Level'] ? 
        `Level ${location['Support Level']}` : 'Not specified';
    
    return `
        <div class="popup-content">
            <h3>${escapeHtml(name)}</h3>
            <p><strong>Address:</strong> ${escapeHtml(address)}</p>
            <p><strong>Support:</strong> ${escapeHtml(supportLevel)}</p>
            ${location.Sign ? '<p>🏁 Has campaign sign</p>' : ''}
            ${location.Notes ? `<p><strong>Notes:</strong> ${escapeHtml(location.Notes)}</p>` : ''}
            <div class="popup-meta">
                <p>ID: ${locationId || 'Unknown'}</p>
            </div>
            ${currentUser ? `
                <div class="popup-actions">
                    <button class="btn btn-primary btn-sm edit-location-popup-btn" 
                            data-location='${escapeHtml(JSON.stringify(location))}'>
                        ✏️ Edit
                    </button>
                </div>
            ` : ''}
        </div>
    `;
}

// Setup event listeners
function setupEventListeners() {
    // Desktop controls
    document.getElementById('refresh-btn')?.addEventListener('click', () => {
        loadLocations();
        showStatus('Locations refreshed', 'success');
    });
    
    document.getElementById('geolocate-btn')?.addEventListener('click', getUserLocation);
    document.getElementById('toggle-start-location-btn')?.addEventListener('click', toggleStartLocationVisibility);
    document.getElementById('add-location-btn')?.addEventListener('click', toggleAddLocationMode);
    document.getElementById('fullscreen-btn')?.addEventListener('click', toggleFullscreen);
    
    // Mobile controls
    document.getElementById('mobile-refresh-btn')?.addEventListener('click', () => {
        loadLocations();
        showStatus('Locations refreshed', 'success');
    });
    
    document.getElementById('mobile-geolocate-btn')?.addEventListener('click', getUserLocation);
    document.getElementById('mobile-toggle-start-location-btn')?.addEventListener('click', toggleStartLocationVisibility);
    document.getElementById('mobile-add-location-btn')?.addEventListener('click', toggleAddLocationMode);
    document.getElementById('mobile-fullscreen-btn')?.addEventListener('click', toggleFullscreen);
    
    // Mobile dropdown toggle
    document.getElementById('mobile-dropdown-toggle')?.addEventListener('click', (e) => {
        e.stopPropagation();
        const dropdown = document.getElementById('mobile-dropdown');
        dropdown.classList.toggle('active');
    });
    
    // Close mobile dropdown when clicking outside
    document.addEventListener('click', (e) => {
        const dropdown = document.getElementById('mobile-dropdown');
        if (!dropdown.contains(e.target)) {
            dropdown.classList.remove('active');
        }
    });
    
    // Modal controls
    document.getElementById('close-modal-btn')?.addEventListener('click', closeAddModal);
    document.getElementById('cancel-modal-btn')?.addEventListener('click', closeAddModal);
    
    // Edit footer controls
    document.getElementById('close-edit-footer-btn')?.addEventListener('click', closeEditForm);
    
    // Forms
    document.getElementById('location-form')?.addEventListener('submit', handleAddLocation);
    document.getElementById('edit-location-form')?.addEventListener('submit', handleEditLocation);
    
    // Delete button
    document.getElementById('delete-location-btn')?.addEventListener('click', handleDeleteLocation);
    
    // Address lookup buttons
    document.getElementById('lookup-address-add-btn')?.addEventListener('click', () => {
        lookupAddress('add');
    });
    
    document.getElementById('lookup-address-edit-btn')?.addEventListener('click', () => {
        lookupAddress('edit');
    });
    
    // Geo-location field sync
    setupGeoLocationSync();
    
    // Add event delegation for popup edit buttons
    document.addEventListener('click', (e) => {
        if (e.target.classList.contains('edit-location-popup-btn')) {
            e.preventDefault();
            try {
                const locationData = JSON.parse(e.target.getAttribute('data-location'));
                openEditForm(locationData);
            } catch (error) {
                console.error('Error parsing location data:', error);
                showStatus('Error opening edit form', 'error');
            }
        }
    });
}

// Setup geo-location field synchronization
function setupGeoLocationSync() {
    // For add form
    const addLatInput = document.getElementById('location-lat');
    const addLngInput = document.getElementById('location-lng');
    const addGeoInput = document.getElementById('geo-location');
    
    if (addLatInput && addLngInput && addGeoInput) {
        [addLatInput, addLngInput].forEach(input => {
            input.addEventListener('input', () => {
                const lat = addLatInput.value;
                const lng = addLngInput.value;
                if (lat && lng) {
                    addGeoInput.value = `${lat};${lng}`;
                }
            });
        });
        
        addGeoInput.addEventListener('input', () => {
            const coords = parseGeoLocation(addGeoInput.value);
            if (coords) {
                addLatInput.value = coords.lat;
                addLngInput.value = coords.lng;
            }
        });
    }
    
    // For edit form
    const editLatInput = document.getElementById('edit-location-lat');
    const editLngInput = document.getElementById('edit-location-lng');
    const editGeoInput = document.getElementById('edit-geo-location');
    
    if (editLatInput && editLngInput && editGeoInput) {
        [editLatInput, editLngInput].forEach(input => {
            input.addEventListener('input', () => {
                const lat = editLatInput.value;
                const lng = editLngInput.value;
                if (lat && lng) {
                    editGeoInput.value = `${lat};${lng}`;
                }
            });
        });
        
        editGeoInput.addEventListener('input', () => {
            const coords = parseGeoLocation(editGeoInput.value);
            if (coords) {
                editLatInput.value = coords.lat;
                editLngInput.value = coords.lng;
            }
        });
    }
}

// Parse geo-location string
function parseGeoLocation(value) {
    if (!value) return null;
    
    // Try semicolon separator first
    let parts = value.split(';');
    if (parts.length !== 2) {
        // Try comma separator
        parts = value.split(',');
    }
    
    if (parts.length === 2) {
        const lat = parseFloat(parts[0].trim());
        const lng = parseFloat(parts[1].trim());
        
        if (!isNaN(lat) && !isNaN(lng)) {
            return { lat, lng };
        }
    }
    
    return null;
}

// Get user location
function getUserLocation() {
    if (!navigator.geolocation) {
        showStatus('Geolocation is not supported by your browser', 'error');
        return;
    }
    
    showStatus('Getting your location...', 'info');
    
    navigator.geolocation.getCurrentPosition(
        (position) => {
            const lat = position.coords.latitude;
            const lng = position.coords.longitude;
            
            // Center map on user location
            map.setView([lat, lng], 15);
            
            // Add or update user location marker
            if (userLocationMarker) {
                userLocationMarker.setLatLng([lat, lng]);
            } else {
                userLocationMarker = L.circleMarker([lat, lng], {
                    radius: 10,
                    fillColor: '#2196F3',
                    color: '#fff',
                    weight: 3,
                    opacity: 1,
                    fillOpacity: 0.8
                }).addTo(map);
                
                userLocationMarker.bindPopup('<strong>Your Location</strong>');
            }
            
            showStatus('Location found!', 'success');
        },
        (error) => {
            let message = 'Unable to get your location';
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    message = 'Location permission denied';
                    break;
                case error.POSITION_UNAVAILABLE:
                    message = 'Location information unavailable';
                    break;
                case error.TIMEOUT:
                    message = 'Location request timed out';
                    break;
            }
            showStatus(message, 'error');
        },
        {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0
        }
    );
}

// Toggle add location mode
function toggleAddLocationMode() {
    isAddingLocation = !isAddingLocation;
    
    const crosshair = document.getElementById('crosshair');
    const addBtn = document.getElementById('add-location-btn');
    const mobileAddBtn = document.getElementById('mobile-add-location-btn');
    
    if (isAddingLocation) {
        crosshair.classList.remove('hidden');
        
        // Update desktop button
        if (addBtn) {
            addBtn.classList.add('active');
            addBtn.innerHTML = '<span class="btn-icon">✕</span><span class="btn-text">Cancel</span>';
        }
        
        // Update mobile button
        if (mobileAddBtn) {
            mobileAddBtn.classList.add('active');
            mobileAddBtn.innerHTML = '✕';
            mobileAddBtn.title = 'Cancel';
        }
        
        map.on('click', handleMapClick);
    } else {
        crosshair.classList.add('hidden');
        
        // Update desktop button
        if (addBtn) {
            addBtn.classList.remove('active');
            addBtn.innerHTML = '<span class="btn-icon">➕</span><span class="btn-text">Add Location Here</span>';
        }
        
        // Update mobile button
        if (mobileAddBtn) {
            mobileAddBtn.classList.remove('active');
            mobileAddBtn.innerHTML = '➕';
            mobileAddBtn.title = 'Add Location';
        }
        
        map.off('click', handleMapClick);
    }
}

// Handle map click in add mode
function handleMapClick(e) {
    if (!isAddingLocation) return;
    
    const { lat, lng } = e.latlng;
    openAddModal(lat, lng);
    toggleAddLocationMode();
}

// Open add location modal
function openAddModal(lat, lng) {
    const modal = document.getElementById('add-modal');
    const latInput = document.getElementById('location-lat');
    const lngInput = document.getElementById('location-lng');
    const geoInput = document.getElementById('geo-location');
    
    // Set coordinates
    latInput.value = lat.toFixed(8);
    lngInput.value = lng.toFixed(8);
    geoInput.value = `${lat.toFixed(8)};${lng.toFixed(8)}`;
    
    // Clear other fields
    document.getElementById('location-form').reset();
    latInput.value = lat.toFixed(8);
    lngInput.value = lng.toFixed(8);
    geoInput.value = `${lat.toFixed(8)};${lng.toFixed(8)}`;
    
    // Show modal
    modal.classList.remove('hidden');
}

// Close add modal
function closeAddModal() {
    const modal = document.getElementById('add-modal');
    modal.classList.add('hidden');
    document.getElementById('location-form').reset();
}

// Handle add location form submission
async function handleAddLocation(e) {
    e.preventDefault();
    
    const formData = new FormData(e.target);
    const data = {};
    
    // Convert form data to object
    for (let [key, value] of formData.entries()) {
        // Map form field names to NocoDB column names
        if (key === 'latitude') data.latitude = value.trim();
        else if (key === 'longitude') data.longitude = value.trim();
        else if (key === 'Geo-Location') data['Geo-Location'] = value.trim();
        else if (value.trim() !== '') {
            data[key] = value.trim();
        }
    }
    
    // Ensure geo-location is set
    if (data.latitude && data.longitude) {
        data['Geo-Location'] = `${data.latitude};${data.longitude}`;
    }
    
    // Handle checkbox
    data.Sign = document.getElementById('sign').checked;
    
    try {
        const response = await fetch('/api/locations', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            showStatus('Location added successfully!', 'success');
            closeAddModal();
            loadLocations();
        } else {
            throw new Error(result.error || 'Failed to add location');
        }
    } catch (error) {
        console.error('Error adding location:', error);
        showStatus(error.message || 'Failed to add location', 'error');
    }
}

// Open edit form
function openEditForm(location) {
    currentEditingLocation = location;
    
    // Debug: Log all possible ID fields
    console.log('Opening edit form for location:', {
        'Id': location.Id,
        'id': location.id,
        'ID': location.ID,
        '_id': location._id,
        'all_keys': Object.keys(location)
    });
    
    // Extract ID - check multiple possible field names
    const locationId = location.Id || location.id || location.ID || location._id;
    
    if (!locationId) {
        console.error('No ID found in location object. Available fields:', Object.keys(location));
        showStatus('Error: Location ID not found. Check console for details.', 'error');
        return;
    }
    
    // Store the ID in a data attribute for later use
    document.getElementById('edit-location-id').value = locationId;
    document.getElementById('edit-location-id').setAttribute('data-location-id', locationId);
    
    // Populate form fields
    document.getElementById('edit-first-name').value = location['First Name'] || '';
    document.getElementById('edit-last-name').value = location['Last Name'] || '';
    document.getElementById('edit-location-email').value = location.Email || '';
    document.getElementById('edit-location-phone').value = location.Phone || '';
    document.getElementById('edit-location-unit').value = location['Unit Number'] || '';
    document.getElementById('edit-support-level').value = location['Support Level'] || '';
    document.getElementById('edit-location-address').value = location.Address || '';
    document.getElementById('edit-sign').checked = location.Sign === true || location.Sign === 'true' || location.Sign === 1;
    document.getElementById('edit-sign-size').value = location['Sign Size'] || '';
    document.getElementById('edit-location-notes').value = location.Notes || '';
    document.getElementById('edit-location-lat').value = location.latitude || '';
    document.getElementById('edit-location-lng').value = location.longitude || '';
    document.getElementById('edit-geo-location').value = location['Geo-Location'] || '';
    
    // Show edit footer
    document.getElementById('edit-footer').classList.remove('hidden');
}

// Close edit form
function closeEditForm() {
    document.getElementById('edit-footer').classList.add('hidden');
    currentEditingLocation = null;
}

// Handle edit location form submission
async function handleEditLocation(e) {
    e.preventDefault();
    
    if (!currentEditingLocation) return;
    
    // Get the stored location ID
    const locationIdElement = document.getElementById('edit-location-id');
    const locationId = locationIdElement.getAttribute('data-location-id') || locationIdElement.value;
    
    if (!locationId || locationId === 'undefined') {
        showStatus('Error: Location ID not found', 'error');
        return;
    }
    
    const formData = new FormData(e.target);
    const data = {};
    
    // Convert form data to object
    for (let [key, value] of formData.entries()) {
        // Skip the ID field
        if (key === 'id' || key === 'Id' || key === 'ID') continue;
        
        if (value !== null && value !== undefined) {
            // Don't skip empty strings - they may be intentional field clearing
            data[key] = value.trim();
        }
    }
    
    // Ensure geo-location is set
    if (data.latitude && data.longitude) {
        data['Geo-Location'] = `${data.latitude};${data.longitude}`;
    }
    
    // Handle checkbox
    data.Sign = document.getElementById('edit-sign').checked;
    
    // Add debugging
    console.log('Sending update data for ID:', locationId);
    console.log('Update data:', data);
    
    try {
        const response = await fetch(`/api/locations/${locationId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const responseText = await response.text();
        let result;
        
        try {
            result = JSON.parse(responseText);
        } catch (e) {
            console.error('Failed to parse response:', responseText);
            throw new Error(`Server response error: ${response.status} ${response.statusText}`);
        }
        
        if (result.success) {
            showStatus('Location updated successfully!', 'success');
            closeEditForm();
            loadLocations();
        } else {
            throw new Error(result.error || 'Failed to update location');
        }
    } catch (error) {
        console.error('Error updating location:', error);
        showStatus(`Update failed: ${error.message}`, 'error');
    }
}

// Handle delete location
async function handleDeleteLocation() {
    if (!currentEditingLocation) return;
    
    // Get the stored location ID
    const locationIdElement = document.getElementById('edit-location-id');
    const locationId = locationIdElement.getAttribute('data-location-id') || locationIdElement.value;
    
    if (!locationId || locationId === 'undefined') {
        showStatus('Error: Location ID not found', 'error');
        return;
    }
    
    if (!confirm('Are you sure you want to delete this location?')) {
        return;
    }
    
    try {
        const response = await fetch(`/api/locations/${locationId}`, {
            method: 'DELETE'
        });
        
        const result = await response.json();
        
        if (result.success) {
            showStatus('Location deleted successfully!', 'success');
            closeEditForm();
            loadLocations();
        } else {
            throw new Error(result.error || 'Failed to delete location');
        }
    } catch (error) {
        console.error('Error deleting location:', error);
        showStatus(error.message || 'Failed to delete location', 'error');
    }
}

// Lookup address based on current coordinates
async function lookupAddress(mode) {
    let latInput, lngInput, addressInput;
    
    if (mode === 'add') {
        latInput = document.getElementById('location-lat');
        lngInput = document.getElementById('location-lng');
        addressInput = document.getElementById('location-address');
    } else if (mode === 'edit') {
        latInput = document.getElementById('edit-location-lat');
        lngInput = document.getElementById('edit-location-lng');
        addressInput = document.getElementById('edit-location-address');
    } else {
        console.error('Invalid lookup mode:', mode);
        return;
    }
    
    if (!latInput || !lngInput || !addressInput) {
        showStatus('Form elements not found', 'error');
        return;
    }
    
    const lat = parseFloat(latInput.value);
    const lng = parseFloat(lngInput.value);
    
    if (isNaN(lat) || isNaN(lng)) {
        showStatus('Please enter valid coordinates first', 'warning');
        return;
    }
    
    // Show loading state
    const button = mode === 'add' ? 
        document.getElementById('lookup-address-add-btn') : 
        document.getElementById('lookup-address-edit-btn');
    
    const originalText = button ? button.textContent : '';
    if (button) {
        button.disabled = true;
        button.textContent = 'Looking up...';
    }
    
    try {
        console.log(`Looking up address for: ${lat}, ${lng}`);
        const response = await fetch(`/api/geocode/reverse?lat=${lat}&lng=${lng}`);
        
        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(`Geocoding failed: ${response.status} ${errorText}`);
        }
        
        const data = await response.json();
        
        if (data.success && data.data) {
            // Use the formatted address or full address
            const address = data.data.formattedAddress || data.data.fullAddress;
            if (address) {
                addressInput.value = address;
                showStatus('Address found!', 'success');
            } else {
                showStatus('No address found for these coordinates', 'warning');
            }
        } else {
            showStatus('Address lookup failed', 'warning');
        }
        
    } catch (error) {
        console.error('Address lookup error:', error);
        showStatus(`Address lookup failed: ${error.message}`, 'error');
    } finally {
        // Restore button state
        if (button) {
            button.disabled = false;
            button.textContent = originalText;
        }
    }
}

// Toggle fullscreen
function toggleFullscreen() {
    const app = document.getElementById('app');
    const btn = document.getElementById('fullscreen-btn');
    const mobileBtn = document.getElementById('mobile-fullscreen-btn');
    
    if (!document.fullscreenElement) {
        app.requestFullscreen().then(() => {
            app.classList.add('fullscreen');
            
            // Update desktop button
            if (btn) {
                btn.innerHTML = '<span class="btn-icon">◱</span><span class="btn-text">Exit Fullscreen</span>';
            }
            
            // Update mobile button
            if (mobileBtn) {
                mobileBtn.innerHTML = '◱';
                mobileBtn.title = 'Exit Fullscreen';
            }
        }).catch(err => {
            console.error('Error entering fullscreen:', err);
            showStatus('Unable to enter fullscreen', 'error');
        });
    } else {
        document.exitFullscreen().then(() => {
            app.classList.remove('fullscreen');
            
            // Update desktop button
            if (btn) {
                btn.innerHTML = '<span class="btn-icon">⛶</span><span class="btn-text">Fullscreen</span>';
            }
            
            // Update mobile button
            if (mobileBtn) {
                mobileBtn.innerHTML = '⛶';
                mobileBtn.title = 'Fullscreen';
            }
        });
    }
}

// Update location count
function updateLocationCount(count) {
    const countElement = document.getElementById('location-count');
    const mobileCountElement = document.getElementById('mobile-location-count');
    
    const countText = `${count} location${count !== 1 ? 's' : ''}`;
    
    if (countElement) {
        countElement.textContent = countText;
    }
    if (mobileCountElement) {
        mobileCountElement.textContent = countText;
    }
}

// Setup auto-refresh
function setupAutoRefresh() {
    refreshInterval = setInterval(() => {
        loadLocations();
    }, CONFIG.REFRESH_INTERVAL);
}

// 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);
}

// Hide loading overlay
function hideLoading() {
    const loading = document.getElementById('loading');
    if (loading) {
        loading.classList.add('hidden');
    }
}

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

// Clean up on page unload
window.addEventListener('beforeunload', () => {
    if (refreshInterval) {
        clearInterval(refreshInterval);
    }
});