@php
    $states = collect($states ?? []);
    $defaultState = $defaultState ?? $states->firstWhere('slug', 'ontario') ?? $states->first();
    $mapId = $mapId ?? 'canadaTrafficMap';
    $trafficCounts = $trafficCounts ?? $states->groupBy('traffic_level')->map->count();
    $googleMapsKey = $googleMapsKey ?? config('services.google.maps_browser_key');
@endphp

@if(! $googleMapsKey)
    @push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    @endpush
@endif

<div class="grid grid-4">
    <div class="metric"><span>Provinces / Territories</span><strong>{{ $states->count() }}</strong></div>
    <div class="metric"><span>Low Traffic</span><strong>{{ $trafficCounts['low'] ?? 0 }}</strong></div>
    <div class="metric"><span>High Traffic</span><strong>{{ ($trafficCounts['high'] ?? 0) + ($trafficCounts['critical'] ?? 0) }}</strong></div>
    <div class="metric"><span>Live Layer</span><strong>{{ $googleMapsKey ? 'Google Traffic' : 'Database Only' }}</strong></div>
</div>

<div class="card">
    <div style="display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:flex-start; margin-bottom:14px;">
        <div>
            <h2 style="margin:0;">Canada Highway Traffic Map</h2>
            <p class="muted" style="margin:6px 0 0; max-width:900px; line-height:1.55;">
                This map keeps the Canadian province/territory overview and shows live road traffic when <code>GOOGLE_MAPS_BROWSER_KEY</code> is configured. Use each row below to open either the live traffic map or the province zoning page.
            </p>
        </div>
        <div class="actions">
            <a class="btn secondary" href="{{ route('monitor.index') }}">Province Zoning</a>
        </div>
    </div>

    <div id="{{ $mapId }}" class="map-box"></div>
    <p class="help">
        {{ $googleMapsKey ? 'Google Traffic Layer is enabled for real road/highway traffic conditions.' : 'Add GOOGLE_MAPS_BROWSER_KEY to enable live road/highway traffic. Until then, this falls back to saved database traffic status.' }}
    </p>
</div>

