@php
    $canReviewReports = auth()->user()?->can('review_sighting_reports') ?? false;
    $canDeleteReports = auth()->user()?->can('delete_sighting_reports') ?? false;
@endphp

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-2xl font-semibold text-[var(--theme-text)]">{{ __('messages.sighting_reports') }}</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.sighting-reports.index') }}" class="theme-surface-panel p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-3 items-end">
            <div class="xl:col-span-2">
                <label for="sr_q" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.search') }}</label>
                <input id="sr_q" type="text" name="q" value="{{ $filters['q'] ?? '' }}" placeholder="{{ __('messages.search_sighting_reports') }}" class="w-full rounded-lg theme-ring-brand">
            </div>

            <div>
                <label for="sr_status" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.status') }}</label>
                <select id="sr_status" name="status" class="w-full rounded-lg theme-ring-brand">
                    <option value="">{{ __('messages.all_statuses') }}</option>
                    @foreach ($statuses as $status)
                        <option value="{{ $status }}" @selected(($filters['status'] ?? '') === $status)>
                            {{ __('messages.sighting_status_'.$status) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div>
                <label for="sr_category" class="block text-xs text-[var(--theme-muted)] mb-1">{{ __('messages.category') }}</label>
                <select id="sr_category" name="category" class="w-full rounded-lg theme-ring-brand">
                    <option value="">{{ __('messages.all_categories') }}</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category }}" @selected(($filters['category'] ?? '') === $category)>
                            {{ __('messages.sighting_category_'.$category) }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="md:col-span-2 xl:col-span-5 flex flex-wrap items-center gap-2">
                <button class="px-4 py-2 rounded-lg theme-btn-primary text-sm font-medium">{{ __('messages.search') }}</button>
                <a href="{{ route('admin.sighting-reports.index') }}" class="px-4 py-2 rounded-lg theme-btn-outline text-sm">{{ __('messages.reset') }}</a>
            </div>
        </form>

        <div class="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">#</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.reference_number') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.category') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.sighting_location') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.sighted_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.report_note') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.contact_phone_optional') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.status') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.created_at') }}</th>
                            <th class="px-4 py-3 text-start">{{ __('messages.details') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($reports as $report)
                            <tr class="border-t border-[var(--theme-border)] align-top">
                                <td class="px-4 py-3 font-semibold">{{ $report->id }}</td>
                                <td class="px-4 py-3 font-mono text-xs">{{ $report->reportable_reference_number ?: '-' }}</td>
                                <td class="px-4 py-3">{{ __('messages.sighting_category_'.$report->categoryKey()) }}</td>
                                <td class="px-4 py-3">{{ $report->sighting_location ?: '-' }}</td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $report->sighted_at?->format('Y-m-d H:i') ?: '-' }}</td>
                                <td class="px-4 py-3 max-w-xs">
                                    <p>{{ \Illuminate\Support\Str::limit($report->report_note, 90) }}</p>
                                </td>
                                <td class="px-4 py-3">{{ $report->reporter_phone ?: '-' }}</td>
                                <td class="px-4 py-3">
                                    <span class="theme-chip">{{ __('messages.sighting_status_'.$report->status) }}</span>
                                </td>
                                <td class="px-4 py-3 whitespace-nowrap">{{ $report->created_at?->format('Y-m-d H:i') }}</td>
                                <td class="px-4 py-3">
                                    <details class="group">
                                        <summary class="cursor-pointer select-none text-[var(--theme-primary)] hover:underline">
                                            {{ __('messages.view_details') }}
                                        </summary>

                                        <div class="mt-3 w-[360px] max-w-[70vw] space-y-3">
                                            <div class="rounded-xl border border-[var(--theme-border)] p-3 bg-[var(--theme-bg)] space-y-2">
                                                <p><span class="theme-inline-muted">{{ __('messages.report_note') }}:</span> {{ $report->report_note }}</p>
                                                <p><span class="theme-inline-muted">{{ __('messages.sighting_location') }}:</span> {{ $report->sighting_location ?: '-' }}</p>
                                                <p><span class="theme-inline-muted">{{ __('messages.sighted_at') }}:</span> {{ $report->sighted_at?->format('Y-m-d H:i') ?: '-' }}</p>
                                                <p><span class="theme-inline-muted">{{ __('messages.contact_phone_optional') }}:</span> {{ $report->reporter_phone ?: '-' }}</p>
                                                @if ($report->report_image_path)
                                                    <div class="space-y-1">
                                                        <p><span class="theme-inline-muted">{{ __('messages.report_image_optional') }}:</span></p>
                                                        <a href="{{ \Illuminate\Support\Facades\Storage::url($report->report_image_path) }}" target="_blank" rel="noopener" class="inline-block">
                                                            <img
                                                                src="{{ \Illuminate\Support\Facades\Storage::url($report->report_image_path) }}"
                                                                alt="{{ __('messages.report_image_optional') }}"
                                                                class="h-24 w-24 rounded-lg object-cover border border-[var(--theme-border)]"
                                                            >
                                                        </a>
                                                    </div>
                                                @endif
                                                <p><span class="theme-inline-muted">{{ __('messages.reviewed_by') }}:</span> {{ $report->reviewer?->name ? $report->reviewer->name.' ('.$report->reviewer->username.')' : '-' }}</p>
                                                <p><span class="theme-inline-muted">{{ __('messages.reviewed_at') }}:</span> {{ $report->reviewed_at?->format('Y-m-d H:i') ?? '-' }}</p>
                                                <p><span class="theme-inline-muted">{{ __('messages.admin_note') }}:</span> {{ $report->admin_note ?: '-' }}</p>
                                            </div>

                                            @if ($canReviewReports)
                                                <form method="POST" action="{{ route('admin.sighting-reports.update', $report) }}" class="rounded-xl border border-[var(--theme-border)] p-3 bg-[var(--theme-bg)] space-y-2">
                                                    @csrf
                                                    @method('PATCH')

                                                    <div>
                                                        <label for="status_{{ $report->id }}" class="block text-xs theme-inline-muted mb-1">{{ __('messages.status') }}</label>
                                                        <select id="status_{{ $report->id }}" name="status" class="w-full rounded-lg theme-ring-brand">
                                                            @foreach ($statuses as $status)
                                                                <option value="{{ $status }}" @selected($report->status === $status)>
                                                                    {{ __('messages.sighting_status_'.$status) }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    <div>
                                                        <label for="admin_note_{{ $report->id }}" class="block text-xs theme-inline-muted mb-1">{{ __('messages.admin_note') }}</label>
                                                        <textarea id="admin_note_{{ $report->id }}" name="admin_note" rows="3" class="w-full rounded-lg theme-ring-brand">{{ $report->admin_note }}</textarea>
                                                    </div>

                                                    <button class="theme-btn-primary text-sm">{{ __('messages.save_review') }}</button>
                                                </form>
                                            @endif

                                            @if ($canDeleteReports)
                                                <form method="POST" action="{{ route('admin.sighting-reports.destroy', $report) }}" data-confirm="{{ __('messages.confirm_delete') }}" class="rounded-xl border border-rose-300/60 p-3 bg-rose-50/40 dark:bg-rose-900/15">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="px-3 py-1.5 text-xs rounded border border-rose-300 text-rose-700 dark:text-rose-300">
                                                        {{ __('messages.delete_sighting_report') }}
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </details>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="px-4 py-6 text-center theme-inline-muted">{{ __('messages.no_results') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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