@extends('layouts.app')
@section('title', 'Sindh Map (Test)')

@section('contents')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Sindh (tehsils) — MapLibre + GeoJSON (PAK_adm3)</h3>
                </div>
                <div class="card-body p-0">
                    <div id="sindhMapTest" class="w-100" style="height: 520px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('stylesheets')
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
    #sindhMapTest { min-height: 520px; }
    #sindhMapTest .maplibregl-popup-content { color: #1f2d3d; padding: 10px 14px; }
    #sindhMapTest .maplibregl-popup-close-button { font-size: 18px; }
</style>
@endpush

@push('scripts')
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@turf/turf@6.5.0/dist/turf.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // GeoJSON URL (Pakistan admin level 3 = tehsils/sub-districts); we filter to Sindh only
    var geoJsonUrl = 'https://raw.githubusercontent.com/PakData/GISData/master/PAK-GeoJSON/PAK_adm3.json';

    // Lock view to Sindh only: bounds and zoom limits (set precisely after GeoJSON load)
    var sindhBoundsFallback = [[66.5, 23.5], [71.0, 28.5]];
    var minZoomLevel = 0.5;  // cannot zoom out beyond this (keeps Sindh-focused view)
    var maxZoomLevel = 6;

    // Default cities for markers (name, lng, lat, optional desc)
    var markersData = [
        { name: 'Karachi',   lng: 67.0011, lat: 24.8607, desc: 'Capital of Sindh and Pakistan\'s largest city.' },
        { name: 'Hyderabad', lng: 68.3578, lat: 25.3960, desc: 'Historical Sindhi city on the Indus River.' },
        { name: 'Sukkur',    lng: 68.8574, lat: 27.7052, desc: 'City near the Indus with strategic importance.' }
    ];

    // Palette for tehsils (data-driven fill; cycle for many features)
    var defaultPalette = [
        '#1E88E5', '#43A047', '#FB8C00', '#8E24AA', '#E53935',
        '#00897B', '#5E35B1', '#FDD835', '#D81B60', '#3949AB',
        '#7CB342', '#FFB300', '#00ACC1', '#C0CA33', '#5C6BC0',
        '#26A69A', '#AB47BC', '#FF7043', '#66BB6A', '#42A5F5',
        '#EC407A', '#8D6E63', '#78909C', '#D4E157', '#FFCA28'
    ];

    var map = new maplibregl.Map({
        container: 'sindhMapTest',
        style: {
            version: 8,
            sources: {
                'osm-tiles': {
                    type: 'raster',
                    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
                    tileSize: 256,
                    attribution: '&copy; OpenStreetMap contributors'
                }
            },
            layers: [{
                id: 'osm-tiles',
                type: 'raster',
                source: 'osm-tiles',
                minzoom: 0,
                maxzoom: 19
            }]
        },
        center: [68.1, 26.2],
        zoom: 6.3,
        maxBounds: sindhBoundsFallback,
        minZoom: minZoomLevel,
        maxZoom: maxZoomLevel
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');

    var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false });

    map.on('load', function() {
        fetch(geoJsonUrl)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                // Filter to Sindh only (NAME_1 can be 'Sind' or 'Sindh' in different datasets)
                var sindhFeatures = (data.features || []).filter(function(f) {
                    var n = (f.properties && f.properties.NAME_1) || '';
                    return n === 'Sind' || n === 'Sindh';
                });

                if (sindhFeatures.length === 0) {
                    console.warn('No Sindh features found in GeoJSON. NAME_1 values: ', [...new Set((data.features || []).map(function(f) { return f.properties && f.properties.NAME_1; }))]);
                    return;
                }

                // Normalize: use NAME_3 (tehsil) as label; keep NAME_2 (district) for tooltip
                sindhFeatures.forEach(function(f) {
                    if (!f.properties) f.properties = {};
                    if (!f.properties.name && f.properties.NAME_3) f.properties.name = f.properties.NAME_3;
                    if (!f.properties.name && f.properties.NAME_2) f.properties.name = f.properties.NAME_2;
                    if (!f.properties.name) f.properties.name = 'Tehsil ' + (f.properties.OBJECTID || f.id || '');
                });

                var sindhGeoJson = { type: 'FeatureCollection', features: sindhFeatures };

                // Lock view: restrict pan to Sindh bbox and disallow zoom out beyond current view
                try {
                    var bbox = turf.bbox(sindhGeoJson);
                    map.setMaxBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
                } catch (e) {
                    map.setMaxBounds(sindhBoundsFallback);
                }

                // Dim everything outside Sindh (world polygon with Sindh-shaped hole)
                function buildMaskGeoJSON(fc) {
                    var world = [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]];
                    var holes = [];
                    try {
                        var merged = fc.features[0];
                        for (var i = 1; i < fc.features.length; i++) {
                            merged = turf.union(merged, fc.features[i]);
                        }
                        var geom = merged.geometry;
                        if (geom.type === 'Polygon') holes.push(geom.coordinates[0]);
                        else if (geom.type === 'MultiPolygon') geom.coordinates.forEach(function(p) { holes.push(p[0]); });
                    } catch (err) {
                        return null;
                    }
                    if (holes.length === 0) return null;
                    return { type: 'Feature', properties: {}, geometry: { type: 'Polygon', coordinates: [world].concat(holes) } };
                }
                var maskFeature = buildMaskGeoJSON(sindhGeoJson);
                if (maskFeature) {
                    map.addSource('sindh-mask', {
                        type: 'geojson',
                        data: { type: 'FeatureCollection', features: [maskFeature] }
                    });
                    map.addLayer({
                        id: 'sindh-mask',
                        type: 'fill',
                        source: 'sindh-mask',
                        paint: { 'fill-color': '#1a1a1a', 'fill-opacity': 0.75 }
                    });
                }

                // Build match expression: name -> color (palette by index)
                var featureNames = sindhFeatures.map(function(f) { return f.properties.name; });
                var matchExpr = ['match', ['get', 'name']];
                featureNames.forEach(function(name, i) {
                    matchExpr.push(name, defaultPalette[i % defaultPalette.length]);
                });
                matchExpr.push('#b0bec5'); // default

                map.addSource('sindh-districts', {
                    type: 'geojson',
                    data: sindhGeoJson
                });

                map.addLayer({
                    id: 'sindh-fill',
                    type: 'fill',
                    source: 'sindh-districts',
                    paint: {
                        'fill-color': matchExpr,
                        'fill-opacity': 0.65
                    }
                });

                map.addLayer({
                    id: 'sindh-outline',
                    type: 'line',
                    source: 'sindh-districts',
                    paint: {
                        'line-color': '#37474f',
                        'line-width': 1.2
                    }
                });

                // Hover: cursor, tooltip (tehsil + district)
                map.on('mousemove', 'sindh-fill', function(e) {
                    map.getCanvas().style.cursor = 'pointer';
                    if (e.features.length > 0) {
                        var p = e.features[0].properties;
                        var name = p.name || 'Tehsil';
                        var district = (p.NAME_2) ? ' <span class="text-muted">(' + p.NAME_2 + ')</span>' : '';
                        popup.setLngLat(e.lngLat).setHTML('<strong>' + name + '</strong>' + district).addTo(map);
                    }
                });

                map.on('mouseleave', 'sindh-fill', function() {
                    map.getCanvas().style.cursor = '';
                    popup.remove();
                });

                // Optional: hover highlight via feature state (MapLibre 2+)
                map.on('mousemove', 'sindh-fill', function(e) {
                    if (e.features.length > 0 && e.features[0].id !== undefined) {
                        map.getCanvas().style.cursor = 'pointer';
                    }
                });
            })
            .catch(function(err) {
                console.error('Failed to load Sindh GeoJSON:', err);
            });
    });

    // Custom markers (cities)
    // markersData.forEach(function(city) {
    //     var el = document.createElement('div');
    //     el.className = 'sindh-marker';
    //     el.style.width = '20px';
    //     el.style.height = '20px';
    //     el.style.borderRadius = '50%';
    //     el.style.border = '2px solid #fff';
    //     el.style.boxShadow = '0 0 6px rgba(0,0,0,0.35)';
    //     el.style.background = '#E53935';
    //     el.style.cursor = 'pointer';

    //     var popupContent = '<strong>' + city.name + '</strong><br/>' + (city.desc || '');
    //     var markerPopup = new maplibregl.Popup({ offset: 12 }).setHTML(popupContent);

    //     new maplibregl.Marker(el)
    //         .setLngLat([city.lng, city.lat])
    //         .setPopup(markerPopup)
    //         .addTo(map);
    // });
});
</script>
@endpush