@extends('layouts.app', ['title' => term('nav_map','Mapa de propiedades')])

@section('header_actions')
<a class="btn" href="{{ route('properties.index') }}"><i class="fa-solid fa-list"></i>Vista lista</a>
@endsection

@section('content')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>

<div class="card" style="padding:0;overflow:hidden">
    <div style="padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px">
        <div>
            <div class="card-title"><i class="fa-solid fa-map-location-dot text-gold"></i> Mapa de propiedades</div>
            <div class="sub" id="map-status">
                @if($hasMapbox)
                    <span class="pill green"><i class="fa-solid fa-check"></i> Mapbox activo</span>
                @else
                    <span class="pill gold"><i class="fa-solid fa-globe"></i> OpenStreetMap (gratuito) · <a href="{{ route('integrations.index') }}" style="color:var(--gold)">configurar Mapbox</a> para mejor calidad</span>
                @endif
            </div>
        </div>
        <div class="row">
            <span class="pill"><span style="width:8px;height:8px;border-radius:50%;background:#34d399;display:inline-block"></span> Disponible</span>
            <span class="pill"><span style="width:8px;height:8px;border-radius:50%;background:#f59e0b;display:inline-block"></span> Reservado</span>
            <span class="pill"><span style="width:8px;height:8px;border-radius:50%;background:#ef4444;display:inline-block"></span> Vendido</span>
        </div>
    </div>
    <div id="map" style="height:75vh;width:100%;background:#0a0b0f"></div>
</div>

<style>
.leaflet-container{background:#ffffff;font-family:var(--body)}
.leaflet-popup-content-wrapper{background:#f6f8fc;color:var(--text);border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow-3)}
.leaflet-popup-tip{background:#f6f8fc}
.leaflet-popup-content{margin:14px 18px;font-size:13px}
.leaflet-popup-content h4{font-family:var(--display);font-size:16px;margin:0 0 6px;color:var(--gold)}
.leaflet-control-zoom a{background:#f6f8fc !important;color:var(--gold) !important;border-color:var(--line) !important}
.leaflet-control-attribution{background:rgba(13,15,22,.7) !important;color:var(--muted) !important;font-size:10px}
.leaflet-control-attribution a{color:var(--gold) !important}
.marker-cluster{background:rgba(201,168,76,.35) !important;border:2px solid var(--gold)}
.marker-cluster div{background:rgba(201,168,76,.85) !important;color:#111 !important;font-weight:700 !important;font-family:var(--body) !important}
</style>

@push('scripts')
<script>
window.MAPBOX_TOKEN = @json($mapboxToken);
window.HAS_MAPBOX = @json($hasMapbox);

document.addEventListener('DOMContentLoaded', function() {
    const el = document.getElementById('map');
    if (!el || typeof L === 'undefined') {
        document.getElementById('map-status').innerHTML = '<span class="pill red"><i class="fa-solid fa-triangle-exclamation"></i> Error cargando Leaflet</span>';
        return;
    }

    const map = L.map('map', {zoomControl: true}).setView([22.7575, -105.2356], 6);

    // === Tile provider: Mapbox si esta configurado, sino fallback CartoDB ===
    if (window.HAS_MAPBOX && window.MAPBOX_TOKEN) {
        // Mapbox dark style (puedes cambiar el style id por: dark-v11, light-v11, streets-v12, satellite-streets-v12)
        const styleId = 'dark-v11';
        const url = `https://api.mapbox.com/styles/v1/mapbox/${styleId}/tiles/{z}/{x}/{y}@2x?access_token=${window.MAPBOX_TOKEN}`;
        const layer = L.tileLayer(url, {
            attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/about/">OpenStreetMap</a>',
            tileSize: 512,
            zoomOffset: -1,
            maxZoom: 20,
        });
        layer.on('tileerror', function(err){
            console.error('Mapbox tile error:', err);
            const status = document.getElementById('map-status');
            if (status) status.innerHTML = '<span class="pill red"><i class="fa-solid fa-triangle-exclamation"></i> Token Mapbox invalido o sin permisos — usando fallback gratuito</span>';
            // Fallback automatico
            map.removeLayer(layer);
            L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
                attribution: '© OpenStreetMap, CartoDB',
                subdomains: 'abcd',
                maxZoom: 19
            }).addTo(map);
        });
        layer.addTo(map);
    } else {
        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '© OpenStreetMap, CartoDB',
            subdomains: 'abcd',
            maxZoom: 19
        }).addTo(map);
    }

    const cluster = L.markerClusterGroup({chunkedLoading: true, maxClusterRadius: 60});

    fetch('{{ route('properties.geojson') }}')
        .then(r => r.json())
        .then(data => {
            if (!data.features.length) {
                if (typeof toast === 'function') toast('No hay propiedades con coordenadas. Edita una propiedad y captura lat/lng.', 'bad');
                document.getElementById('map-status').innerHTML += ' · <span class="pill red"><i class="fa-solid fa-circle-info"></i> 0 propiedades geolocalizadas</span>';
                return;
            }
            const layer = L.geoJSON(data, {
                pointToLayer: (f, latlng) => L.circleMarker(latlng, {
                    radius: 11,
                    fillColor: f.properties.color,
                    color: '#fff',
                    weight: 2,
                    opacity: 1,
                    fillOpacity: .9
                }),
                onEachFeature: (f, lyr) => {
                    lyr.bindPopup(`
                        <h4>${f.properties.name}</h4>
                        <div><strong style="color:#c9a84c">${f.properties.price_formatted}</strong> · ${f.properties.status}</div>
                        <div style="color:#9ca3b0;font-size:11px;margin-top:4px">${f.properties.type} · ${f.properties.location || ''}</div>
                        <div style="color:#9ca3b0;font-size:11px">${f.properties.area || 0} m² · ${f.properties.bedrooms || 0} rec · ${f.properties.bathrooms || 0} baños</div>
                    `);
                }
            });
            cluster.addLayer(layer);
            map.addLayer(cluster);
            map.fitBounds(cluster.getBounds().pad(.2));
        })
        .catch(err => {
            console.error(err);
            document.getElementById('map-status').innerHTML = '<span class="pill red"><i class="fa-solid fa-triangle-exclamation"></i> Error cargando propiedades</span>';
        });
});
</script>
@endpush
@endsection