// Real Doha map (Leaflet + CartoDB tiles)
// Props: pins (array), active (selected pin or null), onSelectPin (fn)

const DISTRICT_COORDS = {
  'The Pearl':       [25.3713, 51.5460],
  'West Bay':        [25.3309, 51.5223],
  'Lusail':          [25.4321, 51.4912],
  'Msheireb':        [25.2868, 51.5328],
  'Al Sadd':         [25.2755, 51.5005],
  'Katara':          [25.3596, 51.5267],
  'Education City':  [25.3186, 51.4341],
  // Arabic equivalents
  'اللؤلؤة':           [25.3713, 51.5460],
  'الخليج الغربي':      [25.3309, 51.5223],
  'لوسيل':             [25.4321, 51.4912],
  'مشيرب':             [25.2868, 51.5328],
  'السد':              [25.2755, 51.5005],
  'كتارا':              [25.3596, 51.5267],
  'المدينة التعليمية':  [25.3186, 51.4341],
};

const DISTRICT_LABELS = [
  { name: 'LUSAIL',         coord: [25.4321, 51.4912] },
  { name: 'THE PEARL',      coord: [25.3713, 51.5460] },
  { name: 'WEST BAY',       coord: [25.3309, 51.5223] },
  { name: 'KATARA',         coord: [25.3596, 51.5267] },
  { name: 'EDUCATION CITY', coord: [25.3186, 51.4341] },
  { name: 'MSHEIREB',       coord: [25.2868, 51.5328] },
  { name: 'AL SADD',        coord: [25.2755, 51.5005] },
];

const LiveMap = ({ pins, active, onSelectPin }) => {
  const containerRef = React.useRef(null);
  const mapRef = React.useRef(null);
  const markersRef = React.useRef({});

  React.useEffect(() => {
    if (!containerRef.current || !window.L || mapRef.current) return;

    const map = window.L.map(containerRef.current, {
      center: [25.345, 51.510],
      zoom: 11,
      zoomControl: false,
      attributionControl: false,
      scrollWheelZoom: false,
      preferCanvas: true,
    });

    window.L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
      maxZoom: 19,
      subdomains: 'abcd',
      attribution: '© OpenStreetMap, © CARTO',
    }).addTo(map);

    window.L.control.zoom({ position: 'topright' }).addTo(map);

    DISTRICT_LABELS.forEach(({ name, coord }) => {
      const icon = window.L.divIcon({
        className: 'lmap-district-wrap',
        html: `<div class="lmap-district">${name}</div>`,
        iconSize: [140, 14],
        iconAnchor: [70, 7],
      });
      window.L.marker(coord, { icon, interactive: false, keyboard: false }).addTo(map);
    });

    mapRef.current = map;

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

  React.useEffect(() => {
    const map = mapRef.current;
    if (!map || !window.L) return;

    Object.values(markersRef.current).forEach(m => map.removeLayer(m));
    markersRef.current = {};

    pins.forEach(pin => {
      const base = DISTRICT_COORDS[pin.district] || [25.32, 51.52];
      const jLat = (((pin.id * 17) % 100) - 50) / 6000;
      const jLng = (((pin.id * 23) % 100) - 50) / 6000;
      const coord = [base[0] + jLat, base[1] + jLng];

      const isActive = active?.id === pin.id;
      const cls = ['lmap-pin'];
      if (pin.luxury) cls.push('luxury');
      if (isActive) cls.push('active');

      const icon = window.L.divIcon({
        className: 'lmap-pin-wrap',
        html: `<div class="${cls.join(' ')}"><span class="dot"></span><span class="label">QAR ${pin.price}M</span></div>`,
        iconSize: [14, 14],
        iconAnchor: [7, 7],
      });

      const marker = window.L.marker(coord, { icon, riseOnHover: true }).addTo(map);
      marker.on('click', () => onSelectPin && onSelectPin(pin));
      markersRef.current[pin.id] = marker;
    });
  }, [pins, active, onSelectPin]);

  return <div ref={containerRef} className="lmap" />;
};

window.LiveMap = LiveMap;
// Keep old export name to avoid breaking any other reference
window.QatarMapSVG = LiveMap;