<script setup>
import { ref } from 'vue'
import { Head, Link, router } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import {
    CubeIcon,
    ArrowTopRightOnSquareIcon,
    TrashIcon,
    PlusIcon,
    ArrowPathIcon,
    CheckBadgeIcon,
    ExclamationTriangleIcon,
    XMarkIcon,
} from '@heroicons/vue/24/outline'
import EmptyState from '@/Components/EmptyState.vue'

const props = defineProps({ installed: Array })

const showUninstall = ref(false)
const target = ref(null)
const deleteDb = ref(true)

const openUninstall = (app) => {
    target.value = app
    deleteDb.value = true
    showUninstall.value = true
}

const confirmUninstall = () => {
    router.delete(route('customer.apps.uninstall', target.value.id), {
        data: { delete_database: deleteDb.value },
        onFinish: () => { showUninstall.value = false; target.value = null },
    })
}

const statusBadge = (s) => ({
    active: 'bg-emerald-100 text-emerald-700',
    installing: 'bg-blue-100 text-blue-700',
    failed: 'bg-red-100 text-red-700',
    uninstalling: 'bg-amber-100 text-amber-700',
    pending: 'bg-slate-100 text-slate-700',
}[s] || 'bg-slate-100 text-slate-700')
</script>

<template>
    <Head title="Kurulu Uygulamalar" />
    <CustomerLayout>
        <template #header>Kurulu Uygulamalarım</template>

        <div class="mb-4 flex justify-end">
            <Link :href="route('customer.apps.catalog')" 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">
                <PlusIcon class="h-4 w-4" /> Yeni Uygulama Kur
            </Link>
        </div>

        <EmptyState
            v-if="installed.length === 0"
            :icon="CubeIcon"
            title="Henüz kurulu uygulama yok"
            description="WordPress, Joomla, Laravel ve daha fazlasını tek tıkla kurabilirsiniz."
            action-label="Kataloga Göz At"
            :action-href="route('customer.apps.catalog')"
            :action-icon="PlusIcon"
        />

        <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
            <div v-for="app in installed" :key="app.id" class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex items-start gap-3">
                    <div class="flex h-14 w-14 items-center justify-center rounded-xl text-3xl" :style="{ backgroundColor: app.app_color + '15' }">
                        {{ app.app_icon }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2">
                            <h3 class="font-semibold text-slate-900 truncate">{{ app.site_title || app.app_name }}</h3>
                            <span :class="['rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase', statusBadge(app.status)]">{{ app.status }}</span>
                        </div>
                        <p class="text-xs text-slate-500">{{ app.app_name }} v{{ app.version }}</p>
                        <a :href="app.install_url" target="_blank" class="mt-1 inline-flex items-center gap-1 text-xs text-indigo-600 hover:text-indigo-700">
                            <ArrowTopRightOnSquareIcon class="h-3 w-3" />
                            <span class="truncate">{{ app.install_url }}</span>
                        </a>
                    </div>
                </div>

                <div v-if="app.updates_available" class="mt-3 flex items-center gap-2 rounded bg-amber-50 px-3 py-1.5 text-xs text-amber-800">
                    <ExclamationTriangleIcon class="h-3.5 w-3.5" />
                    Güncelleme mevcut: v{{ app.latest_available_version }}
                    <button class="ml-auto font-medium hover:underline">Güncelle</button>
                </div>

                <dl class="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 border-t border-slate-100 pt-3 text-xs">
                    <dt class="text-slate-500">Admin</dt>
                    <dd class="font-mono text-right truncate">{{ app.admin_username }}</dd>

                    <dt class="text-slate-500">Veritabanı</dt>
                    <dd class="font-mono text-right truncate">{{ app.database_name || '—' }}</dd>

                    <dt class="text-slate-500">Kurulum</dt>
                    <dd class="text-right">{{ app.installed_at }}</dd>
                </dl>

                <div class="mt-4 flex gap-2">
                    <a v-if="app.app_type === 'wordpress' || app.app_type === 'woocommerce'" :href="app.install_url + '/wp-admin/'" target="_blank"
                       class="flex-1 inline-flex items-center justify-center gap-1 rounded-lg border border-indigo-300 bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100">
                        <CheckBadgeIcon class="h-3.5 w-3.5" /> wp-admin
                    </a>
                    <a v-else-if="app.app_type === 'joomla'" :href="app.install_url + '/administrator/'" target="_blank"
                       class="flex-1 inline-flex items-center justify-center gap-1 rounded-lg border border-indigo-300 bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100">
                        <CheckBadgeIcon class="h-3.5 w-3.5" /> Admin
                    </a>
                    <a v-else :href="app.install_url" target="_blank"
                       class="flex-1 inline-flex items-center justify-center gap-1 rounded-lg border border-indigo-300 bg-indigo-50 px-3 py-1.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100">
                        <ArrowTopRightOnSquareIcon class="h-3.5 w-3.5" /> Aç
                    </a>
                    <button @click="openUninstall(app)" class="rounded-lg border border-red-200 bg-white px-3 py-1.5 text-red-600 hover:bg-red-50">
                        <TrashIcon class="h-3.5 w-3.5" />
                    </button>
                </div>
            </div>
        </div>

        <!-- Uninstall confirm modal -->
        <div v-if="showUninstall" 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 text-red-700">Uygulamayı Kaldır</h3>
                    <button @click="showUninstall = false"><XMarkIcon class="h-5 w-5 text-slate-400" /></button>
                </div>
                <p class="text-sm text-slate-600">
                    <strong>{{ target?.site_title || target?.app_name }}</strong> uygulaması ve tüm dosyaları
                    <span class="font-mono">{{ target?.install_url }}</span> adresinden kaldırılacak.
                </p>
                <div class="mt-4 rounded-lg bg-amber-50 p-3 text-sm text-amber-800">
                    <label class="flex items-start gap-2 cursor-pointer">
                        <input v-model="deleteDb" type="checkbox" class="mt-0.5" />
                        <span><strong>Veritabanını da sil</strong> ({{ target?.database_name || 'yok' }}) — verilerin kalıcı olarak silinecek.</span>
                    </label>
                </div>
                <div class="mt-4 flex justify-end gap-2">
                    <button @click="showUninstall = false" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">İptal</button>
                    <button @click="confirmUninstall" class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">
                        Kalıcı Olarak Sil
                    </button>
                </div>
            </div>
        </div>
    </CustomerLayout>
</template>
