<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { useForm, Link, router } from '@inertiajs/vue3'
import { ref, computed } from 'vue'
import { ChevronLeftIcon, PhotoIcon, BoltIcon, TrashIcon } from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({
    reseller: Object,
    branding: Object,
})

const form = useForm({
    brand_name:           props.branding.brand_name || '',
    primary_color:        props.branding.primary_color || '#3b82f6',
    support_email:        props.branding.support_email || '',
    support_phone:        props.branding.support_phone || '',
    white_label_hostname: props.branding.white_label_hostname || '',
})

const logoForm = useForm({ logo: null })
const logoPreview = ref(props.branding.logo_url || null)
const applyingWhiteLabel = ref(false)

const hasWhiteLabel = computed(() => Boolean(props.branding.white_label_hostname))

function onLogoChange(e) {
    const file = e.target.files[0]
    if (!file) return
    logoForm.logo = file
    logoPreview.value = URL.createObjectURL(file)
}

function submitLogo() {
    logoForm.post(route('admin.resellers.branding.logo', props.reseller.id), { forceFormData: true })
}

function submit() {
    form.patch(route('admin.resellers.branding.update', props.reseller.id))
}

function applyWhiteLabel() {
    if (!hasWhiteLabel.value) {
        alert('Önce "White-Label Panel Domain" alanını doldurup Kaydet butonuna basın.')
        return
    }
    applyingWhiteLabel.value = true
    router.post(route('admin.resellers.branding.apply', props.reseller.id), {}, {
        preserveScroll: true,
        onFinish: () => { applyingWhiteLabel.value = false },
    })
}

async function destroyWhiteLabel() {
    const ok = await ask({
        title: 'White-label\'i kaldır',
        message: `White-label kaldırılacak: ${props.branding.white_label_hostname}\nApache vhost + Let's Encrypt cert + DNS kaydı silinecek.`,
        variant: 'danger',
        confirmText: 'Kaldır',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.delete(route('admin.resellers.branding.whitelabel.destroy', props.reseller.id), {
        preserveScroll: true,
    })
}
</script>

<template>
    <AdminLayout>
        <template #header>Bayi Markalama — {{ reseller.name }}</template>

        <!-- Geri butonu -->
        <div class="mb-4">
            <Link
                :href="route('admin.resellers.show', reseller.id)"
                class="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
            >
                <ChevronLeftIcon class="h-4 w-4" /> Bayiye Dön
            </Link>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="lg:col-span-2 space-y-6">

                <!-- Logo -->
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <h2 class="mb-4 font-semibold text-slate-900 dark:text-slate-100">Logo</h2>
                    <div class="flex items-start gap-4">
                        <div class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800">
                            <img v-if="logoPreview" :src="logoPreview" alt="Logo" class="h-16 w-16 object-contain rounded" />
                            <PhotoIcon v-else class="h-8 w-8 text-slate-300" />
                        </div>
                        <div class="flex-1">
                            <input type="file" accept="image/*" @change="onLogoChange"
                                class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-rose-50 file:px-4 file:py-2 file:text-sm file:font-medium file:text-rose-700 hover:file:bg-rose-100" />
                            <button v-if="logoForm.logo" @click="submitLogo" :disabled="logoForm.processing"
                                class="mt-2 rounded-lg bg-rose-600 px-4 py-1.5 text-sm font-medium text-white hover:bg-rose-700 disabled:opacity-60">
                                Yükle
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Marka bilgileri -->
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <h2 class="mb-4 font-semibold text-slate-900 dark:text-slate-100">Marka Bilgileri</h2>
                    <form @submit.prevent="submit" class="space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Marka Adı</label>
                                <input v-model="form.brand_name" type="text" placeholder="Örn: ABC Hosting"
                                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200" />
                                <p v-if="form.errors.brand_name" class="mt-1 text-xs text-red-600">{{ form.errors.brand_name }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Birincil Renk</label>
                                <div class="flex items-center gap-2">
                                    <input v-model="form.primary_color" type="color" class="h-9 w-12 cursor-pointer rounded border border-slate-300 p-0.5" />
                                    <input v-model="form.primary_color" type="text" placeholder="#3b82f6"
                                        class="flex-1 rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200" />
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Destek E-posta</label>
                                <input v-model="form.support_email" type="email"
                                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200" />
                                <p v-if="form.errors.support_email" class="mt-1 text-xs text-red-600">{{ form.errors.support_email }}</p>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Destek Telefon</label>
                                <input v-model="form.support_phone" type="tel"
                                    class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200" />
                                <p v-if="form.errors.support_phone" class="mt-1 text-xs text-red-600">{{ form.errors.support_phone }}</p>
                            </div>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                                White-Label Panel Domain
                                <span class="ml-1 text-xs font-normal text-slate-400">(isteğe bağlı)</span>
                            </label>
                            <input v-model="form.white_label_hostname" type="text" placeholder="panel.bayi.com"
                                class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200" />
                            <p v-if="form.errors.white_label_hostname" class="mt-1 text-xs text-red-600">{{ form.errors.white_label_hostname }}</p>
                            <p class="mt-1 text-xs text-slate-500">
                                Önce A kaydı (veya CNAME) sunucu IP'sine yönlenmeli, sonra "White-Label Uygula" butonuna basılmalı.
                            </p>
                        </div>

                        <div class="flex justify-end">
                            <button type="submit" :disabled="form.processing"
                                class="rounded-lg bg-rose-600 px-5 py-2 text-sm font-medium text-white hover:bg-rose-700 disabled:opacity-60">
                                Kaydet
                            </button>
                        </div>
                    </form>
                </div>

                <!-- White-label uygulama -->
                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900">
                    <h2 class="mb-2 font-semibold text-slate-900 dark:text-slate-100">White-Label Sistem Kurulumu</h2>
                    <p class="mb-4 text-sm text-slate-500 dark:text-slate-400">
                        Apache vhost (HTTP + HTTPS) yazımı, Let's Encrypt sertifika kurulumu ve
                        (zone bizdeyse) DNS CNAME kaydı.
                    </p>
                    <div class="flex flex-wrap items-center gap-2">
                        <button
                            type="button"
                            @click="applyWhiteLabel"
                            :disabled="applyingWhiteLabel || !hasWhiteLabel"
                            class="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white hover:bg-emerald-700 disabled:opacity-50"
                            :title="hasWhiteLabel ? 'vhost+SSL+DNS uygula' : 'Önce hostname kaydet'"
                        >
                            <BoltIcon class="h-4 w-4" />
                            <span v-if="applyingWhiteLabel">Uygulanıyor…</span>
                            <span v-else>White-Label Uygula</span>
                        </button>
                        <button
                            v-if="hasWhiteLabel"
                            type="button"
                            @click="destroyWhiteLabel"
                            class="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:text-slate-200 dark:hover:bg-slate-800"
                        >
                            <TrashIcon class="h-4 w-4" /> Kaldır
                        </button>
                        <span v-if="hasWhiteLabel" class="font-mono text-xs text-slate-500">
                            → {{ branding.white_label_hostname }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Önizleme -->
            <div class="lg:col-span-1">
                <div class="sticky top-24 rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-900 overflow-hidden">
                    <div class="border-b border-slate-200 px-4 py-3 dark:border-slate-700">
                        <h3 class="text-sm font-medium text-slate-600 dark:text-slate-400">Önizleme</h3>
                    </div>
                    <div class="flex h-48">
                        <div class="w-14 bg-slate-900 flex flex-col items-center py-3 gap-2">
                            <div class="flex h-8 w-8 items-center justify-center rounded-full text-xs font-bold text-white"
                                :style="{ backgroundColor: form.primary_color || '#3b82f6' }">
                                {{ (form.brand_name || 'B').charAt(0).toUpperCase() }}
                            </div>
                            <div class="mt-1 space-y-1.5 w-8">
                                <div class="h-1.5 rounded" :style="{ backgroundColor: form.primary_color || '#3b82f6' }"></div>
                                <div v-for="i in 3" :key="i" class="h-1.5 rounded bg-slate-700"></div>
                            </div>
                        </div>
                        <div class="flex-1 p-3">
                            <div class="mb-2 text-xs font-bold text-slate-900 dark:text-slate-100">
                                {{ form.brand_name || 'Bayi Paneli' }}
                            </div>
                            <div class="grid grid-cols-2 gap-1">
                                <div v-for="i in 4" :key="i" class="h-7 rounded border border-slate-200 dark:border-slate-700"></div>
                            </div>
                        </div>
                    </div>
                    <div class="px-4 py-2 bg-slate-50 dark:bg-slate-800/50 text-xs text-slate-500 space-y-0.5">
                        <div v-if="form.white_label_hostname" class="font-mono">{{ form.white_label_hostname }}</div>
                        <div v-if="form.support_email">{{ form.support_email }}</div>
                    </div>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
