<script setup>
import { Head, Link, router } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import {
    GlobeAltIcon,
    ArrowTopRightOnSquareIcon,
    ArrowPathIcon,
    CheckBadgeIcon,
    ExclamationTriangleIcon,
    Cog6ToothIcon,
    BoltIcon,
    PlusIcon,
} from '@heroicons/vue/24/outline'
import EmptyState from '@/Components/EmptyState.vue'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({ sites: Array })

const updateSite = async (site) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `${site.site_title} v${site.version} → v${site.latest_available_version} güncellensin mi?`,
        variant: 'warning',
        confirmText: 'Onayla',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.post(route('customer.wp.update', site.id), {}, { preserveScroll: true })
}

const toggleAutoUpdate = (site) => {
    router.post(route('customer.wp.toggle-auto-update', site.id), {}, { preserveScroll: true })
}
</script>

<template>
    <Head title="WordPress Toolkit" />
    <CustomerLayout>
        <template #header>WordPress Toolkit</template>

        <div class="mb-4 rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">
            <strong>WP Toolkit:</strong> WordPress / WooCommerce sitelerinizi tek panelden yönetin —
            plugin/theme listesi, otomatik güncelleme, staging clone, tek tıkla wp-admin girişi.
        </div>

        <EmptyState
            v-if="sites.length === 0"
            :icon="GlobeAltIcon"
            title="Henüz WordPress sitesi yok"
            description="Uygulama Katalog'tan WordPress veya WooCommerce kurarak başlayın."
            action-label="Kataloğa Git"
            :action-href="route('customer.apps.catalog')"
            :action-icon="PlusIcon"
        />

        <div v-else class="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <div v-for="site in sites" :key="site.id" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm hover:shadow-md transition">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-center gap-3">
                        <div class="flex h-14 w-14 items-center justify-center rounded-xl text-3xl" :class="site.app_type === 'woocommerce' ? 'bg-purple-100' : 'bg-blue-100'">
                            {{ site.app_type === 'woocommerce' ? '🛒' : '📝' }}
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900">{{ site.site_title }}</h3>
                            <a :href="site.install_url" target="_blank" class="inline-flex items-center gap-1 font-mono text-xs text-indigo-600 hover:underline">
                                {{ site.install_url }} <ArrowTopRightOnSquareIcon class="h-3 w-3" />
                            </a>
                            <p class="mt-1 text-xs text-slate-500">v{{ site.version }} · Kurulum: {{ site.installed_at }}</p>
                        </div>
                    </div>
                </div>

                <!-- Update warning -->
                <div v-if="site.updates_available" class="mt-4 flex items-center justify-between rounded-lg bg-amber-50 p-3 text-xs">
                    <div class="flex items-center gap-2">
                        <ExclamationTriangleIcon class="h-4 w-4 text-amber-600" />
                        <span class="text-amber-800">Yeni sürüm: <strong>v{{ site.latest_available_version }}</strong></span>
                    </div>
                    <button @click="updateSite(site)" class="rounded bg-amber-600 px-3 py-1 font-medium text-white hover:bg-amber-700">
                        Şimdi Güncelle
                    </button>
                </div>

                <!-- Auto-update toggle -->
                <div class="mt-4 flex items-center justify-between text-xs">
                    <span class="text-slate-600 flex items-center gap-1">
                        <BoltIcon class="h-3.5 w-3.5 text-amber-500" />
                        Otomatik Güncelleme
                    </span>
                    <button @click="toggleAutoUpdate(site)"
                            :class="['relative inline-flex h-5 w-9 items-center rounded-full transition', site.auto_update ? 'bg-indigo-600' : 'bg-slate-300']">
                        <span :class="['inline-block h-3 w-3 transform rounded-full bg-white transition', site.auto_update ? 'translate-x-5' : 'translate-x-1']"></span>
                    </button>
                </div>

                <!-- Actions -->
                <div class="mt-4 grid grid-cols-3 gap-2">
                    <Link :href="route('customer.wp.show', site.id)"
                          class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">
                        <Cog6ToothIcon class="h-3.5 w-3.5" /> Yönet
                    </Link>
                    <a :href="route('customer.wp.login', site.id)" target="_blank"
                       class="inline-flex items-center justify-center gap-1 rounded-lg border border-indigo-300 bg-indigo-50 px-3 py-2 text-xs font-medium text-indigo-700 hover:bg-indigo-100">
                        <CheckBadgeIcon class="h-3.5 w-3.5" /> wp-admin
                    </a>
                    <a :href="site.install_url" target="_blank"
                       class="inline-flex items-center justify-center gap-1 rounded-lg border border-slate-300 bg-white px-3 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50">
                        <ArrowTopRightOnSquareIcon class="h-3.5 w-3.5" /> Site
                    </a>
                </div>
            </div>
        </div>
    </CustomerLayout>
</template>
