immich-folio/components/MapView.tsx

'use client';

/**
 * MapView — client component that initializes Leaflet, fetches /api/map,
 * and renders location-level markers with themed popups.
 */

import { useEffect, useRef, useState } from 'react';

interface MapLocationPublic {
    city: string;
    country: string;
    lat: number;
    lng: number;
    photoCount: number;
    coverUrl: string;
    albums: { name: string; url: string }[];
}

export function MapView() {
    const containerRef = useRef<HTMLDivElement>(null);
    const mapRef = useRef<unknown>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        let cancelled = false;

        async function init() {
            // Dynamically import Leaflet (client-only)
            const L = (await import('leaflet')).default;

            if (cancelled || !containerRef.current || mapRef.current) return;

            // Fetch map data
            const res = await fetch('/api/map');
            if (!res.ok) {
                setError('Failed to load map data');
                setLoading(false);
                return;
            }
            const locations: MapLocationPublic[] = await res.json();

            if (cancelled) return;

            // Initialize map
            const map = L.map(containerRef.current, {
                zoomControl: true,
                attributionControl: true,
            });
            mapRef.current = map;

            // Dark-themed tiles (CartoDB Dark Matter)
            L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
                subdomains: 'abcd',
                maxZoom: 19,
            }).addTo(map);

            if (locations.length === 0) {
                // No geotagged photos — show world view
                map.setView([20, 0], 2);
                setLoading(false);
                return;
            }

            // Create markers with custom HTML icons
            const markers: L.Marker[] = [];

            for (const loc of locations) {
                const icon = L.divIcon({
                    className: '',
                    html: `<div class="map-marker">${loc.photoCount}</div>`,
                    iconSize: [32, 32],
                    iconAnchor: [16, 16],
                    popupAnchor: [0, -20],
                });

                const albumLinks = loc.albums
                    .map((a) => `<a href="${a.url}" class="map-popup__album-link">${a.name} →</a>`)
                    .join('');

                const popupHtml = `
          <div class="map-popup">
            <img src="${loc.coverUrl}" alt="${loc.city}" class="map-popup__cover" loading="lazy" />
            <div class="map-popup__body">
              <h3 class="map-popup__city">${loc.city}</h3>
              <p class="map-popup__country">${loc.country}</p>
              <p class="map-popup__count">${loc.photoCount} photo${loc.photoCount === 1 ? '' : 's'}</p>
              <div class="map-popup__albums">${albumLinks}</div>
            </div>
          </div>
        `;

                const marker = L.marker([loc.lat, loc.lng], { icon })
                    .addTo(map)
                    .bindPopup(popupHtml, { maxWidth: 260, minWidth: 200 });

                markers.push(marker);
            }

            // Fit bounds to show all markers
            if (markers.length > 0) {
                const group = L.featureGroup(markers);
                map.fitBounds(group.getBounds().pad(0.15));
            }

            setLoading(false);
        }

        init().catch((err) => {
            console.error('[Map] Init error:', err);
            if (!cancelled) {
                setError('Failed to initialize map');
                setLoading(false);
            }
        });

        return () => {
            cancelled = true;
            if (mapRef.current) {
                (mapRef.current as L.Map).remove();
                mapRef.current = null;
            }
        };
    }, []);

    if (error) {
        return (
            <div className="map-container__loading">
                <p>{error}</p>
            </div>
        );
    }

    return (
        <>
            {loading && (
                <div className="map-container__loading">
                    <p>Loading map…</p>
                </div>
            )}
            <div
                ref={containerRef}
                className="map-container"
                style={{ display: loading ? 'none' : 'block' }}
            />
        </>
    );
}