@php
    $backUrl = url()->previous() !== url()->current() ? url()->previous() : route('public.mobile-phones');
    $revealFullImei = $canRevealFullImei ?? false;
    $maskedImei = \App\Support\PublicSensitiveMasker::maskImei($mobilePhone->imei, $revealFullImei);
    $maskedSecondaryImei = \App\Support\PublicSensitiveMasker::maskImei($mobilePhone->secondary_imei, $revealFullImei);
@endphp

<x-layouts.public :title="__('messages.record_details')">
    <div class="px-4 sm:px-6 lg:px-8 space-y-5">
        <section class="theme-card p-5 sm:p-6 space-y-5">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-xs theme-inline-muted">{{ __('messages.record_details') }}</p>
                    <h1 class="text-xl sm:text-2xl font-bold text-[var(--theme-text)]">{{ __('messages.mobile_phones') }}</h1>
                </div>
                <a href="{{ $backUrl }}" class="theme-btn-outline text-sm">{{ __('messages.back_to_list') }}</a>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.reference_number') }}</p>
                    <p class="mt-1 font-mono text-sm">{{ $mobilePhone->reference_number ?? ('#'.$mobilePhone->id) }}</p>
                    @if ($mobilePhone->isFeaturedActive())
                        <p class="mt-2"><span class="theme-featured-badge">{{ __('messages.featured_badge_short') }}{{ $mobilePhone->featured_order ? ' #'.$mobilePhone->featured_order : '' }}</span></p>
                    @endif
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.status') }}</p>
                    <p class="mt-1 text-sm"><span class="theme-chip">{{ __('messages.status_'.$mobilePhone->status) }}</span></p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.created_at') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->created_at?->format('Y-m-d H:i') ?? '-' }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.last_updated') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->updated_at?->format('Y-m-d H:i') ?? '-' }}</p>
                </div>
            </div>
        </section>

        <section class="theme-card p-5 sm:p-6">
            <h2 class="text-lg font-semibold text-[var(--theme-text)] mb-4">{{ __('messages.device_data') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.imei') }}</p>
                    <p class="mt-1 font-mono text-sm">{{ $maskedImei }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.secondary_imei') }}</p>
                    <p class="mt-1 font-mono text-sm">{{ $maskedSecondaryImei }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.device_name') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->device_name }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.phone_number') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->phone_number }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.stolen_at') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->stolen_at?->format('Y-m-d H:i') ?? '-' }}</p>
                </div>
                <div class="theme-surface-panel p-3 md:col-span-2">
                    <p class="text-xs theme-inline-muted">{{ __('messages.stolen_address') }}</p>
                    <p class="mt-1 text-sm">{{ $mobilePhone->stolen_address }}</p>
                </div>
                @if ($displayOwnerPhonePublic)
                    <div class="theme-surface-panel p-3 md:col-span-2">
                        <p class="text-xs theme-inline-muted">{{ __('messages.owner_phone') }}</p>
                        <p class="mt-1 text-sm">{{ $mobilePhone->owner_phone }}</p>
                    </div>
                @endif
            </div>
        </section>

        @if ($mobilePhone->images->isNotEmpty())
            <section class="theme-card p-5 sm:p-6">
                <h2 class="text-lg font-semibold text-[var(--theme-text)] mb-4">{{ __('messages.asset_images') }}</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                    @foreach ($mobilePhone->images as $image)
                        @php $imageUrl = '/storage/'.ltrim((string) $image->path, '/'); @endphp
                        <a
                            href="{{ $imageUrl }}"
                            target="_blank"
                            rel="noopener"
                            class="rounded-xl overflow-hidden border border-[var(--theme-border)] bg-[var(--theme-bg)]"
                        >
                            <img
                                src="{{ $imageUrl }}"
                                alt="{{ __('messages.asset_images') }}"
                                class="h-28 w-full object-cover"
                                loading="lazy"
                            >
                        </a>
                    @endforeach
                </div>
            </section>
        @endif

        <section class="theme-card p-5 sm:p-6">
            <h2 class="text-lg font-semibold text-[var(--theme-text)] mb-2">{{ __('messages.general_notes') }}</h2>
            <p class="text-sm text-[var(--theme-text)]">{{ $mobilePhone->notes ?: '-' }}</p>
        </section>

        @include('public.partials.verified-sightings', [
            'verifiedSightings' => $verifiedSightings ?? collect(),
        ])

        @include('public.partials.report-sighting-form', [
            'reportAction' => route('public.mobile-phones.report-sighting', $mobilePhone),
        ])
    </div>
</x-layouts.public>