script.js

// Initialize the map — worldCopyJump wraps panning, maxBounds prevents white bars
const worldBounds = L.latLngBounds([[-90, -180], [90, 180]]);
const map = L.map('map', {
    center: [20, 0],
    zoom: 2,
    maxZoom: 18,
    maxBounds: worldBounds.pad(0.1),
    maxBoundsViscosity: 1.0,
    worldCopyJump: true
});

// Set minZoom so tiles always fill the viewport (recalculated on resize)
function updateMinZoom() {
    const minZoom = map.getBoundsZoom(worldBounds, false);
    map.setMinZoom(minZoom);
    if (map.getZoom() < minZoom) {
        map.setZoom(minZoom);
    }
}
map.whenReady(updateMinZoom);
map.on('resize', updateMinZoom);

const lightTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '© OpenStreetMap © CartoDB',
    subdomains: 'abcd',
    maxZoom: 19
});

const darkTileLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
    attribution: '© OpenStreetMap © CartoDB',
    subdomains: 'abcd',
    maxZoom: 19
});

let isDarkMode = true;
darkTileLayer.addTo(map);

let markers = [];
const geocodeCache = new Map();

// DOM elements
const locationInput = document.getElementById('locationInput');
const addPinsBtn = document.getElementById('addPinsBtn');
const clearPinsBtn = document.getElementById('clearPinsBtn');
const status = document.getElementById('status');
const themeToggle = document.getElementById('themeToggle');
const panelToggle = document.getElementById('panelToggle');
const controlsPanel = document.getElementById('controlsPanel');
const pinColorInput = document.getElementById('pinColor');

function hexToRgb(hex) {
    const n = parseInt(hex.replace('#', ''), 16);
    return `${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}`;
}

function createCustomIcon(size = 20) {
    const color = pinColorInput.value;
    const rgb = hexToRgb(color);

    const customProps = `
        --pin-color: ${color};
        --pin-glow: rgba(${rgb}, 0.3);
    `;

    const darkStyles = `
        background: rgba(${rgb}, 0.25);
        border: 2px solid ${color};
        box-shadow: 0 0 10px rgba(${rgb}, 0.3);
        animation: markerPulse 3s ease-in-out infinite;
    `;

    const lightStyles = `
        background: ${color};
        border: 2px solid #ffffff;
        box-shadow: 0 2px 8px rgba(${rgb}, 0.4);
    `;

    return L.divIcon({
        className: 'custom-marker',
        html: `<div style="
            ${customProps}
            ${isDarkMode ? darkStyles : lightStyles}
            border-radius: 50%;
            width: ${size}px;
            height: ${size}px;
            cursor: pointer;
        "></div>`,
        iconSize: [size, size],
        iconAnchor: [size/2, size/2],
        popupAnchor: [0, -size/2]
    });
}

