@php
    use App\Services\AppsPageService;
    $stats = $pageData['stats'] ?? [];
    $events = $pageData['events'] ?? collect();
    $apps = $pageData['apps'] ?? collect();
    $foreground = $pageData['foreground'] ?? 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">{{ __('devices.apps.title') }}</p>
    <p class="mt-1 text-xs text-slate-600">{{ __('devices.apps.hint') }}</p>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,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-indigo-600">{{ $stats['total'] ?? 0 }}</p>
        <p class="text-xs text-gray-500 mt-1">Total</p>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-3 text-center">
        <p class="text-xl font-semibold text-green-600">{{ $stats['user'] ?? 0 }}</p>
        <p class="text-xs text-gray-500 mt-1">Usuario</p>
    </div>
    <div class="rounded-lg border border-gray-200 bg-white p-3 text-center">
        <p class="text-xl font-semibold text-gray-600">{{ $stats['events_today'] ?? 0 }}</p>
        <p class="text-xs text-gray-500 mt-1">Eventos hoy</p>
    </div>
</div>

@if($foreground)
    <div class="rounded-lg border-2 border-indigo-200 bg-indigo-50 px-4 py-3 mb-6 text-sm">
        <span class="text-indigo-800 font-medium">{{ __('devices.apps.foreground') }}</span>
        <span class="text-indigo-900 font-semibold">{{ $foreground->app_name ?? $foreground->package_name }}</span>
        <span class="text-xs text-indigo-600 font-mono ml-2">{{ $foreground->package_name }}</span>
    </div>
@endif

<h4 class="font-medium text-gray-800 mb-2">{{ __('devices.apps.events_title') }}</h4>
@if($events->isEmpty())
    <p class="text-sm text-gray-500 mb-8">{{ __('devices.apps.events_empty') }}</p>
@else
    <div class="overflow-x-auto mb-8 max-h-64 overflow-y-auto border border-gray-200 rounded-lg">
        <table class="min-w-full text-sm">
            <thead class="sticky top-0 bg-gray-50">
                <tr class="text-left text-xs text-gray-500 uppercase border-b">
                    <th class="py-2 px-3">Fecha</th>
                    <th class="py-2 px-3">Evento</th>
                    <th class="py-2 px-3">App</th>
                    <th class="py-2 px-3">Detalle</th>
                </tr>
            </thead>
            <tbody>
                @foreach($events as $ev)
                    <tr class="border-b border-gray-100">
                        <td class="py-2 px-3 text-xs text-gray-600 whitespace-nowrap">
                            @if($ev->event === 'closed' && $ev->ended_at)
                                {{ $ev->ended_at->timezone(config('app.timezone'))->format('d/m/Y H:i:s') }}
                            @else
                                {{ $ev->occurred_at->timezone(config('app.timezone'))->format('d/m/Y H:i:s') }}
                            @endif
                        </td>
                        <td class="py-2 px-3">
                            <span class="inline-block px-2 py-0.5 rounded text-xs border {{ AppsPageService::eventColor($ev->event) }}">
                                {{ AppsPageService::eventLabel($ev->event) }}
                            </span>
                        </td>
                        <td class="py-2 px-3">
                            <span class="font-medium">{{ $ev->app_name ?? '—' }}</span>
                            <span class="block text-xs font-mono text-gray-500">{{ $ev->package_name }}</span>
                        </td>
                        <td class="py-2 px-3 text-xs text-gray-600">
                            @if(in_array($ev->event, ['opened', 'closed']))
                                {{ AppsPageService::eventDetail($ev) }}
                            @elseif($ev->event === 'updated' && $ev->previous_version_name)
                                {{ $ev->previous_version_name }} → {{ $ev->version_name ?? '?' }}
                            @else
                                {{ $ev->version_name ?? '—' }}
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif

<h4 class="font-medium text-gray-800 mb-2">{{ __('devices.apps.inventory_title') }}</h4>
@if($apps->isEmpty())
    <p class="text-sm text-gray-500">{{ __('devices.apps.inventory_empty') }}</p>
@else
    <div class="overflow-x-auto border border-gray-200 rounded-lg">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="border-b border-gray-200 bg-gray-50 text-left text-xs text-gray-500 uppercase">
                    <th class="py-2 px-3">App</th>
                    <th class="py-2 px-3">Versión</th>
                    <th class="py-2 px-3">Último uso</th>
                    <th class="py-2 px-3">Hoy</th>
                    <th class="py-2 px-3">7 días</th>
                    <th class="py-2 px-3">Instalada</th>
                </tr>
            </thead>
            <tbody>
                @foreach($apps as $row)
                    @php $app = $row['app']; @endphp
                    <tr class="border-b border-gray-100 {{ $row['is_foreground'] ? 'bg-indigo-50' : '' }}">
                        <td class="py-2 px-3">
                            <span class="font-medium">{{ $app->app_name ?? '—' }}</span>
                            @if($row['is_foreground'])
                                <span class="ml-1 text-[10px] uppercase text-indigo-600 font-semibold">en uso</span>
                            @endif
                            <span class="block text-xs font-mono text-gray-500 truncate max-w-xs">{{ $app->package_name }}</span>
                            @if($app->is_system)
                                <span class="text-[10px] text-gray-400">sistema</span>
                            @endif
                        </td>
                        <td class="py-2 px-3 text-xs">{{ $app->version_name ?? '—' }}</td>
                        <td class="py-2 px-3 text-xs text-gray-600">{{ $row['last_used_label'] }}</td>
                        <td class="py-2 px-3 text-xs">{{ $row['time_today_label'] }}</td>
                        <td class="py-2 px-3 text-xs">{{ $row['time_week_label'] }}</td>
                        <td class="py-2 px-3 text-xs text-gray-600">
                            {{ $app->installed_at?->timezone(config('app.timezone'))->format('d/m/Y') ?? '—' }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($stats['usage_reported_at'] ?? null)
        <p class="text-xs text-gray-500 mt-2">
            {{ __('devices.apps.usage_updated') }}
            {{ $stats['usage_reported_at']->timezone(config('app.timezone'))->format('d/m/Y H:i:s') }}
        </p>
    @else
        <p class="text-xs text-amber-700 mt-2">{{ __('devices.apps.usage_missing') }}</p>
    @endif
@endif