<x-app-layout title="Edit device">
    <div class="mx-auto max-w-lg space-y-4">
        <div>
            <a href="{{ route('care.devices.index') }}" class="text-sm text-slate-500 hover:text-slate-800">← Devices</a>
            <h1 class="mt-2 text-xl font-semibold text-slate-900">{{ $device->name }}</h1>
            <p class="mt-1 text-sm text-slate-500">{{ $connectionHint }}</p>
        </div>

        @if ($plainToken)
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950">
                <p class="font-medium">Device token (copy now)</p>
                <code class="mt-2 block break-all rounded-lg bg-white px-3 py-2 font-mono text-xs text-slate-800">{{ $plainToken }}</code>
                @if ($device->type === 'kiosk')
                    <p class="mt-2 text-xs text-amber-800">Kiosk URL:
                        <a class="font-medium underline" href="{{ route('care.kiosk.device', $plainToken) }}" target="_blank" rel="noopener">
                            {{ route('care.kiosk.device', $plainToken) }}
                        </a>
                    </p>
                @elseif ($device->type !== 'display')
                    <p class="mt-2 text-xs text-amber-800">Send as <code class="font-mono">X-Care-Device-Token</code> from the Care Device Agent.</p>
                @endif
            </div>
        @elseif ($kioskUrl)
            <div class="rounded-2xl border border-teal-200 bg-teal-50 px-4 py-3 text-sm text-teal-950">
                <p class="font-medium">Kiosk URL</p>
                <a class="mt-2 block break-all font-mono text-xs underline" href="{{ $kioskUrl }}" target="_blank" rel="noopener">{{ $kioskUrl }}</a>
            </div>
        @elseif ($displayPublicUrl)
            <div class="rounded-2xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-950">
                <p class="font-medium">Display board URL</p>
                <a class="mt-2 block break-all font-mono text-xs underline" href="{{ $displayPublicUrl }}" target="_blank" rel="noopener">{{ $displayPublicUrl }}</a>
                @if ($displayScreen)
                    <a href="{{ route('care.displays.show', $displayScreen) }}" class="mt-2 inline-block text-xs font-medium text-sky-800 underline">Manage waiting display</a>
                @endif
            </div>
        @elseif ($device->hasToken())
            <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <p>A device token is active (hash stored). Regenerate to rotate; the previous token stops working immediately.</p>
            </div>
        @endif

        <form method="POST" action="{{ route('care.devices.update', $device) }}" class="space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf @method('PUT')
            <div>
                <label class="block text-sm font-medium text-slate-700">Name</label>
                <input type="text" name="name" value="{{ old('name', $device->name) }}" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Type</label>
                <select name="type" required class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($deviceTypes as $value => $label)
                        @php
                            $needsPro = in_array($value, $agentTypes, true) || in_array($value, $queueDeviceTypes, true);
                            $allowed = ! $needsPro
                                || $device->type === $value
                                || ($value === 'kiosk' || $value === 'display' ? $hasQueueDevices : $hasAgentDevices);
                        @endphp
                        <option value="{{ $value }}" @selected(old('type', $device->type) === $value)
                                @disabled(! $allowed)>
                            {{ $label }}
                        </option>
                    @endforeach
                </select>
            </div>

            @if (! in_array($device->type, $queueDeviceTypes, true))
                <div>
                    <label class="block text-sm font-medium text-slate-700">Connection mode</label>
                    <select name="connection_mode" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                        @foreach ($connectionModes as $value => $label)
                            <option value="{{ $value }}" @selected(old('connection_mode', $device->connection_mode) === $value)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            @else
                <input type="hidden" name="connection_mode" value="{{ $device->connection_mode }}">
            @endif

            <div>
                <label class="block text-sm font-medium text-slate-700">Status</label>
                <select name="status" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($deviceStatuses as $value => $label)
                        <option value="{{ $value }}" @selected(old('status', $device->status) === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700">Branch</label>
                <select name="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    <option value="">All branches</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" @selected(old('branch_id', $device->branch_id) == $branch->id)>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            @if (in_array($device->type, $queueDeviceTypes, true))
                @php $selectedQueues = collect(old('queue_ids', $device->metadata['service_queue_ids'] ?? [])); @endphp
                <div class="space-y-2 border-t border-slate-100 pt-4">
                    <p class="text-sm font-medium text-slate-800">Service queues</p>
                    <div class="max-h-40 space-y-2 overflow-y-auto rounded-lg border border-slate-100 p-3">
                        @foreach ($queues as $queue)
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" name="queue_ids[]" value="{{ $queue->id }}"
                                       @checked($selectedQueues->contains($queue->id))
                                       class="rounded border-slate-300">
                                {{ $queue->name }}
                            </label>
                        @endforeach
                    </div>
                </div>
                @if ($device->type === 'kiosk')
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="collect_name" value="1" @checked(old('collect_name', $kioskSettings['collect_name'] ?? false)) class="rounded border-slate-300">
                        Collect visitor name
                    </label>
                    <label class="flex items-center gap-2 text-sm text-slate-700">
                        <input type="checkbox" name="collect_phone" value="1" @checked(old('collect_phone', $kioskSettings['collect_phone'] ?? false)) class="rounded border-slate-300">
                        Collect phone
                    </label>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Reset after (seconds)</label>
                        <input type="number" name="reset_seconds" min="5" max="120" value="{{ old('reset_seconds', $kioskSettings['reset_seconds'] ?? 15) }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Welcome message</label>
                        <input type="text" name="welcome_message" value="{{ old('welcome_message', $kioskSettings['welcome_message'] ?? '') }}" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    </div>
                @endif
                @if ($device->type === 'display')
                    <div>
                        <label class="block text-sm font-medium text-slate-700">Display layout</label>
                        <select name="layout" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                            @foreach ($layouts as $value => $label)
                                <option value="{{ $value }}" @selected(old('layout', $displayScreen?->layout ?? 'standard') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
            @endif

            <div class="flex gap-2">
                <button type="submit" class="btn-primary">Save</button>
                <a href="{{ route('care.devices.index') }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm text-slate-600">Cancel</a>
            </div>
        </form>

        <div class="flex flex-wrap gap-2">
            <form method="POST" action="{{ route('care.devices.token.regenerate', $device) }}">
                @csrf
                <button type="submit" class="rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">
                    {{ $device->hasToken() ? 'Regenerate token' : 'Issue token' }}
                </button>
            </form>
            @if ($device->hasToken())
                <form method="POST" action="{{ route('care.devices.token.revoke', $device) }}">
                    @csrf @method('DELETE')
                    <button type="submit" class="rounded-lg border border-rose-200 bg-white px-4 py-2 text-sm text-rose-700 hover:bg-rose-50">Revoke token</button>
                </form>
            @endif
            <form method="POST" action="{{ route('care.devices.destroy', $device) }}" onsubmit="return confirm('Remove this device?')">
                @csrf @method('DELETE')
                <button type="submit" class="rounded-lg border border-rose-200 bg-white px-4 py-2 text-sm text-rose-700 hover:bg-rose-50">Delete device</button>
            </form>
        </div>
    </div>
</x-app-layout>
