// Real Singapore map via Leaflet + soft minimal tile style.
const { useEffect: useMapEffect, useRef: useMapRef } = React;

function DateMap({ dates, onPick }) {
  const containerRef = useMapRef(null);
  const mapRef = useMapRef(null);
  const layersRef = useMapRef({ markers: [], polyline: null });

  useMapEffect(() => {
    if (!containerRef.current || mapRef.current) return;

    const map = L.map(containerRef.current, {
      center: [1.305, 103.84],
      zoom: 12,
      zoomControl: true,
      attributionControl: false,
      scrollWheelZoom: false,
    });

    // CartoDB Positron — soft greyscale, fits the dreamy aesthetic.
    L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
      subdomains: "abcd",
      maxZoom: 19,
    }).addTo(map);

    // Tiny attribution in legend instead of overlay.
    mapRef.current = map;

    // Fit to dates with coords (new bot-added dates may not have any).
    const located = dates.filter((d) => d.coords);
    if (located.length) {
      const bounds = L.latLngBounds(located.map((d) => d.coords));
      map.fitBounds(bounds, { padding: [40, 40] });
    }

    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);

  // Update markers when dates change
  useMapEffect(() => {
    const map = mapRef.current;
    if (!map) return;

    // Clear previous
    layersRef.current.markers.forEach((m) => m.remove());
    if (layersRef.current.polyline) layersRef.current.polyline.remove();
    layersRef.current.markers = [];

    const located = dates.filter((d) => d.coords);

    // Connecting polyline
    layersRef.current.polyline = L.polyline(
      located.map((d) => d.coords),
      {
        color: "#9d4c5b",
        weight: 1.5,
        opacity: 0.45,
        dashArray: "3 6",
      }
    ).addTo(map);

    // Markers
    located.forEach((d, i) => {
      const icon = L.divIcon({
        className: "kk-pin",
        html: `
          <div class="kk-pin-wrap">
            <div class="kk-pin-num">${i + 1}</div>
            <div class="kk-pin-dot"></div>
            <div class="kk-pin-label">${d.area}</div>
          </div>
        `,
        iconSize: [32, 56],
        iconAnchor: [16, 38],
      });
      const m = L.marker(d.coords, { icon }).addTo(map);
      m.on("click", () => onPick(d));
      layersRef.current.markers.push(m);
    });
  }, [dates, onPick]);

  return (
    <div className="map-wrap">
      <div className="row-between" style={{ marginBottom: 12 }}>
        <div>
          <div className="section-h serif">where we've been</div>
          <div style={{ fontSize: 12, color: "var(--ink-soft)", fontFamily: "var(--mono)", letterSpacing: ".12em", textTransform: "uppercase", marginTop: 4 }}>
            singapore · {dates.length} memories ♥
          </div>
        </div>
      </div>
      <div ref={containerRef} className="map-leaflet" />
      <div className="map-legend">
        <span>♥ tap a pin to revisit</span>
        <span>map © openstreetmap · carto</span>
      </div>
    </div>
  );
}

window.DateMap = DateMap;