<script setup>
import { router } from '@inertiajs/vue3'
import { ArrowPathIcon, TrashIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({
    site: Object,
    themes: { type: Array, default: () => [] },
})

const activate = async (slug) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `"${slug}" teması aktif edilecek. Devam?`,
        variant: 'warning',
        confirmText: 'Onayla',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.post(route('customer.wp.themes.activate', [props.site.id, slug]), {}, { preserveScroll: true })
}
const deleteTheme = async (slug, name) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `"${name}" teması silinecek. Emin misiniz?`,
        variant: 'danger',
        confirmText: 'Sil',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.delete(route('customer.wp.themes.delete', [props.site.id, slug]), { preserveScroll: true })
}
</script>

<template>
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div v-for="t in themes" :key="t.slug"
             :class="['relative overflow-hidden rounded-xl border shadow-sm bg-white transition',
                      (t.status === 'active' || t.is_active) ? 'border-indigo-400 ring-2 ring-indigo-200' : 'border-slate-200']">

            <!-- Screenshot placeholder -->
            <div :class="['h-32 flex items-center justify-center text-4xl font-bold',
                          (t.status === 'active' || t.is_active) ? 'bg-indigo-50' : 'bg-slate-50']">
                🎨
            </div>

            <!-- Active badge -->
            <span v-if="t.status === 'active' || t.is_active"
                  class="absolute top-2 right-2 flex items-center gap-1 rounded-full bg-indigo-600 px-2 py-0.5 text-[10px] font-bold text-white shadow">
                <CheckCircleIcon class="h-3 w-3" /> Aktif
            </span>

            <div class="p-4">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <p class="font-semibold text-slate-900">{{ t.name }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ t.description }}</p>
                    </div>
                </div>
                <div class="mt-2 flex items-center justify-between">
                    <span class="font-mono text-xs text-slate-600">
                        v{{ t.version }}
                        <span v-if="t.update_version" class="ml-1 rounded bg-amber-100 px-1 text-amber-700">→ {{ t.update_version }}</span>
                    </span>
                    <div class="flex gap-2">
                        <button v-if="!(t.status === 'active' || t.is_active)" @click="activate(t.slug)"
                                class="text-xs font-medium text-indigo-600 hover:underline">Aktif Et</button>
                        <button v-if="!(t.status === 'active' || t.is_active)" @click="deleteTheme(t.slug, t.name)"
                                class="text-xs text-red-500 hover:text-red-700">
                            <TrashIcon class="h-3.5 w-3.5" />
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="!themes.length" class="col-span-full py-12 text-center text-sm text-slate-400">
            Tema bulunamadı.
        </div>
    </div>
</template>
