@php
    use App\Services\WifiPageService;
    $connected = $pageData['connected'] ?? null;
    $available = $pageData['available'] ?? collect();
    $saved = $pageData['saved'] ?? collect();
    $stats = $pageData['stats'] ?? ['total' => 0, 'available_count' => 0, 'saved_count' => 0, 'last_scan' => null];
@endphp

<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 mb-4 text-sm text-slate-700">
    <p class="font-medium text-slate-900">WiFi en tiempo real</p>
    <p class="mt-1 text-xs text-slate-600">
        El móvil envía un informe al <strong>cambiar de red</strong>, al terminar un escaneo o al conectar/desconectar WiFi.
        @if($stats['last_scan'])
            Última actualización: {{ $stats['last_scan']->timezone(config('app.timezone'))->format('d/m/Y H:i:s') }}.
        @endif
    </p>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:20px">
    <div class="rounded-lg border border-gray-200 bg-white p-3 text-center">
        <p class="text-xl font-semibold text-green-600">{{ $connected ? '1' : '0' }}</p>
        <p class="text-xs text-gray-500 mt-1">Conectada</p>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-3 text-center">
        <p class="text-xl font-semibold text-indigo-600">{{ $stats['available_count'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Disponibles</p>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-3 text-center">
        <p class="text-xl font-semibold text-gray-800">{{ $stats['saved_count'] }}</p>
        <p class="text-xs text-gray-500 mt-1">Guardadas / usadas</p>
    </div>
</div>

{{-- 1. Red conectada --}}
<h4 class="font-medium text-gray-800 mb-2">Red conectada ahora</h4>
@if($connected && is_array($connected))
    <div class="rounded-lg border-2 border-green-200 bg-green-50 p-4 mb-8">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <p class="text-lg font-semibold text-gray-900">{{ WifiPageService::displaySsidFromRow($connected) }}</p>
                <p class="text-xs text-gray-600 font-mono mt-1">{{ $connected['BSSID'] ?? '—' }}</p>
            </div>
            <div class="text-right text-xs text-gray-600 space-y-1">
                <div><x-wifi-signal :row="$connected" /></div>
                @if($freq = WifiPageService::frequencyLabel($connected))
                    <div>{{ $freq }}</div>
                @endif
                @if($sec = WifiPageService::securityLabel($connected))
                    <div>{{ $sec }}</div>
                @endif
            </div>
        </div>
    </div>
@else
    <p class="text-sm text-gray-500 mb-8">No hay red WiFi conectada en el último informe del dispositivo.</p>
@endif

{{-- 2. Redes disponibles --}}
<h4 class="font-medium text-gray-800 mb-2">Redes disponibles (último escaneo)</h4>
@if($available->isEmpty())
    <p class="text-sm text-gray-500 mb-8">No se detectaron redes cercanas. Activa WiFi en el móvil o espera al próximo cambio de red.</p>
@else
    <div class="overflow-x-auto mb-8">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 text-left text-xs text-gray-500 uppercase">
                    <th class="py-2 pr-4">SSID</th>
                    <th class="py-2 pr-4">BSSID</th>
                    <th class="py-2 pr-4">Señal</th>
                    <th class="py-2 pr-4">Banda</th>
                    <th class="py-2">Seguridad</th>
                </tr>
            </thead>
            <tbody>
                @foreach($available as $row)
                    <tr class="border-b border-gray-100">
                        <td class="py-2 pr-4 font-medium">{{ WifiPageService::displaySsidFromRow($row) }}</td>
                        <td class="py-2 pr-4 font-mono text-xs text-gray-600">{{ $row['BSSID'] ?? '—' }}</td>
                        <td class="py-2 pr-4"><x-wifi-signal :row="$row" /></td>
                        <td class="py-2 pr-4 text-xs">{{ WifiPageService::frequencyLabel($row) ?? '—' }}</td>
                        <td class="py-2 text-xs">{{ WifiPageService::securityLabel($row) ?? '—' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

{{-- 3. Redes guardadas / histórico de conexión --}}
<h4 class="font-medium text-gray-800 mb-2">Redes guardadas en el dispositivo</h4>
<p class="text-xs text-gray-500 mb-3">Redes a las que el móvil se ha conectado alguna vez o que están guardadas en el sistema (según permisos del fabricante).</p>
@if($saved->isEmpty())
    <p class="text-sm text-gray-500 py-4">Aún no hay redes guardadas registradas.</p>
@else
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 text-left text-xs text-gray-500 uppercase">
                    <th class="py-2 pr-4">SSID</th>
                    <th class="py-2 pr-4">BSSID</th>
                    <th class="py-2 pr-4">Última señal</th>
                    <th class="py-2 pr-4">Primera vez</th>
                    <th class="py-2 pr-4">Última vez</th>
                    <th class="py-2">Origen</th>
                </tr>
            </thead>
            <tbody>
                @foreach($saved as $w)
                    <tr class="border-b border-gray-100 hover:bg-gray-50">
                        <td class="py-2 pr-4 font-medium">{{ WifiPageService::displaySsid($w) }}</td>
                        <td class="py-2 pr-4 font-mono text-xs text-gray-600">{{ $w->bssid ?? '—' }}</td>
                        <td class="py-2 pr-4"><x-wifi-signal :network="$w" /></td>
                        <td class="py-2 pr-4 text-xs text-gray-600 whitespace-nowrap">
                            {{ $w->first_seen_at?->timezone(config('app.timezone'))->format('d/m/Y H:i') ?? '—' }}
                        </td>
                        <td class="py-2 pr-4 text-xs text-gray-600 whitespace-nowrap">
                            {{ $w->last_seen_at?->timezone(config('app.timezone'))->format('d/m/Y H:i') ?? '—' }}
                        </td>
                        <td class="py-2 text-xs">
                            @if($w->saved_on_device && $w->ever_connected)
                                <span class="text-indigo-600">Sistema + conexión</span>
                            @elseif($w->saved_on_device)
                                <span class="text-slate-600">En el móvil</span>
                            @else
                                <span class="text-green-600">Conectada antes</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif