@extends('layouts.app')

@section('title', 'Devices')

@section('content')
<x-page-header title="Devices" subtitle="Registered phones and sync status" icon="devices" icon-color="emerald">
    @if (auth()->user()->hasAction('devices.codes_manage') || auth()->user()->hasAction('devices.register') || auth()->user()->isAdmin())
        <x-slot:actions>
            @if (auth()->user()->hasAction('devices.register'))
                <a href="{{ route('devices.register') }}" class="btn-secondary btn-sm">
                    <x-icon name="shield" class="w-4 h-4" />
                    Manual Setup
                </a>
            @endif
            @if (auth()->user()->hasPage('devices_codes'))
                <a href="{{ route('devices.codes') }}" class="btn-secondary btn-sm">
                    <x-icon name="qr-code" class="w-4 h-4" />
                    Codes
                </a>
            @endif
            @if (auth()->user()->hasAction('devices.codes_manage'))
                <a href="{{ route('devices.create') }}" class="btn-primary btn-sm">
                    <x-icon name="plus" class="w-4 h-4" />
                    Create Device
                </a>
            @endif
        </x-slot:actions>
    @endif
</x-page-header>

@if (session('registered_device'))
    @php $cred = session('registered_device'); @endphp
    <div class="glass-card border-amber-500/30 bg-gradient-to-br from-amber-500/10 to-orange-500/5 p-5 mb-6 animate-fade-in">
        <div class="flex items-start gap-3 mb-4">
            <div class="icon-box-amber animate-icon-pulse shrink-0">
                <x-icon name="shield" class="w-5 h-5" />
            </div>
            <div>
                <h3 class="font-semibold text-amber-200">Save these credentials — shown once</h3>
                <p class="text-sm text-amber-100/70 mt-1">Enter in the Android app for <strong>{{ $cred['device_name'] }}</strong></p>
            </div>
        </div>
        <dl class="space-y-3 text-sm">
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Device ID</dt>
                <dd class="font-mono glass-card-subtle px-3 py-2.5 select-all text-xs sm:text-sm">{{ $cred['device_uid'] }}</dd>
            </div>
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">API Token</dt>
                <dd class="font-mono glass-card-subtle px-3 py-2.5 break-all select-all text-xs">{{ $cred['api_token'] }}</dd>
            </div>
            @if (!empty($cred['signing_secret']))
                <div>
                    <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Signing Secret</dt>
                    <dd class="font-mono glass-card-subtle px-3 py-2.5 break-all select-all text-xs">{{ $cred['signing_secret'] }}</dd>
                </div>
            @endif
        </dl>
    </div>
@endif

@if (session('provisioned_device'))
    @php $provision = session('provisioned_device'); @endphp
    <div class="glass-card border-teal-600/30 bg-gradient-to-br from-teal-600/10 to-teal-500/5 p-5 mb-6 animate-fade-in">
        <div class="flex items-start gap-3 mb-4">
            <div class="icon-box-indigo animate-icon-pulse shrink-0">
                <x-icon name="qr-code" class="w-5 h-5" />
            </div>
            <div>
                <h3 class="font-semibold text-teal-700">Device created — share with the mobile app</h3>
                <p class="text-sm text-teal-700/70 mt-1">Enter the device name and registration code in the Android or iOS app.</p>
            </div>
        </div>
        <dl class="space-y-3 text-sm">
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Device Name</dt>
                <dd class="font-mono glass-card-subtle px-3 py-2.5 select-all">{{ $provision['device_name'] }}</dd>
            </div>
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Device ID</dt>
                <dd class="font-mono glass-card-subtle px-3 py-2.5 select-all text-xs sm:text-sm">{{ $provision['device_uid'] }}</dd>
            </div>
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Registration Code</dt>
                <dd class="font-mono glass-card-subtle px-3 py-2.5 select-all text-lg tracking-widest text-teal-600">{{ $provision['registration_code'] }}</dd>
            </div>
            <div>
                <dt class="text-slate-400 mb-1 text-xs uppercase tracking-wide">Code Expires</dt>
                <dd class="text-slate-300">{{ $provision['expires_at'] }}</dd>
            </div>
        </dl>
    </div>
@endif

<div class="table-wrap">
    <div class="overflow-x-auto md:overflow-visible">
        <table class="data-table responsive-table">
            <thead>
                <tr>
                    <th>Device</th>
                    <th>ID</th>
                    <th>User</th>
                    <th>Status</th>
                    <th>Last Sync</th>
                    <th>Battery</th>
                    <th>SIM</th>
                    <th>Network</th>
                    <th>Code</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($devices as $device)
                    <tr>
                        <td data-label="Device" class="font-medium">{{ $device->device_name }}</td>
                        <td data-label="ID" class="font-mono text-xs break-all">{{ $device->device_uid }}</td>
                        <td data-label="User">{{ $device->user?->name ?? 'Unassigned' }}</td>
                        <td data-label="Status">
                            @if ($device->isPending())
                                <span class="badge-warning">Pending setup</span>
                            @else
                                <span class="{{ $device->isOnline() ? 'badge-success' : 'badge-neutral' }}">
                                    {{ $device->isOnline() ? 'Online' : 'Offline' }}
                                </span>
                            @endif
                        </td>
                        <td data-label="Last Sync" class="text-slate-400">{{ $device->last_seen?->diffForHumans() ?? 'Never' }}</td>
                        <td data-label="Battery">
                            @if ($device->battery_level !== null)
                                <span class="inline-flex items-center gap-1">
                                    <x-icon name="battery" class="w-4 h-4 text-emerald-400" />
                                    {{ $device->battery_level }}%
                                </span>
                            @else
                                —
                            @endif
                        </td>
                        <td data-label="SIM" class="text-slate-400">{{ $device->sim_slot ?? '—' }}</td>
                        <td data-label="Network" class="text-slate-400 capitalize">{{ $device->network_type ?? '—' }}</td>
                        <td data-label="Code" class="font-mono text-xs">
                            @if ($device->isPending())
                                @php $activeCode = $device->activeRegistrationCode(); @endphp
                                @if ($activeCode)
                                    <span class="text-teal-600 tracking-wider">{{ $activeCode->code }}</span>
                                @else
                                    <span class="text-slate-500">Expired</span>
                                @endif
                            @else
                                —
                            @endif
                        </td>
                        <td data-label="" class="td-actions">
                            @if (auth()->user()->canManageUsers())
                                <a href="{{ route('devices.edit', $device) }}" class="btn-ghost btn-sm text-teal-600">
                                    <x-icon name="edit" class="w-4 h-4" />
                                    Edit
                                </a>
                            @endif
                            @if (auth()->user()->hasAction('devices.register'))
                                <form method="POST" action="{{ route('devices.destroy', $device) }}" class="inline" onsubmit="return confirm('Delete this device and all its messages?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-danger btn-sm">
                                        <x-icon name="trash" class="w-4 h-4" />
                                        Delete
                                    </button>
                                </form>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="!block text-center py-12 text-slate-500">
                            <x-icon name="devices" class="w-10 h-10 mx-auto mb-2 opacity-40 animate-icon-float" />
                            No devices registered yet.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection