<script setup>
import { Head, Link, router } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import {
    CloudArrowDownIcon,
    ServerStackIcon,
    ClockIcon,
    ExclamationTriangleIcon,
    CheckCircleIcon,
    PlayIcon,
    ArchiveBoxIcon,
} from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

defineProps({
    stats: Object,
    recent_backups: Array,
    schedules: Array,
    destinations: Array,
})

const runNow = async (s) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `'${s.name}' profili şimdi çalıştırılsın mı? (yedek alma birkaç dakika sürer)`,
        variant: 'info',
        confirmText: 'Onayla',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.post(route('admin.backups.schedules.run', s.id), {}, { preserveScroll: true })
}

const statusBadge = (s) => ({
    success: 'bg-emerald-100 text-emerald-700',
    partial: 'bg-amber-100 text-amber-700',
    failed: 'bg-red-100 text-red-700',
    completed: 'bg-emerald-100 text-emerald-700',
    pending: 'bg-blue-100 text-blue-700',
}[s] || 'bg-slate-100 text-slate-700')

const driverIcon = (d) => ({
    local: '💾',
    s3: '☁️',
    backblaze_b2: '☁️',
    wasabi: '☁️',
    restic: '🔐',
    sftp: '📡',
}[d] || '📦')
</script>

<template>
    <Head title="Backup Manager" />
    <AdminLayout>
        <template #header>Backup Manager</template>

        <!-- Sub nav -->
        <div class="mb-4 flex flex-wrap gap-1 border-b border-slate-200">
            <span class="px-4 py-2 text-sm font-medium border-b-2 border-indigo-600 text-indigo-700">Dashboard</span>
            <Link :href="route('admin.backups.schedules')" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Yedek Profilleri</Link>
            <Link :href="route('admin.backups.destinations')" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Hedefler (Storage)</Link>
            <Link :href="route('admin.backups.history')" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-900">Tarihçe & Restore</Link>
        </div>

        <!-- Stats -->
        <div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-5">
            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <ArchiveBoxIcon class="h-5 w-5 text-indigo-500" />
                <div class="mt-2 text-2xl font-bold">{{ stats.total_backups }}</div>
                <p class="text-xs text-slate-500">Toplam Yedek</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <CloudArrowDownIcon class="h-5 w-5 text-blue-500" />
                <div class="mt-2 text-lg font-bold">{{ stats.total_size_human }}</div>
                <p class="text-xs text-slate-500">Toplam Boyut</p>
            </div>
            <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4">
                <ClockIcon class="h-5 w-5 text-emerald-600" />
                <div class="mt-2 text-2xl font-bold text-emerald-700">{{ stats.last_24h }}</div>
                <p class="text-xs text-emerald-700">Son 24 Saat</p>
            </div>
            <div :class="['rounded-xl border p-4', stats.failed_7d > 0 ? 'border-red-200 bg-red-50' : 'border-slate-200 bg-white shadow-sm']">
                <ExclamationTriangleIcon :class="['h-5 w-5', stats.failed_7d > 0 ? 'text-red-600' : 'text-slate-400']" />
                <div :class="['mt-2 text-2xl font-bold', stats.failed_7d > 0 ? 'text-red-700' : 'text-slate-500']">{{ stats.failed_7d }}</div>
                <p class="text-xs text-slate-500">7 Gün Hata</p>
            </div>
            <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <ServerStackIcon class="h-5 w-5 text-purple-500" />
                <div class="mt-2 text-2xl font-bold">{{ destinations.length }}</div>
                <p class="text-xs text-slate-500">Aktif Hedef</p>
            </div>
        </div>

        <!-- Schedules -->
        <div class="mb-6 rounded-xl border border-slate-200 bg-white shadow-sm">
            <div class="flex items-center justify-between border-b border-slate-200 px-5 py-3">
                <h3 class="font-semibold flex items-center gap-2">
                    <ClockIcon class="h-5 w-5 text-indigo-500" /> Aktif Yedek Profilleri
                </h3>
                <Link :href="route('admin.backups.schedules')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">
                    Yönet →
                </Link>
            </div>
            <div v-if="schedules.length === 0" class="px-5 py-12 text-center text-sm text-slate-500">
                Henüz yedek profili tanımlı değil.
                <Link :href="route('admin.backups.schedules')" class="text-indigo-600 hover:underline">İlk profili oluştur</Link>
            </div>
            <table v-else class="min-w-full divide-y divide-slate-100 text-sm">
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-2 text-left">Profil</th>
                        <th class="px-4 py-2 text-left">Zamanlama</th>
                        <th class="px-4 py-2 text-left">Kapsam</th>
                        <th class="px-4 py-2 text-left">Hedef</th>
                        <th class="px-4 py-2 text-left">Son Çalışma</th>
                        <th class="px-4 py-2 text-left">Sıradaki</th>
                        <th class="px-4 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr v-for="s in schedules" :key="s.id" class="hover:bg-slate-50">
                        <td class="px-4 py-2">
                            <div class="flex items-center gap-2">
                                <span :class="['h-1.5 w-1.5 rounded-full', s.is_active ? 'bg-emerald-500' : 'bg-slate-300']"></span>
                                <span class="font-medium">{{ s.name }}</span>
                            </div>
                        </td>
                        <td class="px-4 py-2">
                            <div class="text-xs">{{ s.human_cron }}</div>
                            <code class="font-mono text-[10px] text-slate-400">{{ s.cron }}</code>
                        </td>
                        <td class="px-4 py-2 text-xs">
                            <span class="rounded bg-slate-100 px-2 py-0.5">{{ s.scope }}</span>
                        </td>
                        <td class="px-4 py-2 text-xs">
                            <span class="mr-1">{{ driverIcon(s.destination_driver) }}</span>
                            {{ s.destination_name }}
                        </td>
                        <td class="px-4 py-2">
                            <div v-if="s.last_run_at" class="text-xs">
                                <div class="text-slate-500">{{ s.last_run_at }}</div>
                                <span :class="['rounded px-1.5 py-0.5 text-[10px] font-semibold', statusBadge(s.last_run_status)]">{{ s.last_run_status }}</span>
                            </div>
                            <span v-else class="text-xs text-slate-400">—</span>
                        </td>
                        <td class="px-4 py-2 text-xs text-slate-500">{{ s.next_run_at || '—' }}</td>
                        <td class="px-4 py-2 text-right">
                            <button @click="runNow(s)" class="inline-flex items-center gap-1 rounded border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 hover:bg-indigo-100">
                                <PlayIcon class="h-3 w-3" /> Şimdi Çalıştır
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Destinations + Recent backups -->
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Destinations -->
            <div class="rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-slate-200 px-5 py-3">
                    <h3 class="font-semibold flex items-center gap-2">
                        <ServerStackIcon class="h-5 w-5 text-purple-500" /> Yedek Hedefleri
                    </h3>
                    <Link :href="route('admin.backups.destinations')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">
                        Yönet →
                    </Link>
                </div>
                <div class="divide-y divide-slate-100">
                    <div v-for="d in destinations" :key="d.id" class="flex items-center justify-between p-4">
                        <div class="flex items-center gap-3">
                            <div class="text-2xl">{{ driverIcon(d.driver) }}</div>
                            <div>
                                <div class="font-medium text-sm flex items-center gap-2">
                                    {{ d.name }}
                                    <span v-if="d.is_default" class="rounded bg-emerald-100 px-1.5 py-0.5 text-[10px] font-semibold text-emerald-700">DEFAULT</span>
                                </div>
                                <div class="text-xs text-slate-500 font-mono">{{ d.driver }} · {{ d.backup_count }} yedek · {{ d.total_human }}</div>
                            </div>
                        </div>
                        <span v-if="d.is_healthy" class="inline-flex items-center gap-1 text-xs text-emerald-600">
                            <CheckCircleIcon class="h-4 w-4" /> sağlıklı
                        </span>
                        <span v-else class="inline-flex items-center gap-1 text-xs text-red-600">
                            <ExclamationTriangleIcon class="h-4 w-4" /> hatalı
                        </span>
                    </div>
                </div>
            </div>

            <!-- Recent backups -->
            <div class="rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-slate-200 px-5 py-3">
                    <h3 class="font-semibold flex items-center gap-2">
                        <ArchiveBoxIcon class="h-5 w-5 text-blue-500" /> Son Yedekler
                    </h3>
                    <Link :href="route('admin.backups.history')" class="text-sm font-medium text-indigo-600 hover:text-indigo-700">
                        Tümü →
                    </Link>
                </div>
                <div v-if="recent_backups.length === 0" class="px-5 py-12 text-center text-sm text-slate-500">
                    Henüz yedek alınmamış.
                </div>
                <div v-else class="divide-y divide-slate-100">
                    <div v-for="b in recent_backups" :key="b.id" class="flex items-center justify-between p-3">
                        <div class="flex-1 min-w-0">
                            <div class="font-mono text-sm">{{ b.account_username }}</div>
                            <div class="text-xs text-slate-500">{{ b.type }} · {{ b.size_human }} · {{ b.created_at }}</div>
                        </div>
                        <span :class="['rounded px-2 py-0.5 text-xs font-semibold', statusBadge(b.status)]">{{ b.status }}</span>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
