@extends('layouts.app')

@section('title', $state->name.' Live Traffic Map')

@php
    $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

@section('content')
<div class="page-head">
    <div>
        <h1 class="page-title">{{ $state->name }} Live Traffic Map</h1>
        <p class="page-subtitle">Traffic map focused on {{ $state->name }}. With a Google Maps browser key, this displays real road/highway traffic using the Google Traffic Layer.</p>
    </div>
    <div class="actions">
        <a class="btn secondary" href="{{ route('monitor.mapping') }}">Back to Traffic Index</a>
        <a class="btn" href="{{ route('monitor.franchise-zones', $state) }}">Open Province Zoning</a>
    </div>
</div>

<div class="grid grid-4">
    <div class="metric"><span>Province/Territory</span><strong>{{ $state->state_code }}</strong></div>
    <div class="metric"><span>Saved Traffic Level</span><strong style="text-transform:capitalize;">{{ $state->traffic_level }}</strong></div>
    <div class="metric"><span>Latitude</span><strong>{{ number_format($state->latitude, 3) }}</strong></div>
    <div class="metric"><span>Longitude</span><strong>{{ number_format($state->longitude, 3) }}</strong></div>
</div>

<div class="card">
    <div id="trafficMap" class="map-box"></div>
    <p class="help">
        {{ $googleMapsKey ? 'Live Google Traffic Layer is enabled. Zoom into highways and city roads to see current traffic movement and congestion.' : 'Google traffic key is not configured, so this fallback only shows saved database traffic status. Add GOOGLE_MAPS_BROWSER_KEY for live highway traffic.' }}
    </p>
</div>
@endsection

@if($googleMapsKey)
    @push('scripts')
    <script>
        window.initProvinceTrafficMap = function () {
            const state = @json($state);
            const allStates = @json($states);
            const trafficColours = { low: '#16a34a', medium: '#f97316', high: '#dc2626', critical: '#7c3aed' };
            const selectedPoint = { lat: Number(state.latitude), lng: Number(state.longitude) };

            const map = new google.maps.Map(document.getElementById('trafficMap'), {
                center: selectedPoint,
                zoom: Number(state.zoom_level || 8),
                mapTypeId: 'roadmap',
                gestureHandling: 'greedy',
                fullscreenControl: true,
                streetViewControl: true,
                mapTypeControl: true,
            });

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

            const info = new google.maps.InfoWindow();
            allStates.forEach((item) => {
                const point = { lat: Number(item.latitude), lng: Number(item.longitude) };
                const colour = trafficColours[item.traffic_level] || '#2563eb';
                const selected = item.slug === state.slug;
                const marker = new google.maps.Marker({
                    position: point,
                    map,
                    title: item.name,
                    opacity: selected ? 1 : 0.65,
                });

                marker.addListener('click', () => {
                    info.setContent(`<strong>${item.name}</strong><br>Saved traffic status: ${item.traffic_level}<br>${item.traffic_summary || 'Traffic monitoring point'}`);
                    info.open(map, marker);
                });

                new google.maps.Circle({
                    map,
                    center: point,
                    radius: selected ? 45000 : 22000,
                    strokeColor: colour,
                    strokeOpacity: selected ? 0.9 : 0.55,
                    strokeWeight: selected ? 3 : 1,
                    fillColor: colour,
                    fillOpacity: selected ? 0.10 : 0.035,
                });
            });

            const selectedMarker = new google.maps.Marker({
                position: selectedPoint,
                map,
                title: state.name,
            });
            info.setContent(`<strong>${state.name}</strong><br>${state.traffic_summary || 'Live traffic monitoring point'}`);
            info.open(map, selectedMarker);
        };
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ $googleMapsKey }}&callback=initProvinceTrafficMap"></script>
    @endpush
@else
    @push('scripts')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        const state = @json($state);
        const allStates = @json($states);
        const trafficColours = { low: '#16a34a', medium: '#f97316', high: '#dc2626', critical: '#7c3aed' };

        const map = L.map('trafficMap').setView([state.latitude, state.longitude], state.zoom_level || 8);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        allStates.forEach(item => {
            const colour = trafficColours[item.traffic_level] || '#2563eb';
            const radius = item.slug === state.slug ? 26000 : 14000;
            L.circleMarker([item.latitude, item.longitude], {
                radius: item.slug === state.slug ? 13 : 8,
                color: colour,
                fillColor: colour,
                fillOpacity: item.slug === state.slug ? 0.75 : 0.45,
                weight: item.slug === state.slug ? 4 : 2
            }).addTo(map).bindPopup(`<strong>${item.name}</strong><br>Saved traffic: ${item.traffic_level}`);

            L.circle([item.latitude, item.longitude], {
                radius: radius,
                color: colour,
                fillColor: colour,
                fillOpacity: item.slug === state.slug ? 0.10 : 0.035,
                weight: 1
            }).addTo(map);
        });

        L.marker([state.latitude, state.longitude]).addTo(map)
            .bindPopup(`<strong>${state.name}</strong><br>${state.traffic_summary || 'Traffic monitoring point'}`)
            .openPopup();
    </script>
    @endpush
@endif