@extends('layouts.app')
@section('title', __('dashboard.trash_title'))
@section('page_heading', __('dashboard.trash_title'))

@section('content')
@include('layouts.partials.workspace-page-styles')

@php
    $sortOptions = [
        'deleted_desc' => 'الأحدث حذفًا',
        'deleted_asc'  => 'الأقدم حذفًا',
        'title_asc'    => 'الاسم أ-ي',
        'title_desc'   => 'الاسم ي-أ',
        'type_asc'     => 'النوع أ-ي',
        'type_desc'    => 'النوع ي-أ',
    ];
    $currentSort = $sort ?? 'deleted_desc';
    $hasFilters  = filled($search) || filled($fromDate) || filled($toDate) || $selectedType !== 'all';
@endphp

<style>
.tr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-bottom: 1.25rem; }
.tr-kpi  { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.15rem; box-shadow: var(--shadow-card); display: flex; align-items: center; gap: .875rem; }
.tr-kpi__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.tr-kpi__val  { font-size: 1.2rem; font-weight: 900; color: var(--text-primary); line-height: 1; }
.tr-kpi__lbl  { font-size: .73rem; font-weight: 700; color: var(--text-muted); margin-top: .2rem; }

.tr-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.tr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tr-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--surface-50) 0%, var(--bg-card) 100%); flex-wrap: wrap; }
.tr-head__title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 900; color: var(--text-primary); }
.tr-head__badge { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: var(--c-primary-bg); color: var(--c-primary); }
.tr-head__btns  { display: flex; align-items: center; gap: .5rem; }

