@extends('crm.master.master')
@section('content')
    <style>
        #map {
            height: 90vh;
            width: 100%;
        }
    </style>

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mt-2">
                <div class="col-lg-6">
                    <div class="page-title"><i class="fas fa-street-view m-2"></i> Mapa de Eleitores</div>
                </div>
                <div class="col-lg-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('crm.dashboard') }}">Painel de Controle</a></li>
                        <li class="breadcrumb-item active">Mapa de Eleitores</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <div class="content">
        @if (isset($message))
            <div class="alert alert-warning text-center">
                {{ $message }}
            </div>
        @else
            <div class="row">
                <div class="card-body">
                    <div class="col-md-12">
                        <div class="card text-uppercase">

                            {{-- FILTROS --}}
                            <div
                                style="padding:10px;background:#f8f9fa;border-bottom:1px solid #ddd;display:flex;gap:10px;flex-wrap:wrap">
                                <select id="filterCity" class="form-control text-uppercase" style="width:220px">
                                    <option value="">Todas as cidades</option>
                                </select>

                                <select id="filterDistrict" class="form-control text-uppercase" style="width:220px">
                                    <option value="">Todos os bairros</option>
                                </select>

                                <button id="resetFilter" class="btn btn-primary btn-sm">
                                    Limpar filtros
                                </button>
                            </div>

                            <div id="map"></div>

                            <script>
                                const voters = @json($geoData);

                                let map;
                                let markers = [];
                                let cluster;

                                // ================================
                                // NORMALIZA TEXTO
                                // ================================
                                function normalizeText(text) {
                                    if (!text) return '';
                                    return text.toString().trim().toLowerCase()
                                        .normalize("NFD")
                                        .replace(/[\u0300-\u036f]/g, "");
                                }

                                // ================================
                                // INIT MAP
                                // ================================
                                function initMap() {

                                    const cityGroups = {};
                                    const districtGroups = {};

                                    voters.forEach(v => {
                                        if (!v.latitude || !v.longitude) return;

                                        if (v.city) {
                                            const key = normalizeText(v.city);
                                            cityGroups[key] ??= {
                                                label: v.city,
                                                items: []
                                            };
                                            cityGroups[key].items.push(v);
                                        }

                                        if (v.district) {
                                            const key = normalizeText(v.district);
                                            districtGroups[key] ??= {
                                                label: v.district,
                                                items: []
                                            };
                                            districtGroups[key].items.push(v);
                                        }
                                    });

                                    // =======================================
                                    // CENTRALIZAÇÃO POR MAIOR DENSIDADE REAL
                                    // =======================================
                                    let mainGroup = null;
                                    let maxPoints = 0;

                                    for (const key in cityGroups) {
                                        if (cityGroups[key].items.length > maxPoints) {
                                            maxPoints = cityGroups[key].items.length;
                                            mainGroup = cityGroups[key];
                                        }
                                    }

                                    if (!mainGroup) {
                                        mainGroup = {
                                            items: voters.filter(v => v.latitude && v.longitude)
                                        };
                                    }

                                    const mainBounds = new google.maps.LatLngBounds();

                                    mainGroup.items.forEach(v => {
                                        if (!v.latitude || !v.longitude) return;
                                        mainBounds.extend({
                                            lat: parseFloat(v.latitude),
                                            lng: parseFloat(v.longitude)
                                        });
                                    });

                                    // ===== MAPA =====
                                    map = new google.maps.Map(document.getElementById("map"), {
                                        center: {
                                            lat: -23.55052,
                                            lng: -46.633308
                                        },
                                        zoom: 10,
                                        zoomControl: true,
                                        mapTypeControl: true,
                                        streetViewControl: true,
                                        fullscreenControl: true,
                                    });

                                    // aplica zoom na região dominante
                                    if (!mainBounds.isEmpty()) {
                                        map.fitBounds(mainBounds);

                                        const listener = google.maps.event.addListener(map, "idle", function() {
                                            if (map.getZoom() > 14) map.setZoom(14);
                                            google.maps.event.removeListener(listener);
                                        });
                                    }

                                    buildFilters(cityGroups, districtGroups);
                                    renderMarkers(voters);
                                }

                                // ================================
                                // FILTROS
                                // ================================
                                function buildFilters(cityGroups, districtGroups) {
                                    const citySelect = document.getElementById("filterCity");
                                    const districtSelect = document.getElementById("filterDistrict");

                                    Object.keys(cityGroups).sort().forEach(key => {
                                        const g = cityGroups[key];
                                        citySelect.innerHTML += `<option value="${key}">${g.label} (${g.items.length})</option>`;
                                    });

                                    Object.keys(districtGroups).sort().forEach(key => {
                                        const g = districtGroups[key];
                                        districtSelect.innerHTML += `<option value="${key}">${g.label}</option>`;
                                    });

                                    citySelect.addEventListener("change", applyFilters);
                                    districtSelect.addEventListener("change", applyFilters);

                                    document.getElementById("resetFilter").addEventListener("click", () => {
                                        citySelect.value = "";
                                        districtSelect.value = "";
                                        applyFilters();
                                    });
                                }

                                function applyFilters() {
                                    const city = document.getElementById("filterCity").value;
                                    const district = document.getElementById("filterDistrict").value;

                                    const filtered = voters.filter(v =>
                                        (!city || normalizeText(v.city) === city) &&
                                        (!district || normalizeText(v.district) === district)
                                    );

                                    renderMarkers(filtered, true);
                                }

                                // ================================
                                // MARKERS + CLUSTER
                                // ================================
                                function renderMarkers(data, useFitBounds = false) {

                                    markers.forEach(m => m.setMap(null));
                                    markers = [];

                                    if (cluster) cluster.clearMarkers();

                                    const bounds = new google.maps.LatLngBounds();

                                    data.forEach(voter => {
                                        if (!voter.latitude || !voter.longitude) return;

                                        const jitter = 0.00005;
                                        const lat = parseFloat(voter.latitude) + (Math.random() - 0.5) * jitter;
                                        const lng = parseFloat(voter.longitude) + (Math.random() - 0.5) * jitter;

                                        const position = {
                                            lat,
                                            lng
                                        };

                                        const marker = new google.maps.Marker({
                                            position,
                                            title: voter.name,
                                            map
                                        });

                                        const infoWindow = new google.maps.InfoWindow({
                                            content: `
                    <div style="min-width:240px;font-size:14px">
                        <strong>${voter.name}</strong><br>
                        <strong>ID:</strong> ${voter.id}<br>
                        ${voter.phone ? `<strong>Telefone:</strong> ${voter.phone}<br>` : ''}
                        ${voter.street ? `<strong>Endereço:</strong> ${voter.street}, ${voter.number ?? ''}<br>` : ''}
                        ${voter.city ? `<strong>Cidade:</strong> ${voter.city} - ${voter.state}<br>` : ''}
                        <br>
                        <a href="${voter.link}" target="_blank" class="btn btn-primary btn-sm">
                            Abrir cadastro
                        </a>
                    </div>
                `
                                        });

                                        marker.addListener("click", () => infoWindow.open(map, marker));

                                        markers.push(marker);
                                        bounds.extend(position);
                                    });

                                    cluster = new markerClusterer.MarkerClusterer({
                                        map,
                                        markers,
                                    });

                                    // fitBounds apenas quando filtros forem aplicados
                                    if (useFitBounds && markers.length > 0) {
                                        map.fitBounds(bounds);
                                    }
                                }
                            </script>

                            <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
                            <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&callback=initMap" async defer>
                            </script>

                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection