@props([
    'points'      => '[]',
    'height'      => '400px',
    'defaultZoom' => 7,
    'defaultLat'  => '10.0735',   // Barquisimeto
    'defaultLng'  => '-69.3139',
])

@php
    $mapId        = 'lmap_' . Str::random(8);
    $parsed       = is_string($points) ? json_decode($points, true) : $points;
    if (!is_array($parsed)) $parsed = [];
    $jsonPoints   = json_encode($parsed);
@endphp

@pushonce('css')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        .map-viewer-card { border-radius: 8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.12); }
    </style>
@endpushonce

<div class="card map-viewer-card border-0 mb-3">
    <div class="card-body p-1">
        <div id="{{ $mapId }}" style="height:{{ $height }}; width:100%;"></div>
    </div>
</div>

@pushonce('js')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@endpushonce

@push('js')
<script>
(function () {
    var MAP_ID   = '{{ $mapId }}';
    var PTS      = {!! $jsonPoints !!};
    var DEF_LAT  = {{ $defaultLat }};
    var DEF_LNG  = {{ $defaultLng }};
    var DEF_ZOOM = {{ $defaultZoom }};

    var mapObj      = null;
    var mapBounds   = null;   // guardamos bounds para re-aplicar tras invalidateSize
    var mapDone     = false;

    /* ── Dibujar marcadores / rutas ── */
    function drawLayers(map) {
        var group = L.featureGroup().addTo(map);
        var isRoute = PTS.length > 0 && PTS[0].points !== undefined;

        if (isRoute) {
            PTS.forEach(function (g) {
                var color  = g.color || '#007bff';
                var coords = [];
                g.points.forEach(function (p) {
                    var ll = [parseFloat(p.lat), parseFloat(p.lng)];
                    coords.push(ll);
                    var m = L.circleMarker(ll, {
                        radius: 9, fillColor: color,
                        color: '#fff', weight: 2, opacity: 1, fillOpacity: 0.9
                    });
                    var txt = 'Día ' + g.day + (p.title ? ': ' + p.title : '');
                    m.bindTooltip(txt, { sticky: true });
                    m.bindPopup('<strong>' + txt + '</strong>');
                    m.addTo(group);
                });
                if (coords.length > 1) {
                    L.polyline(coords, {
                        color: color, weight: 5, opacity: 0.9, dashArray: '10,8'
                    }).addTo(map);
                }
            });
        } else {
            PTS.forEach(function (p) {
                var ll = [parseFloat(p.lat), parseFloat(p.lng)];
                var m  = L.marker(ll);
                if (p.title) {
                    m.bindTooltip(p.title, { sticky: true });
                    m.bindPopup('<strong>' + p.title + '</strong>');
                }
                m.addTo(group);
            });
        }

        if (group.getLayers().length > 0) {
            mapBounds = group.getBounds();
            map.fitBounds(mapBounds, { padding: [40, 40], maxZoom: 14 });
        } else {
            map.setView([DEF_LAT, DEF_LNG], DEF_ZOOM);
        }
    }

    /* ── Inicializar mapa ── */
    function initMap() {
        if (mapDone) return;
        var el = document.getElementById(MAP_ID);
        if (!el || el.offsetWidth === 0 || el.offsetHeight === 0) return;

        mapDone = true;
        mapObj  = L.map(MAP_ID, { zoomSnap: 0.5 });

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(mapObj);

        drawLayers(mapObj);

        // Registrar globalmente
        window._leafletMaps        = window._leafletMaps || {};
        window._leafletMaps[MAP_ID] = mapObj;
    }

    /* ── Re-encuadrar después de un resize ── */
    function onResize() {
        if (!mapObj) { initMap(); return; }
        mapObj.invalidateSize();
        if (mapBounds) {
            mapObj.fitBounds(mapBounds, { padding: [40, 40], maxZoom: 14 });
        }
    }

    /* ── Disparadores ── */
    function bootstrap() {
        initMap();

        // Evento de resize de ventana
        window.addEventListener('resize', onResize);

        // jQuery Bootstrap tab (AdminLTE)
        if (typeof $ !== 'undefined') {
            $(document).on('shown.bs.tab', 'a[data-toggle="pill"]', function () {
                setTimeout(onResize, 200);
            });
        }

        // Evento nativo Bootstrap 5
        document.addEventListener('shown.bs.tab', function () {
            setTimeout(onResize, 200);
        });

        // IntersectionObserver: cuando el contenedor se hace visible
        if ('IntersectionObserver' in window) {
            var obs = new IntersectionObserver(function (entries) {
                if (entries[0].isIntersecting) {
                    setTimeout(onResize, 100);
                    // No desconectar: el usuario puede salir y volver al tab
                }
            }, { threshold: 0.05 });
            var container = document.getElementById(MAP_ID);
            if (container) obs.observe(container);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', bootstrap);
    } else {
        bootstrap();
    }
})();
</script>
@endpush