<div class="card">
    <h2 style="margin-top:0;">Province / Territory Traffic and Zoning</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Province / Territory</th>
                    <th>Traffic Level</th>
                    <th>Latitude</th>
                    <th>Longitude</th>
                    <th>Traffic Map</th>
                    <th>Zoning</th>
                </tr>
            </thead>
            <tbody>
                @foreach($states as $state)
                    <tr class="row-link" onclick="window.location='{{ route('monitor.traffic-map', $state) }}'">
                        <td><strong>{{ $state->name }}</strong><br><span class="muted">{{ $state->state_code }}</span></td>
                        <td><span class="badge {{ $state->traffic_level }}">{{ $state->traffic_level }}</span></td>
                        <td>{{ number_format($state->latitude, 5) }}</td>
                        <td>{{ number_format($state->longitude, 5) }}</td>
                        <td><a class="btn small" href="{{ route('monitor.traffic-map', $state) }}" onclick="event.stopPropagation();">Open Traffic</a></td>
                        <td><a class="btn small secondary" href="{{ route('monitor.franchise-zones', $state) }}" onclick="event.stopPropagation();">Open Zones</a></td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@if($googleMapsKey)
    @push('scripts')
    <script>
        window.initCanadaTrafficMap = function () {
            const mapElement = document.getElementById(@json($mapId));
            if (!mapElement || mapElement.dataset.loaded === '1') {
                return;
            }
            mapElement.dataset.loaded = '1';

            const provinces = @json($states->values());
            const defaultProvince = @json($defaultState);
            const trafficBaseUrl = @json(url('/monitor/provinces'));
            const canadaCentre = { lat: 56.1304, lng: -106.3468 };
            const centre = defaultProvince
                ? { lat: Number(defaultProvince.latitude), lng: Number(defaultProvince.longitude) }
                : canadaCentre;

            const map = new google.maps.Map(mapElement, {
                center: centre,
                zoom: defaultProvince ? 4 : 3,
                mapTypeId: 'roadmap',
                gestureHandling: 'greedy',
                fullscreenControl: true,
                streetViewControl: true,
                mapTypeControl: true,
            });

            new google.maps.TrafficLayer().setMap(map);

            const trafficColours = { low: '#16a34a', medium: '#f97316', high: '#dc2626', critical: '#7c3aed' };
            const bounds = new google.maps.LatLngBounds();
            const info = new google.maps.InfoWindow();

            provinces.forEach((province) => {
                const point = { lat: Number(province.latitude), lng: Number(province.longitude) };
                const colour = trafficColours[province.traffic_level] || '#2563eb';
                const marker = new google.maps.Marker({
                    position: point,
                    map,
                    title: province.name,
                });

                marker.addListener('click', () => {
                    info.setContent(`
                        <strong>${province.name}</strong><br>
                        Traffic status: ${province.traffic_level}<br>
                        <a href="${trafficBaseUrl}/${province.slug}/traffic-map">Open traffic map</a><br>
                        <a href="${trafficBaseUrl}/${province.slug}/franchise-zones">Open zoning</a>
                    `);
                    info.open(map, marker);
                });

                new google.maps.Circle({
                    map,
                    center: point,
                    radius: defaultProvince && province.slug === defaultProvince.slug ? 65000 : 38000,
                    strokeColor: colour,
                    strokeOpacity: 0.75,
                    strokeWeight: 1,
                    fillColor: colour,
                    fillOpacity: defaultProvince && province.slug === defaultProvince.slug ? 0.10 : 0.04,
                });

                bounds.extend(point);
            });

            if (provinces.length > 1) {
                map.fitBounds(bounds, 48);
            }
        };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $googleMapsKey }}&callback=initCanadaTrafficMap"></script>
    @endpush
@else
    @push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        (() => {
            const mapElement = document.getElementById(@json($mapId));
            if (!mapElement || mapElement.dataset.loaded === '1') {
                return;
            }
            mapElement.dataset.loaded = '1';

            const provinces = @json($states->values());
            const defaultProvince = @json($defaultState);
            const trafficColours = { low: '#16a34a', medium: '#f97316', high: '#dc2626', critical: '#7c3aed' };
            const trafficBaseUrl = @json(url('/monitor/provinces'));
            const canadaCentre = [56.1304, -106.3468];

            const map = L.map(mapElement).setView(
                defaultProvince ? [defaultProvince.latitude, defaultProvince.longitude] : canadaCentre,
                defaultProvince ? 4 : 3
            );

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

            const bounds = [];

            provinces.forEach((province) => {
                const colour = trafficColours[province.traffic_level] || '#2563eb';
                const point = [Number(province.latitude), Number(province.longitude)];
                const isDefault = defaultProvince && province.slug === defaultProvince.slug;

                L.circleMarker(point, {
                    radius: isDefault ? 13 : 9,
                    color: colour,
                    fillColor: colour,
                    fillOpacity: isDefault ? 0.78 : 0.55,
                    weight: isDefault ? 4 : 2
                }).addTo(map).bindPopup(
                    `<strong>${province.name}</strong><br>Traffic: ${province.traffic_level}<br><a href="${trafficBaseUrl}/${province.slug}/traffic-map">Open traffic map</a><br><a href="${trafficBaseUrl}/${province.slug}/franchise-zones">Open zoning</a>`
                );

                L.circle(point, {
                    radius: isDefault ? 55000 : 32000,
                    color: colour,
                    fillColor: colour,
                    fillOpacity: isDefault ? 0.10 : 0.04,
                    weight: 1
                }).addTo(map);

                bounds.push(point);
            });

            if (bounds.length) {
                map.fitBounds(bounds, { padding: [36, 36], maxZoom: 5 });
            }
        })();
    </script>
    @endpush
@endif