<x-admin-layout>
    <x-slot name="header">
        <h2 class="font-bold text-2xl text-gray-900 dark:text-white leading-tight">Maintenance</h2>
    </x-slot>

    <div class="mb-6">
        <p class="text-sm text-gray-500 dark:text-gray-400">Kelola backup database dan optimasi performa aplikasi.</p>
    </div>

    {{-- Flash: Optimize Results --}}
    @if(session('optimize_results'))
    <div class="mb-6 bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 dark:border-slate-700 flex items-center gap-2">
            <x-heroicon-s-check-circle class="w-5 h-5 text-emerald-500" />
            <h3 class="text-sm font-bold text-gray-800 dark:text-white">Hasil Proses</h3>
        </div>
        <div class="divide-y divide-gray-50 dark:divide-slate-700">
            @foreach(session('optimize_results') as $result)
            <div class="flex items-center justify-between px-6 py-3">
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $result['label'] }}</span>
                <span class="inline-flex items-center gap-1.5 text-xs font-bold
                    {{ $result['status'] === 'success' ? 'text-emerald-700' : 'text-red-700' }}">
                    @if($result['status'] === 'success')
                        <x-heroicon-s-check-circle class="w-4 h-4" /> {{ $result['message'] }}
                    @else
                        <x-heroicon-s-x-circle class="w-4 h-4" /> {{ $result['message'] }}
                    @endif
                </span>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Flash: Backup Success --}}
    @if(session('backup_success'))
    <div class="mb-6 p-4 rounded-2xl bg-emerald-50 border border-emerald-200 flex items-start gap-3">
        <x-heroicon-s-check-circle class="w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5" />
        <div class="flex-1">
            <p class="text-sm font-bold text-emerald-800">Backup berhasil dibuat!</p>
            <p class="text-xs text-emerald-600 mt-0.5 font-mono">{{ session('backup_success') }}</p>
        </div>
        <a href="{{ route('admin.maintenance.download', ['file' => session('backup_success')]) }}"
           class="flex-shrink-0 inline-flex items-center gap-1.5 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-xl transition-colors">
            <x-heroicon-o-arrow-down-tray class="w-4 h-4" /> Download
        </a>
    </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">

        {{-- =============================== --}}
        {{-- SECTION 1: Backup & Download DB --}}
        {{-- =============================== --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
            {{-- Header --}}
            <div class="px-6 py-5 border-b border-gray-100 dark:border-slate-700 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                    <x-heroicon-o-circle-stack class="w-5 h-5 text-blue-600 dark:text-blue-400" />
                </div>
                <div>
                    <h3 class="text-base font-bold text-gray-900 dark:text-white">Backup & Download Database</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Buat snapshot database dan unduh file SQL</p>
                </div>
            </div>

            {{-- DB Info --}}
            <div class="px-6 py-4 bg-gray-50 dark:bg-slate-700/30 border-b border-gray-100 dark:border-slate-700">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Database</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 font-mono">{{ config('database.connections.mysql.database') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Host</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 font-mono">{{ config('database.connections.mysql.host') }}:{{ config('database.connections.mysql.port', 3306) }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Driver</p>
                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 uppercase font-mono">{{ config('database.default') }}</p>
                    </div>
                    <div>
                        <p class="text-[11px] font-black uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">Koneksi</p>
                        <span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-700 bg-emerald-50 px-2 py-1 rounded-full border border-emerald-200">
                            <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Terhubung
                        </span>
                    </div>
                </div>
            </div>

            {{-- Action --}}
            <div class="px-6 py-5">
                <p class="text-xs text-gray-500 dark:text-gray-400 mb-4">
                    Klik tombol di bawah untuk membuat file backup <code class="bg-gray-100 dark:bg-slate-700 px-1.5 py-0.5 rounded font-mono text-xs">.sql</code>.
                    File akan dibuat di server, kemudian dapat diunduh.
                </p>
                <form action="{{ route('admin.maintenance.backup') }}" method="POST"
                      data-confirm="Buat backup database sekarang?">
                    @csrf
                    <button type="submit"
                        class="inline-flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-bold rounded-xl shadow-sm transition-colors">
                        <x-heroicon-o-arrow-down-tray class="w-4 h-4" />
                        Buat Backup Sekarang
                    </button>
                </form>
            </div>

            {{-- Existing Backup Files --}}
            @php
                $backupDir  = storage_path('app/backups');
                $backupFiles = [];
                if (is_dir($backupDir)) {
                    $files = glob($backupDir . '/*.sql');
                    rsort($files);
                    foreach (array_slice($files, 0, 5) as $f) {
                        $backupFiles[] = [
                            'name' => basename($f),
                            'size' => round(filesize($f) / 1024, 1) . ' KB',
                            'date' => date('d M Y, H:i', filemtime($f)),
                        ];
                    }
                }
            @endphp

            @if(count($backupFiles) > 0)
            <div class="border-t border-gray-100 dark:border-slate-700">
                <div class="px-6 py-3">
                    <p class="text-[11px] font-black uppercase tracking-wider text-gray-400 dark:text-gray-500">File Backup Tersimpan</p>
                </div>
                <div class="divide-y divide-gray-50 dark:divide-slate-700/50">
                    @foreach($backupFiles as $backup)
                    <div class="flex items-center justify-between px-6 py-3">
                        <div>
                            <p class="text-xs font-bold text-gray-800 dark:text-gray-200 font-mono">{{ $backup['name'] }}</p>
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{{ $backup['date'] }} &bull; {{ $backup['size'] }}</p>
                        </div>
                        <a href="{{ route('admin.maintenance.download', ['file' => $backup['name']]) }}"
                           class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-bold text-blue-700 bg-blue-50 hover:bg-blue-100 rounded-lg border border-blue-100 transition-colors">
                            <x-heroicon-o-arrow-down-tray class="w-3.5 h-3.5" /> Download
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
            @else
            <div class="border-t border-gray-100 dark:border-slate-700 px-6 py-5">
                <p class="text-xs text-gray-400 dark:text-gray-500 text-center">Belum ada file backup tersimpan.</p>
            </div>
            @endif
        </div>

        {{-- =============================== --}}
        {{-- SECTION 2: Optimize Script      --}}
        {{-- =============================== --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
            {{-- Header --}}
            <div class="px-6 py-5 border-b border-gray-100 dark:border-slate-700 flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
                    <x-heroicon-o-bolt class="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
                </div>
                <div>
                    <h3 class="text-base font-bold text-gray-900 dark:text-white">Optimize Script</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Cache config, route, dan view untuk performa optimal</p>
                </div>
            </div>

            {{-- Cache Status Cards --}}
            <div class="px-6 py-4 bg-gray-50 dark:bg-slate-700/30 border-b border-gray-100 dark:border-slate-700">
                <div class="grid grid-cols-2 gap-3">
                    @php
                        $configCached = file_exists(base_path('bootstrap/cache/config.php'));
                        $routeCached  = file_exists(base_path('bootstrap/cache/routes-v7.php')) || file_exists(base_path('bootstrap/cache/routes.php'));
                        $viewCached   = count(glob(storage_path('framework/views/*.php'))) > 0;
                        $envMode      = app()->environment();
                    @endphp
                    <div class="bg-white dark:bg-slate-800 rounded-xl p-3 border border-gray-100 dark:border-slate-700">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-[11px] font-black text-gray-400 uppercase tracking-wide">Config</span>
                            <span class="w-2 h-2 rounded-full {{ $configCached ? 'bg-emerald-500' : 'bg-gray-300' }}"></span>
                        </div>
                        <p class="text-sm font-bold {{ $configCached ? 'text-emerald-600' : 'text-gray-500' }}">
                            {{ $configCached ? 'Cached' : 'Not Cached' }}
                        </p>
                    </div>
                    <div class="bg-white dark:bg-slate-800 rounded-xl p-3 border border-gray-100 dark:border-slate-700">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-[11px] font-black text-gray-400 uppercase tracking-wide">Routes</span>
                            <span class="w-2 h-2 rounded-full {{ $routeCached ? 'bg-emerald-500' : 'bg-gray-300' }}"></span>
                        </div>
                        <p class="text-sm font-bold {{ $routeCached ? 'text-emerald-600' : 'text-gray-500' }}">
                            {{ $routeCached ? 'Cached' : 'Not Cached' }}
                        </p>
                    </div>
                    <div class="bg-white dark:bg-slate-800 rounded-xl p-3 border border-gray-100 dark:border-slate-700">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-[11px] font-black text-gray-400 uppercase tracking-wide">Views</span>
                            <span class="w-2 h-2 rounded-full {{ $viewCached ? 'bg-emerald-500' : 'bg-gray-300' }}"></span>
                        </div>
                        <p class="text-sm font-bold {{ $viewCached ? 'text-emerald-600' : 'text-gray-500' }}">
                            {{ $viewCached ? 'Compiled' : 'Not Cached' }}
                        </p>
                    </div>
                    <div class="bg-white dark:bg-slate-800 rounded-xl p-3 border border-gray-100 dark:border-slate-700">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-[11px] font-black text-gray-400 uppercase tracking-wide">Environment</span>
                        </div>
                        <p class="text-sm font-bold text-gray-700 dark:text-gray-300 capitalize">{{ $envMode }}</p>
                    </div>
                </div>
            </div>

            {{-- Optimize Actions --}}
            <div class="px-6 py-5 space-y-4">
                {{-- Optimize All --}}
                <div class="border border-indigo-100 dark:border-indigo-900/40 rounded-xl p-4 bg-indigo-50/50 dark:bg-indigo-900/10">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1">
                            <p class="text-sm font-bold text-gray-800 dark:text-white">Optimize Semua</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Jalankan <code class="bg-white dark:bg-slate-700 px-1 py-0.5 rounded text-[11px] font-mono">artisan optimize</code> — cache config, route, dan view sekaligus.
                            </p>
                        </div>
                        <form action="{{ route('admin.maintenance.optimize') }}" method="POST"
                              data-confirm="Jalankan optimize semua cache sekarang?">
                            @csrf
                            <button type="submit"
                                class="flex-shrink-0 inline-flex items-center gap-1.5 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl transition-colors shadow-sm">
                                <x-heroicon-o-bolt class="w-4 h-4" /> Optimize
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Clear Cache --}}
                <div class="border border-amber-100 dark:border-amber-900/40 rounded-xl p-4 bg-amber-50/50 dark:bg-amber-900/10">
                    <div class="flex items-start justify-between gap-4">
                        <div class="flex-1">
                            <p class="text-sm font-bold text-gray-800 dark:text-white">Clear Semua Cache</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Jalankan <code class="bg-white dark:bg-slate-700 px-1 py-0.5 rounded text-[11px] font-mono">artisan cache:clear</code>, <code class="bg-white dark:bg-slate-700 px-1 py-0.5 rounded text-[11px] font-mono">config:clear</code>, <code class="bg-white dark:bg-slate-700 px-1 py-0.5 rounded text-[11px] font-mono">view:clear</code>.
                            </p>
                        </div>
                        <form action="{{ route('admin.maintenance.clear') }}" method="POST"
                              data-confirm="Hapus semua cache aplikasi sekarang?">
                            @csrf
                            <button type="submit"
                                class="flex-shrink-0 inline-flex items-center gap-1.5 px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-xs font-bold rounded-xl transition-colors shadow-sm">
                                <x-heroicon-o-trash class="w-4 h-4" /> Clear Cache
                            </button>
                        </form>
                    </div>
                </div>

                {{-- Info --}}
                <div class="flex items-start gap-2 text-xs text-gray-400 dark:text-gray-500 pt-1">
                    <x-heroicon-o-information-circle class="w-4 h-4 flex-shrink-0 mt-0.5" />
                    <p>Gunakan <strong>Optimize</strong> di production dan <strong>Clear Cache</strong> saat development atau setelah perubahan konfigurasi.</p>
                </div>
            </div>
        </div>

    </div>
</x-admin-layout>
