// Map initialization and marker management

function initMap() {
    AppState.map = L.map('map').setView([51.1657, 10.4515], 6);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors',
        maxZoom: 19,
    }).addTo(AppState.map);

    // Try to get user's location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                const lat = position.coords.latitude;
                const lon = position.coords.longitude;

                // Add user location marker
                const userIcon = L.divIcon({
                    html: '<div style="width: 16px; height: 16px; background: #0ea5e9; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);"></div>',
                    className: '',
                    iconSize: [16, 16],
                    iconAnchor: [8, 8]
                });

                L.marker([lat, lon], { icon: userIcon })
                    .addTo(AppState.map)
                    .bindPopup('<div style="background: #1a1a1a; color: #e0e0e0; padding: 8px;"><strong>Dein Standort</strong></div>');

                console.log('User location:', lat, lon);
            },
            (error) => {
                console.log('Geolocation error:', error.message);
            }
        );
    }
}

function clearMarkers() {
    AppState.markers.forEach(marker => AppState.map.removeLayer(marker));
    AppState.markers = [];
}

function addMarker(listing) {
    if (!listing.lat || !listing.lon) return;

    const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map);

    const imageHtml = listing.image
        ? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
        : '';

    const popupContent = `
        <div style="min-width: 200px; 8px;">
            <strong style="font-size: 14px;">${listing.title}</strong><br>
            ${imageHtml}
            <span style="color: #0066cc; font-weight: bold; font-size: 16px;">${listing.price} €</span><br>
            <span style="color: #666; font-size: 12px;">${listing.address}</span><br>
            <a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
        </div>
    `;
    marker.bindPopup(popupContent);

    marker.on('click', () => {
        AppState.selectedListingId = listing.id;
        highlightSelectedListing();
    });

    AppState.markers.push(marker);
}