import { useEffect } from 'react'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const LAT = -23.6888009
const LNG = -46.5599319
const ZOOM = 15

const GMAPS = `https://www.google.com/maps/dir/?api=1&destination=Av.+Kennedy,+34,+Jardim+do+Mar,+S%C3%A3o+Bernardo+do+Campo+-+SP`
const WAZE  = `https://waze.com/ul?ll=${LAT},${LNG}&navigate=yes`

const PIN_SVG = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 42" width="32" height="42">
  <path d="M16 0C9.373 0 4 5.373 4 12c0 9 12 30 12 30S28 21 28 12C28 5.373 22.627 0 16 0z"
    fill="#c05b52" stroke="#fff" stroke-width="1.5"/>
  <circle cx="16" cy="12" r="5" fill="#fff"/>
</svg>`

const POPUP_HTML = `
<div class="bn-map-popup">
  <img src="/assets/img/Logo.c7b1457c.svg" alt="Buenas Carnes & Pasta" class="bn-map-logo" />
  <p class="bn-map-addr">Av. Kennedy, 34 · Jardim do Mar<br>São Bernardo do Campo — SP</p>
  <div class="bn-map-btns">
    <a href="${GMAPS}" target="_blank" rel="noopener" class="bn-map-btn bn-map-btn--gmaps">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none">
        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"/>
      </svg>
      Google Maps
    </a>
    <a href="${WAZE}" target="_blank" rel="noopener" class="bn-map-btn bn-map-btn--waze">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M20.54 6.63A10.5 10.5 0 1 0 3.46 17.37a10.5 10.5 0 0 0 17.08-10.74zM12 20.5a8.5 8.5 0 1 1 8.5-8.5 8.51 8.51 0 0 1-8.5 8.5zm3.5-9a1.5 1.5 0 1 1-1.5-1.5 1.5 1.5 0 0 1 1.5 1.5zm-6 0A1.5 1.5 0 1 1 8 10a1.5 1.5 0 0 1 1.5 1.5zM12 16a4 4 0 0 1-3.46-2h6.92A4 4 0 0 1 12 16z"/>
      </svg>
      Waze
    </a>
  </div>
</div>`

const pinIcon = L.divIcon({
  html: PIN_SVG,
  className: '',
  iconSize: [32, 42],
  iconAnchor: [16, 42],
  popupAnchor: [0, -48],
})

export default function MapSection() {
  useEffect(() => {
    const el = document.getElementById('buenas-leaflet-map')
    if (!el || el._leaflet_id) return

    const map = L.map(el, { zoomControl: false, scrollWheelZoom: false, attributionControl: false })
    map.setView([LAT + 0.005, LNG], ZOOM)

    L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { maxZoom: 19 }).addTo(map)
    L.control.zoom({ position: 'bottomright' }).addTo(map)

    const marker = L.marker([LAT, LNG], { icon: pinIcon })
      .addTo(map)
      .bindPopup(POPUP_HTML, { maxWidth: 240, className: 'bn-popup', autopan: false })
      .openPopup()

    // Centraliza pin+popup no mapa após estabilização
    // Bloco visual: de (pin_tip - 48 - popupH) até pin_tip → altura total = 48 + popupH
    // Para centrar: pin_tip deve ficar (48 + popupH) / 2 abaixo do centro do mapa
    const t = setTimeout(() => {
      map.invalidateSize()
      const popupEl = marker.getPopup().getElement()
      const popupH = popupEl ? popupEl.offsetHeight : 180
      const offsetPx = (48 + popupH) / 2   // px abaixo do centro do mapa
      const offsetLat = (offsetPx * 4.4) / 111319  // ~4.4m/px zoom 15 lat -23.7
      map.panTo([LAT + offsetLat, LNG], { animate: false })
    }, 250)

    return () => { clearTimeout(t); map.remove() }
  }, [])

  return null
}
