@php
    $q = $filters['q'] ?? '';
    $canReviewSubmissions = auth()->user()?->canAny(['review_internet_devices', 'review_stolen_submissions']) ?? false;
    $canDirectCreate = auth()->user()?->canAny(['create_internet_devices', 'create_stolen_devices']) ?? false;
    $canViewRecordOwnership = auth()->user()?->can('view_record_ownership') ?? false;
    $highlight = function (?string $text) use ($q): string {
        $value = e((string) $text);
        if ($q === '' || $value === '') {
            return $value;
        }

        return preg_replace('/(' . preg_quote($q, '/') . ')/i', '<mark class="bg-yellow-200 dark:bg-yellow-500/40 px-0.5">$1</mark>', $value) ?? $value;
    };
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-2xl font-semibold text-[var(--theme-text)]">
            {{ ($canGlobalScope ?? false) ? __('messages.all_records') : __('messages.my_records') }} - {{ __('messages.stolen_devices') }}
        </h2>
    </x-slot>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
        <form method="GET" action="{{ route('admin.stolen-devices.index') }}" class="theme-surface-panel p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-3">
            <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('messages.search_placeholder') }}" class="xl:col-span-2 rounded-lg theme-ring-brand">

            <select name="status" class="rounded-lg theme-ring-brand">
                <option value="">{{ __('messages.all_statuses') }}</option>
                @foreach ($statuses as $status)
                    <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>
                        {{ __('messages.status_'.$status) }}
                    </option>
                @endforeach
            </select>

            <select name="review_status" class="rounded-lg theme-ring-brand">
                <option value="">{{ __('messages.all_review_statuses') }}</option>
                @foreach ($reviewStatuses as $reviewStatus)
                    <option value="{{ $reviewStatus }}" @selected(($filters['review_status'] ?? '') === $reviewStatus)>
                        {{ __('messages.review_status_'.$reviewStatus) }}
                    </option>
                @endforeach
            </select>

            @if (($canGlobalScope ?? false) && isset($managers))
                <select name="created_by" class="rounded-lg theme-ring-brand">
                    <option value="">{{ __('messages.all_admins') }}</option>
                    @foreach ($managers as $manager)
                        <option value="{{ $manager->id }}" @selected(($filters['created_by'] ?? '') === (string) $manager->id)>
                            {{ $manager->name ?: $manager->username }}
                        </option>
                    @endforeach
                </select>
            @endif

            <select name="visible" class="rounded-lg theme-ring-brand">
                <option value="">{{ __('messages.visibility_all') }}</option>
                <option value="1" @selected(($filters['visible'] ?? '') === '1')>{{ __('messages.visible_only') }}</option>
                <option value="0" @selected(($filters['visible'] ?? '') === '0')>{{ __('messages.hidden_only') }}</option>
            </select>

            <select name="sort" class="rounded-lg theme-ring-brand">
                <option value="newest" @selected(($filters['sort'] ?? 'newest') === 'newest')>{{ __('messages.sort_newest') }}</option>
                <option value="oldest" @selected(($filters['sort'] ?? '') === 'oldest')>{{ __('messages.sort_oldest') }}</option>
                <option value="best" @selected(($filters['sort'] ?? '') === 'best')>{{ __('messages.sort_best') }}</option>
                <option value="name" @selected(($filters['sort'] ?? '') === 'name')>{{ __('messages.sort_name') }}</option>
            </select>

            <div class="flex flex-wrap items-center gap-2 xl:col-span-2">
                <button type="submit" class="px-4 py-2 rounded-lg theme-btn-primary text-sm font-medium">{{ __('messages.search') }}</button>
                <a href="{{ route('admin.stolen-devices.index') }}" class="px-4 py-2 rounded-lg border border-[var(--theme-border)] text-sm">{{ __('messages.reset') }}</a>
                @canany(['create_internet_devices', 'create_stolen_devices', 'submit_internet_device_requests', 'submit_stolen_submissions'])
                    <a href="{{ route('admin.stolen-devices.create') }}" class="px-4 py-2 rounded-lg theme-btn-primary text-sm font-medium">
                        {{ $canDirectCreate ? __('messages.add_device') : __('messages.submit_addition_request') }}
                    </a>
                @endcanany
            </div>

            <x-date-range-picker
                class="md:col-span-2 xl:col-span-2"
                :from="$filters['from'] ?? ''"
                :to="$filters['to'] ?? ''"
            />
        </form>

        <div class="hidden lg:block theme-surface-panel overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="theme-table-head">
                        <tr>
                            <th class="px-4 py-3 text-start">{{ __('messages.reference_number') }}</th>
                            @if ($canViewRecordOwnership)
                                <th class="px-4 py-3 text-start">{{ __('messages.record_owner') }}</th>
                            @endif
                            <th class="px-4 py-3 text-start">MAC</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.device_name') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.previous_ip') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.owner_phone') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.stolen_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.status') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.review_status') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.status_updated_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.visible') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.created_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($devices as $device)
                            <tr class="border-t border-[var(--theme-border)]">
                                <td class="px-4 py-3 font-mono text-xs">
                                    <div class="flex items-center gap-2">
                                        <span>{{ $device->reference_number ?? ('#'.$device->id) }}</span>
                                        @if ($device->is_featured)
                                            <span class="theme-featured-badge">{{ __('messages.featured_badge_short') }}{{ $device->featured_order ? ' #'.$device->featured_order : '' }}</span>
                                        @endif
                                    </div>
                                </td>
                                @if ($canViewRecordOwnership)
                                    <td class="px-4 py-3">
                                        <p class="font-semibold">{{ $device->owner_name ?: $device->creator?->name ?: $device->creator?->username ?: '-' }}</p>
                                        <p class="text-[11px] theme-inline-muted font-mono">{{ $device->owner_tag ?: '-' }}</p>
                                    </td>
                                @endif
                                <td class="px-4 py-3 font-mono">{!! $highlight($device->mac_address) !!}</td>
                                <td class="px-4 py-3">{!! $highlight($device->device_name) !!}</td>
                                <td class="px-4 py-3">{!! $highlight($device->previous_ip) !!}</td>
                                <td class="px-4 py-3">{!! $highlight($device->owner_phone) !!}</td>
                                <td class="px-4 py-3">{{ $device->stolen_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                <td class="px-4 py-3">{{ __('messages.status_'.$device->status) }}</td>
                                <td class="px-4 py-3">
                                    <span class="theme-chip">{{ __('messages.review_status_'.$device->review_status) }}</span>
                                </td>
                                <td class="px-4 py-3">{{ $device->status_updated_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                <td class="px-4 py-3">
                                    <span class="text-xs px-2 py-1 rounded {{ $device->is_visible ? 'theme-status-pill' : 'theme-status-pill' }}">
                                        {{ $device->is_visible ? __('messages.yes') : __('messages.no') }}
                                    </span>
                                </td>
                                <td class="px-4 py-3">{{ $device->created_at?->format('Y-m-d') }}</td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-2">
                                        @canany(['update_internet_devices', 'update_stolen_devices'])
                                            <a href="{{ route('admin.stolen-devices.edit', $device) }}" class="px-2 py-1 text-xs rounded border border-[var(--theme-border)]">
                                                {{ __('messages.edit') }}
                                            </a>
                                        @endcanany

                                        @canany(['toggle_internet_devices_visibility', 'toggle_stolen_devices_visibility'])
                                            <form method="POST" action="{{ route('admin.stolen-devices.toggle-visibility', $device) }}">
                                                @csrf
                                                @method('PATCH')
                                                <button class="px-2 py-1 text-xs rounded border border-[var(--theme-border)]">
                                                    {{ __('messages.toggle_visibility') }}
                                                </button>
                                            </form>
                                        @endcanany

                                        @if ($canReviewSubmissions)
                                            @if ($device->review_status !== \App\Models\StolenDevice::REVIEW_APPROVED)
                                                <form method="POST" action="{{ route('admin.stolen-devices.review', $device) }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="decision" value="approve">
                                                    <button class="px-2 py-1 text-xs rounded border border-emerald-300 text-emerald-700 dark:text-emerald-300">
                                                        {{ __('messages.approve_submission') }}
                                                    </button>
                                                </form>
                                            @endif
                                            @if ($device->review_status !== \App\Models\StolenDevice::REVIEW_REJECTED)
                                                <form method="POST" action="{{ route('admin.stolen-devices.review', $device) }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="decision" value="reject">
                                                    <button class="px-2 py-1 text-xs rounded border border-rose-300 text-rose-700 dark:text-rose-300">
                                                        {{ __('messages.reject_submission') }}
                                                    </button>
                                                </form>
                                            @endif
                                        @endif

                                        @canany(['delete_internet_devices', 'delete_stolen_devices'])
                                            <form method="POST" action="{{ route('admin.stolen-devices.destroy', $device) }}" data-confirm="{{ __('messages.confirm_move_to_trash') }}" data-confirm-reason="1">
                                                @csrf
                                                @method('DELETE')
                                                <button class="px-2 py-1 text-xs rounded border border-[var(--theme-border)] text-[var(--theme-primary)]">
                                                    {{ __('messages.delete') }}
                                                </button>
                                            </form>
                                        @endcanany
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $canViewRecordOwnership ? 13 : 12 }}" class="px-4 py-7 text-center theme-inline-muted">{{ __('messages.no_results') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="grid grid-cols-1 gap-3 lg:hidden">
            @forelse ($devices as $device)
                <div class="theme-surface-panel p-4 space-y-2">
                    <div class="flex items-center justify-between">
                        <p class="font-semibold">{!! $highlight($device->device_name) !!}</p>
                        <span class="text-xs px-2 py-1 rounded {{ $device->is_visible ? 'theme-status-pill' : 'theme-status-pill' }}">
                            {{ $device->is_visible ? __('messages.yes') : __('messages.no') }}
                        </span>
                    </div>
                    <p class="text-xs font-mono theme-inline-muted">{{ __('messages.reference_number') }}: {{ $device->reference_number ?? ('#'.$device->id) }}</p>
                    @if ($canViewRecordOwnership)
                        <p class="text-xs theme-inline-muted">{{ __('messages.record_owner') }}: {{ $device->owner_name ?: $device->creator?->name ?: $device->creator?->username ?: '-' }}</p>
                    @endif
                    @if ($device->is_featured)
                        <p><span class="theme-featured-badge">{{ __('messages.featured_badge_short') }}{{ $device->featured_order ? ' #'.$device->featured_order : '' }}</span></p>
                    @endif
                    <p class="text-sm font-mono">{!! $highlight($device->mac_address) !!}</p>
                    <p class="text-sm theme-inline-muted">{{ __('messages.stolen_at') }}: {{ $device->stolen_at?->format('Y-m-d H:i') ?? '-' }}</p>
                    <p class="text-sm theme-inline-muted">{{ __('messages.status_'.$device->status) }}</p>
                    <p class="text-sm theme-inline-muted">{{ __('messages.review_status_'.$device->review_status) }}</p>
                    <p class="text-xs theme-inline-muted">{{ __('messages.status_updated_at') }}: {{ $device->status_updated_at?->format('Y-m-d H:i') ?? '-' }}</p>
                    <div class="flex flex-wrap gap-2 pt-1">
                        @canany(['update_internet_devices', 'update_stolen_devices'])
                            <a href="{{ route('admin.stolen-devices.edit', $device) }}" class="px-3 py-1 text-xs rounded border border-[var(--theme-border)]">
                                {{ __('messages.edit') }}
                            </a>
                        @endcanany
                        @canany(['toggle_internet_devices_visibility', 'toggle_stolen_devices_visibility'])
                            <form method="POST" action="{{ route('admin.stolen-devices.toggle-visibility', $device) }}">
                                @csrf
                                @method('PATCH')
                                <button class="px-3 py-1 text-xs rounded border border-[var(--theme-border)]">
                                    {{ __('messages.toggle_visibility') }}
                                </button>
                            </form>
                        @endcanany
                        @if ($canReviewSubmissions)
                            @if ($device->review_status !== \App\Models\StolenDevice::REVIEW_APPROVED)
                                <form method="POST" action="{{ route('admin.stolen-devices.review', $device) }}">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="decision" value="approve">
                                    <button class="px-3 py-1 text-xs rounded border border-emerald-300 text-emerald-700 dark:text-emerald-300">
                                        {{ __('messages.approve_submission') }}
                                    </button>
                                </form>
                            @endif
                            @if ($device->review_status !== \App\Models\StolenDevice::REVIEW_REJECTED)
                                <form method="POST" action="{{ route('admin.stolen-devices.review', $device) }}">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="decision" value="reject">
                                    <button class="px-3 py-1 text-xs rounded border border-rose-300 text-rose-700 dark:text-rose-300">
                                        {{ __('messages.reject_submission') }}
                                    </button>
                                </form>
                            @endif
                        @endif
                    </div>
                </div>
            @empty
                <div class="theme-surface-panel p-5 text-center theme-inline-muted">
                    {{ __('messages.no_results') }}
                </div>
            @endforelse
        </div>

        <div>{{ $devices->links() }}</div>
    </div>
</x-app-layout>