<x-filament-panels::page>
    <div class="space-y-6">
        <!-- Info Banner -->
        <div class="p-4 bg-gray-55 dark:bg-gray-900/40 rounded-xl border border-gray-200 dark:border-gray-700">
            <p class="text-sm text-gray-600 dark:text-gray-400">
                Generate and manage system backups. You can restore previous database snapshots directly from the table below. Note that database restoration is destructive and will overwrite your existing catalog, orders, settings, and users.
            </p>
        </div>

        <!-- Backups List Table -->
        <div class="border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden bg-white dark:bg-gray-800">
            @if(count($backups) > 0)
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
                            <th class="p-4 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">File Name</th>
                            <th class="p-4 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Created At</th>
                            <th class="p-4 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">File Size</th>
                            <th class="p-4 text-xs font-bold uppercase text-gray-500 dark:text-gray-400 text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
                        @foreach($backups as $backup)
                            <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-900/20 transition-colors">
                                <td class="p-4 text-sm font-semibold text-gray-900 dark:text-white">
                                    {{ $backup['filename'] }}
                                </td>
                                <td class="p-4 text-sm text-gray-600 dark:text-gray-450">
                                    {{ \Carbon\Carbon::parse($backup['created_at'])->format('M j, Y h:i A') }}
                                </td>
                                <td class="p-4 text-sm text-gray-650 dark:text-gray-400">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-850 dark:text-gray-300">
                                        {{ $backup['size'] }}
                                    </span>
                                </td>
                                <td class="p-4 text-sm text-right space-x-2">
                                    <!-- Download Button -->
                                    <x-filament::button 
                                        wire:click="downloadBackup('{{ $backup['filename'] }}')" 
                                        size="xs" 
                                        color="info" 
                                        icon="heroicon-m-arrow-down-tray"
                                        tag="button"
                                    >
                                        Download
                                    </x-filament::button>

                                    <!-- Restore Button -->
                                    <x-filament::button 
                                        wire:click="mountAction('restoreBackup', { filename: '{{ $backup['filename'] }}' })" 
                                        size="xs" 
                                        color="warning" 
                                        icon="heroicon-m-arrow-path"
                                        tag="button"
                                    >
                                        Restore
                                    </x-filament::button>
 
                                    <!-- Delete Button -->
                                    <x-filament::button 
                                        wire:click="deleteBackup('{{ $backup['filename'] }}')" 
                                        wire:confirm="Are you sure you want to delete this backup file? This action cannot be undone."
                                        size="xs" 
                                        color="danger" 
                                        icon="heroicon-m-trash"
                                        tag="button"
                                    >
                                        Delete
                                    </x-filament::button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="p-8 text-center text-gray-500 dark:text-gray-400">
                    <div class="flex flex-col items-center justify-center space-y-3">
                        <x-filament::icon 
                            icon="heroicon-o-folder-open" 
                            class="h-10 w-10 text-gray-300 dark:text-gray-600"
                        />
                        <p class="text-sm font-medium">No system backups found.</p>
                        <p class="text-xs">Click "Create Backup" in the top header to generate your first backup archive.</p>
                    </div>
                </div>
            @endif
        </div>

        <!-- Scheduled Backup Info Card -->
        <div class="p-6 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 space-y-3">
            <h3 class="text-base font-bold text-gray-900 dark:text-white flex items-center space-x-2">
                <x-filament::icon 
                    icon="heroicon-o-clock" 
                    class="h-5 w-5 text-primary-500"
                />
                <span>Automated Backup Schedules & Retention Policy</span>
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Sawdabazar runs automated daily backup operations inside the system background scheduler.
            </p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
                <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-850">
                    <span class="text-xs font-bold uppercase text-gray-400 dark:text-gray-500 block mb-1">Database & File Backup</span>
                    <span class="text-sm font-semibold text-gray-800 dark:text-gray-200 block">Daily at 02:00 AM</span>
                    <span class="text-xs text-gray-500 dark:text-gray-450 mt-1 block">Creates local snapshot and writes to private storage.</span>
                </div>
                <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-850">
                    <span class="text-xs font-bold uppercase text-gray-400 dark:text-gray-500 block mb-1">Retention Cleanup</span>
                    <span class="text-sm font-semibold text-gray-800 dark:text-gray-200 block">Daily at 01:00 AM</span>
                    <span class="text-xs text-gray-500 dark:text-gray-450 mt-1 block">Removes old archive records matching clean criteria.</span>
                </div>
                <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-100 dark:border-gray-850">
                    <span class="text-xs font-bold uppercase text-gray-400 dark:text-gray-500 block mb-1">Storage Path</span>
                    <span class="text-sm font-semibold text-gray-800 dark:text-gray-200 block truncate">storage/app/private/Laravel</span>
                    <span class="text-xs text-gray-500 dark:text-gray-450 mt-1 block">Secured privately to prevent external downloads.</span>
                </div>
            </div>
        </div>

        <!-- Cron Job Configuration Instructions -->
        <div class="p-6 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 space-y-4">
            <h3 class="text-base font-bold text-gray-900 dark:text-white flex items-center space-x-2">
                <x-filament::icon 
                    icon="heroicon-o-command-line" 
                    class="h-5 w-5 text-warning-500"
                />
                <span>Active Server Cron Job Setup</span>
            </h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                To allow automated daily backups and cleanup checks to run automatically in the background, you must configure a single Cron Job on your server.
            </p>

            <div class="space-y-3">
                <p class="text-xs font-bold text-gray-700 dark:text-gray-300 uppercase">Your Server Cron Command:</p>
                <div class="relative flex items-center justify-between rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 overflow-hidden p-1">
                    <div class="flex-grow min-w-0 p-3">
                        <code id="cron-job-command" class="font-mono text-xs text-gray-800 dark:text-gray-200 block overflow-x-auto whitespace-nowrap select-all leading-relaxed">* * * * * cd {{ base_path() }} && php artisan schedule:run >> /dev/null 2>&1</code>
                    </div>
                    <button 
                        type="button" 
                        onclick="(function(btn){ var text = document.getElementById('cron-job-command').textContent; if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function(){ btn.innerHTML = '✅ Copied'; setTimeout(function(){ btn.innerHTML = '📋 Copy'; }, 2000); }); } else { var el = document.createElement('textarea'); el.value = text; el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el); btn.innerHTML = '✅ Copied'; setTimeout(function(){ btn.innerHTML = '📋 Copy'; }, 2000); } })(this)"
                        class="h-9 px-4 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 text-xs font-semibold border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 shadow-sm transition-all flex items-center justify-center shrink-0 cursor-pointer mr-1"
                    >
                        📋 Copy
                    </button>
                </div>
            </div>

            <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1.5">
                <p class="font-bold text-gray-700 dark:text-gray-300">Setting Up on Server Panels:</p>
                <ul class="list-disc pl-5 space-y-1">
                    <li><strong>cPanel:</strong> Go to "Cron Jobs", select "Once Per Minute" (<code>* * * * *</code>) from common settings, paste the command above, and click "Add New Cron Job".</li>
                    <li><strong>VPS (Ubuntu/Debian):</strong> SSH into your server, run <code>crontab -e</code>, paste the command at the end of the file, and save.</li>
                    <li><strong>Local Testing (Laragon/Local):</strong> Run <code>php artisan schedule:work</code> in your terminal to simulate the scheduler.</li>
                </ul>
            </div>
        </div>

        <x-filament-actions::modals />
    </div>
</x-filament-panels::page>
