// แผนที่ Google ปักหมุด — ค้นหาที่อยู่ / คลิก / ลากหมุด → คืน lat,lng
(function () {
  const { useState, useEffect, useRef } = React;

  let mapsPromise = null;
  function loadMaps(key) {
    if (window.google && window.google.maps) return Promise.resolve();
    if (mapsPromise) return mapsPromise;
    mapsPromise = new Promise((resolve, reject) => {
      const s = document.createElement('script');
      s.src = 'https://maps.googleapis.com/maps/api/js?key=' + key + '&libraries=places&language=th&region=TH';
      s.async = true; s.defer = true;
      s.onload = resolve; s.onerror = reject;
      document.head.appendChild(s);
    });
    return mapsPromise;
  }

  function MapPicker({ lat, lng, onChange, height, address }) {
    const key = (window.ADMIN_CONFIG || {}).mapsApiKey;
    const mapEl = useRef(null);
    const inputEl = useRef(null);
    const obj = useRef({});
    const [err, setErr] = useState('');
    const [ready, setReady] = useState(false);

    useEffect(() => {
      if (!key) { setErr('ยังไม่ได้ตั้งค่า Google Maps API key ใน config.js'); return; }
      let dead = false;
      loadMaps(key).then(() => {
        if (dead || !mapEl.current) return;
        const g = window.google.maps;
        const has = lat && lng;
        const start = has ? { lat: Number(lat), lng: Number(lng) } : { lat: 13.7563, lng: 100.5018 };
        const map = new g.Map(mapEl.current, { center: start, zoom: has ? 16 : 6, mapTypeControl: false, streetViewControl: false, fullscreenControl: true });
        const marker = new g.Marker({ position: start, map, draggable: true, visible: !!has });
        // autoPinned = หมุดมาจาก geocode อัตโนมัติ (ยังไม่มีพิกัดเดิม) → ยอมให้ address เลื่อนหมุดต่อได้
        //   ถ้ามีพิกัดเดิม/ผู้ใช้คลิก-ลากเอง = manual → address แค่เลื่อนวิว ไม่ทับหมุด
        obj.current = { g, map, marker, geocoder: new g.Geocoder(), autoPinned: !has };
        const place = (la, ln, auto) => { marker.setPosition({ lat: la, lng: ln }); marker.setVisible(true); obj.current.autoPinned = !!auto; onChange(la, ln); };
        map.addListener('click', e => place(e.latLng.lat(), e.latLng.lng(), false));
        marker.addListener('dragend', e => place(e.latLng.lat(), e.latLng.lng(), false));
        if (inputEl.current && g.places) {
          const ac = new g.places.Autocomplete(inputEl.current, { fields: ['geometry'], componentRestrictions: { country: 'th' } });
          ac.bindTo('bounds', map);
          ac.addListener('place_changed', () => {
            const p = ac.getPlace();
            if (p.geometry && p.geometry.location) {
              const la = p.geometry.location.lat(), ln = p.geometry.location.lng();
              map.setCenter({ lat: la, lng: ln }); map.setZoom(16); place(la, ln, false);
            }
          });
        }
        setReady(true);
      }).catch(() => setErr('โหลด Google Maps ไม่สำเร็จ — เช็ค API key / Billing / การจำกัดโดเมน (referrer)'));
      return () => { dead = true; };
    }, [key]);

    // เมื่อ lat/lng มาทีหลัง (โหลดทรัพย์เดิม) หรือ container เพิ่งมีขนาด → ขยับหมุด + resize + center ที่หมุด
    useEffect(() => {
      const o = obj.current;
      if (!(o.map && o.marker && lat && lng)) return;
      const pos = { lat: Number(lat), lng: Number(lng) };
      const recenter = () => {
        o.marker.setPosition(pos); o.marker.setVisible(true);
        window.google.maps.event.trigger(o.map, 'resize'); // กันแผนที่จำขนาด container เก่า (หมุดหลุดขอบ)
        o.map.setCenter(pos);
        if (o.map.getZoom() < 14) o.map.setZoom(16);
      };
      recenter();
      const t = setTimeout(recenter, 400); // ทำซ้ำหลัง layout นิ่ง (container เพิ่งได้ขนาดจริง)
      return () => clearTimeout(t);
    }, [ready, lat, lng]);

    // เมื่อกรอกที่อยู่ (ตำบล/อำเภอ/จังหวัด) → geocode แล้วเลื่อนแผนที่ไปที่นั่น (debounce กันยิงถี่)
    //   ปักหมุดให้เฉพาะกรณียังไม่มีหมุด หรือหมุดยังเป็น auto (ยังไม่ได้คลิก/ลากเอง) — กันทับหมุดที่ปรับเอง
    useEffect(() => {
      const o = obj.current;
      if (!ready || !o.geocoder || !address || address.trim().length < 3) return;
      const handle = setTimeout(() => {
        o.geocoder.geocode({ address: address + ' ประเทศไทย', componentRestrictions: { country: 'th' } }, (res, status) => {
          if (status !== 'OK' || !res || !res[0]) return;  // เงียบถ้าหาไม่เจอ/Geocoding API ไม่เปิด
          const loc = res[0].geometry.location;
          const la = loc.lat(), ln = loc.lng();
          // ขยับวิว+หมุดตามที่อยู่ เฉพาะตอนยังไม่มีหมุดจริง (auto) — ทรัพย์ที่มีพิกัดแล้ว อย่าให้ที่อยู่ดึงวิวออกจากหมุด
          if (!(lat && lng) || o.autoPinned) {
            o.map.setCenter({ lat: la, lng: ln });
            o.map.setZoom(15);
            o.marker.setPosition({ lat: la, lng: ln }); o.marker.setVisible(true);
            o.autoPinned = true; onChange(la, ln);
          }
        });
      }, 700);
      return () => clearTimeout(handle);
    }, [address, ready]);

    if (err) return <div style={{ padding: 12, background: '#FDECF1', border: '1px solid #F3C5D4', borderRadius: 10, color: '#B23A5E', fontSize: 13 }}>⚠️ {err}</div>;
    return (
      <div>
        <input ref={inputEl} className="input" placeholder="🔍 ค้นหาสถานที่ / ที่อยู่ เพื่อปักหมุด" autoComplete="off" style={{ marginBottom: 8 }} />
        <div ref={mapEl} style={{ width: '100%', height: height || 320, borderRadius: 12, border: '1px solid #DDE9FC', background: '#EEF3F9' }} />
        <div style={{ fontSize: 12.5, color: '#6B7280', marginTop: 6, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          {lat && lng
            ? <><span>📍 พิกัด: <b style={{ color: '#102E54' }}>{Number(lat).toFixed(6)}, {Number(lng).toFixed(6)}</b></span>
                <button type="button" className="btn btn-sm btn-ghost" onClick={() => onChange('', '')}>ล้างหมุด</button></>
            : <span>คลิกบนแผนที่ หรือค้นหาที่อยู่ด้านบน เพื่อปักหมุด</span>}
        </div>
      </div>
    );
  }

  window.MapPicker = MapPicker;
})();