@extends('layouts.app')
@section('title', 'Mapa Geográfico')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
#mapGeo {
    height: calc(100vh - 200px);
    min-height: 450px;
    border-radius: 12px;
    z-index: 1;
}
.nap-popup .popup-title { font-weight:700; font-size:1rem; margin-bottom:6px; }
.nap-popup dl { font-size:0.83rem; margin:0; }
.nap-popup dt { color:#666; font-weight:600; margin-top:4px; }
.nap-popup dd { margin:0; }
.nap-popup .popup-bar { height:6px; border-radius:3px; background:#e0e0e0; margin:6px 0; overflow:hidden; }
.nap-popup .popup-bar-inner { height:100%; border-radius:3px; }
.nap-popup .popup-btn {
    display:block; width:100%; margin-top:8px; padding:5px; text-align:center;
    background:#671E75; color:#fff; border-radius:6px; text-decoration:none; font-size:0.8rem;
}
.legend-box {
    background:var(--bg-card,#fff); border-radius:10px;
    padding:10px 14px; box-shadow:0 2px 10px rgba(0,0,0,0.15);
    font-size:0.8rem;
}
.legend-dot { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; }
/* Leaflet dark mode override */
[data-theme="dark"] .leaflet-tile { filter: invert(90%) hue-rotate(180deg) brightness(0.85); }
[data-theme="dark"] .leaflet-container { background:#111; }
[data-theme="dark"] .nap-popup dt { color:#aaa; }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
    <div>
        <h5 class="mb-0 fw-bold"><i class="bi bi-map-fill me-2" style="color:var(--nf-purple)"></i>Mapa Geográfico — Cajas NAP</h5>
        <small class="text-muted">Haz clic en un marcador para ver los detalles de la caja</small>
    </div>
    <a href="{{ route('equipos.caja-nap.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-box-seam me-1"></i>Ver Cajas NAP
    </a>
</div>

<div id="mapGeo"></div>

<div class="mt-3 d-flex gap-3 flex-wrap align-items-center">
    <div class="legend-box d-flex gap-3 align-items-center">
        <span><span class="legend-dot" style="background:#22c55e"></span>Disponible (&lt;50%)</span>
        <span><span class="legend-dot" style="background:#f97316"></span>Medio lleno (50–89%)</span>
        <span><span class="legend-dot" style="background:#ef4444"></span>Casi lleno (≥90%)</span>
        <span><span class="legend-dot" style="background:#94a3b8"></span>Sin puertos</span>
    </div>
    <div id="mapStats" class="small text-muted"></div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const mapaDataUrl = "{{ route('mapa-geo.data') }}";
const cajaNapBase = "{{ url('/equipos/caja-nap') }}";

const map = L.map('mapGeo').setView([-12.05, -77.04], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 19
}).addTo(map);

function makeIcon(color) {
    const colors = { green:'#22c55e', orange:'#f97316', red:'#ef4444', gray:'#94a3b8' };
    const c = colors[color] || '#94a3b8';
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="38" viewBox="0 0 28 38">
        <path d="M14 0C6.3 0 0 6.3 0 14c0 9.3 14 24 14 24s14-14.7 14-24C28 6.3 21.7 0 14 0z" fill="${c}" stroke="white" stroke-width="2"/>
        <circle cx="14" cy="14" r="5" fill="white"/>
    </svg>`;
    return L.divIcon({
        html: svg,
        iconSize: [28,38], iconAnchor: [14,38], popupAnchor: [0,-38],
        className: ''
    });
}

fetch(mapaDataUrl)
    .then(r => r.json())
    .then(cajas => {
        if (cajas.length === 0) {
            document.getElementById('mapStats').textContent = 'Sin cajas NAP con coordenadas GPS registradas.';
            return;
        }

        const bounds = [];
        cajas.forEach(c => {
            const iconColor = c.total === 0 ? 'gray' : c.color;
            const marker = L.marker([c.lat, c.lng], { icon: makeIcon(iconColor) });

            const barColor = c.color === 'red' ? '#ef4444' : c.color === 'orange' ? '#f97316' : '#22c55e';
            const popup = `
                <div class="nap-popup" style="min-width:200px">
                    <div class="popup-title"><i class="bi bi-box-seam me-1"></i>NAP-${c.nombre}</div>
                    <div class="popup-bar"><div class="popup-bar-inner" style="width:${c.pct}%;background:${barColor}"></div></div>
                    <div style="font-size:0.78rem;color:#666;margin-bottom:6px">${c.usados}/${c.total} puertos — ${c.pct}% ocupado</div>
                    <dl>
                        ${c.zona    ? `<dt>Zona</dt><dd>${c.zona}</dd>` : ''}
                        ${c.direccion ? `<dt>Dirección</dt><dd>${c.direccion}</dd>` : ''}
                        ${c.splitter  ? `<dt>Splitter</dt><dd>${c.splitter}</dd>` : ''}
                        ${c.odf       ? `<dt>ODF entrada</dt><dd>${c.odf}</dd>` : ''}
                        <dt>Libres</dt><dd style="color:#22c55e;font-weight:600">${c.libres} puertos</dd>
                    </dl>
                </div>`;
            marker.bindPopup(popup);
            marker.addTo(map);
            bounds.push([c.lat, c.lng]);
        });

        if (bounds.length > 1) map.fitBounds(bounds, { padding: [40, 40] });
        else if (bounds.length === 1) map.setView(bounds[0], 16);

        const total  = cajas.reduce((s,c) => s + c.total, 0);
        const usados = cajas.reduce((s,c) => s + c.usados, 0);
        document.getElementById('mapStats').textContent =
            `${cajas.length} cajas mostradas · ${total} puertos totales · ${total - usados} libres`;
    })
    .catch(() => {
        document.getElementById('mapStats').textContent = 'Error al cargar datos del mapa.';
    });
</script>
@endpush