async function geocodeLocation(locationName) {
    const normalizedName = locationName.trim().toLowerCase();

    if (geocodeCache.has(normalizedName)) {
        return geocodeCache.get(normalizedName);
    }

    const encodedLocation = encodeURIComponent(locationName.trim());
    const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodedLocation}&limit=1&addressdetails=1`;

    try {
        const response = await fetch(url);
        const data = await response.json();

        const result = (data && data.length > 0)
            ? { name: data[0].display_name, lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon), success: true }
            : { name: locationName, success: false, error: 'Location not found' };

        geocodeCache.set(normalizedName, result);
        return result;

    } catch {
        // Network errors are not cached so retries work
        return { name: locationName, success: false, error: 'Network error' };
    }
}

// Process locations in parallel batches with real-time visual updates
async function processLocationsInBatches(locations, batchSize = 3, onLocationProcessed) {
    const results = [];

    for (let i = 0; i < locations.length; i += batchSize) {
        const batch = locations.slice(i, i + batchSize);

        const batchPromises = batch.map(async (location, index) => {
            const globalIndex = i + index;
            updateStatus(`Processing ${globalIndex + 1}/${locations.length}: ${location.name}`, '');

            const result = await geocodeLocation(location.name);
            const processedItem = { location, result, index: globalIndex };

            if (onLocationProcessed) {
                onLocationProcessed(processedItem);
            }

            return processedItem;
        });

        const batchResults = await Promise.all(batchPromises);
        results.push(...batchResults);

        // Small delay between batches to be respectful to the API
        if (i + batchSize < locations.length) {
            await new Promise(resolve => setTimeout(resolve, 100));
        }
    }

    return results;
}

// Add pins for locations
async function addPins() {
    const inputText = locationInput.value.trim();
    if (!inputText) {
        updateStatus('Please enter some locations first.', 'error');
        return;
    }

    // Split by comma, but rejoin parts that are within parentheses
    // so value numbers like "1,234" don't break the location
    const parts = inputText.split(',');
    const locations = [];
    let currentLocation = '';
    let insideParentheses = false;

    for (const part of parts) {
        if (insideParentheses) {
            // Continue accumulating inside parenthesized value
            currentLocation += ',' + part;
        } else {
            // Start a new location segment
            if (currentLocation.trim()) {
                locations.push(currentLocation.trim());
            }
            currentLocation = part;
        }

        const openParens = (part.match(/\(/g) || []).length;
        const closeParens = (part.match(/\)/g) || []).length;

        if (openParens > closeParens) {
            insideParentheses = true;
        } else if (closeParens >= openParens) {
            insideParentheses = false;
        }
    }

    if (currentLocation.trim()) {
        locations.push(currentLocation.trim());
    }

    const parsedLocations = locations.map(loc => {
        const trimmed = loc.trim();
        const match = trimmed.match(/^(.+?)\s*\(([0-9,]+)\)$/);

        if (match) {
            // Remove commas from the number and parse
            const numberStr = match[2].replace(/,/g, '');
            return {
                name: match[1].trim(),
                value: parseInt(numberStr, 10),
                originalInput: trimmed
            };
        } else {
            return {
                name: trimmed,
                value: null,
                originalInput: trimmed
            };
        }
    }).filter(loc => loc.name);

    if (parsedLocations.length === 0) {
        updateStatus('Please enter valid locations.', 'error');
        return;
    }

    addPinsBtn.disabled = true;
    addPinsBtn.innerHTML = 'Adding Pins <span class="loading-spinner"></span>';
    updateStatus(`Geocoding ${parsedLocations.length} location(s)...`, '');

    // Calculate size scaling for pins based on values
    const values = parsedLocations.filter(loc => loc.value !== null).map(loc => loc.value);
    const minValue = values.length > 0 ? Math.min(...values) : 0;
    const maxValue = values.length > 0 ? Math.max(...values) : 0;

    let successCount = 0;
    let failedLocations = [];

    const createMarkerForLocation = ({ location, result }) => {
        if (result.success) {
            const pinSize = calculatePinSize(location.value, minValue, maxValue);

            const marker = L.marker([result.lat, result.lng], {
                icon: createCustomIcon(pinSize)
            }).addTo(map);

            const valueText = location.value !== null ? ` (${location.value})` : '';
            const popupContent = `
                <div class="custom-popup">
                    <div class="popup-title">${location.name}${valueText}</div>
                    <div class="popup-subtitle">${result.name}</div>
                </div>
            `;

            marker.bindPopup(popupContent, {
                maxWidth: 300,
                closeButton: true
            });

            marker.on('mouseover', function() {
                this.openPopup();
            });

            marker.locationData = location;
            markers.push(marker);
            successCount++;
        } else {
            failedLocations.push(`${location.originalInput} (${result.error})`);
        }
    };

    // Process locations with real-time visual feedback
    await processLocationsInBatches(parsedLocations, 3, createMarkerForLocation);

    if (markers.length > 0) {
        const group = new L.featureGroup(markers);
        map.fitBounds(group.getBounds().pad(0.1), { maxZoom: 6 });
    }

    let statusMessage = `Successfully added ${successCount} pin(s)`;
    if (failedLocations.length > 0) {
        statusMessage += `. Failed: ${failedLocations.join(', ')}`;
    }
    updateStatus(statusMessage, successCount > 0 ? 'success' : 'error');

    addPinsBtn.disabled = false;
    addPinsBtn.innerHTML = 'Add Pins';
}

function clearPins() {
    markers.forEach(marker => map.removeLayer(marker));
    markers = [];
    updateStatus('All pins cleared.', 'success');

    // Reset map view
    map.setView([20, 0], 2);
}

function updateStatus(message, type = '') {
    status.textContent = message;
    status.className = `status ${type}`;
}

// Scale pin size between 12px (min) and 64px (max) based on relative value
function calculatePinSize(value, minValue = 0, maxValue = 100) {
    if (value === null) return 24; // Default size for locations without values

    const valueRange = maxValue - minValue || 1;
    const minSize = 12;
    const maxSize = 64;
    const normalizedValue = (value - minValue) / valueRange;
    return Math.round(minSize + (normalizedValue * (maxSize - minSize)));
}

// Destroy and recreate all markers with current theme/color settings
function rebuildMarkers() {
    const existingMarkers = [...markers];
    markers.forEach(marker => map.removeLayer(marker));
    markers = [];

    const allValues = existingMarkers
        .map(m => m.locationData?.value)
        .filter(v => v !== null && v !== undefined);
    const minValue = allValues.length > 0 ? Math.min(...allValues) : 0;
    const maxValue = allValues.length > 0 ? Math.max(...allValues) : 0;

    existingMarkers.forEach(marker => {
        const locationData = marker.locationData;
        const value = locationData ? locationData.value : null;
        const pinSize = calculatePinSize(value, minValue, maxValue);

        const newMarker = L.marker(marker.getLatLng(), {
            icon: createCustomIcon(pinSize)
        }).addTo(map);

        const popup = marker.getPopup();
        if (popup) {
            newMarker.bindPopup(popup.getContent(), {
                maxWidth: 300,
                closeButton: true
            });
            newMarker.on('mouseover', function() {
                this.openPopup();
            });
        }

        newMarker.locationData = locationData;
        markers.push(newMarker);
    });
}

function toggleTheme() {
    isDarkMode = !isDarkMode;
    document.body.classList.toggle('dark-mode');

    if (isDarkMode) {
        map.removeLayer(lightTileLayer);
        darkTileLayer.addTo(map);
    } else {
        map.removeLayer(darkTileLayer);
        lightTileLayer.addTo(map);
    }

    rebuildMarkers();
}

panelToggle.addEventListener('click', () => {
    controlsPanel.classList.toggle('collapsed');
});

L.DomEvent.disableClickPropagation(controlsPanel);
L.DomEvent.disableScrollPropagation(controlsPanel);

// ---- Panel drag ----
(function initPanelDrag() {
    const header = controlsPanel.querySelector('.panel-header');
    let dragging = false, startX, startY, startLeft, startTop;

    header.addEventListener('mousedown', (e) => {
        // Ignore clicks on buttons inside the header
        if (e.target.closest('button')) return;
        dragging = true;
        controlsPanel.classList.add('interacting');
        const rect = controlsPanel.getBoundingClientRect();
        const wrapperRect = controlsPanel.parentElement.getBoundingClientRect();
        startX = e.clientX;
        startY = e.clientY;
        startLeft = rect.left - wrapperRect.left;
        startTop = rect.top - wrapperRect.top;
        e.preventDefault();
    });

    window.addEventListener('mousemove', (e) => {
        if (!dragging) return;
        const wrapperRect = controlsPanel.parentElement.getBoundingClientRect();
        let newLeft = startLeft + (e.clientX - startX);
        let newTop = startTop + (e.clientY - startY);
        // Clamp within wrapper
        newLeft = Math.max(0, Math.min(newLeft, wrapperRect.width - controlsPanel.offsetWidth));
        newTop = Math.max(0, Math.min(newTop, wrapperRect.height - controlsPanel.offsetHeight));
        controlsPanel.style.left = newLeft + 'px';
        controlsPanel.style.top = newTop + 'px';
    });

    window.addEventListener('mouseup', () => {
        if (dragging) {
            dragging = false;
            controlsPanel.classList.remove('interacting');
        }
    });
})();

// ---- Panel resize ----
(function initPanelResize() {
    const handle = controlsPanel.querySelector('.panel-resize-handle');
    let resizing = false, startX, startY, startW, startH;

    handle.addEventListener('mousedown', (e) => {
        resizing = true;
        controlsPanel.classList.add('interacting');
        startX = e.clientX;
        startY = e.clientY;
        startW = controlsPanel.offsetWidth;
        startH = controlsPanel.offsetHeight;
        e.preventDefault();
        e.stopPropagation();
    });

    window.addEventListener('mousemove', (e) => {
        if (!resizing) return;
        const wrapperRect = controlsPanel.parentElement.getBoundingClientRect();
        const panelLeft = controlsPanel.offsetLeft;
        const panelTop = controlsPanel.offsetTop;
        let newW = startW + (e.clientX - startX);
        let newH = startH + (e.clientY - startY);
        // Clamp to wrapper bounds
        newW = Math.max(200, Math.min(newW, wrapperRect.width - panelLeft));
        newH = Math.max(120, Math.min(newH, wrapperRect.height - panelTop));
        controlsPanel.style.width = newW + 'px';
        controlsPanel.style.height = newH + 'px';
    });

    window.addEventListener('mouseup', () => {
        if (resizing) {
            resizing = false;
            controlsPanel.classList.remove('interacting');
        }
    });
})();

// Event listeners
pinColorInput.addEventListener('input', rebuildMarkers);
addPinsBtn.addEventListener('click', addPins);
clearPinsBtn.addEventListener('click', clearPins);
themeToggle.addEventListener('click', toggleTheme);

locationInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && e.ctrlKey) {
        addPins();
    }
});

updateStatus('Enter locations and click "Add Pins" to get started.', '');