@extends('admin.layout')

@section('title', __('Flagged photos'))

@section('content')
<div class="space-y-4">

    @if ($photos->isEmpty())
        <div class="bg-white dark:bg-gray-800 rounded-xl p-10 text-center text-gray-500 dark:text-gray-400">
            {{ __('No flagged photos.') }}
        </div>
    @else
        <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ __('These photos were flagged because Tesseract OCR was unavailable at upload time, or because contact details were detected. Review and approve or delete each photo.') }}
        </p>

        <div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))">
            @foreach ($photos as $photo)
                @php $user = $photo->user; @endphp
                <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-sm border border-gray-100 dark:border-gray-700">

                    {{-- Photo --}}
                    <div class="relative">
                        <img src="{{ $photo->thumbUrl() }}"
                             alt="{{ __('Flagged photo') }}"
                             class="w-full h-44 object-cover">
                        <span class="absolute top-2 right-2 text-[10px] bg-amber-500 text-white rounded-full px-2 py-0.5 font-semibold">
                            {{ __('Needs review') }}
                        </span>
                    </div>

                    {{-- User info --}}
                    <div class="px-3 py-2 border-b border-gray-100 dark:border-gray-700">
                        <a href="{{ route('admin.users.show', $user) }}"
                           class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline truncate block">
                            {{ $user->name }}
                        </a>
                        <p class="text-xs text-gray-400 mt-0.5">
                            {{ __('Flagged') }}: {{ $photo->flagged_at->diffForHumans() }}
                        </p>
                    </div>

                    {{-- Actions --}}
                    <div class="flex divide-x divide-gray-100 dark:divide-gray-700">
                        <form method="POST" action="{{ route('admin.flagged-photos.approve', $photo) }}" class="flex-1">
                            @csrf
                            @method('PATCH')
                            <button type="submit"
                                    class="w-full py-2 text-xs font-medium text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 transition">
                                {{ __('Approve') }}
                            </button>
                        </form>
                        <form method="POST" action="{{ route('admin.flagged-photos.destroy', $photo) }}"
                              class="flex-1"
                              onsubmit="return confirm('{{ __('Delete this photo?') }}')">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="w-full py-2 text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition">
                                {{ __('Delete') }}
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $photos->links() }}
        </div>
    @endif

</div>
@endsection