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

    // Check if mobile
    const isMobile = window.innerWidth < 768;

    if (isMobile) {
        // On mobile: open fullscreen popup
        marker.on('click', () => {
            showMobilePopup(listing);
        });
    } else {
        // On desktop: use regular leaflet popup
        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);
}

function showMobilePopup(listing) {
    const popup = document.getElementById('mobilePopup');
    const content = document.getElementById('mobilePopupContent');

    const imageHtml = listing.image
        ? `<img src="${listing.image}" class="popup-image" alt="${listing.title}">`
        : '';

    const dateStr = listing.date_added ? new Date(listing.date_added).toLocaleDateString('de-DE') : 'Unbekannt';

    content.innerHTML = `
        ${imageHtml}
        <div class="popup-title">${listing.title}</div>
        <div class="popup-price">${listing.price} €</div>
        <div class="popup-meta">
            <div class="popup-meta-item">
                <span class="popup-meta-icon">📍</span>
                <span>${listing.address || listing.zip_code}</span>
            </div>
            <div class="popup-meta-item">
                <span class="popup-meta-icon">📅</span>
                <span>${dateStr}</span>
            </div>
        </div>
        <a href="${listing.url}" target="_blank" class="popup-link">Inserat auf Kleinanzeigen.de öffnen</a>
    `;

    popup.classList.add('show');
}