@extends('layouts.admin')

@section('title', 'Devices')
@section('page-title', 'Devices')

@section('content')
<div class="space-y-6">
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="GET" class="grid gap-4 lg:grid-cols-[1.8fr_1fr_auto]">
            <input type="text" name="q" value="{{ request('q') }}" placeholder="Device ID, model, or user email" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
            <select name="platform" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All platforms</option>
                @foreach(['android', 'ios', 'windows', 'linux', 'macos', 'web'] as $platform)
                    <option value="{{ $platform }}" @selected(request('platform') === $platform)>{{ strtoupper($platform) }}</option>
                @endforeach
            </select>
            <button type="submit" class="rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">Filter</button>
        </form>
    </section>

    <section class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-slate-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold">User</th>
                        <th class="px-6 py-4 font-semibold">Device</th>
                        <th class="px-6 py-4 font-semibold">Platform</th>
                        <th class="px-6 py-4 font-semibold">App Version</th>
                        <th class="px-6 py-4 font-semibold">Storage</th>
                        <th class="px-6 py-4 font-semibold">Last Sync</th>
                        <th class="px-6 py-4 font-semibold text-right">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($devices as $device)
                        <tr class="table-row-hover">
                            <td class="px-6 py-5">
                                <div class="font-semibold text-slate-900">{{ $device->user->name ?? 'Unknown user' }}</div>
                                <div class="text-xs text-slate-500">{{ $device->user->email ?? 'No email' }}</div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="font-semibold text-slate-900">{{ $device->model ?: 'Unknown model' }}</div>
                                <div class="text-xs text-slate-500">{{ $device->device_id }}</div>
                            </td>
                            <td class="px-6 py-5 text-slate-600">{{ strtoupper($device->platform ?: 'N/A') }}</td>
                            <td class="px-6 py-5 text-slate-600">{{ $device->app_version ?: 'N/A' }}</td>
                            <td class="px-6 py-5 text-slate-600">{{ number_format(($device->storage_used_bytes ?? 0) / 1048576, 2) }} MB</td>
                            <td class="px-6 py-5 text-slate-600">{{ $device->last_sync_at?->diffForHumans() ?? 'Never' }}</td>
                            <td class="px-6 py-5">
                                <div class="flex justify-end">
                                    @if($device->is_revoked)
                                        <span class="rounded-full px-3 py-1 text-xs font-semibold badge-banned">Revoked</span>
                                    @else
                                        <form method="POST" action="{{ route('admin.devices.revoke', $device) }}">
                                            @csrf
                                            <button type="submit" class="rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white transition hover:bg-slate-700">Revoke</button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-6 py-16 text-center text-sm text-slate-500">No devices found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-slate-200 px-6 py-4">{{ $devices->links() }}</div>
    </section>
</div>
@endsection