import { useEffect, useRef } from 'react';
import L from 'leaflet';

export default function MapView({ members, groups, sos }) {
  const elRef = useRef(null);
  const mapRef = useRef(null);
  const markersRef = useRef(new Map());
  const didFit = useRef(false);

  useEffect(() => {
    const map = L.map(elRef.current, { center: [48.8566, 2.3522], zoom: 12 });
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      maxZoom: 19,
    }).addTo(map);
    mapRef.current = map;
    return () => map.remove();
  }, []);

  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;

    const sosMembers = new Set(sos.filter((a) => a.state !== 'resolved').map((a) => a.member_id));
    const colorOf = (gid) => groups.find((g) => g.id === gid)?.color || '#64748b';
    const positioned = members.filter((m) => m.lat != null && m.lng != null);
    const seen = new Set();

    for (const m of positioned) {
      seen.add(m.id);
      const isSos = sosMembers.has(m.id);
      const icon = L.divIcon({
        className: 'marker-wrap',
        html: `<div class="marker ${m.status} ${isSos ? 'sos' : ''}" style="--c:${colorOf(m.group_id)}"></div>`,
        iconSize: [16, 16],
        iconAnchor: [8, 8],
      });
      let mk = markersRef.current.get(m.id);
      if (!mk) {
        mk = L.marker([m.lat, m.lng], { icon }).addTo(map);
        markersRef.current.set(m.id, mk);
      } else {
        mk.setLatLng([m.lat, m.lng]);
        mk.setIcon(icon);
      }
      mk.bindPopup(
        `<b>${m.name}</b>${m.callsign ? ` · ${m.callsign}` : ''}<br/>` +
        `${m.group_name || 'no group'} · ${m.status}<br/>` +
        `battery ${m.battery != null ? m.battery + '%' : '–'}<br/>` +
        `${m.lat.toFixed(5)}, ${m.lng.toFixed(5)}`
      );
    }
    for (const [id, mk] of markersRef.current) {
      if (!seen.has(id)) {
        map.removeLayer(mk);
        markersRef.current.delete(id);
      }
    }
    if (!didFit.current && positioned.length) {
      didFit.current = true;
      map.fitBounds(L.latLngBounds(positioned.map((m) => [m.lat, m.lng])).pad(0.3));
    }
  }, [members, groups, sos]);

  return <div ref={elRef} className="map" />;
}