.tr-filters { padding: .75rem 1.25rem; border-bottom: 1px solid var(--border-subtle); background: var(--surface-50); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.tr-filters .app-input { width: auto; }
.tr-filters input[type="search"],
.tr-filters input[type="date"] { width: auto; }

.tr-bulk { display: none; align-items: center; gap: .75rem; padding: .6rem 1.25rem; background: #eff6ff; border-bottom: 1px solid #bfdbfe; }
.tr-bulk.is-on { display: flex; }
.tr-bulk__label { font-size: .8rem; font-weight: 800; color: #1d4ed8; }

.tr-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.tr-table thead tr { background: var(--surface-50); }
.tr-table th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tr-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.tr-table tbody tr:last-child { border-bottom: 0; }
.tr-table tbody tr:hover { background: var(--surface-50); }
.tr-table td { padding: .75rem 1.1rem; vertical-align: middle; }

.tr-type { display: inline-flex; padding: .25rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: var(--c-primary-bg); color: var(--c-primary); white-space: nowrap; }
.tr-actions { display: inline-flex; gap: .35rem; }
.tr-pager { padding: .875rem 1.25rem; border-top: 1px solid var(--border-subtle); }

.dark .tr-bulk { background: rgba(37,99,235,.12); border-color: rgba(96,165,250,.2); }
.dark .tr-bulk__label { color: #93c5fd; }

@media (max-width: 991.98px) { .tr-kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px)  { .tr-kpis { grid-template-columns: 1fr; } .tr-table th, .tr-table td { padding: .6rem .75rem; } }
</style>

{{-- KPIs --}}
<div class="tr-kpis">
    <div class="tr-kpi">
        <div class="tr-kpi__icon" style="background:#fef2f2;color:#dc2626"><i class="fa-solid fa-trash"></i></div>
        <div>
            <div class="tr-kpi__val">{{ number_format($metrics['total']) }}</div>
            <div class="tr-kpi__lbl">إجمالي المحذوفات</div>
        </div>
    </div>
    <div class="tr-kpi">
        <div class="tr-kpi__icon" style="background:#eff6ff;color:#2563eb"><i class="fa-solid fa-filter"></i></div>
        <div>
            <div class="tr-kpi__val">{{ number_format($filteredTotal) }}</div>
            <div class="tr-kpi__lbl">نتائج الفلترة</div>
        </div>
    </div>
    <div class="tr-kpi">
        <div class="tr-kpi__icon" style="background:#f0fdf4;color:#16a34a"><i class="fa-solid fa-layer-group"></i></div>
        <div>
            <div class="tr-kpi__val">{{ $selectedType === 'all' ? 'الكل' : ($configs[$selectedType]['label'] ?? '—') }}</div>
            <div class="tr-kpi__lbl">النطاق الحالي</div>
        </div>
    </div>
</div>

<div class="tr-card">

    {{-- Header --}}
    <div class="tr-head">
        <div class="tr-head__title">
            <i class="fa-solid fa-recycle" style="color:var(--c-primary)"></i>
            سلة المحذوفات
            @if($trashItems->total() > 0)
                <span class="tr-head__badge">{{ $trashItems->total() }}</span>
            @endif
        </div>
        <div class="tr-head__btns">
            <form method="POST" action="{{ route('dashboard.trash.bulk-restore') }}" id="bulkRestoreForm">
                @csrf
                <button type="submit" id="bulkRestoreBtn" class="app-btn app-btn--success app-btn--sm" style="display:none">
                    <i class="fa-solid fa-rotate-left"></i>
                    <span>استرجاع المحدد</span>
                </button>
            </form>
            <form method="POST" action="{{ route('dashboard.trash.bulk-force-delete') }}" id="bulkDeleteForm" class="js-needs-pin">
                @csrf
                @method('DELETE')
                <input type="hidden" name="admin_pin_token" class="js-pin-token">
                <button type="submit" id="bulkDeleteBtn" class="app-btn app-btn--danger app-btn--sm" style="display:none">
                    <i class="fa-solid fa-trash-can"></i>
                    <span>حذف نهائي</span>
                </button>
            </form>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" action="{{ route('dashboard.trash.index') }}" class="tr-filters" autocomplete="off">
        <input type="text" name="_h" style="display:none" tabindex="-1" aria-hidden="true">
        <select name="type" class="app-input app-input--sm" style="min-width:140px">
            <option value="all" @selected($selectedType === 'all')>كل الأنواع</option>
            @foreach($configs as $type => $config)
                <option value="{{ $type }}" @selected($selectedType === $type)>
                    {{ $config['label'] }} ({{ $metrics['breakdown'][$type] ?? 0 }})
                </option>
            @endforeach
        </select>
        <input type="search" name="search" class="app-input app-input--sm" style="min-width:150px"
               value="{{ $search }}" placeholder="اسم أو رقم" autocomplete="off">
        <input type="date" name="from_date" class="app-input app-input--sm" value="{{ $fromDate }}" title="من تاريخ">
        <input type="date" name="to_date"   class="app-input app-input--sm" value="{{ $toDate }}"   title="إلى تاريخ">
        <select name="sort" class="app-input app-input--sm" style="min-width:145px">
            @foreach($sortOptions as $k => $v)
                <option value="{{ $k }}" @selected($currentSort === $k)>{{ $v }}</option>
            @endforeach
        </select>
        <button type="submit" class="app-btn app-btn--secondary app-btn--sm">
            <i class="fa-solid fa-magnifying-glass"></i>
        </button>
        @if($hasFilters)
            <a href="{{ route('dashboard.trash.index') }}" class="app-btn app-btn--ghost app-btn--sm" title="مسح الفلاتر">
                <i class="fa-solid fa-xmark"></i>
            </a>
        @endif
    </form>

    {{-- Bulk bar --}}
    <div class="tr-bulk" id="bulkBar">
        <i class="fa-solid fa-square-check" style="color:#2563eb;font-size:.85rem"></i>
        <span class="tr-bulk__label" id="bulkCount">0 محدد</span>
    </div>

    {{-- Content --}}
    @if($trashItems->isEmpty())
        <div style="padding:3.5rem;text-align:center">
            @include('layouts.partials.index-empty-state', [
                'icon'    => 'fa-solid fa-trash-can',
                'title'   => 'السلة فارغة',
                'message' => $hasFilters ? 'لا توجد نتائج مطابقة للفلاتر' : 'لا توجد عناصر محذوفة',
            ])
        </div>
    @else
        <div class="tr-table-wrap">
            <table class="tr-table">
                <thead>
                    <tr>
                        <th style="width:44px">
                            <input type="checkbox" class="app-check__input" id="selectAll">
                        </th>
                        <th>النوع</th>
                        <th>العنصر</th>
                        <th>تفاصيل</th>
                        <th>تاريخ الحذف</th>
                        <th style="text-align:end">إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($trashItems as $item)
                    <tr>
                        <td>
                            <input type="checkbox" class="app-check__input js-row-cb"
                                   data-type="{{ $item->type }}" data-id="{{ $item->id }}">
                        </td>
                        <td>
                            <span class="tr-type">{{ $item->type_label }}</span>
                        </td>
                        <td>
                            <div style="font-weight:800;color:var(--text-primary)">{{ $item->title }}</div>
                            <div style="font-size:.7rem;color:var(--text-muted);margin-top:.1rem">#{{ $item->id }}</div>
                        </td>
                        <td style="color:var(--text-secondary);font-size:.8rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                            {{ $item->meta }}
                        </td>
                        <td>
                            <div style="font-size:.78rem;font-weight:700;color:var(--text-secondary)">
                                {{ optional($item->deleted_at)->format('Y-m-d') }}
                            </div>
                            <div style="font-size:.7rem;color:var(--text-muted)">
                                {{ optional($item->deleted_at)->format('H:i') }}
                            </div>
                        </td>
                        <td style="text-align:end">
                            <div class="tr-actions">
                                <form method="POST" action="{{ route('dashboard.trash.restore', ['type' => $item->type, 'id' => $item->id]) }}">
                                    @csrf
                                    <button type="submit" class="app-btn app-btn--success app-btn--sm" title="استرجاع">
                                        <i class="fa-solid fa-rotate-left"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('dashboard.trash.force-delete', ['type' => $item->type, 'id' => $item->id]) }}" class="js-needs-pin">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="admin_pin_token" class="js-pin-token">
                                    <button type="submit" class="app-btn app-btn--danger app-btn--sm" title="حذف نهائي">
                                        <i class="fa-solid fa-trash-can"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="tr-pager">
            {{ $trashItems->appends(request()->query())->links() }}
        </div>
    @endif

</div>

{{-- PIN Modal --}}
<div class="custom-modal" id="pinModal" style="display:none">
    <div style="background:var(--bg-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);width:min(420px,calc(100vw - 2rem));overflow:hidden">
        <div style="display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)">
            <h2 style="margin:0;font-size:.95rem;font-weight:900;color:var(--text-primary)">
                <i class="fa-solid fa-shield-halved" style="color:#dc2626;margin-inline-end:.4rem"></i>
                تأكيد الحذف النهائي
            </h2>
            <button type="button" class="hdr-btn" data-modal-close><i class="fa-solid fa-xmark"></i></button>
        </div>
        <div style="padding:1.25rem;display:grid;gap:1rem">
            <p style="margin:0;font-size:.85rem;color:var(--text-secondary);line-height:1.65">
                هذا الإجراء <strong style="color:#dc2626">لا يمكن التراجع عنه</strong>. أدخل كلمة مرور الإدارة للمتابعة.
            </p>
            <div>
                <label class="ws-label">Admin PIN</label>
                <input type="password" id="pinInput" class="app-input" placeholder="••••••" autocomplete="off" inputmode="numeric">
                <div id="pinError" class="app-field-error" style="display:none"></div>
            </div>
            <div style="display:flex;justify-content:flex-end;gap:.625rem">
                <button type="button" class="app-btn app-btn--secondary" data-modal-close>إلغاء</button>
                <button type="button" class="app-btn app-btn--danger" id="pinConfirmBtn">
                    <i class="fa-solid fa-trash-can"></i> تأكيد الحذف
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
(function () {
    'use strict';

    // ── Checkbox selection ─────────────────────────────────────────────────
    const selectAll   = document.getElementById('selectAll');
    const bulkBar     = document.getElementById('bulkBar');
    const bulkCount   = document.getElementById('bulkCount');
    const restoreBtn  = document.getElementById('bulkRestoreBtn');
    const deleteBtn   = document.getElementById('bulkDeleteBtn');
    const restoreForm = document.getElementById('bulkRestoreForm');
    const deleteForm  = document.getElementById('bulkDeleteForm');

    function getChecked() {
        return Array.from(document.querySelectorAll('.js-row-cb:checked'));
    }

    function injectItems(form, checked) {
        form.querySelectorAll('input[name^="items["]').forEach(el => el.remove());
        checked.forEach(function (cb, i) {
            ['type', 'id'].forEach(function (k) {
                var inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = 'items[' + i + '][' + k + ']';
                inp.value = cb.dataset[k];
                form.appendChild(inp);
            });
        });
    }

    function refreshUI() {
        var checked = getChecked();
        var n = checked.length;
        var total = document.querySelectorAll('.js-row-cb').length;

        bulkCount.textContent = n + ' محدد';
        bulkBar.classList.toggle('is-on', n > 0);
        if (restoreBtn) restoreBtn.style.display = n > 0 ? '' : 'none';
        if (deleteBtn)  deleteBtn.style.display  = n > 0 ? '' : 'none';

        if (selectAll) {
            selectAll.checked       = n > 0 && n === total;
            selectAll.indeterminate = n > 0 && n < total;
        }

        if (restoreForm) injectItems(restoreForm, checked);
        if (deleteForm)  injectItems(deleteForm, checked);
    }

    if (selectAll) {
        selectAll.addEventListener('change', function () {
            document.querySelectorAll('.js-row-cb').forEach(function (cb) {
                cb.checked = selectAll.checked;
            });
            refreshUI();
        });
    }

    document.addEventListener('change', function (e) {
        if (e.target.classList.contains('js-row-cb')) refreshUI();
    });

    // ── PIN verification ───────────────────────────────────────────────────
    var pinInput   = document.getElementById('pinInput');
    var pinError   = document.getElementById('pinError');
    var pinConfirm = document.getElementById('pinConfirmBtn');
    var pending    = null;

    function clearPin() {
        if (pinInput) { pinInput.value = ''; pinInput.classList.remove('app-input--invalid'); }
        if (pinError) { pinError.textContent = ''; pinError.style.display = 'none'; }
    }

    function showPinError(msg) {
        if (pinInput) pinInput.classList.add('app-input--invalid');
        if (pinError) { pinError.textContent = msg; pinError.style.display = ''; }
    }

    document.querySelectorAll('.js-needs-pin').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            var token = form.querySelector('.js-pin-token');
            if (token && token.value) return; // already verified
            e.preventDefault();
            pending = form;
            clearPin();
            openModal('pinModal');
            setTimeout(function () { if (pinInput) pinInput.focus(); }, 200);
        });
    });

    if (pinInput) {
        pinInput.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') { e.preventDefault(); if (pinConfirm) pinConfirm.click(); }
        });
    }

    if (pinConfirm) {
        pinConfirm.addEventListener('click', function () {
            var pin = pinInput ? pinInput.value.trim() : '';
            if (!pin) { showPinError('يرجى إدخال كلمة المرور.'); return; }

            pinConfirm.disabled = true;

            fetch('{{ route('dashboard.verify-admin-pin') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ pin: pin, context: 'permanent_delete' }),
            })
            .then(function (r) {
                return r.json().then(function (d) {
                    if (!r.ok) throw new Error(d.message || 'خطأ في التحقق');
                    return d;
                });
            })
            .then(function (d) {
                var tokenEl = pending ? pending.querySelector('.js-pin-token') : null;
                if (tokenEl) tokenEl.value = d.token || '';
                closeModal('pinModal');
                if (pending) pending.submit();
            })
            .catch(function (err) {
                showPinError(err.message || 'خطأ في التحقق');
            })
            .finally(function () {
                pinConfirm.disabled = false;
            });
        });
    }

    var pinModal = document.getElementById('pinModal');
    if (pinModal) {
        pinModal.addEventListener('modal:closed', function () {
            pending = null;
            clearPin();
        });
    }

})();
</script>
@endsection