@section('title', __('Central de Operações'))
<div wire:poll.15s>
    <x-baseview title="{{ __('Central de Operações') }}">

        @if (!$temMotoristas)
            <div class="p-10 mt-6 text-center bg-white border rounded-lg">
                <p class="font-semibold text-gray-600">{{ __('Nenhum módulo com motoristas está ativo.') }}</p>
                <p class="mt-1 text-sm text-gray-400">{{ __('Ative um módulo na tela Módulos para acompanhar a operação aqui.') }}</p>
            </div>
        @else
            {{-- ============ régua de KPIs do dia (módulo mobilidade) ============ --}}
            @if ($kpis)
                <div class="grid grid-cols-3 gap-3 mt-4 lg:grid-cols-6">
                    @foreach ([
                        ['t' => __('Corridas hoje'), 'v' => $kpis['corridasHoje'], 'c' => '#111827'],
                        ['t' => __('Em andamento'), 'v' => $kpis['emAndamento'], 'c' => '#2563eb'],
                        ['t' => __('Motoristas online'), 'v' => $kpis['motoristasOnline'], 'c' => '#059669'],
                        ['t' => __('Cancelamento'), 'v' => $kpis['taxaCancel'] . '%', 'c' => $kpis['taxaCancel'] > 20 ? '#dc2626' : '#6b7280'],
                        ['t' => __('Canceladas'), 'v' => $kpis['canceladasHoje'], 'c' => '#b45309'],
                        ['t' => __('Receita hoje'), 'v' => 'R$ ' . number_format($kpis['receitaHoje'], 2, ',', '.'), 'c' => '#047857'],
                    ] as $k)
                        <div class="px-3 py-2 bg-white border rounded-lg">
                            <p class="text-lg font-bold" style="color:{{ $k['c'] }}">{{ $k['v'] }}</p>
                            <p class="text-[11px] text-gray-500">{{ $k['t'] }}</p>
                        </div>
                    @endforeach
                </div>
            @endif

            <div class="grid gap-4 mt-4 lg:grid-cols-3">
                {{-- ==================== mapa (2/3) ==================== --}}
                <div class="lg:col-span-2 bg-white border rounded-lg overflow-hidden">
                    <div class="flex items-center justify-between px-3 py-2 border-b">
                        <p class="text-sm font-bold text-gray-700">{{ __('Mapa da operação') }}</p>
                        <div class="flex items-center gap-3 text-[11px] text-gray-500">
                            <span><i style="display:inline-block;width:9px;height:9px;border-radius:9999px;background:#059669"></i> {{ __('Online') }}</span>
                            <span><i style="display:inline-block;width:9px;height:9px;border-radius:9999px;background:#2563eb"></i> {{ __('Em corrida') }}</span>
                            <span><i style="display:inline-block;width:9px;height:9px;border-radius:9999px;background:#9ca3af"></i> {{ __('Parado (5 a 30 min)') }}</span>
                        </div>
                    </div>
                    <div id="ops-map" style="height:62vh;min-height:420px" wire:ignore></div>
                </div>

                {{-- ==================== coluna de ação (1/3) ==================== --}}
                <div class="space-y-3">
                    {{-- fila precisa de você --}}
                    <div class="p-3 bg-white border rounded-lg">
                        <p class="text-sm font-bold text-gray-700">{{ __('Precisa de você') }}</p>
                        @forelse ($alertas as $item)
                            <a href="{{ $item['rota'] }}"
                                class="flex items-center justify-between px-2 py-2 mt-2 rounded-md {{ $item['nivel'] === 'critico' ? 'bg-red-50 hover:bg-red-100' : 'bg-yellow-50 hover:bg-yellow-100' }}">
                                <span class="text-xs {{ $item['nivel'] === 'critico' ? 'text-red-800 font-semibold' : 'text-yellow-800' }}">{{ $item['rotulo'] }}</span>
                                <span class="px-2 py-0.5 text-[11px] font-bold rounded-full {{ $item['nivel'] === 'critico' ? 'bg-red-600 text-white' : 'bg-yellow-500 text-white' }}">{{ $item['qtd'] }}</span>
                            </a>
                        @empty
                            <p class="mt-2 text-xs text-green-700 font-semibold">{{ __('Nada pendente. Operação em dia.') }}</p>
                        @endforelse
                    </div>

                    {{-- corridas em curso --}}
                    <div class="p-3 bg-white border rounded-lg">
                        <p class="text-sm font-bold text-gray-700">{{ __('Corridas em andamento') }} ({{ count($corridas) }})</p>
                        @forelse ($corridas as $c)
                            <button wire:click="abrirCorrida('{{ $c['code'] }}')"
                                class="block w-full px-2 py-2 mt-2 text-left rounded-md bg-gray-50 hover:bg-gray-100">
                                <p class="text-xs font-semibold text-gray-800">#{{ $c['code'] }}
                                    <span class="text-[10px] font-normal text-blue-700">· {{ $c['status'] }}</span></p>
                                <p class="text-[11px] text-gray-500">{{ $c['motorista'] ?? __('sem motorista') }} → {{ $c['passageiro'] }}</p>
                            </button>
                        @empty
                            <p class="mt-2 text-xs text-gray-400">{{ __('Nenhuma corrida em andamento agora.') }}</p>
                        @endforelse
                    </div>

                    {{-- motoristas no mapa --}}
                    <div class="p-3 bg-white border rounded-lg">
                        <p class="text-sm font-bold text-gray-700">{{ __('Motoristas no mapa') }} ({{ count($motoristas) }})</p>
                        @forelse ($motoristas as $m)
                            <a href="{{ route('drivers.profile', $m['id']) }}" target="_blank"
                                class="flex items-center justify-between px-2 py-1.5 mt-1 rounded-md hover:bg-gray-50">
                                <span class="flex items-center gap-2 text-xs text-gray-700">
                                    <i style="display:inline-block;width:8px;height:8px;border-radius:9999px;background:{{ ['online' => '#059669', 'corrida' => '#2563eb', 'parado' => '#9ca3af'][$m['estado']] }}"></i>
                                    {{ $m['nome'] }}
                                </span>
                                <span class="text-[10px] text-gray-400">{{ $m['visto'] }}</span>
                            </a>
                        @empty
                            <p class="mt-2 text-xs text-gray-400">{{ __('Nenhum motorista enviou posição nos últimos 30 min.') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- ============ painel da corrida (ações sem sair da Central) ============ --}}
            @if ($corridaDetalhe)
                <div style="position:fixed;top:56px;right:0;bottom:0;width:360px;max-width:92vw;background:#fff;border-left:1px solid #e4e9e8;box-shadow:-8px 0 24px rgba(16,24,40,.12);z-index:40;overflow-y:auto">
                    <div class="flex items-center justify-between px-3 py-2 border-b" style="background:#f8faf9">
                        <p class="text-sm font-bold text-gray-800">#{{ $corridaDetalhe->code }}
                            <span class="font-normal text-gray-400">· {{ $corridaDetalhe->status }}</span></p>
                        <span class="flex items-center gap-1">
                            <a href="{{ route('orders.details', ['code' => $corridaDetalhe->code]) }}" target="_blank"
                                class="text-xs" style="color:#15803d;text-decoration:underline">{{ __('Página completa') }}</a>
                            <button wire:click="fecharCorrida" style="border:0;background:none;color:#9ca3af;font-size:16px">✕</button>
                        </span>
                    </div>
                    <div class="p-3 space-y-3 text-sm">
                        <div>
                            <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Quem') }}</p>
                            <p>{{ __('Passageiro') }}: <b>{{ optional($corridaDetalhe->user)->name ?: '·' }}</b>
                                <span class="text-xs text-gray-400">{{ optional($corridaDetalhe->user)->phone }}</span></p>
                            <p>{{ __('Motorista') }}: <b>{{ optional($corridaDetalhe->driver)->name ?: __('sem motorista') }}</b>
                                <span class="text-xs text-gray-400">{{ optional($corridaDetalhe->driver)->phone }}</span></p>
                        </div>
                        <div>
                            <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Rota') }}</p>
                            <p class="text-xs text-gray-600">▲ {{ optional($corridaDetalhe->taxi_order)->pickup_address }}</p>
                            <p class="text-xs text-gray-600">▼ {{ optional($corridaDetalhe->taxi_order)->dropoff_address }}</p>
                        </div>
                        <div>
                            <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Linha do tempo') }}</p>
                            @foreach ($corridaDetalhe->statuses->sortBy('id') as $st)
                                <p class="text-xs text-gray-600">{{ $st->created_at->format('d/m H:i:s') }} · <b>{{ $st->name }}</b>
                                    @if ($st->reason)<span class="text-gray-400">· {{ $st->reason }}</span>@endif</p>
                            @endforeach
                        </div>
                        @if (!in_array($corridaDetalhe->status, ['delivered', 'cancelled', 'failed']))
                            @if (!$corridaDetalhe->driver_id)
                                <div class="p-2 border rounded-lg" style="background:#f8faf9">
                                    <p class="text-xs font-bold text-gray-500 uppercase">{{ __('Direcionar a um motorista online') }}</p>
                                    <select wire:model="atribuirId" class="w-full mt-1 text-sm border-gray-300 rounded-md">
                                        <option value="">{{ __('escolha...') }}</option>
                                        @foreach ($motoristasLivres as $m)
                                            <option value="{{ $m['id'] }}">{{ $m['nome'] }} ({{ $m['visto'] }})</option>
                                        @endforeach
                                    </select>
                                    <button wire:click="direcionar" class="w-full px-3 mt-2 text-sm font-bold text-white rounded-md"
                                        style="background:#1d4ed8;padding-top:7px;padding-bottom:7px">{{ __('Direcionar (ele confirma no app)') }}</button>
                                </div>
                            @endif
                            <div class="p-2 border rounded-lg" style="background:#fef2f2;border-color:#fecaca">
                                <p class="text-xs font-bold uppercase" style="color:#b91c1c">{{ __('Cancelar pela central') }}</p>
                                <textarea wire:model.defer="motivoCancel" rows="2"
                                    placeholder="{{ __('Motivo (o passageiro e o motorista recebem; fica gravado)') }}"
                                    class="w-full mt-1 text-sm border-gray-300 rounded-md"></textarea>
                                <button wire:click="cancelarCorrida" class="w-full px-3 mt-2 text-sm font-bold text-white rounded-md"
                                    style="background:#dc2626;padding-top:7px;padding-bottom:7px">{{ __('Cancelar corrida') }}</button>
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            {{-- dados para o mapa e para o som (reescritos a cada poll) --}}
            <script type="application/json" id="ops-data">@json(['motoristas' => $motoristas, 'sos' => $sosAbertos])</script>

            <div wire:ignore>
                <script>
                    (function () {
                        if (window.__opsInit) return;
                        window.__opsInit = true;

                        var mapa = null, marcadores = [], ultimoSos = null;
                        var CORES = { online: '#059669', corrida: '#2563eb', parado: '#9ca3af' };

                        function dados() {
                            try { return JSON.parse(document.getElementById('ops-data').textContent); }
                            catch (e) { return { motoristas: [], sos: 0 }; }
                        }

                        // beep de SOS sem arquivo de áudio: WebAudio puro
                        function beep() {
                            try {
                                var ctx = new (window.AudioContext || window.webkitAudioContext)();
                                var osc = ctx.createOscillator(), g = ctx.createGain();
                                osc.connect(g); g.connect(ctx.destination);
                                osc.frequency.value = 880; g.gain.value = 0.25;
                                osc.start();
                                setTimeout(function () { osc.frequency.value = 660; }, 180);
                                setTimeout(function () { osc.stop(); ctx.close(); }, 400);
                            } catch (e) { /* sem áudio, sem drama */ }
                        }

                        function desenhar() {
                            var d = dados();
                            if (!mapa) return;
                            marcadores.forEach(function (m) { m.setMap(null); });
                            marcadores = [];
                            d.motoristas.forEach(function (mt) {
                                var mk = new google.maps.Marker({
                                    position: { lat: mt.lat, lng: mt.lng },
                                    map: mapa,
                                    title: mt.nome + ' · ' + mt.estado,
                                    icon: {
                                        path: google.maps.SymbolPath.CIRCLE,
                                        scale: 8,
                                        fillColor: CORES[mt.estado] || '#9ca3af',
                                        fillOpacity: 1,
                                        strokeColor: '#ffffff',
                                        strokeWeight: 2
                                    }
                                });
                                marcadores.push(mk);
                            });

                            // SOS novo: som + título piscando
                            if (ultimoSos !== null && d.sos > ultimoSos) {
                                beep();
                                document.title = '🔴 SOS · ' + document.title.replace(/^🔴 SOS · /, '');
                            }
                            if (d.sos === 0) document.title = document.title.replace(/^🔴 SOS · /, '');
                            ultimoSos = d.sos;
                        }

                        window.__opsMapInit = function () {
                            var d = dados();
                            var centro = { lat: -19.9167, lng: -43.9345 }; // BH como padrão
                            if (d.motoristas.length) {
                                centro = { lat: d.motoristas[0].lat, lng: d.motoristas[0].lng };
                            }
                            mapa = new google.maps.Map(document.getElementById('ops-map'), {
                                center: centro, zoom: 12,
                                mapTypeControl: false, streetViewControl: false, fullscreenControl: true
                            });
                            desenhar();
                        };

                        // a cada atualização do Livewire (poll), redesenha com o JSON novo
                        document.addEventListener('livewire:load', function () {
                            if (window.Livewire && Livewire.hook) {
                                Livewire.hook('message.processed', function () { desenhar(); });
                            }
                        });
                    })();
                </script>
                <script async src="https://maps.googleapis.com/maps/api/js?key={{ $mapsKey }}&callback=__opsMapInit"></script>
            </div>
        @endif
    </x-baseview>
</div>