@php
    $status = $requirements['status'] ?? 'error';
    $statusClasses = match ($status) {
        'ready' => 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/30 dark:text-emerald-200',
        'warning' => 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800/60 dark:bg-amber-950/30 dark:text-amber-200',
        default => 'border-danger-200 bg-danger-50 text-danger-800 dark:border-danger-800/60 dark:bg-danger-950/30 dark:text-danger-200',
    };
@endphp

<x-filament-panels::page>
    <div class="space-y-4">
        <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('filament-pages.database_backup.cards.connection') }}</p>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                    {{ $summary['connection'] ?? '-' }}
                </p>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ __('filament-pages.database_backup.cards.database') }}: {{ $summary['database'] ?? '-' }}
                </p>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('filament-pages.database_backup.cards.driver') }}</p>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                    {{ strtoupper($summary['driver'] ?? '-') }}
                </p>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ __('filament-pages.database_backup.cards.disk') }}: {{ $summary['disk'] ?? '-' }}
                </p>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('filament-pages.database_backup.cards.total_backups') }}</p>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                    {{ $summary['count_label'] ?? '0' }}
                </p>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ __('filament-pages.database_backup.cards.total_size') }}: {{ $summary['total_size'] ?? '0 B' }}
                </p>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('filament-pages.database_backup.cards.latest_backup') }}</p>
                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">
                    {{ $summary['latest_backup_at'] ?? __('filament-pages.database_backup.empty.latest_backup') }}
                </p>
                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                    {{ $summary['latest_backup_human'] ?? __('filament-pages.database_backup.empty.not_available') }}
                </p>
            </div>
        </div>

        <div class="grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
            <x-filament::section>
                <div class="space-y-4">
                    <div class="rounded-2xl border p-4 {{ $statusClasses }}">
                        <div class="flex items-center justify-between gap-3">
                            <div>
                                <p class="text-sm font-semibold">
                                    {{ __('filament-pages.database_backup.requirements.title') }}
                                </p>
                                <p class="mt-1 text-xs">
                                    @if (($requirements['driver'] ?? null) === 'sqlite')
                                        {{ __('filament-pages.database_backup.requirements.sqlite') }}
                                    @elseif ($requirements['version_mismatch'] ?? false)
                                        {{ __('filament-pages.database_backup.requirements.version_mismatch', [
                                            'binary' => $requirements['binary'],
                                            'binary_version' => $requirements['binary_version'],
                                            'server_version' => $requirements['server_version'],
                                        ]) }}
                                    @elseif (($requirements['binary'] ?? null) && ($requirements['path'] ?? null))
                                        {{ __('filament-pages.database_backup.requirements.binary_found', ['binary' => $requirements['binary'], 'path' => $requirements['path']]) }}
                                    @elseif ($requirements['binary'] ?? null)
                                        {{ __('filament-pages.database_backup.requirements.binary_missing', ['binary' => $requirements['binary']]) }}
                                    @else
                                        {{ __('filament-pages.database_backup.requirements.unsupported', ['driver' => strtoupper($requirements['driver'] ?? '-')]) }}
                                    @endif
                                </p>
                            </div>

                            <span class="rounded-full border border-current/20 px-2.5 py-1 text-xs font-medium">
                                {{ __('filament-pages.database_backup.requirements.status_' . $status) }}
                            </span>
                        </div>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                            {{ __('filament-pages.database_backup.storage.title') }}
                        </p>
                        <p class="mt-2 break-all text-xs text-gray-600 dark:text-gray-300">
                            {{ $summary['storage_path'] ?? '-' }}
                        </p>
                    </div>

                    <div class="rounded-2xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                            {{ __('filament-pages.database_backup.retention.title') }}
                        </p>

                        <div class="mt-3 space-y-2 text-xs text-gray-600 dark:text-gray-300">
                            <p>{{ __('filament-pages.database_backup.retention.keep_all_backups_for_days', ['value' => $summary['retention']['keep_all_backups_for_days'] ?? 0]) }}</p>
                            <p>{{ __('filament-pages.database_backup.retention.keep_daily_backups_for_days', ['value' => $summary['retention']['keep_daily_backups_for_days'] ?? 0]) }}</p>
                            <p>{{ __('filament-pages.database_backup.retention.keep_weekly_backups_for_weeks', ['value' => $summary['retention']['keep_weekly_backups_for_weeks'] ?? 0]) }}</p>
                            <p>{{ __('filament-pages.database_backup.retention.keep_monthly_backups_for_months', ['value' => $summary['retention']['keep_monthly_backups_for_months'] ?? 0]) }}</p>
                            <p>{{ __('filament-pages.database_backup.retention.keep_yearly_backups_for_years', ['value' => $summary['retention']['keep_yearly_backups_for_years'] ?? 0]) }}</p>
                        </div>
                    </div>

                    @if (filled($lastCommandOutput))
                        <div class="rounded-2xl border border-gray-200 bg-gray-950 p-4 shadow-sm dark:border-gray-700">
                            <p class="text-sm font-semibold text-white">
                                {{ __('filament-pages.database_backup.output.title') }}
                            </p>
                            <pre class="mt-3 overflow-x-auto whitespace-pre-wrap text-xs leading-6 text-gray-200">{{ $lastCommandOutput }}</pre>
                        </div>
                    @endif
                </div>
            </x-filament::section>

            <x-filament::section>
                <div class="space-y-4">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {{ __('filament-pages.database_backup.list.title') }}
                            </p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ __('filament-pages.database_backup.list.description') }}
                            </p>
                        </div>
                    </div>

                    @if (count($backups) === 0)
                        <div class="rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-8 text-center dark:border-gray-700 dark:bg-gray-900/40">
                            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
                                {{ __('filament-pages.database_backup.empty.no_backups') }}
                            </p>
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                {{ __('filament-pages.database_backup.empty.no_backups_help') }}
                            </p>
                        </div>
                    @else
                        <div class="overflow-x-auto rounded-2xl border border-gray-200 dark:border-gray-700">
                            <table class="min-w-full divide-y divide-gray-200 text-right dark:divide-gray-700">
                                <thead class="bg-gray-50 dark:bg-gray-900/60">
                                    <tr>
                                        <th class="px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                                            {{ __('filament-pages.database_backup.list.file_name') }}
                                        </th>
                                        <th class="px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                                            {{ __('filament-pages.database_backup.list.created_at') }}
                                        </th>
                                        <th class="px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                                            {{ __('filament-pages.database_backup.list.size') }}
                                        </th>
                                        <th class="px-4 py-3 text-xs font-medium text-gray-500 dark:text-gray-400">
                                            {{ __('filament-pages.database_backup.list.actions') }}
                                        </th>
                                    </tr>
                                </thead>

                                <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-950/40">
                                    @foreach ($backups as $backup)
                                        <tr wire:key="backup-{{ $backup['token'] }}">
                                            <td class="px-4 py-4 align-top">
                                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                                    {{ $backup['filename'] }}
                                                </p>
                                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                                    {{ $backup['created_human'] }}
                                                </p>
                                            </td>

                                            <td class="px-4 py-4 align-top text-sm text-gray-700 dark:text-gray-200">
                                                {{ $backup['created_at'] }}
                                            </td>

                                            <td class="px-4 py-4 align-top text-sm text-gray-700 dark:text-gray-200">
                                                {{ $backup['size'] }}
                                            </td>

                                            <td class="px-4 py-4 align-top">
                                                <div class="flex flex-wrap gap-2">
                                                    <button
                                                        type="button"
                                                        class="rounded-lg bg-primary-600 px-3 py-2 text-xs font-medium text-white transition hover:bg-primary-500"
                                                        wire:click="downloadBackup('{{ $backup['token'] }}')"
                                                    >
                                                        {{ __('filament-pages.database_backup.actions.download') }}
                                                    </button>

                                                    <button
                                                        type="button"
                                                        class="rounded-lg border border-danger-300 px-3 py-2 text-xs font-medium text-danger-700 transition hover:bg-danger-50 dark:border-danger-700 dark:text-danger-300 dark:hover:bg-danger-950/40"
                                                        wire:click="deleteBackup('{{ $backup['token'] }}')"
                                                        wire:confirm="{{ __('filament-pages.database_backup.confirmations.delete') }}"
                                                    >
                                                        {{ __('filament-pages.database_backup.actions.delete') }}
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </x-filament::section>
        </div>
    </div>
</x-filament-panels::page>