import { useEffect, useRef } from 'react';
import L from 'leaflet';
import { api } from '../api.js';

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

  useEffect(() => {
    const map = L.map(elRef.current).setView([48.8566, 2.3522], 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(); mapRef.current = null; };
  }, []);

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

    const sosIds = 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 cls = `pin ${m.status === 'online' ? 'online' : 'offline'} ${sosIds.has(m.id) ? 'sos' : ''}`;
      const icon = L.divIcon({
        className: 'pin-wrap',
        html: `<div class="${cls}" style="background:${colorOf(m.group_id)}">${m.name.slice(0, 2).toUpperCase()}</div>`,
        iconSize: [26, 26],
        iconAnchor: [13, 13],
      });
      let mk = markersRef.current.get(m.id);
      if (!mk) {
        mk = L.marker([m.lat, m.lng], { icon }).addTo(map);
        mk.on('click', () => onSelect(m.id));
        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}` : ''} · ${m.group_name || 'no group'}<br/>` +
        `${m.status} · 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, onSelect]);

  // GPS trail of the selected member
  useEffect(() => {
    const map = mapRef.current;
    if (!map) return;
    trailRef.current?.remove();
    trailRef.current = null;
    if (!selected) return;
    let cancelled = false;
    api.get(`/members/${selected}/trail`).then((rows) => {
      if (cancelled || rows.length < 2) return;
      trailRef.current = L.polyline(rows.map((r) => [r.lat, r.lng]), { color: '#4fc3f7', weight: 3, opacity: 0.7 }).addTo(map);
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [selected]);

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