@php
    $reviewStatus = (string) data_get($record, 'review_status', '');
    $status = (string) data_get($record, 'status', '');
    $isPendingReview = $reviewStatus === \App\Models\StolenDevice::REVIEW_PENDING;
    $isAppealedPending = $isPendingReview && ((int) ($latestRecordRequest?->appeal_count ?? 0) > 0);
    $canReviewAppealed = ! $isAppealedPending || (auth()->user()?->hasRole('Super Admin') ?? false);

    $categoryFields = match ($category) {
        'internet' => [
            ['label' => 'MAC Address', 'value' => (string) ($record->mac_address ?? '-'), 'mono' => true],
            ['label' => __('messages.previous_ip'), 'value' => (string) ($record->previous_ip ?: '-')],
            ['label' => __('messages.device_name'), 'value' => (string) ($record->device_name ?: '-')],
        ],
        'mobile' => [
            ['label' => __('messages.imei'), 'value' => (string) ($record->imei ?: '-'), 'mono' => true],
            ['label' => __('messages.secondary_imei'), 'value' => (string) ($record->secondary_imei ?: '-')],
            ['label' => __('messages.device_name'), 'value' => (string) ($record->device_name ?: '-')],
            ['label' => __('messages.phone_number'), 'value' => (string) ($record->phone_number ?: '-')],
        ],
        'vehicle' => [
            ['label' => __('messages.engine_number'), 'value' => (string) ($record->engine_number ?: '-'), 'mono' => true],
            ['label' => __('messages.chassis_number'), 'value' => (string) ($record->chassis_number ?: '-')],
            ['label' => __('messages.vehicle_name'), 'value' => (string) ($record->vehicle_name ?: '-')],
            ['label' => __('messages.vehicle_type'), 'value' => __('messages.vehicle_type_'.($record->vehicle_type ?? ''))],
            ['label' => __('messages.plate_number'), 'value' => (string) ($record->plate_number ?: '-')],
            ['label' => __('messages.color'), 'value' => (string) ($record->color ?: '-')],
        ],
        default => [],
    };

    $commonFields = [
        ['label' => __('messages.owner_phone'), 'value' => (string) ($record->owner_phone ?: '-')],
        ['label' => __('messages.stolen_at'), 'value' => $record->stolen_at?->format('Y-m-d H:i') ?? '-'],
        ['label' => __('messages.stolen_address'), 'value' => (string) ($record->stolen_address ?: '-')],
        ['label' => __('messages.status'), 'value' => __('messages.status_'.$status), 'chip' => true],
        ['label' => __('messages.review_status'), 'value' => __('messages.review_status_'.$reviewStatus), 'chip' => true],
        ['label' => __('messages.status_updated_at'), 'value' => $record->status_updated_at?->format('Y-m-d H:i') ?? '-'],
        ['label' => __('messages.created_at'), 'value' => $record->created_at?->format('Y-m-d H:i') ?? '-'],
        ['label' => __('messages.last_updated'), 'value' => $record->updated_at?->format('Y-m-d H:i') ?? '-'],
    ];

    $requestNumber = $latestRecordRequest?->request_number ?? '-';
    $requestPrice = $latestRecordRequest
        ? number_format((float) $latestRecordRequest->price_snapshot, 2).' '.$latestRecordRequest->currency_code
        : '-';
    $submissionMode = $latestRecordRequest
        ? __('messages.record_request_mode_'.$latestRecordRequest->submission_mode)
        : '-';
    $requestStatus = $latestRecordRequest
        ? __('messages.record_request_status_'.$latestRecordRequest->status)
        : '-';
@endphp

