/**
 * Map Handler for EcoBuddy
 * Handles map initialization, postcode validation, and facility display
 */

// initialise map variables
let map = null;
let markers = [];
let circle = null;
let facilities = [];
let currentPostcode = null;
let currentRadius = 10; // Default radius in miles

// initialise map on document load
document.addEventListener('DOMContentLoaded', function() {
    // initialise the map centered on UK
    map = L.map('map', {
        scrollWheelZoom: true,  // Enable scroll wheel zoom
        zoomControl: true       // Show zoom controls
    }).setView([54.5, -2], 6);
    
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    
    // Get facilities data from sessionStorage
    facilities = JSON.parse(sessionStorage.getItem('facilityData') || '[]');
    
    // Add location found handler
    map.on('locationfound', function(e) {
        try {
            const { lat, lng } = e.latlng;
            
            // Update the map directly with the coordinates
            updateMapLocation({ lat, lng }, currentRadius);
            
            // Remove overlay once we have a valid location
            const overlay = document.getElementById('mapOverlay');
            if (overlay) {
                overlay.classList.add('hidden');
            }
            
            // Get postcode from coordinates
            fetch(`https://api.postcodes.io/postcodes?lon=${lng}&lat=${lat}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200 && data.result && data.result.length > 0) {
                        const postcode = data.result[0].postcode;
                        const postcodeInput = document.getElementById('postcode');
                        if (postcodeInput) {
                            postcodeInput.value = postcode;
                        }
                    }
                })
                .catch(error => {
                    console.error('Error getting postcode:', error);
                });
        } catch (error) {
            console.error('Error processing location:', error);
            alert('Error getting your location: ' + error.message);
        }
    });

    // Add location error handler
    map.on('locationerror', function(e) {
        console.error('Geolocation error:', e);
        let message = 'Error getting your location: ';
        
        switch(e.code) {
            case 1: // PERMISSION_DENIED
                message += 'Please enable location access in your browser settings.';
                break;
            case 2: // POSITION_UNAVAILABLE
                message += 'Location information is unavailable.';
                break;
            case 3: // TIMEOUT
                message += 'Location request timed out.';
                break;
            default:
                message += 'An unknown error occurred.';
        }
        
        alert(message);
    });
    
    // Set up form handlers
    setupFormHandlers();
    
    // Set up search handler from header
    setupHeaderSearchHandler();
});

/**
 * Set up form handlers for postcode and radius inputs
 */
function setupFormHandlers() {
    const postcodeForm = document.getElementById('postcodeForm');
    const radiusSelect = document.getElementById('radius');
    
    if (postcodeForm) {
        // Add geolocation functionality to the search button
        const searchButton = postcodeForm.querySelector('button[type="submit"]');
        if (searchButton) {
            searchButton.onclick = (e) => {
                // If the postcode input is empty, use geolocation
                const postcodeInput = document.getElementById('postcode');
                if (!postcodeInput.value.trim()) {
                    e.preventDefault();
                    map.locate({
                        setView: false,
                        enableHighAccuracy: true,
                        timeout: 10000,
                        maximumAge: 0
                    });
                }
            };
        }
        
        postcodeForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const postcode = document.getElementById('postcode').value;
            const radius = parseFloat(document.getElementById('radius').value);
            
            // Show loading state
            const submitButton = this.querySelector('button[type="submit"]');
            submitButton.disabled = true;
            
            // Validate postcode format first
            if (!isValidPostcode(postcode)) {
                submitButton.disabled = false;
                submitButton.innerHTML = originalButtonContent;
                alert('Please enter a valid UK postcode');
                return;
            }
            
            try {
                // Get coordinates for postcode
                const coords = await getPostcodeCoordinates(postcode);
                if (!coords) {
                    throw new Error('Could not find coordinates for this postcode');
                }
                
                // Update map with new location and radius
                updateMapLocation(coords, radius);
                
                // Remove overlay once we have a valid postcode
                const overlay = document.getElementById('mapOverlay');
                if (overlay) {
                    overlay.classList.add('hidden');
                }
                
                // Store current postcode
                currentPostcode = postcode;
                currentRadius = radius;
                
            } catch (error) {
                console.error('Error processing postcode:', error);
                alert(error.message || 'Error processing postcode');
            } finally {
                // Always reset button state
                submitButton.disabled = false;
            }
        });
    }
    
    if (radiusSelect) {
        radiusSelect.addEventListener('change', async function(e) {
            e.preventDefault();

            const postcode = document.getElementById('postcode').value;
            const coords = await getPostcodeCoordinates(postcode);
            const radius = parseFloat(this.value);
            updateMapLocation(coords, radius);
        });
    }
}

/**
 * Validate UK postcode format
 * @param {string} postcode - The postcode to validate
 * @returns {boolean} True if valid, false otherwise
 */
function isValidPostcode(postcode) {
    // Basic UK postcode regex
    const postcodeRegex = /^[A-Z]{1,2}[0-9][A-Z0-9]? ?[0-9][A-Z]{2}$/i;
    return postcodeRegex.test(postcode.trim());
}

/**
 * Get coordinates for a UK postcode using postcodes.io API
 * @param {string} postcode - The postcode to geocode
 * @returns {Promise<{lat: number, lng: number}>} The coordinates
 */
async function getPostcodeCoordinates(postcode) {
    try {
        const response = await fetch(`https://api.postcodes.io/postcodes/${encodeURIComponent(postcode)}`);
        if (!response.ok) {
            throw new Error('Postcode not found');
        }
        
        const data = await response.json();
        if (data.status === 200 && data.result) {
            return {
                lat: data.result.latitude,
                lng: data.result.longitude
            };
        }
        
        throw new Error('Invalid response from postcode API');
    } catch (error) {
        console.error('Error getting postcode coordinates:', error);
        throw error;
    }
}

/**
 * Update map location and display facilities within radius
 * @param {Object} coords - The coordinates to center on (null to use existing)
 * @param {number} radius - The radius in miles
 */
function updateMapLocation(coords, radius) {
    // Clear existing markers and circle
    clearMapOverlays();
    
    // Get center coordinates (either new or existing)
    const center = coords || map.getCenter();
    
    // Convert radius from miles to meters (1 mile = 1609.34 meters)
    const radiusMeters = radius * 1609.34;
    
    // Add circle for radius
    circle = L.circle([center.lat, center.lng], {
        color: '#198754',
        fillColor: '#198754',
        fillOpacity: 0.1,
        radius: radiusMeters
    }).addTo(map);
    
    // Find facilities within radius
    const facilitiesInRange = findFacilitiesInRange(center, radius);
    
    // Add markers for facilities
    facilitiesInRange.forEach(facility => {
        const marker = L.marker([facility.lat, facility.lng])
            .bindPopup(createPopupContent(facility))
            .addTo(map);
        markers.push(marker);
    });
    
    // Fit map bounds to circle
    map.fitBounds(circle.getBounds());
    
    // Update facility list
    updateFacilityList(facilitiesInRange);
}

/**
 * Clear all markers and circle from map
 */
function clearMapOverlays() {
    // Clear markers
    markers.forEach(marker => marker.remove());
    markers = [];
    
    // Clear circle
    if (circle) {
        circle.remove();
        circle = null;
    }
}

/**
 * Find facilities within specified radius of center point
 * @param {Object} center - The center coordinates
 * @param {number} radius - The radius in miles
 * @returns {Array} Array of facilities within range
 */
function findFacilitiesInRange(center, radius) {
    return facilities.filter(facility => {
        const distance = calculateDistance(
            center.lat,
            center.lng,
            parseFloat(facility.lat),
            parseFloat(facility.lng)
        );
        return distance <= radius;
    });
}

/**
 * Calculate distance between two points using Haversine formula
 * @param {number} lat1 - Latitude of first point
 * @param {number} lon1 - Longitude of first point
 * @param {number} lat2 - Latitude of second point
 * @param {number} lon2 - Longitude of second point
 * @returns {number} Distance in miles
 */
function calculateDistance(lat1, lon1, lat2, lon2) {
    const R = 3959; // Earth's radius in miles
    const dLat = toRad(lat2 - lat1);
    const dLon = toRad(lon2 - lon1);
    
    const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
    
    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
}

/**
 * Convert degrees to radians
 * @param {number} degrees - Value in degrees
 * @returns {number} Value in radians
 */
function toRad(degrees) {
    return degrees * (Math.PI / 180);
}

/**
 * Create popup content for facility marker
 * @param {Object} facility - The facility data
 * @returns {string} HTML content for popup
 */
function createPopupContent(facility) {
    const isAuthenticated = window.auth && window.auth.isAuthenticated();
    
    return `
        <div class="facility-popup">
            <h6 class="mb-1">${escapeHtml(facility.title)}</h6>
            <p class="mb-1 small">
                <span class="badge bg-${getCategoryColorClass(facility.category)} bg-opacity-10 text-${getCategoryColorClass(facility.category)}">
                    ${escapeHtml(facility.category)}
                </span>
            </p>
            <p class="mb-2 small">${escapeHtml(facility.description)}</p>
            <p class="mb-2 small">
                <strong>Address:</strong><br>
                ${escapeHtml(formatAddress(facility))}
            </p>
            <p class="mb-0 small">
                <strong>Added by:</strong> ${escapeHtml(facility.contributor)}
            </p>
            
            ${isAuthenticated ? `
                <div class="comment-form">
                    <form onsubmit="return handleCommentSubmit(event, ${facility.id})">
                        <div class="mb-2">
                            <textarea class="form-control form-control-sm" 
                                    placeholder="Add a comment..." 
                                    required
                                    rows="2"></textarea>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <button type="submit" class="btn btn-sm btn-success">
                                <i class="bi bi-chat-dots me-1"></i>Add Comment
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="openCommentsModal('${facility.id}')">
                                <i class="bi bi-info-circle me-1"></i>View All Comments
                            </button>
                        </div>
                    </form>
                </div>
            ` : `
                <div class="comment-form">
                    <div class="alert alert-light mb-0 small">
                        <i class="bi bi-info-circle me-1"></i>
                        Please <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal">login</a> to add comments
                    </div>
                </div>
            `}
        </div>
    `;
}

/**
 * Open the comments modal for a facility
 * @param {string} facilityId - The facility ID
 */
function openCommentsModal(facilityId) {
    // Find the facility
    const facility = facilities.find(f => f.id === parseInt(facilityId));
    if (!facility) {
        console.error('Facility not found:', facilityId);
        return;
    }
    
    // Get the modal
    const modal = document.getElementById('statusModal');
    if (!modal) {
        console.error('Status modal not found');
        return;
    }
    
    // Set the facility ID on the modal
    modal.setAttribute('data-facility-id', facilityId);
    
    // Set the facility ID in the comment form
    const facilityIdInput = modal.querySelector('#commentFacilityId');
    if (facilityIdInput) {
        facilityIdInput.value = facilityId;
    }
    
    // Show the modal
    const modalInstance = new bootstrap.Modal(modal);
    modalInstance.show();
    
    // Load the comments using CommentsManager
    CommentsManager.loadFacilityComments(facilityId);
}

/**
 * Handle comment form submission
 * @param {Event} event - The form submit event
 * @param {number} facilityId - The facility ID
 * @returns {boolean} False to prevent form submission
 */
async function handleCommentSubmit(event, facilityId) {
    event.preventDefault();
    
    // Check authentication
    if (!window.auth || !window.auth.isAuthenticated()) {
        alert('You must be logged in to add comments');
        return false;
    }
    
    const form = event.target;
    const textarea = form.querySelector('textarea');
    const submitButton = form.querySelector('button[type="submit"]');
    const originalButtonContent = submitButton.innerHTML;
    
    // Show loading state
    submitButton.disabled = true;
    submitButton.innerHTML = `
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        <span class="ms-2">Adding...</span>
    `;
    
    try {
        // Add the comment using the API
        const response = await window.api.addFacilityStatus(
            facilityId.toString(), // Ensure facilityId is a string
            textarea.value
        );
        
        if (response.success) {
            // Clear the textarea
            textarea.value = '';
            
            // Show success message
            const successMessage = document.createElement('div');
            successMessage.className = 'alert alert-success mt-2 mb-0 py-2 small';
            successMessage.innerHTML = `
                <i class="bi bi-check-circle me-1"></i>
                Comment added successfully
            `;
            form.appendChild(successMessage);
            
            // Remove success message after 3 seconds
            setTimeout(() => {
                successMessage.remove();
                
                // Open the comments modal to show the new comment
                openCommentsModal(facilityId);
            }, 3000);
        } else {
            throw new Error(response.error || 'Failed to add comment');
        }
    } catch (error) {
        console.error('Error adding comment:', error);
        alert('Error adding comment: ' + error.message);
    } finally {
        // Reset button state
        submitButton.disabled = false;
        submitButton.innerHTML = originalButtonContent;
    }
    
    return false;
}

/**
 * Update facility list display
 * @param {Array} facilities - Array of facilities to display
 */
function updateFacilityList(facilities) {
    const listElement = document.getElementById('facilityList');
    if (!listElement) return;
    
    listElement.innerHTML = '';
    
    facilities.forEach(facility => {
        const distance = calculateDistance(
            circle.getLatLng().lat,
            circle.getLatLng().lng,
            parseFloat(facility.lat),
            parseFloat(facility.lng)
        );
        
        const item = document.createElement('div');
        item.className = 'list-group-item list-group-item-action';
        item.innerHTML = `
            <div class="d-flex w-100 justify-content-between align-items-start">
                <div>
                    <h6 class="mb-1">${escapeHtml(facility.title)}</h6>
                    <p class="mb-1 small">
                        <span class="badge bg-${getCategoryColorClass(facility.category)} bg-opacity-10 text-${getCategoryColorClass(facility.category)}">
                            ${escapeHtml(facility.category)}
                        </span>
                    </p>
                    <small class="text-muted">
                        <i class="bi bi-geo-alt me-1"></i>${distance.toFixed(1)} miles away
                    </small>
                </div>
                <button class="btn btn-sm btn-outline-success" onclick="showFacilityDetails('${facility.id}')">
                    <i class="bi bi-info-circle"></i>
                </button>
            </div>
        `;
        
        listElement.appendChild(item);
    });
}

/**
 * Set up header search handler
 */
function setupHeaderSearchHandler() {
    const searchInput = document.querySelector('input#searchInput');
    const filterCat = document.querySelector('select#filterCat');
    
    if (searchInput && filterCat) {
        const handleSearch = () => {
            const searchTerm = searchInput.value.toLowerCase();
            const filterCategory = filterCat.value;
            
            if (!currentPostcode) return; // Only filter if map is active
            
            // Get all facilities in current radius
            const center = circle ? circle.getLatLng() : null;
            if (!center) return;
            
            const facilitiesInRange = findFacilitiesInRange(center, currentRadius);
            
            // Filter facilities based on search term and category
            const filteredFacilities = facilitiesInRange.filter(facility => {
                if (!facility) return false;
                
                if (filterCategory && searchTerm) {
                    let searchValue = '';
                    switch(filterCategory) {
                        case 'title':
                            searchValue = (facility.title || '').toLowerCase();
                            break;
                        case 'category':
                            searchValue = (facility.category || '').toLowerCase();
                            break;
                        case 'description':
                            searchValue = (facility.description || '').toLowerCase();
                            break;
                        case 'streetName':
                            searchValue = (facility.streetName || '').toLowerCase();
                            break;
                        case 'county':
                            searchValue = (facility.county || '').toLowerCase();
                            break;
                        case 'town':
                            searchValue = (facility.town || '').toLowerCase();
                            break;
                        case 'postcode':
                            searchValue = (facility.postcode || '').toLowerCase();
                            break;
                        case 'contributor':
                            searchValue = (facility.contributor || '').toLowerCase();
                            break;
                    }
                    return searchValue.includes(searchTerm);
                }
                return true;
            });
            
            // Update markers and list
            updateMapMarkers(filteredFacilities);
            updateFacilityList(filteredFacilities);

        };
        
        searchInput.addEventListener('input', handleSearch);
        filterCat.addEventListener('change', handleSearch);
    }
}

/**
 * Update map markers without changing the circle or center
 * @param {Array} facilities - Facilities to show on map
 */
function updateMapMarkers(facilities) {
    // Clear existing markers
    markers.forEach(marker => marker.remove());
    markers = [];
    
    // Add new markers
    facilities.forEach(facility => {
        const marker = L.marker([facility.lat, facility.lng])
            .bindPopup(createPopupContent(facility))
            .addTo(map);
        markers.push(marker);
    });
}

/**
 * Show facility details in a popover
 * @param {string} facilityId - The facility ID
 */
function showFacilityDetails(facilityId) {
    const facility = facilities.find(f => f.id === parseInt(facilityId));
    if (!facility) return;
    
    // Create popover content
    const content = `
        <div class="facility-details p-2">
            <h6 class="mb-2">${escapeHtml(facility.title)}</h6>
            <p class="mb-2">
                <span class="badge bg-${getCategoryColorClass(facility.category)} bg-opacity-10 text-${getCategoryColorClass(facility.category)}">
                    ${escapeHtml(facility.category)}
                </span>
            </p>
            <p class="mb-2 small">${escapeHtml(facility.description)}</p>
            <p class="mb-2 small">
                <strong>Address:</strong><br>
                ${escapeHtml(formatAddress(facility))}
            </p>
            <p class="mb-0 small">
                <strong>Added by:</strong> ${escapeHtml(facility.contributor)}
            </p>
        </div>
    `;
    
    // Find the marker for this facility
    const marker = markers.find(m => 
        m.getLatLng().lat === parseFloat(facility.lat) && 
        m.getLatLng().lng === parseFloat(facility.lng)
    );
    
    if (marker) {
        marker.bindPopup(content, {
            maxWidth: 300,
            className: 'facility-popup'
        }).openPopup();
    }
}

/**
 * Format facility address
 * @param {Object} facility - The facility data
 * @returns {string} Formatted address
 */
function formatAddress(facility) {
    const parts = [
        facility.houseNumber,
        facility.streetName,
        facility.town,
        facility.county,
        facility.postcode
    ].filter(Boolean);
    return parts.join(', ');
}

/**
 * Get color class for facility category
 * @param {string} category - The facility category
 * @returns {string} Bootstrap color class
 */
function getCategoryColorClass(category) {
    const categoryLower = (category || '').toLowerCase();
    
    if (categoryLower.includes('recycling')) return 'success';
    if (categoryLower.includes('green') || categoryLower.includes('roof')) return 'success';
    if (categoryLower.includes('solar') || categoryLower.includes('power')) return 'warning';
    if (categoryLower.includes('water') || categoryLower.includes('rain')) return 'info';
    if (categoryLower.includes('battery')) return 'danger';
    if (categoryLower.includes('bench')) return 'primary';
    
    return 'secondary';
}

/**
 * Escape HTML to prevent XSS
 * @param {string} unsafe - Unsafe string
 * @returns {string} Escaped string
 */
function escapeHtml(unsafe) {
    if (unsafe === null || unsafe === undefined) {
        return '';
    }
    return unsafe
        .toString()
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}