@extends('layouts.admin')

@section('title', 'Backups — ' . $user->name)
@section('page-title', 'Backups')

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

    {{-- Back + user header --}}
    <div class="flex items-center gap-4">
        <a href="{{ route('admin.backups.index') }}"
           class="inline-flex items-center gap-2 rounded-2xl border border-slate-300 px-4 py-2.5 text-sm font-semibold text-slate-600 transition hover:bg-slate-50">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to Backups
        </a>
        <div>
            <h2 class="text-lg font-bold text-slate-900">{{ $user->name }}</h2>
            <p class="text-sm text-slate-500">{{ $user->email }}</p>
        </div>
    </div>

    {{-- Stats --}}
    <section class="grid gap-4 md:grid-cols-4">
        <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Total</p>
            <p class="mt-3 text-3xl font-black text-slate-900">{{ number_format($stats['total']) }}</p>
        </div>
        <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Completed</p>
            <p class="mt-3 text-3xl font-black text-emerald-600">{{ number_format($stats['completed']) }}</p>
        </div>
        <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Failed</p>
            <p class="mt-3 text-3xl font-black text-red-500">{{ number_format($stats['failed']) }}</p>
        </div>
        <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">Total Size</p>
            <p class="mt-3 text-3xl font-black text-accent-600">{{ number_format($stats['total_size'] / 1048576, 2) }} MB</p>
        </div>
    </section>

    {{-- Filters --}}
    <section class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
        <form method="GET" class="grid gap-4 lg:grid-cols-[1.5fr_1fr_auto]">
            <select name="status" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All status</option>
                @foreach(['completed', 'pending', 'failed'] as $s)
                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst($s) }}</option>
                @endforeach
            </select>
            <select name="type" class="w-full rounded-2xl border border-slate-300 px-4 py-3 text-sm outline-none transition focus:border-brand-600 focus:ring-4 focus:ring-brand-600/10">
                <option value="">All types</option>
                @foreach(['cloud', 'local', 'drive'] as $t)
                    <option value="{{ $t }}" @selected(request('type') === $t)>{{ ucfirst($t) }}</option>
                @endforeach
            </select>
            <div class="flex gap-2">
                <button type="submit"
                    class="flex-1 rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
                    Filter
                </button>
                @if(request()->hasAny(['status', 'type']))
                    <a href="{{ route('admin.backups.show', $user->id) }}"
                       class="rounded-2xl border border-slate-300 px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-slate-50">
                        Clear
                    </a>
                @endif
            </div>
        </form>
    </section>

    {{-- Backups table --}}
    <section class="rounded-3xl border border-slate-200 bg-white shadow-sm">
        <div class="overflow-x-auto">
            <table class="min-w-full text-left text-sm">
                <thead class="border-b border-slate-200 bg-slate-50 text-slate-500">
                    <tr>
                        <th class="px-6 py-4 font-semibold">File</th>
                        <th class="px-6 py-4 font-semibold">Type</th>
                        <th class="px-6 py-4 font-semibold text-center">Size</th>
                        <th class="px-6 py-4 font-semibold">Status</th>
                        <th class="px-6 py-4 font-semibold">Error</th>
                        <th class="px-6 py-4 font-semibold">Completed</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($backups as $backup)
                        <tr class="table-row-hover">
                            <td class="px-6 py-5">
                                <div class="font-semibold text-slate-900">{{ $backup->file_name ?: 'Untitled backup' }}</div>
                                <div class="text-xs text-slate-400 font-mono">{{ $backup->device_id ?: '—' }}</div>
                            </td>
                            <td class="px-6 py-5 text-slate-600 uppercase text-xs font-semibold">{{ $backup->type ?: 'DB' }}</td>
                            <td class="px-6 py-5 text-center text-slate-600">{{ number_format(($backup->file_size_bytes ?? 0) / 1048576, 2) }} MB</td>
                            <td class="px-6 py-5">
                                <span class="rounded-full px-3 py-1 text-xs font-semibold {{ $backup->status === 'completed' ? 'badge-synced' : ($backup->status === 'failed' ? 'badge-failed' : 'badge-pending') }}">
                                    {{ ucfirst($backup->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-5 max-w-xs text-xs text-red-500">{{ $backup->error_message ?? '—' }}</td>
                            <td class="px-6 py-5 text-slate-500">{{ $backup->completed_at?->format('d M Y H:i') ?? 'Pending' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-6 py-16 text-center text-sm text-slate-500">No backups found for this user.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="border-t border-slate-200 px-6 py-4">{{ $backups->links() }}</div>
    </section>
</div>
@endsection