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

@section('contents')
<div class="container-fluid p-0 m-0 map-page">
    {{-- Filters bar on top (clickable, active state only; no impact yet) --}}
    <div class="map-filters-bar">
        <span class="map-filters-label">Filters:</span>
        <div class="map-filter-items">
            <button type="button" class="map-filter-chip map-filter-chip--adp" data-filter="adp">ADP</button>
            <button type="button" class="map-filter-chip map-filter-chip--ddp" data-filter="ddp">DDP</button>
            <button type="button" class="map-filter-chip map-filter-chip--non-adp" data-filter="non-adp">Non-ADP</button>
            <button type="button" class="map-filter-chip map-filter-chip--local" data-filter="local">Local Govt.</button>
            <button type="button" class="map-filter-chip map-filter-chip--projects" data-filter="projects">Projects</button>
        </div>
    </div>
    {{-- Full-page map --}}
    <div id="fullMap" class="map-full"></div>
</div>
@endsection

@push('stylesheets')
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<style>
    .map-page {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 120px);
    }
    .map-filters-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        padding: 0.6rem 1rem;
        flex-shrink: 0;
    }
    .map-filters-label {
        font-weight: 600;
        color: #495057;
        font-size: 0.9rem;
    }
    .map-filter-items { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .map-filter-chip {
        padding: 0.4rem 0.85rem;
        font-size: 0.875rem;
        font-weight: 500;
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        transition: opacity 0.2s, box-shadow 0.2s;
    }
    .map-filter-chip:hover { opacity: 0.9; }
    .map-filter-chip.active {
        box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
    }
    .map-filter-chip--adp { background: #007bff; color: #fff; }
    .map-filter-chip--ddp { background: #17a2b8; color: #fff; }
    .map-filter-chip--non-adp { background: #6c757d; color: #fff; }
    .map-filter-chip--local { background: #28a745; color: #fff; }
    .map-filter-chip--projects { background: #ffc107; color: #212529; }
    .map-full {
        flex: 1;
        width: 100%;
        min-height: 400px;
        display: block;
    }
    #fullMap .maplibregl-popup-content { color: #1f2d3d; padding: 10px 14px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
    #fullMap .maplibregl-popup-close-button { font-size: 18px; }

    /* Dark theme */
    .dark-mode .map-filters-bar { border-bottom: 1px solid #495057; }
    .dark-mode .map-filters-label { color: #e9ecef; }
    .dark-mode .map-filter-chip.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.35); }
    .dark-mode .map-filter-chip--adp { background: #0d6efd; color: #fff; }
    .dark-mode .map-filter-chip--ddp { background: #138496; color: #fff; }
    .dark-mode .map-filter-chip--non-adp { background: #5a6268; color: #fff; }
    .dark-mode .map-filter-chip--local { background: #218838; color: #fff; }
    .dark-mode .map-filter-chip--projects { background: #e0a800; color: #212529; }
    .dark-mode #fullMap .maplibregl-popup-content { background: #343a40; color: #e9ecef; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.3); }
    .dark-mode #fullMap .maplibregl-popup-close-button { color: #e9ecef; }
</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>
(function() {
    const projects = @json($projects ?? []);
    const geoJsonUrl = 'https://raw.githubusercontent.com/PakData/GISData/master/PAK-GeoJSON/PAK_adm3.json';
    const sindhBoundsFallback = [[66.5, 23.5], [71.0, 28.5]];
    const 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'];
    let mapMarkers = [];

    var esc = window.pmsEscapeHtml;

    function addProjectMarkers(map, projectList) {
        mapMarkers.forEach(m => m.remove());
        mapMarkers = [];
        (projectList || []).forEach(function(project) {
            const el = document.createElement('div');
            el.className = 'ml-marker';
            el.style.width = '18px'; el.style.height = '18px'; 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 = '#007bff'; el.style.cursor = 'pointer';
            const name = esc(project.name) || 'Scheme';
            const code = esc(project.code);
            const dept = esc(project.department_name);
            const locationName = esc(project.location_name);
            const startYear = esc(project.start_year);
            const completionYear = esc(project.completion_year);
            let popupHtml = '<div class="p-1" style="min-width:200px"><strong>' + name + '</strong>';
            if (code) popupHtml += '<br/><span class="text-muted small">Code: ' + code + '</span>';
            if (dept) popupHtml += '<br/><span class="text-muted small">' + dept + '</span>';
            if (locationName) popupHtml += '<br/><span class="small">Location: ' + locationName + '</span>';
            if (startYear) popupHtml += '<br/><span class="small">Start: ' + startYear + '</span>';
            if (completionYear) popupHtml += '<br/><span class="small">Completion: ' + completionYear + '</span>';
            popupHtml += '</div>';
            const popup = new maplibregl.Popup({ offset: 12 }).setHTML(popupHtml);
            const marker = new maplibregl.Marker(el).setLngLat([project.lng, project.lat]).setPopup(popup).addTo(map);
            mapMarkers.push(marker);
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Filter chips: click toggles active state (no impact on map yet)
        document.querySelectorAll('.map-filter-chip').forEach(function(btn) {
            btn.addEventListener('click', function() {
                this.classList.toggle('active');
            });
        });

        const map = new maplibregl.Map({
            container: 'fullMap',
            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: 5.5,
            maxZoom: 16
        });

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

        map.on('load', function() {
            fetch(geoJsonUrl)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    const sindhFeatures = (data.features || []).filter(function(f) {
                        const n = (f.properties && f.properties.NAME_1) || '';
                        return n === 'Sind' || n === 'Sindh';
                    });

                    if (sindhFeatures.length === 0) {
                        addProjectMarkers(map, projects);
                        return;
                    }

                    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 || '');
                    });

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

                    try {
                        const bbox = turf.bbox(sindhGeoJson);
                        map.setMaxBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]]);
                    } catch (e) {
                        map.setMaxBounds(sindhBoundsFallback);
                    }

                    function buildMaskGeoJSON(fc) {
                        const world = [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]];
                        const holes = [];
                        try {
                            let merged = fc.features[0];
                            for (let i = 1; i < fc.features.length; i++) merged = turf.union(merged, fc.features[i]);
                            const 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) } };
                    }
                    const 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 } });
                    }

                    const featureNames = sindhFeatures.map(function(f) { return f.properties.name; });
                    const matchExpr = ['match', ['get', 'name']];
                    featureNames.forEach(function(name, i) { matchExpr.push(name, defaultPalette[i % defaultPalette.length]); });
                    matchExpr.push('#b0bec5');

                    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 } });

                    const tehsilPopup = new maplibregl.Popup({ closeButton: true, closeOnClick: false });
                    map.on('mousemove', 'sindh-fill', function(e) {
                        map.getCanvas().style.cursor = 'pointer';
                        if (e.features.length > 0) {
                            const p = e.features[0].properties;
                            const name = p.name || 'Tehsil';
                            const district = (p.NAME_2) ? ' <span class="text-muted">(' + p.NAME_2 + ')</span>' : '';
                            tehsilPopup.setLngLat(e.lngLat).setHTML('<strong>' + name + '</strong>' + district).addTo(map);
                        }
                    });
                    map.on('mouseleave', 'sindh-fill', function() {
                        map.getCanvas().style.cursor = '';
                        tehsilPopup.remove();
                    });

                    addProjectMarkers(map, projects);
                })
                .catch(function(err) { console.error('Failed to load Sindh GeoJSON:', err); });
        });
    });
})();
</script>
@endpush