@extends('layouts.main_dashboard.app')

@php
    $isArabic = app()->getLocale() === 'ar';
    $pageTitle = $isArabic ? 'سلة المهملات' : 'Trash Bin';
    $totalDeletedItems = (int) $counts->sum();
    $selectedItemsCount = $selectedType === 'all' ? $items->count() : (int) ($counts[$selectedType] ?? 0);
    $selectedLabel = $selectedType === 'all'
        ? ($isArabic ? 'كل العناصر المحذوفة' : 'All deleted items')
        : \App\Support\AdminTrashRegistry::label($selectedType);
    $latestDeletedAt = $items->pluck('deleted_at')->filter()->sortDesc()->first();
@endphp

@section('title', $pageTitle)
@section('page_heading', $pageTitle)
@section('skip_page_hero', true)

@section('content')
    <div class="space-y-6">
        <section class="overflow-hidden rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="grid gap-0 lg:grid-cols-[minmax(0,1.25fr)_22rem]">
                <div class="relative overflow-hidden px-6 py-6 sm:px-8">
                    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_rgba(15,23,42,0.04),_transparent_45%)]"></div>
                    <div class="relative">
                        <span class="inline-flex items-center gap-2 rounded-full bg-rose-50 px-4 py-2 text-xs font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">
                            <i class="fa-solid fa-trash-can"></i>
                            <span>{{ $isArabic ? 'منطقة الاستعادة الآمنة' : 'Safe recovery zone' }}</span>
                        </span>

                        <h2 class="mt-4 text-2xl font-black tracking-tight text-surface-900 dark:text-white">
                            {{ $selectedLabel }}
                        </h2>
                        <p class="mt-3 max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                            {{ $isArabic
                                ? 'كل عنصر هنا ما زال قابلاً للاستعادة. استخدم الحذف النهائي فقط عند التأكد أنك لا تريد إرجاعه مرة أخرى.'
                                : 'Everything listed here can still be restored. Use permanent delete only when you are sure the item should never return.' }}
                        </p>

                        <div class="mt-6 flex flex-wrap items-center gap-3">
                            <span class="inline-flex items-center gap-2 rounded-full bg-surface-100 px-4 py-2 text-xs font-black text-surface-700 dark:bg-surface-800 dark:text-surface-200">
                                <span>{{ $isArabic ? 'إجمالي المحذوفات' : 'Total deleted' }}</span>
                                <span class="font-numbers">{{ $totalDeletedItems }}</span>
                            </span>
                            <span class="inline-flex items-center gap-2 rounded-full bg-primary-light px-4 py-2 text-xs font-black text-primary dark:bg-primary/10 dark:text-primary-container">
                                <span>{{ $isArabic ? 'المجموعة الحالية' : 'Current scope' }}</span>
                                <span class="font-numbers">{{ $selectedItemsCount }}</span>
                            </span>
                            @if ($latestDeletedAt)
                                <span class="inline-flex items-center gap-2 rounded-full bg-surface-100 px-4 py-2 text-xs font-black text-surface-500 dark:bg-surface-800 dark:text-surface-300 font-numbers">
                                    <i class="fa-solid fa-clock text-[10px]"></i>
                                    <span>{{ $latestDeletedAt->diffForHumans() }}</span>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="border-t border-surface-200 bg-surface-50 px-6 py-6 dark:border-surface-800 dark:bg-surface-950 lg:border-t-0 lg:border-s">
                    <div class="rounded-xl border border-surface-200 bg-white p-5 dark:border-surface-800 dark:bg-surface-900">
                        <div class="flex items-start gap-3">
                            <span class="mt-1 inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
                                <i class="fa-solid fa-shield"></i>
                            </span>
                            <div>
                                <h3 class="text-sm font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تنبيه مهم' : 'Important notice' }}</h3>
                                <p class="mt-2 text-sm leading-7 text-surface-500 dark:text-surface-400">
                                    {{ $isArabic
                                        ? 'الاستعادة تعيد العنصر كما كان، أما الحذف النهائي فيزيله نهائياً مع أي ملفات مرتبطة به إذا كان النظام يدعم ذلك.'
                                        : 'Restore returns the item as it was. Permanent delete removes it completely, along with linked files when supported by the system.' }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تصفية حسب النوع' : 'Filter by type' }}</h3>
                    <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'بدّل بين المجموعات لتصل بسرعة إلى النوع الذي تريد مراجعته.' : 'Switch between groups to jump directly to the kind of item you want to review.' }}</p>
                </div>
                <div class="text-xs font-bold text-surface-400">{{ $isArabic ? 'المجموعة النشطة مميزة بخلفية أقوى وحد علوي واضح.' : 'The active group is highlighted with a stronger background and clearer emphasis.' }}</div>
            </div>

            <div class="mt-5 flex flex-wrap gap-3">
                <a href="{{ route('admin.trash.index') }}" class="group inline-flex items-center gap-3 rounded-xl border px-4 py-3 text-decoration-none transition {{ $selectedType === 'all' ? 'border-primary bg-primary-light/40 text-primary dark:border-primary/40 dark:bg-primary/10 dark:text-primary-container' : 'border-surface-200 bg-surface-50 text-surface-700 hover:border-primary/30 hover:text-primary dark:border-surface-800 dark:bg-surface-950 dark:text-surface-200 dark:hover:border-primary/30 dark:hover:text-primary-container' }}">
                    <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl {{ $selectedType === 'all' ? 'bg-white text-primary dark:bg-surface-900 dark:text-primary-container' : 'bg-white text-surface-500 dark:bg-surface-900 dark:text-surface-300' }}">
                        <i class="fa-solid fa-layer-group text-sm"></i>
                    </span>
                    <span>
                        <span class="block text-sm font-black">{{ $isArabic ? 'كل العناصر' : 'All items' }}</span>
                        <span class="mt-1 block text-xs font-bold font-numbers {{ $selectedType === 'all' ? 'text-primary/80 dark:text-primary-container/80' : 'text-surface-500 dark:text-surface-400' }}">{{ $totalDeletedItems }}</span>
                    </span>
                </a>

                @foreach ($definitions as $type => $definition)
                    @php
                        $active = $selectedType === $type;
                        $label = $isArabic ? $definition['label_ar'] : $definition['label_en'];
                    @endphp
                    <a href="{{ route('admin.trash.index', ['type' => $type]) }}" class="group inline-flex items-center gap-3 rounded-xl border px-4 py-3 text-decoration-none transition {{ $active ? 'border-primary bg-primary-light/40 text-primary dark:border-primary/40 dark:bg-primary/10 dark:text-primary-container' : 'border-surface-200 bg-surface-50 text-surface-700 hover:border-primary/30 hover:text-primary dark:border-surface-800 dark:bg-surface-950 dark:text-surface-200 dark:hover:border-primary/30 dark:hover:text-primary-container' }}">
                        <span class="inline-flex h-10 w-10 items-center justify-center rounded-2xl {{ $active ? 'bg-white text-primary dark:bg-surface-900 dark:text-primary-container' : 'bg-white text-surface-500 dark:bg-surface-900 dark:text-surface-300' }}">
                            <i class="fa-solid fa-box-archive text-sm"></i>
                        </span>
                        <span>
                            <span class="block text-sm font-black">{{ $label }}</span>
                            <span class="mt-1 block text-xs font-bold font-numbers {{ $active ? 'text-primary/80 dark:text-primary-container/80' : 'text-surface-500 dark:text-surface-400' }}">{{ $counts[$type] }}</span>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>

        <section class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="flex flex-col gap-4 border-b border-surface-200 px-6 py-5 dark:border-surface-800 lg:flex-row lg:items-center lg:justify-between">
                <div>
                    <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $selectedLabel }}</h3>
                    <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">
                        {{ $selectedType === 'all'
                            ? ($isArabic ? 'أحدث العناصر المحذوفة من مختلف أقسام النظام.' : 'Latest deleted items from across the system.')
                            : ($isArabic ? 'راجع العناصر المحذوفة من هذا النوع وحدد ما إذا كنت تريد استعادتها أو حذفها نهائياً.' : 'Review deleted items in this category and decide whether to restore or remove them permanently.') }}
                    </p>
                </div>
                <div class="inline-flex items-center gap-2 self-start rounded-full bg-surface-100 px-4 py-2 text-xs font-black text-surface-600 dark:bg-surface-800 dark:text-surface-300">
                    <i class="fa-solid fa-list-ul text-[11px]"></i>
                    <span>{{ $isArabic ? 'العناصر المعروضة' : 'Displayed items' }}</span>
                    <span class="font-numbers">{{ $items->count() }}</span>
                </div>
            </div>

            <div class="p-4 sm:p-6">
                <div class="space-y-4">
                    @forelse ($items as $item)
                        <article class="rounded-xl border border-surface-200 bg-surface-50/70 p-5 transition hover:border-primary/25 hover:bg-white dark:border-surface-800 dark:bg-surface-950/60 dark:hover:border-primary/25 dark:hover:bg-surface-900">
                            <div class="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <span class="rounded-full bg-white px-3 py-1.5 text-[11px] font-black text-surface-600 dark:bg-surface-900 dark:text-surface-300">{{ $item['label'] }}</span>
                                        <span class="rounded-full bg-rose-50 px-3 py-1.5 text-[11px] font-black text-rose-700 dark:bg-rose-500/10 dark:text-rose-300">{{ $isArabic ? 'محذوف' : 'Deleted' }}</span>
                                    </div>

                                    <h4 class="mt-4 text-lg font-black leading-8 text-surface-900 dark:text-white">{{ $item['title'] }}</h4>

                                    <div class="mt-3 flex flex-wrap items-center gap-3 text-xs font-semibold text-surface-500 dark:text-surface-400 font-numbers">
                                        @if ($item['deleted_at'])
                                            <span class="inline-flex items-center gap-2 rounded-full bg-white px-3 py-2 dark:bg-surface-900">
                                                <i class="fa-solid fa-calendar-days text-[10px]"></i>
                                                <span>{{ $item['deleted_at']->format('Y-m-d h:i A') }}</span>
                                            </span>
                                            <span class="inline-flex items-center gap-2 rounded-full bg-white px-3 py-2 dark:bg-surface-900">
                                                <i class="fa-solid fa-clock text-[10px]"></i>
                                                <span>{{ $item['deleted_at']->diffForHumans() }}</span>
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="flex flex-wrap items-center gap-3">
                                    <form method="POST" action="{{ route('admin.trash.restore', ['type' => $item['type'], 'id' => $item['id']]) }}">
                                        @csrf
                                        <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-emerald-600 px-4 py-3 text-sm font-black text-white transition hover:bg-emerald-700">
                                            <i class="fa-solid fa-rotate-left text-xs"></i>
                                            <span>{{ $isArabic ? 'استعادة العنصر' : 'Restore item' }}</span>
                                        </button>
                                    </form>

                                    <form method="POST" action="{{ route('admin.trash.destroy', ['type' => $item['type'], 'id' => $item['id']]) }}" onsubmit="return confirm('{{ $isArabic ? 'سيتم حذف العنصر نهائياً ولا يمكن التراجع عن ذلك. هل تريد المتابعة؟' : 'This will permanently delete the item and cannot be undone. Continue?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <input type="password" name="trash_force_delete_password" required class="mb-2 w-full rounded-2xl border border-rose-200 bg-white px-4 py-3 text-sm font-bold text-surface-700 outline-none transition focus:border-rose-400 dark:border-rose-500/20 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ $isArabic ? 'أدخل كلمة سر الحذف النهائي' : 'Enter the permanent delete password' }}">
                                        <button type="submit" class="inline-flex items-center gap-2 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-black text-rose-700 transition hover:bg-rose-100 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300 dark:hover:bg-rose-500/20">
                                            <i class="fa-solid fa-trash text-xs"></i>
                                            <span>{{ $isArabic ? 'حذف نهائي' : 'Permanent delete' }}</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </article>
                    @empty
                        <div class="rounded-xl border border-dashed border-surface-300 px-6 py-14 text-center dark:border-surface-700">
                            <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-xl bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-300">
                                <i class="fa-solid fa-trash-can text-2xl"></i>
                            </div>
                            <h3 class="mt-5 text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'لا توجد عناصر محذوفة حالياً' : 'No deleted items right now' }}</h3>
                            <p class="mx-auto mt-2 max-w-xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                                {{ $isArabic ? 'عندما يتم حذف عناصر قابلة للاستعادة ستظهر هنا، ويمكنك من هذه الصفحة استعادتها أو حذفها نهائياً.' : 'When recoverable items are deleted they will appear here, and you will be able to restore or permanently remove them from this page.' }}
                            </p>
                        </div>
                    @endforelse
                </div>

                @if ($selectedType !== 'all')
                    <div class="mt-6">
                        {{ $paginator->links() }}
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection