<script setup>
import { ref } from 'vue'
import { Head, router, useForm } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import { GlobeAltIcon, PlusIcon, TrashIcon, XMarkIcon, LockClosedIcon, FolderIcon } from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({ subdomains: Array, parents: Array, limit: Number, usage: Number })

const showForm = ref(false)
const form = useForm({
    subdomain: '',
    parent_domain_id: props.parents[0]?.id ?? null,
    php_version: '8.2',
})

const submit = () => form.post(route('customer.subdomains.store'), {
    onSuccess: () => { showForm.value = false; form.reset(); form.parent_domain_id = props.parents[0]?.id ?? null; form.php_version = '8.2' },
})

const remove = async (s) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `${s.name} silinsin mi?`,
        variant: 'danger',
        confirmText: 'Sil',
        cancelText: 'İptal',
    })
    if (ok) router.delete(route('customer.subdomains.destroy', s.id))
}
</script>

<template>
    <Head title="Alt Alan Adları" />
    <CustomerLayout>
        <template #header>Alt Alan Adları (Subdomains)</template>

        <div class="mb-4 flex items-center justify-between">
            <p class="text-sm text-slate-600">{{ usage }} / {{ limit ?? 'sınırsız' }} alt alan adı</p>
            <button @click="showForm = true" :disabled="!parents.length" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">
                <PlusIcon class="h-4 w-4" /> Yeni Alt Alan Adı
            </button>
        </div>

        <div v-if="!parents.length" class="rounded-xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">
            Önce bir ana alan adı ekleyin.
        </div>

        <div v-else-if="subdomains.length === 0" class="rounded-xl border border-dashed border-slate-300 bg-white p-12 text-center">
            <GlobeAltIcon class="mx-auto h-14 w-14 text-slate-300" />
            <h3 class="mt-3 text-lg font-semibold">Henüz alt alan adı yok</h3>
            <p class="mt-1 text-sm text-slate-500">blog.example.com, shop.example.com gibi alt domainler ekleyin.</p>
        </div>

        <div v-else class="grid grid-cols-1 gap-3 md:grid-cols-2">
            <div v-for="s in subdomains" :key="s.id" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between">
                    <div>
                        <a :href="(s.ssl_enabled ? 'https://' : 'http://') + s.name" target="_blank" class="font-mono font-semibold text-slate-900 hover:text-indigo-600">{{ s.name }}</a>
                        <p class="mt-1 text-xs text-slate-500">Ana: <span class="font-mono">{{ s.parent }}</span></p>
                        <p class="mt-1 text-xs text-slate-500 flex items-center gap-1"><FolderIcon class="h-3 w-3" /><code class="font-mono text-xs">{{ s.document_root }}</code></p>
                        <div class="mt-2 flex gap-2 text-xs">
                            <span class="rounded bg-slate-100 px-1.5 py-0.5">PHP {{ s.php_version }}</span>
                            <span v-if="s.ssl_enabled" class="inline-flex items-center gap-0.5 text-emerald-600"><LockClosedIcon class="h-3 w-3" /> SSL</span>
                        </div>
                    </div>
                    <button @click="remove(s)" class="rounded p-1.5 text-red-500 hover:bg-red-50"><TrashIcon class="h-4 w-4" /></button>
                </div>
            </div>
        </div>

        <div v-if="showForm" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Yeni Alt Alan Adı</h3>
                    <button @click="showForm = false"><XMarkIcon class="h-5 w-5 text-slate-400" /></button>
                </div>
                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium">Alt Alan</label>
                        <div class="mt-1 flex rounded-lg border border-slate-300 overflow-hidden">
                            <input v-model="form.subdomain" type="text" placeholder="blog" class="flex-1 border-0 px-3 py-2 font-mono text-sm focus:ring-0" />
                            <span class="bg-slate-100 px-3 py-2 font-mono text-sm text-slate-600">.{{ parents.find(p => p.id === form.parent_domain_id)?.name }}</span>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Ana Alan Adı</label>
                        <select v-model="form.parent_domain_id" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">
                            <option v-for="p in parents" :key="p.id" :value="p.id">{{ p.name }}</option>
                        </select>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" @click="showForm = false" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">İptal</button>
                        <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Oluştur</button>
                    </div>
                </form>
            </div>
        </div>
    </CustomerLayout>
</template>
