<script setup>
import { ref, computed } from 'vue'
import { Head, Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'
import {
    ArrowLeftIcon,
    ArrowUpTrayIcon,
    CloudArrowUpIcon,
    InformationCircleIcon,
    CheckCircleIcon,
    DocumentIcon,
} from '@heroicons/vue/24/outline'

defineProps({ accounts: Array })

const form = useForm({
    archive: null,
    source_panel: 'cpanel',
    source_version: '',
    source_hostname: '',
    source_username: '',
    primary_domain: '',
    notes: '',
})

const fileName = ref('')
const fileSize = ref(0)

const onFile = (e) => {
    const f = e.target.files[0]
    if (!f) return
    form.archive = f
    fileName.value = f.name
    fileSize.value = f.size
}

const submit = () => form.post(route('admin.snapshots.import'), { forceFormData: true })

const sourceMeta = computed(() => ({
    cpanel: { name: 'cPanel', icon: '🔷', formats: 'cpmove-*.tar.gz, backup-*.tar.gz' },
    plesk: { name: 'Plesk', icon: '🔶', formats: '*.tar (Plesk Backup)' },
    directadmin: { name: 'DirectAdmin', icon: '⚪', formats: 'admin_backup.tar.gz' },
}[form.source_panel]))

const humanBytes = (b) => {
    if (b < 1024) return b + ' B'
    if (b < 1024 ** 2) return (b / 1024).toFixed(1) + ' KB'
    if (b < 1024 ** 3) return (b / 1024 / 1024).toFixed(1) + ' MB'
    return (b / 1024 / 1024 / 1024).toFixed(2) + ' GB'
}
</script>

<template>
    <Head title="Snapshot İmport" />
    <AdminLayout>
        <template #header>cPanel / Plesk / DirectAdmin İmport Sihirbazı</template>

        <Link :href="route('admin.snapshots.index')" class="mb-4 inline-flex items-center gap-1 text-sm text-slate-600 hover:text-indigo-700">
            <ArrowLeftIcon class="h-4 w-4" /> Snapshots
        </Link>

        <div class="mb-4 rounded-xl border border-purple-200 bg-purple-50 p-4 text-sm text-purple-900">
            <div class="flex gap-3">
                <CloudArrowUpIcon class="h-5 w-5 flex-shrink-0 text-purple-600" />
                <div>
                    <strong>Mevcut müşteriyi Onoxsoft'a taşı:</strong> cPanel <code>cpmove-*.tar.gz</code>, Plesk export veya DirectAdmin backup
                    dosyasını yükle. Sistem dosyayı parse eder, içeriğini gösterir; sonra bir hesaba restore edersin.
                </div>
            </div>
        </div>

        <form @submit.prevent="submit" class="max-w-3xl space-y-6">
            <!-- Source panel -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-base font-semibold mb-3">1. Kaynak Panel</h3>
                <div class="grid grid-cols-3 gap-3">
                    <label v-for="p in ['cpanel', 'plesk', 'directadmin']" :key="p"
                           class="flex flex-col items-center gap-2 rounded-lg border p-4 cursor-pointer hover:bg-slate-50"
                           :class="form.source_panel === p ? 'border-purple-400 bg-purple-50' : 'border-slate-200'">
                        <input type="radio" v-model="form.source_panel" :value="p" class="sr-only" />
                        <div class="text-4xl">{{ {cpanel:'🔷', plesk:'🔶', directadmin:'⚪'}[p] }}</div>
                        <div class="font-medium text-sm capitalize">{{ p === 'cpanel' ? 'cPanel' : p === 'plesk' ? 'Plesk' : 'DirectAdmin' }}</div>
                    </label>
                </div>
                <p class="mt-3 text-xs text-slate-500">
                    <strong>{{ sourceMeta.name }}</strong> formatları: <code>{{ sourceMeta.formats }}</code>
                </p>
            </div>

            <!-- Upload -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-base font-semibold mb-3">2. Dosya Yükle</h3>
                <label class="block cursor-pointer">
                    <div :class="['flex flex-col items-center gap-2 rounded-lg border-2 border-dashed p-8 text-center transition', fileName ? 'border-emerald-300 bg-emerald-50' : 'border-slate-300 bg-slate-50 hover:border-indigo-300 hover:bg-indigo-50']">
                        <CheckCircleIcon v-if="fileName" class="h-12 w-12 text-emerald-500" />
                        <ArrowUpTrayIcon v-else class="h-12 w-12 text-slate-400" />
                        <div v-if="fileName">
                            <div class="font-mono text-sm font-semibold">{{ fileName }}</div>
                            <div class="text-xs text-slate-500">{{ humanBytes(fileSize) }}</div>
                        </div>
                        <div v-else>
                            <div class="text-sm font-medium">Tıkla veya sürükle</div>
                            <div class="text-xs text-slate-500">Maks 5 GB · .tar.gz, .tar, .zip</div>
                        </div>
                    </div>
                    <input type="file" accept=".gz,.tar,.zip,.tgz" @change="onFile" class="hidden" />
                </label>
                <p v-if="form.errors.archive" class="mt-1 text-xs text-red-600">{{ form.errors.archive }}</p>
            </div>

            <!-- Source metadata -->
            <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <h3 class="text-base font-semibold mb-3">3. Kaynak Bilgileri (opsiyonel)</h3>
                <p class="text-xs text-slate-500 mb-4">Bu bilgiler manifest'e yazılır + audit trail için kullanılır.</p>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-sm font-medium">Panel Versiyonu</label>
                        <input v-model="form.source_version" type="text" :placeholder="form.source_panel === 'cpanel' ? '110.0.16' : '18.0.x'"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Kaynak Hostname</label>
                        <input v-model="form.source_hostname" type="text" placeholder="server2.eskihosting.com"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Kaynak Username</label>
                        <input v-model="form.source_username" type="text" placeholder="acmecorp"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Primary Domain</label>
                        <input v-model="form.primary_domain" type="text" placeholder="acme.com.tr"
                               class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm" />
                    </div>
                </div>
                <div class="mt-3">
                    <label class="block text-sm font-medium">Not</label>
                    <textarea v-model="form.notes" rows="2" placeholder="örn: 'Müşteri X eskihosting'tan göç, DNS NS değişikliği bekleniyor'"
                              class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"></textarea>
                </div>
            </div>

            <!-- Steps after upload -->
            <div class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">
                <div class="flex gap-3">
                    <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-blue-600" />
                    <div>
                        <strong>İmport sonrası:</strong>
                        <ol class="mt-1 list-decimal list-inside space-y-0.5 text-xs">
                            <li>Sistem dosyayı parse eder + manifest oluşturur (domains, DB sayısı, file count)</li>
                            <li>Show sayfasında içerik görünür</li>
                            <li>"Restore" butonu ile mevcut bir hesaba yazılır VEYA yeni hesap oluşturulur</li>
                            <li>cPanel suexec → Onoxsoft FPM pool dönüşümü otomatik</li>
                            <li>DNS zone'lar PowerDNS'e import edilir</li>
                        </ol>
                    </div>
                </div>
            </div>

            <!-- Submit -->
            <div class="flex justify-end gap-2">
                <Link :href="route('admin.snapshots.index')" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">İptal</Link>
                <button type="submit" :disabled="form.processing || !form.archive"
                        class="inline-flex items-center gap-2 rounded-lg bg-purple-600 px-6 py-2 text-sm font-semibold text-white hover:bg-purple-700 disabled:opacity-50">
                    <CloudArrowUpIcon class="h-5 w-5" />
                    {{ form.processing ? 'Yükleniyor + Parse Ediliyor...' : 'İmport Başlat' }}
                </button>
            </div>
        </form>
    </AdminLayout>
</template>
