@php
    $q = $filters['q'] ?? '';
    $publicSearchEnabled = $publicSearchEnabled ?? true;
    $displayOwnerPhonePublic = $displayOwnerPhonePublic ?? true;
    $hasSearchQuery = trim((string) $q) !== '';
    $desktopColumns = 8 + ($displayOwnerPhonePublic ? 1 : 0) + ($hasSearchQuery ? 1 : 0);
    $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="rounded bg-yellow-200/80 dark:bg-yellow-400/35 px-1">$1</mark>', $value) ?? $value;
    };
    $maskedImei = function (?string $value, bool $revealFull = false): string {
        return \App\Support\PublicSensitiveMasker::maskImei($value, $revealFull);
    };
    $detailQuery = array_filter([
        'q' => $filters['q'] ?? null,
        'search_in' => $filters['search_in'] ?? null,
    ], static fn ($value): bool => is_string($value) && trim($value) !== '');
@endphp

<x-layouts.public :title="__('messages.mobile_phones')">
    <div class="px-4 sm:px-6 lg:px-8 space-y-5">
        <section class="theme-gradient rounded-3xl p-5 sm:p-7 shadow-2xl relative overflow-hidden">
            <div class="absolute inset-y-0 {{ app()->getLocale() === 'ar' ? '-left-20' : '-right-20' }} w-72 rounded-full bg-white/10 blur-2xl"></div>
            <div class="relative">
                <h1 class="text-2xl sm:text-3xl font-bold">{{ __('messages.mobile_phones') }}</h1>
                <p class="mt-2 text-white/90">{{ __('messages.mobile_hero_description') }}</p>

                <form id="search-form" method="GET" action="{{ route('public.mobile-phones') }}" class="mt-5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-3">
                    <div class="xl:col-span-2 relative">
                        <label for="search-input" class="sr-only">{{ __('messages.search') }}</label>
                        <input id="search-input" type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('messages.mobile_search_placeholder') }}" class="w-full rounded-xl border-white/25 bg-white/15 text-white placeholder:text-white/70 focus:ring-white/55 focus:border-white/55 disabled:opacity-60" autocomplete="off" @disabled(! $publicSearchEnabled)>
                        <div id="suggestions-box" class="hidden absolute z-30 mt-1 w-full theme-surface-panel overflow-hidden text-[var(--theme-text)]"></div>
                    </div>

                    <div>
                        <label for="search_in" class="sr-only">{{ __('messages.search_all_fields') }}</label>
                        <select id="search_in" name="search_in" class="w-full rounded-xl border-white/25 bg-white/15 text-white focus:ring-white/55 focus:border-white/55 disabled:opacity-60" @disabled(! $publicSearchEnabled)>
                            <option value="all" @selected(($filters['search_in'] ?? 'all') === 'all') class="text-[var(--theme-text)]">{{ __('messages.search_all_fields') }}</option>
                            <option value="name_address" @selected(($filters['search_in'] ?? '') === 'name_address') class="text-[var(--theme-text)]">{{ __('messages.search_name_address') }}</option>
                            <option value="imei" @selected(($filters['search_in'] ?? '') === 'imei') class="text-[var(--theme-text)]">{{ __('messages.imei') }}</option>
                            <option value="secondary_imei" @selected(($filters['search_in'] ?? '') === 'secondary_imei') class="text-[var(--theme-text)]">{{ __('messages.secondary_imei') }}</option>
                            <option value="device_name" @selected(($filters['search_in'] ?? '') === 'device_name') class="text-[var(--theme-text)]">{{ __('messages.device_name') }}</option>
                            <option value="phone_number" @selected(($filters['search_in'] ?? '') === 'phone_number') class="text-[var(--theme-text)]">{{ __('messages.phone_number') }}</option>
                            <option value="stolen_address" @selected(($filters['search_in'] ?? '') === 'stolen_address') class="text-[var(--theme-text)]">{{ __('messages.stolen_address') }}</option>
                            @if ($displayOwnerPhonePublic)
                                <option value="owner_phone" @selected(($filters['search_in'] ?? '') === 'owner_phone') class="text-[var(--theme-text)]">{{ __('messages.owner_phone') }}</option>
                            @endif
                        </select>
                    </div>

                    <div>
                        <label for="status" class="sr-only">{{ __('messages.status') }}</label>
                        <select id="status" name="status" class="w-full rounded-xl border-white/25 bg-white/15 text-white focus:ring-white/55 focus:border-white/55 disabled:opacity-60" @disabled(! $publicSearchEnabled)>
                            <option value="" class="text-[var(--theme-text)]">{{ __('messages.all_statuses') }}</option>
                            @foreach ($statuses as $status)
                                <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status) class="text-[var(--theme-text)]">{{ __('messages.status_'.$status) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label for="quick_filter" class="sr-only">{{ __('messages.quick_filter') }}</label>
                        <select id="quick_filter" name="quick_filter" class="w-full rounded-xl border-white/25 bg-white/15 text-white focus:ring-white/55 focus:border-white/55 disabled:opacity-60" @disabled(! $publicSearchEnabled)>
                            <option value="" class="text-[var(--theme-text)]">{{ __('messages.quick_filter') }}</option>
                            <option value="latest_reports" @selected(($filters['quick_filter'] ?? '') === 'latest_reports') class="text-[var(--theme-text)]">{{ __('messages.quick_latest_reports') }}</option>
                            <option value="recovered" @selected(($filters['quick_filter'] ?? '') === 'recovered') class="text-[var(--theme-text)]">{{ __('messages.quick_recovered') }}</option>
                            <option value="under_verification" @selected(($filters['quick_filter'] ?? '') === 'under_verification') class="text-[var(--theme-text)]">{{ __('messages.quick_under_verification') }}</option>
                            <option value="partial_only" @selected(($filters['quick_filter'] ?? '') === 'partial_only') class="text-[var(--theme-text)]">{{ __('messages.quick_partial_only') }}</option>
                        </select>
                    </div>

                    <div>
                        <label for="sort" class="sr-only">{{ __('messages.sort_best') }}</label>
                        <select id="sort" name="sort" class="w-full rounded-xl border-white/25 bg-white/15 text-white focus:ring-white/55 focus:border-white/55 disabled:opacity-60" @disabled(! $publicSearchEnabled)>
                            <option value="best" @selected(($filters['sort'] ?? 'best') === 'best') class="text-[var(--theme-text)]">{{ __('messages.sort_best') }}</option>
                            <option value="newest" @selected(($filters['sort'] ?? '') === 'newest') class="text-[var(--theme-text)]">{{ __('messages.sort_newest') }}</option>
                            <option value="oldest" @selected(($filters['sort'] ?? '') === 'oldest') class="text-[var(--theme-text)]">{{ __('messages.sort_oldest') }}</option>
                            <option value="name" @selected(($filters['sort'] ?? '') === 'name') class="text-[var(--theme-text)]">{{ __('messages.sort_name') }}</option>
                        </select>
                    </div>

                    <div class="flex items-center gap-2">
                        <button id="search-submit-button" type="submit" class="theme-btn-hero disabled:opacity-60 disabled:cursor-not-allowed" @disabled(! $publicSearchEnabled)>
                            {{ __('messages.search') }}
                        </button>
                        <a href="{{ route('public.mobile-phones') }}" class="rounded-xl border border-white/30 bg-white/10 px-4 py-2 text-sm font-medium text-white hover:bg-white/20">{{ __('messages.reset') }}</a>
                    </div>

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

                <div class="mt-4">
                    <p class="text-sm text-white/90 mb-2">{{ __('messages.recent_searches') }}</p>
                    <div id="recent-searches" class="flex flex-wrap gap-2"></div>
                </div>
            </div>
        </section>

        @if ($showPublicStats ?? false)
            @include('public.partials.general-stats', ['publicStats' => $publicStats ?? null])
        @endif

        @if (! $publicSearchEnabled)
            <section class="theme-alert-brand p-5">
                <p class="font-semibold">{{ __('messages.public_search_disabled') }}</p>
            </section>
        @else
            @include('public.partials.featured-records', ['featuredRecords' => $featuredRecords ?? collect()])
            @if ($hasSearchQuery)
                @include('public.partials.search-verdict', ['verdict' => $searchVerdict ?? null])
            @endif

            <section class="hidden lg:block theme-card 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>
                                <th class="px-4 py-3 text-start">{{ __('messages.imei') }}</th>
                                <th class="px-4 py-3 text-start">{{ __('messages.secondary_imei') }}</th>
                                <th class="px-4 py-3 text-start">{{ __('messages.device_name') }}</th>
                                <th class="px-4 py-3 text-start">{{ __('messages.phone_number') }}</th>
                                <th class="px-4 py-3 text-start">{{ __('messages.stolen_address') }}</th>
                                @if ($displayOwnerPhonePublic)
                                <th class="px-4 py-3 text-start">{{ __('messages.owner_phone') }}</th>
                                @endif
                                <th class="px-4 py-3 text-start">{{ __('messages.stolen_at') }}</th>
                                @if ($hasSearchQuery)
                                    <th class="px-4 py-3 text-start">{{ __('messages.match_result') }}</th>
                                @endif
                                <th class="px-4 py-3 text-start">{{ __('messages.status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($mobilePhones as $mobilePhone)
                                @php
                                    $canRevealFullImei = (bool) ($mobilePhone->can_reveal_full_imei ?? false);
                                    $mobilePhoneDetailsUrl = route('public.mobile-phones.show', array_merge(['mobilePhone' => $mobilePhone], $detailQuery));
                                @endphp
                                <tr class="border-t border-[var(--theme-border)] cursor-pointer hover:bg-[var(--theme-bg)]/70 transition js-record-link {{ $mobilePhone->isFeaturedActive() ? 'theme-featured-row' : '' }}" data-record-url="{{ $mobilePhoneDetailsUrl }}">
                                    <td class="px-4 py-3 font-mono text-xs">
                                        <div class="flex items-center gap-2">
                                            <span>{{ $mobilePhone->reference_number ?? ('#'.$mobilePhone->id) }}</span>
                                            @if ($mobilePhone->isFeaturedActive())
                                                <span class="theme-featured-badge">{{ __('messages.featured_badge_short') }}{{ $mobilePhone->featured_order ? ' #'.$mobilePhone->featured_order : '' }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-4 py-3 font-mono text-xs">{!! $highlight($maskedImei($mobilePhone->imei, $canRevealFullImei)) !!}</td>
                                    <td class="px-4 py-3 font-mono text-xs">{!! $highlight($maskedImei($mobilePhone->secondary_imei, $canRevealFullImei)) !!}</td>
                                    <td class="px-4 py-3">{!! $highlight($mobilePhone->device_name) !!}</td>
                                    <td class="px-4 py-3">{!! $highlight($mobilePhone->phone_number) !!}</td>
                                    <td class="px-4 py-3">{!! $highlight($mobilePhone->stolen_address) !!}</td>
                                    @if ($displayOwnerPhonePublic)
                                        <td class="px-4 py-3">{!! $highlight($mobilePhone->owner_phone) !!}</td>
                                    @endif
                                    <td class="px-4 py-3">{{ $mobilePhone->stolen_at?->format('Y-m-d H:i') ?? '-' }}</td>
                                    @if ($hasSearchQuery)
                                        <td class="px-4 py-3">
                                            @include('public.partials.match-result', ['meta' => $mobilePhone->match_meta ?? null])
                                        </td>
                                    @endif
                                    <td class="px-4 py-3">{{ __('messages.status_'.$mobilePhone->status) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $desktopColumns }}" class="px-4 py-8 text-center text-[var(--theme-muted)]">{{ __('messages.no_results') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="grid grid-cols-1 gap-3 lg:hidden">
                @forelse ($mobilePhones as $mobilePhone)
                    @php
                        $canRevealFullImei = (bool) ($mobilePhone->can_reveal_full_imei ?? false);
                        $mobilePhoneDetailsUrl = route('public.mobile-phones.show', array_merge(['mobilePhone' => $mobilePhone], $detailQuery));
                    @endphp
                    <a href="{{ $mobilePhoneDetailsUrl }}" class="theme-card p-4 space-y-2 block hover:opacity-95 transition {{ $mobilePhone->isFeaturedActive() ? 'theme-featured-card' : '' }}">
                        <h3 class="font-semibold">{!! $highlight($mobilePhone->device_name) !!}</h3>
                        <p class="text-xs font-mono theme-inline-muted">{{ __('messages.reference_number') }}: {{ $mobilePhone->reference_number ?? ('#'.$mobilePhone->id) }}</p>
                        @if ($mobilePhone->isFeaturedActive())
                            <p><span class="theme-featured-badge">{{ __('messages.featured_badge_short') }}{{ $mobilePhone->featured_order ? ' #'.$mobilePhone->featured_order : '' }}</span></p>
                        @endif
                        <p class="text-sm font-mono">{!! $highlight($maskedImei($mobilePhone->imei, $canRevealFullImei)) !!}</p>
                        <p class="text-sm">{!! $highlight($mobilePhone->phone_number) !!}</p>
                        <p class="text-sm">{!! $highlight($mobilePhone->stolen_address) !!}</p>
                        @if ($displayOwnerPhonePublic)
                            <p class="text-sm">{!! $highlight($mobilePhone->owner_phone) !!}</p>
                        @endif
                        <p class="text-sm theme-inline-muted">{{ __('messages.stolen_at') }}: {{ $mobilePhone->stolen_at?->format('Y-m-d H:i') ?? '-' }}</p>
                        @if ($hasSearchQuery)
                            @include('public.partials.match-result', ['meta' => $mobilePhone->match_meta ?? null])
                        @endif
                        <span class="theme-chip">{{ __('messages.status_'.$mobilePhone->status) }}</span>
                    </a>
                @empty
                    <article class="theme-card p-6 text-center text-[var(--theme-muted)]">
                        {{ __('messages.no_results') }}
                    </article>
                @endforelse
            </section>

            <div class="theme-card px-3 py-2">
                {{ $mobilePhones->links() }}
            </div>
        @endif
    </div>

    <script>
        (() => {
            const publicSearchEnabled = @json($publicSearchEnabled);
            const searchInput = document.getElementById('search-input');
            const suggestionBox = document.getElementById('suggestions-box');
            const searchForm = document.getElementById('search-form');
            const submitButton = document.getElementById('search-submit-button');
            const recentContainer = document.getElementById('recent-searches');
            const recentKey = 'stolen_mobile_phones_recent_searches';
            const loadingText = @json(__('messages.loading'));
            const searchText = @json(__('messages.search'));

            const maskSuggestion = (rawValue, type) => {
                const value = String(rawValue ?? '');
                const kind = String(type ?? '').toUpperCase();

                const maskByPattern = (source, keepStart = 4, keepEnd = 2, maskChar = '#') => {
                    if (!source) return source;
                    if (source.length <= keepStart) {
                        return source.slice(0, 1) + maskChar.repeat(Math.max(source.length - 1, 1));
                    }
                    const start = source.slice(0, keepStart);
                    const end = keepEnd > 0 ? source.slice(-keepEnd) : '';
                    const middleLength = Math.max(source.length - keepStart - end.length, 1);
                    return start + maskChar.repeat(middleLength) + end;
                };

                if (kind === 'IMEI' || kind === 'IMEI2') {
                    const normalized = value.replace(/\D+/g, '');
                    if (normalized.length > 8) {
                        return normalized.slice(0, 8) + '#'.repeat(normalized.length - 8);
                    }
                    return maskByPattern(normalized || value, 2, 0);
                }

                return value;
            };

            document.addEventListener('click', (event) => {
                const row = event.target.closest('.js-record-link');
                if (!row || event.target.closest('a, button, input, select, textarea, label')) {
                    return;
                }

                const url = row.dataset.recordUrl;
                if (url) {
                    window.location.href = url;
                }
            });

            const loadRecent = () => {
                const items = JSON.parse(localStorage.getItem(recentKey) || '[]');
                recentContainer.innerHTML = '';
                items.forEach((item) => {
                    const button = document.createElement('button');
                    button.type = 'button';
                    button.className = 'rounded-full border border-white/30 bg-white/15 px-3 py-1 text-xs text-white hover:bg-white/20';
                    button.textContent = item;
                    button.addEventListener('click', () => {
                        if (!publicSearchEnabled) return;
                        searchInput.value = item;
                        searchForm.submit();
                    });
                    recentContainer.appendChild(button);
                });
            };

            const saveRecent = (value) => {
                const clean = value.trim();
                if (!clean) return;

                const items = JSON.parse(localStorage.getItem(recentKey) || '[]')
                    .filter((item) => item.toLowerCase() !== clean.toLowerCase());
                items.unshift(clean);
                localStorage.setItem(recentKey, JSON.stringify(items.slice(0, 6)));
            };

            searchForm?.addEventListener('submit', () => {
                if (!publicSearchEnabled) return;

                submitButton.disabled = true;
                submitButton.textContent = loadingText;
                saveRecent(searchInput.value);
            });

            let debounceTimer = null;
            searchInput?.addEventListener('input', () => {
                if (!publicSearchEnabled) return;

                const term = searchInput.value.trim();
                clearTimeout(debounceTimer);
                if (term.length < 2) {
                    suggestionBox.classList.add('hidden');
                    suggestionBox.innerHTML = '';
                    return;
                }

                debounceTimer = setTimeout(async () => {
                    try {
                        const response = await fetch(`{{ route('mobile-phones.suggestions') }}?term=${encodeURIComponent(term)}`);
                        const payload = await response.json();
                        const list = payload.data || [];

                        if (!list.length) {
                            suggestionBox.classList.add('hidden');
                            suggestionBox.innerHTML = '';
                            return;
                        }

                        const escapeHtml = (value) => value
                            .replaceAll('&', '&amp;')
                            .replaceAll('<', '&lt;')
                            .replaceAll('>', '&gt;')
                            .replaceAll('"', '&quot;')
                            .replaceAll("'", '&#039;');

                        suggestionBox.innerHTML = list.map((item) => {
                            const rawValue = String(item.value || '');
                            const safeType = escapeHtml(String(item.type || ''));
                            const safeValue = escapeHtml(maskSuggestion(rawValue, item.type || ''));
                            const encodedValue = encodeURIComponent(rawValue);
                            return `
                                <button type="button" class="theme-suggestion-row" data-value="${encodedValue}">
                                    <span class="font-medium">${safeValue}</span>
                                    <span class="theme-suggestion-meta">${safeType}</span>
                                </button>
                            `;
                        }).join('');

                        suggestionBox.classList.remove('hidden');
                    } catch {
                        suggestionBox.classList.add('hidden');
                        suggestionBox.innerHTML = '';
                    }
                }, 250);
            });

            suggestionBox?.addEventListener('click', (event) => {
                const target = event.target.closest('button[data-value]');
                if (!target) return;

                searchInput.value = decodeURIComponent(target.dataset.value || '');
                suggestionBox.classList.add('hidden');
                searchForm.submit();
            });

            document.addEventListener('click', (event) => {
                if (!suggestionBox.contains(event.target) && event.target !== searchInput) {
                    suggestionBox.classList.add('hidden');
                }
            });

            window.addEventListener('pageshow', () => {
                submitButton.disabled = false;
                submitButton.textContent = searchText;
            });

            loadRecent();
        })();
    </script>
</x-layouts.public>