<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <p class="text-xs theme-inline-muted">{{ __('messages.submission_requests') }}</p>
                <h2 class="text-2xl font-semibold text-[var(--theme-text)]">{{ __('messages.record_details') }}</h2>
            </div>
            <a href="{{ $backUrl }}" class="theme-btn-outline">{{ __('messages.back_to_list') }}</a>
        </div>
    </x-slot>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
        <section class="theme-surface-panel p-4 sm:p-5">
            <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">{{ $referenceNumber }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.category') }}</p>
                    <p class="mt-1 text-sm">{{ $categoryLabel }}</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">{{ $recordTitle }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.review_status') }}</p>
                    <p class="mt-1"><span class="theme-chip">{{ __('messages.review_status_'.$reviewStatus) }}</span></p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.request_number') }}</p>
                    <p class="mt-1 font-mono text-xs">{{ $requestNumber }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.price_snapshot') }}</p>
                    <p class="mt-1 text-sm">{{ $requestPrice }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.submission_mode') }}</p>
                    <p class="mt-1 text-sm">{{ $submissionMode }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.status') }}</p>
                    <p class="mt-1"><span class="theme-chip">{{ $requestStatus }}</span></p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.appeal_count') }}</p>
                    <p class="mt-1 text-sm">{{ (int) ($latestRecordRequest?->appeal_count ?? 0) }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.appealed_at') }}</p>
                    <p class="mt-1 text-sm">{{ $latestRecordRequest?->appealed_at?->format('Y-m-d H:i') ?? '-' }}</p>
                </div>
            </div>
        </section>

        <section class="theme-surface-panel p-4 sm:p-5">
            <h3 class="text-base font-semibold mb-3">{{ __('messages.device_data') }}</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                @foreach ($categoryFields as $field)
                    <div class="theme-surface-panel p-3">
                        <p class="text-xs theme-inline-muted">{{ $field['label'] }}</p>
                        <p class="mt-1 text-sm {{ ($field['mono'] ?? false) ? 'font-mono' : '' }}">{{ $field['value'] }}</p>
                    </div>
                @endforeach

                @foreach ($commonFields as $field)
                    <div class="theme-surface-panel p-3 {{ $field['label'] === __('messages.stolen_address') ? 'md:col-span-2' : '' }}">
                        <p class="text-xs theme-inline-muted">{{ $field['label'] }}</p>
                        @if (! empty($field['chip']))
                            <p class="mt-1"><span class="theme-chip">{{ $field['value'] }}</span></p>
                        @else
                            <p class="mt-1 text-sm">{{ $field['value'] }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        </section>

        @if ($record->images->isNotEmpty())
            <section class="theme-surface-panel p-4 sm:p-5">
                <h3 class="text-base font-semibold mb-3">{{ __('messages.asset_images') }}</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                    @foreach ($record->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-surface-panel p-4 sm:p-5">
            <h3 class="text-base font-semibold mb-3">{{ __('messages.manager') }}</h3>
            <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.name') }}</p>
                    <p class="mt-1 text-sm">{{ $record->creator?->name ?? '-' }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.username') }}</p>
                    <p class="mt-1 text-sm">{{ $record->creator?->username ?? '-' }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.email') }}</p>
                    <p class="mt-1 text-sm">{{ $record->creator?->email ?? '-' }}</p>
                </div>
                <div class="theme-surface-panel p-3">
                    <p class="text-xs theme-inline-muted">{{ __('messages.phone') }}</p>
                    <p class="mt-1 text-sm">{{ $record->creator?->phone ?? '-' }}</p>
                </div>
            </div>
        </section>

        <section class="theme-surface-panel p-4 sm:p-5">
            <h3 class="text-base font-semibold mb-3">{{ __('messages.general_notes') }}</h3>
            <p class="text-sm">{{ (string) ($record->notes ?: '-') }}</p>
        </section>

        <section class="theme-surface-panel p-4 sm:p-5">
            @if ($isPendingReview && $canReviewAppealed)
                <h3 class="text-base font-semibold mb-3">{{ __('messages.save_review') }}</h3>
                <form method="POST" action="{{ $reviewRoute }}" class="space-y-3">
                    @csrf
                    @method('PATCH')

                    <div>
                        <label for="review_note" class="block text-sm font-medium mb-1">{{ __('messages.review_note_optional') }}</label>
                        <textarea id="review_note" name="review_note" rows="4" class="w-full rounded-lg theme-ring-brand" placeholder="{{ __('messages.review_note_optional') }}">{{ old('review_note') }}</textarea>
                    </div>

                    <div class="flex flex-wrap items-center gap-2">
                        <button type="submit" name="decision" value="approve" class="theme-btn-primary">
                            {{ __('messages.approve_submission') }}
                        </button>
                        <button type="submit" name="decision" value="reject" class="theme-btn-outline !border-rose-300 !text-rose-700 dark:!text-rose-300">
                            {{ __('messages.reject_submission') }}
                        </button>
                    </div>
                </form>
            @elseif ($isAppealedPending)
                <h3 class="text-base font-semibold mb-3">{{ __('messages.review_status') }}</h3>
                <p class="text-sm theme-inline-muted">{{ __('messages.appeal_review_super_admin_only') }}</p>
            @else
                <h3 class="text-base font-semibold mb-3">{{ __('messages.review_status') }}</h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="theme-surface-panel p-3">
                        <p class="text-xs theme-inline-muted">{{ __('messages.review_status') }}</p>
                        <p class="mt-1"><span class="theme-chip">{{ __('messages.review_status_'.$reviewStatus) }}</span></p>
                    </div>
                    <div class="theme-surface-panel p-3">
                        <p class="text-xs theme-inline-muted">{{ __('messages.reviewed_by') }}</p>
                        <p class="mt-1 text-sm">{{ $reviewedBy?->name ?? $reviewedBy?->username ?? '-' }}</p>
                    </div>
                    <div class="theme-surface-panel p-3">
                        <p class="text-xs theme-inline-muted">{{ __('messages.reviewed_at') }}</p>
                        <p class="mt-1 text-sm">{{ $record->reviewed_at?->format('Y-m-d H:i') ?? '-' }}</p>
                    </div>
                    <div class="theme-surface-panel p-3 md:col-span-3">
                        <p class="text-xs theme-inline-muted">{{ __('messages.admin_note') }}</p>
                        <p class="mt-1 text-sm">{{ (string) ($record->review_note ?: '-') }}</p>
                    </div>
                </div>
            @endif
        </section>
    </div>
</x-app-layout>