@php
    $screenshots = $screenshots ?? collect();
    $max = $screenshotsMax ?? 6;
@endphp

<div class="rounded-2xl border border-indigo-200 bg-gradient-to-br from-indigo-50/80 to-violet-50/40 p-6 shadow-sm">
    <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-bold text-indigo-950">لقطات شاشة التطبيق — الصفحة الرئيسية</h3>
            <p class="mt-1 text-xs text-zinc-600">
                تظهر في قسم «لقطات من التطبيق». يفضّل صور عمودية (9:19) — PNG/WebP/JPG حتى 3MB.
                ({{ $screenshots->count() }}/{{ $max }})
            </p>
        </div>
        <a href="{{ route('site.landing') }}#screenshots" target="_blank" rel="noopener"
           class="rounded-lg border border-indigo-200 bg-white px-3 py-1.5 text-xs font-semibold text-indigo-700 hover:bg-indigo-50">
            معاينة على الموقع ↗
        </a>
    </div>

    @if ($screenshots->isNotEmpty())
        <form method="post" action="{{ route('admin.settings.screenshots.reorder') }}" class="mb-6 rounded-xl border border-indigo-100 bg-white/80 p-4">
            @csrf
            <p class="mb-3 text-xs font-medium text-zinc-600">ترتيب العرض على الموقع:</p>
            <div class="flex flex-wrap gap-3">
                @foreach ($screenshots as $index => $shot)
                    <label class="flex flex-col items-center gap-1 text-center">
                        <img src="{{ $shot->imageUrl() }}" alt="" class="h-16 w-9 rounded object-cover object-top ring-1 ring-zinc-200">
                        <select name="positions[{{ $shot->id }}]" class="rounded border border-zinc-300 px-2 py-1 text-xs">
                            @for ($i = 0; $i < $screenshots->count(); $i++)
                                <option value="{{ $i }}" @selected((int) $shot->sort_order === $i)>{{ $i + 1 }}</option>
                            @endfor
                        </select>
                    </label>
                @endforeach
            </div>
            <button type="submit" class="mt-3 rounded-lg bg-indigo-600 px-4 py-2 text-xs font-bold text-white hover:bg-indigo-700">حفظ الترتيب</button>
        </form>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($screenshots as $index => $shot)
                <div class="overflow-hidden rounded-xl border border-white bg-white shadow-sm">
                    <div class="aspect-[9/19] max-h-52 overflow-hidden bg-zinc-900">
                        <img src="{{ $shot->imageUrl() }}" alt="{{ $shot->caption ?? 'لقطة '.($index + 1) }}"
                             class="h-full w-full object-cover object-top">
                    </div>
                    <div class="space-y-3 p-3">
                        <form method="post" action="{{ route('admin.settings.screenshots.update', $shot) }}" enctype="multipart/form-data" class="space-y-2">
                            @csrf
                            @method('PUT')
                            <input type="text" name="caption" value="{{ $shot->caption }}" maxlength="120"
                                   placeholder="وصف قصير (اختياري)"
                                   class="w-full rounded-lg border border-zinc-300 px-2 py-1.5 text-xs">
                            <input type="file" name="screenshot" accept="image/png,image/jpeg,image/webp"
                                   class="block w-full text-[11px] text-zinc-500 file:rounded file:border-0 file:bg-indigo-100 file:px-2 file:py-1">
                            <button type="submit" class="w-full rounded-lg bg-indigo-600 py-1.5 text-xs font-bold text-white hover:bg-indigo-700">
                                تحديث اللقطة
                            </button>
                        </form>
                        <form method="post" action="{{ route('admin.settings.screenshots.destroy', $shot) }}"
                              onsubmit="return confirm('حذف هذه اللقطة؟');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="w-full rounded-lg border border-red-200 py-1.5 text-xs font-semibold text-red-600 hover:bg-red-50">
                                حذف
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p class="mb-4 rounded-xl border border-dashed border-indigo-200 bg-white/60 px-4 py-6 text-center text-sm text-zinc-500">
            لا توجد لقطات بعد — ستظهر مربعات فارغة على الموقع حتى ترفع الصور.
        </p>
    @endif

    @if ($screenshots->count() < $max)
        <form method="post" action="{{ route('admin.settings.screenshots.store') }}" enctype="multipart/form-data"
              class="mt-6 rounded-xl border border-dashed border-indigo-300 bg-white/80 p-4">
            @csrf
            <p class="mb-3 text-xs font-bold text-indigo-900">إضافة لقطة جديدة</p>
            <div class="grid gap-3 sm:grid-cols-2">
                <div>
                    <label class="mb-1 block text-xs text-zinc-600">صورة اللقطة</label>
                    <input type="file" name="screenshot" required accept="image/png,image/jpeg,image/webp"
                           class="block w-full text-xs file:rounded-lg file:border-0 file:bg-indigo-100 file:px-3 file:py-2 file:font-semibold file:text-indigo-800">
                </div>
                <div>
                    <label class="mb-1 block text-xs text-zinc-600">وصف (اختياري)</label>
                    <input type="text" name="caption" maxlength="120" placeholder="مثال: شاشة المحادثة"
                           class="w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm">
                </div>
            </div>
            <button type="submit" class="mt-4 rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white hover:bg-indigo-700">
                رفع اللقطة
            </button>
        </form>
    @endif
</div>