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

@section('content')

<style>
.bk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.25rem; }
.bk-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; }
.bk-kpi__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.bk-kpi__val  { font-size: 1.2rem; font-weight: 900; color: var(--text-primary); line-height: 1; }
.bk-kpi__lbl  { font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-top: .2rem; }

.bk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); overflow: hidden; }
.bk-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; }
.bk-head__title { display: flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 900; color: var(--text-primary); }
.bk-head__badge { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: var(--c-primary-bg); color: var(--c-primary); }
.bk-head__right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.bk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bk-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.bk-table thead tr { background: var(--surface-50); }
.bk-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; }
.bk-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.bk-table tbody tr:last-child { border-bottom: 0; }
.bk-table tbody tr:hover { background: var(--surface-50); }
.bk-table td { padding: .75rem 1.1rem; vertical-align: middle; }

.bk-driver { display: inline-flex; padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; background: #f0fdf4; color: #16a34a; }
.bk-actions { display: inline-flex; gap: .35rem; }

@media (max-width: 991.98px) { .bk-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .bk-kpis { grid-template-columns: 1fr; } }
</style>

{{-- KPIs --}}
<div class="bk-kpis">
    <div class="bk-kpi">
        <div class="bk-kpi__icon" style="background:#f0fdf4;color:#16a34a"><i class="fa-solid fa-hard-drive"></i></div>
        <div>
            <div class="bk-kpi__val">{{ number_format($metrics['total_backups']) }}</div>
            <div class="bk-kpi__lbl">{{ __('dashboard.total_backups') }}</div>
        </div>
    </div>
    <div class="bk-kpi">
        <div class="bk-kpi__icon" style="background:var(--c-primary-bg);color:var(--c-primary)"><i class="fa-solid fa-database"></i></div>
        <div>
            <div class="bk-kpi__val">{{ strtoupper($metrics['driver']) }}</div>
            <div class="bk-kpi__lbl">نوع قاعدة البيانات</div>
        </div>
    </div>
    <div class="bk-kpi">
        <div class="bk-kpi__icon" style="background:#fffbeb;color:#d97706"><i class="fa-solid fa-clock-rotate-left"></i></div>
        <div>
            <div class="bk-kpi__val">{{ $metrics['retention_days'] }}</div>
            <div class="bk-kpi__lbl">أيام الاحتفاظ</div>
        </div>
    </div>
    <div class="bk-kpi">
        <div class="bk-kpi__icon" style="background:#f8fafc;color:#64748b"><i class="fa-solid fa-folder-open"></i></div>
        <div>
            <div class="bk-kpi__val">{{ $metrics['total_backup_size_human'] }}</div>
            <div class="bk-kpi__lbl">الحجم الإجمالي</div>
        </div>
    </div>
</div>

<div class="bk-card">

    {{-- Header --}}
    <div class="bk-head">
        <div class="bk-head__title">
            <i class="fa-solid fa-shield-halved" style="color:var(--c-primary)"></i>
            إدارة النسخ الاحتياطية
            <span class="bk-head__badge">{{ count($backups) }}</span>
        </div>
        <div class="bk-head__right">
            <span style="font-size:.75rem;color:var(--text-muted);font-weight:600">{{ $backupDirectory }}</span>
            <form action="{{ route('dashboard.backups.index') }}" method="GET">
                <select name="sort" class="app-input app-input--sm" style="width:auto" onchange="this.form.submit()">
                    @foreach($sortOptions as $v => $l)
                        <option value="{{ $v }}" @selected($currentSort === $v)>{{ $l }}</option>
                    @endforeach
                </select>
            </form>
            @can('manage backups')
            <form action="{{ route('dashboard.backups.cleanup') }}" method="POST">
                @csrf
                <button type="submit" class="app-btn app-btn--ghost app-btn--sm"
                        data-confirm-delete="سيتم حذف النسخ القديمة. هل تريد المتابعة؟">
                    <i class="fa-solid fa-trash-can"></i>
                    <span>تنظيف القديمة</span>
                </button>
            </form>
            <form action="{{ route('dashboard.backups.run') }}" method="POST">
                @csrf
                <button type="submit" class="app-btn app-btn--primary app-btn--sm">
                    <i class="fa-solid fa-cloud-arrow-up"></i>
                    <span>إنشاء نسخة الآن</span>
                </button>
            </form>
            @endcan
        </div>
    </div>

    {{-- Table --}}
    @if(empty($backups))
        <div style="padding:3.5rem;text-align:center">
            @include('layouts.partials.index-empty-state', [
                'icon'    => 'fa-solid fa-hard-drive',
                'title'   => 'لا توجد نسخ احتياطية',
                'message' => 'أنشئ نسخة احتياطية الآن.',
            ])
        </div>
    @else
        <div class="bk-table-wrap">
            <table class="bk-table">
                <thead>
                    <tr>
                        <th>الملف</th>
                        <th>{{ __('dashboard.type_label') }}</th>
                        <th>الحجم</th>
                        <th>التاريخ</th>
                        <th style="text-align:end">الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($backups as $b)
                    <tr>
                        <td>
                            <div style="font-weight:800;color:var(--text-primary);font-size:.84rem">{{ $b['filename'] }}</div>
                            @if(!empty($b['checksum']))
                            <div style="font-size:.7rem;color:var(--text-muted);margin-top:.1rem;font-family:monospace">
                                {{ \Illuminate\Support\Str::limit($b['checksum'], 28, '…') }}
                            </div>
                            @endif
                        </td>
                        <td><span class="bk-driver">{{ strtoupper($b['driver']) }}</span></td>
                        <td style="font-size:.8rem;color:var(--text-secondary);white-space:nowrap">{{ $b['size_human'] }}</td>
                        <td style="font-size:.78rem;color:var(--text-muted);white-space:nowrap">{{ $b['created_at_human'] }}</td>
                        <td style="text-align:end">
                            <div class="bk-actions">
                                <a href="{{ route('dashboard.backups.download', $b['filename']) }}"
                                   class="app-btn app-btn--secondary app-btn--sm" title="تحميل">
                                    <i class="fa-solid fa-download"></i>
                                </a>
                                @can('manage backups')
                                <form method="POST" action="{{ route('dashboard.backups.restore', $b['filename']) }}">
                                    @csrf
                                    <button type="submit" class="app-btn app-btn--warning app-btn--sm" title="استعادة"
                                            data-confirm-delete="سيتم استعادة قاعدة البيانات من هذه النسخة. هل تريد المتابعة؟">
                                        <i class="fa-solid fa-rotate-left"></i>
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('dashboard.backups.destroy', $b['filename']) }}">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="app-btn app-btn--danger app-btn--sm" title="حذف"
                                            data-confirm-delete="سيتم حذف النسخة نهائياً.">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif

</div>

@endsection