@section('title', __('Navigation Telemetry'))
<div>
    <x-baseview title="{{ __('Navigation Telemetry') }}">

        <div class="grid grid-cols-1 gap-4 mb-6 md:grid-cols-3 xl:grid-cols-7">
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-blue-600">{{ $todayTotal }}</div>
                <div class="text-sm text-gray-500">{{ __('Eventos hoje') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-red-600">{{ $todayErrors }}</div>
                <div class="text-sm text-gray-500">{{ __('Erros hoje') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-green-600">{{ $last24hUsers }}</div>
                <div class="text-sm text-gray-500">{{ __('Usuarios (24h)') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-purple-600">{{ $last24hDevices }}</div>
                <div class="text-sm text-gray-500">{{ __('Dispositivos (24h)') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-orange-600">{{ $last24hRateLimited }}</div>
                <div class="text-sm text-gray-500">{{ __('Rate limit (24h)') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-pink-600">{{ $last24hMobileIssues }}</div>
                <div class="text-sm text-gray-500">{{ __('Falha dados moveis (24h)') }}</div>
            </div>
            <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm">
                <div class="text-2xl font-bold text-yellow-700">{{ $last24hRegionBlocks }}</div>
                <div class="text-sm text-gray-500">{{ __('Possivel bloqueio regiao (24h)') }}</div>
            </div>
        </div>

        @if($beNoMobileAlert || $tokenStaleLast24h > 0)
            <div class="p-4 mb-4 bg-white border border-amber-200 rounded-lg shadow-sm">
                <h3 class="text-base font-semibold text-amber-800">{{ __('Alertas operacionais') }}</h3>
                <p class="mt-1 text-sm text-gray-600">
                    {{ __('Sinais de risco detectados automaticamente para acelerar diagnostico sem atualizar o app.') }}
                </p>

                <div class="grid grid-cols-1 gap-3 mt-3 lg:grid-cols-2">
                    @if($beNoMobileAlert)
                        <div class="p-3 border border-red-200 rounded-lg bg-red-50">
                            <div class="text-sm font-semibold text-red-800">
                                {{ __('BE sem trafego em dados moveis') }}
                            </div>
                            <div class="mt-1 text-sm text-red-700">
                                {{ __('Janela') }}: {{ $beMobileWatchHours }}h |
                                {{ __('Mobile') }}: {{ $beWatchMobile }} |
                                {{ __('Wi-Fi') }}: {{ $beWatchWifi }} |
                                {{ __('Total') }}: {{ $beWatchTotal }}
                            </div>
                            <div class="mt-1 text-xs text-red-700">
                                {{ __('Acao: validar rota da operadora movel e comparar com o mesmo usuario em Wi-Fi.') }}
                            </div>
                        </div>
                    @endif

                    @if($tokenStaleLast24h > 0)
                        <div class="p-3 border border-amber-200 rounded-lg bg-amber-50">
                            <div class="text-sm font-semibold text-amber-800">
                                {{ __('Token stale detectado (24h)') }}: {{ $tokenStaleLast24h }}
                            </div>
                            <div class="mt-1 text-xs text-amber-800">{{ __('Top pais/operadora') }}</div>
                            <ul class="mt-1 space-y-1 text-xs text-amber-900">
                                @foreach($tokenStaleHotspots as $hotspot)
                                    <li>
                                        {{ $hotspot['country'] }} / {{ $hotspot['carrier'] }}: {{ $hotspot['total'] }}
                                    </li>
                                @endforeach
                            </ul>
                            <div class="mt-1 text-xs text-amber-700">
                                {{ __('Acao: monitorar recorrencia e limpar credencial em cache no proximo login.') }}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        <div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm">
            <h3 class="mb-3 text-lg font-semibold">{{ __('Filtros operacionais') }}</h3>
            <p class="mb-4 text-sm text-gray-500">
                {{ __('Use os filtros para separar falhas de app, rede movel, bloqueio por regiao e limite de requisicoes.') }}
            </p>

            <div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5">
                <div>
                    <x-label for="filterUser" title="{{ __('Usuario (ID/Nome/Email)') }}" />
                    <input type="text" wire:model.debounce.400ms="filterUser" id="filterUser"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg"
                        placeholder="{{ __('Ex: 15 ou john@email.com') }}">
                </div>

                <div>
                    <x-label for="filterDevice" title="{{ __('Device ID') }}" />
                    <input type="text" wire:model.debounce.400ms="filterDevice" id="filterDevice"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg"
                        placeholder="{{ __('Buscar device') }}">
                </div>

                <div>
                    <x-label for="filterEvent" title="{{ __('Evento') }}" />
                    <input type="text" wire:model.debounce.400ms="filterEvent" id="filterEvent"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg"
                        placeholder="{{ __('Ex: screen_view') }}">
                </div>

                <div>
                    <x-label for="filterScreen" title="{{ __('Tela') }}" />
                    <input type="text" wire:model.debounce.400ms="filterScreen" id="filterScreen"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg"
                        placeholder="{{ __('Ex: Home') }}">
                </div>

                <div>
                    <x-label for="filterSeverity" title="{{ __('Severidade') }}" />
                    <select wire:model="filterSeverity" id="filterSeverity"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($this->severityOptions as $severity)
                            <option value="{{ $severity }}">{{ strtoupper($severity) }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterDiagnosis" title="{{ __('Diagnostico') }}" />
                    <select wire:model="filterDiagnosis" id="filterDiagnosis"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($this->diagnosisOptions as $diagnosisCode => $diagnosisLabel)
                            <option value="{{ $diagnosisCode }}">{{ $diagnosisLabel }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterNetworkType" title="{{ __('Tipo de rede') }}" />
                    <select wire:model="filterNetworkType" id="filterNetworkType"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($this->networkTypeOptions as $networkType)
                            <option value="{{ $networkType }}">{{ strtoupper($networkType) }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterCountry" title="{{ __('Pais') }}" />
                    <select wire:model="filterCountry" id="filterCountry"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todos') }}</option>
                        @foreach($this->countryOptions as $country)
                            <option value="{{ $country }}">{{ $country }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterPlatform" title="{{ __('Plataforma') }}" />
                    <select wire:model="filterPlatform" id="filterPlatform"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($this->platformOptions as $platform)
                            <option value="{{ $platform }}">{{ $platform }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterAppVersion" title="{{ __('Versao App') }}" />
                    <select wire:model="filterAppVersion" id="filterAppVersion"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                        <option value="">{{ __('Todas') }}</option>
                        @foreach($this->versionOptions as $version)
                            <option value="{{ $version }}">{{ $version }}</option>
                        @endforeach
                    </select>
                </div>

                <div>
                    <x-label for="filterDateFrom" title="{{ __('Data inicial') }}" />
                    <input type="date" wire:model="filterDateFrom" id="filterDateFrom"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                </div>

                <div>
                    <x-label for="filterDateTo" title="{{ __('Data final') }}" />
                    <input type="date" wire:model="filterDateTo" id="filterDateTo"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg">
                </div>

                <div class="md:col-span-3 lg:col-span-2">
                    <x-label for="search" title="{{ __('Busca geral') }}" />
                    <input type="text" wire:model.debounce.400ms="search" id="search"
                        class="w-full px-3 py-2 bg-white border border-gray-300 rounded-lg"
                        placeholder="{{ __('Mensagem, rota, diagnostico, rede, pais...') }}">
                </div>
            </div>

            <div class="flex justify-end mt-4 space-x-2">
                <button wire:click="clearFilters"
                    class="px-4 py-2 text-white bg-gray-500 rounded-lg hover:bg-gray-600">
                    {{ __('Limpar filtros') }}
                </button>
                <button wire:click="exportCSV"
                    class="px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700">
                    {{ __('Exportar CSV') }}
                </button>
            </div>
        </div>

        <div class="overflow-x-auto bg-white border border-gray-200 rounded-lg shadow-sm">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Data/Hora') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Usuario') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Situacao') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Impacto e acao') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Tela/Rota') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Rede/Regiao') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('App/Dispositivo') }}</th>
                        <th class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">{{ __('Mensagem') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($events as $event)
                        @php($diagnosis = $this->diagnoseEvent($event))
                        @php($meta = is_array($event->metadata) ? $event->metadata : [])
                        <tr class="align-top odd:bg-white even:bg-gray-50/40 hover:bg-blue-50/40 {{ in_array($event->severity, ['error', 'critical']) ? 'bg-red-50/40' : '' }}">
                            <td class="px-4 py-4 text-sm whitespace-nowrap">
                                {{ optional($event->occurred_at)->format('Y-m-d H:i:s') ?? '-' }}
                                <br>
                                <span class="text-xs text-gray-500">{{ optional($event->occurred_at)->diffForHumans() }}</span>
                            </td>

                            <td class="px-4 py-4 text-sm">
                                @if($event->user)
                                    <div class="font-medium">#{{ $event->user_id }} {{ $event->user->name }}</div>
                                    <div class="text-xs text-gray-500">{{ $event->user->email }}</div>
                                @elseif($event->user_id)
                                    <div class="font-medium">#{{ $event->user_id }}</div>
                                    <div class="text-xs text-gray-500">{{ __('Registro de usuario indisponivel') }}</div>
                                @else
                                    <span class="text-xs text-gray-500">{{ __('Guest/Desconhecido') }}</span>
                                @endif
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[260px]">
                                <div class="flex flex-wrap items-center gap-1.5 mb-1">
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full
                                        {{ in_array($event->severity, ['error', 'critical']) ? 'text-red-800 bg-red-100' : '' }}
                                        {{ $event->severity === 'warning' ? 'text-yellow-800 bg-yellow-100' : '' }}
                                        {{ in_array($event->severity, ['info', 'debug']) ? 'text-blue-800 bg-blue-100' : '' }}
                                    ">
                                        {{ strtoupper($event->severity) }}
                                    </span>

                                    @if(!empty($event->status_code))
                                        <span class="px-2 py-1 text-xs font-semibold text-gray-700 bg-gray-100 rounded-full">
                                            HTTP {{ $event->status_code }}
                                        </span>
                                    @endif
                                </div>

                                <div class="font-semibold text-gray-800">
                                    {{ $diagnosis['title'] ?? __('Diagnostico nao classificado') }}
                                </div>
                                <div class="mt-1 text-xs text-gray-500">{{ $event->diagnosis_code ?? ($diagnosis['code'] ?? '-') }}</div>
                                <div class="mt-1 text-sm font-medium">{{ $event->event_name }}</div>
                                <div class="text-xs text-gray-500">{{ $event->event_type ?? '-' }}</div>
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[320px]">
                                <div class="mb-1 font-medium text-gray-700">{{ __('Impacto') }}</div>
                                <div class="text-sm text-gray-700">{{ $diagnosis['impact'] ?? '-' }}</div>

                                <div class="mt-3 mb-1 font-medium text-gray-700">{{ __('Acao recomendada') }}</div>
                                <div class="text-sm text-gray-700">{{ $diagnosis['action'] ?? '-' }}</div>
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[220px]">
                                <div class="font-medium">{{ $event->screen_name ?? '-' }}</div>
                                <div class="text-xs text-gray-500 break-all">{{ $event->route_name ?? '-' }}</div>
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[200px]">
                                <div>{{ strtoupper($event->network_type ?? '-') }}</div>
                                <div class="text-xs text-gray-500">{{ $event->network_carrier ?? '-' }}</div>
                                <div class="mt-1 text-xs text-gray-500">
                                    {{ __('Pais') }}: {{ $event->country_code ?? '-' }}
                                    @if(!empty($meta['ip_intel_country']))
                                        ({{ $meta['ip_intel_country'] }})
                                    @endif
                                </div>
                                @if(!empty($meta['ip_intel_city']) || !empty($meta['ip_intel_region']))
                                    <div class="text-xs text-gray-500">
                                        {{ __('Local aprox') }}:
                                        {{ $meta['ip_intel_city'] ?? '-' }}
                                        @if(!empty($meta['ip_intel_region']))
                                            / {{ $meta['ip_intel_region'] }}
                                        @endif
                                    </div>
                                @endif
                                @if(!empty($meta['marketing_locale']) || !empty($meta['marketing_utm_source']))
                                    <div class="text-xs text-gray-500">
                                        {{ __('Locale/Origem') }}:
                                        {{ $meta['marketing_locale'] ?? '-' }}
                                        @if(!empty($meta['marketing_utm_source']))
                                            | UTM: {{ $meta['marketing_utm_source'] }}
                                        @endif
                                    </div>
                                @endif
                                <div class="text-xs text-gray-500">
                                    {{ __('Sync') }}: {{ strtoupper($meta['sync_mode'] ?? 'live') }}
                                    @if(!empty($meta['captured_offline']))
                                        (offline > online)
                                    @endif
                                </div>
                                <div class="text-xs text-gray-500">IP: {{ $event->ip_address ?? '-' }}</div>
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[220px]">
                                <div>{{ $event->platform ?? '-' }} {{ $event->app_version ? 'v' . $event->app_version : '' }}</div>
                                <div class="text-xs text-gray-500">OS: {{ $event->os_version ?? '-' }}</div>
                                <div class="text-xs text-gray-500 break-all">{{ $event->device_id ?? '-' }}</div>
                            </td>

                            <td class="px-4 py-4 text-sm min-w-[340px]">
                                <div class="max-w-md break-words">{{ $event->message ?? '-' }}</div>

                                @if(!empty($event->metadata) || !empty($event->context))
                                    <details class="mt-2 text-xs text-gray-500">
                                        <summary>{{ __('Detalhe tecnico') }}</summary>
                                        @if(!empty($event->metadata))
                                            <pre class="p-2 mt-1 overflow-x-auto bg-gray-50 border border-gray-200 rounded">{{ json_encode($event->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                        @endif
                                        @if(!empty($event->context))
                                            <pre class="p-2 mt-1 overflow-x-auto bg-gray-50 border border-gray-200 rounded">{{ json_encode($event->context, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                        @endif
                                    </details>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-8 text-sm text-center text-gray-500">
                                {{ __('Nenhum evento de telemetria encontrado') }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            <div class="px-4 py-3">
                {{ $events->links() }}
            </div>
        </div>

    </x-baseview>
</div>