<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Head, Link, router } from '@inertiajs/vue3'
import { computed, ref } from 'vue'
import {
    EnvelopeIcon, PaperAirplaneIcon, InboxIcon, GlobeAltIcon, ShieldCheckIcon,
    CheckCircleIcon, ExclamationTriangleIcon, XCircleIcon, ArrowRightIcon,
    ClockIcon, ChartBarSquareIcon, SignalIcon, InformationCircleIcon,
    KeyIcon, CogIcon, UserGroupIcon, ArrowsRightLeftIcon, MegaphoneIcon, HeartIcon,
    DocumentTextIcon, CloudArrowDownIcon, ArrowDownTrayIcon,
} from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({
    components: { type: Array, required: true },
    extra_links: { type: Array, default: () => [] },
    health: { type: String, default: 'not_configured' },
    spam_stats: { type: Object, default: null },
    mta_queue: { type: Object, default: null },
    imap_connections: { type: Object, default: null },
    email_stats: { type: Object, default: () => ({}) },
    recent_audit: { type: Array, default: () => [] },
    is_windows_dev: { type: Boolean, default: false },
    hostname: { type: String, default: '' },
})

const iconMap = {
    PaperAirplaneIcon, InboxIcon, GlobeAltIcon, ShieldCheckIcon,
    KeyIcon, CogIcon, UserGroupIcon, MegaphoneIcon, HeartIcon, DocumentTextIcon,
    ChartBarSquareIcon, CloudArrowDownIcon, ArrowDownTrayIcon,
}

const healthConfig = computed(() => {
    if (props.health === 'healthy') {
        return {
            label: 'Mail Stack Sağlıklı',
            description: 'Tüm bileşenler kurulu ve çalışıyor — gönderim, alma, tarama, webmail aktif.',
            color: 'emerald', icon: CheckCircleIcon,
        }
    }
    if (props.health === 'partial') {
        return {
            label: 'Mail Stack Kısmi',
            description: 'Bazı bileşenler kurulu değil veya çalışmıyor. Aşağıda durumları kontrol edin.',
            color: 'amber', icon: ExclamationTriangleIcon,
        }
    }
    return {
        label: 'Mail Stack Yapılandırılmamış',
        description: 'Hiçbir mail bileşeni kurulu değil. install.sh ile Postfix + Dovecot + Rspamd + Roundcube otomatik kurulur.',
        color: 'red', icon: XCircleIcon,
    }
})

const colorClasses = {
    indigo:  { bg: 'from-indigo-500 to-purple-600',  text: 'text-indigo-600 dark:text-indigo-400',  ring: 'ring-indigo-100 dark:ring-indigo-900' },
    sky:     { bg: 'from-sky-500 to-cyan-500',         text: 'text-sky-600 dark:text-sky-400',         ring: 'ring-sky-100 dark:ring-sky-900' },
    purple:  { bg: 'from-purple-500 to-pink-500',      text: 'text-purple-600 dark:text-purple-400',   ring: 'ring-purple-100 dark:ring-purple-900' },
    emerald: { bg: 'from-emerald-500 to-teal-500',     text: 'text-emerald-600 dark:text-emerald-400', ring: 'ring-emerald-100 dark:ring-emerald-900' },
}

function fmtDate(iso) {
    if (! iso) return '—'
    const d = new Date(iso)
    if (Number.isNaN(d.getTime())) return '—'
    return d.toLocaleString('tr-TR', { dateStyle: 'short', timeStyle: 'short' })
}

// ─── Component install (sysapi component-specific install endpoint) ────────
//
// Backend her component için ayrı install route'u tanımlıyor:
//   - mta      → admin.mailserver.install (Postfix)
//   - imap     → admin.mail.imap.install (Dovecot)
//   - webmail  → admin.mail.webmail.install (Roundcube)
//   - spam     → admin.mail.spam.install (Rspamd)
const INSTALL_ROUTE_MAP = {
    mta: 'admin.mailserver.install',
    imap: 'admin.mail.imap.install',
    webmail: 'admin.mail.webmail.install',
    spam: 'admin.mail.spam.install',
}

const installing = ref(null)

async function installComponent(component) {
    const installRoute = component.install_route || INSTALL_ROUTE_MAP[component.key]
    if (! installRoute) {
        // Fallback — backend henüz install endpoint'i tanımlamamışsa config sayfasına yönlendir
        if (component.config_route) router.visit(route(component.config_route))
        return
    }

    const ok = await ask({
        title: `${component.subname || component.name} kur`,
        message: `${component.subname || component.name} bileşeni şu anda sunucuda kurulu değil. Kurulum sysapi üzerinden başlatılacak ve birkaç dakika sürebilir. Devam edilsin mi?`,
        variant: 'info',
        confirmText: 'Şimdi Kur',
        cancelText: 'Vazgeç',
    })
    if (! ok) return
    installing.value = component.key
    router.post(route(installRoute), {}, {
        preserveScroll: true,
        onFinish: () => { installing.value = null },
    })
}

function parsePayload(payload) {
    if (!payload) return null
    try {
        return typeof payload === 'string' ? JSON.parse(payload) : payload
    } catch { return null }
}
</script>

<template>
    <Head title="Mail Stack" />
    <AdminLayout>
        <template #header>Mail Stack Yönetimi</template>

        <!-- ─── Windows dev banner ─── -->
        <div v-if="is_windows_dev"
             class="mb-6 rounded-xl border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/30 p-4 flex items-start gap-3">
            <InformationCircleIcon class="h-5 w-5 text-blue-600 dark:text-blue-400 shrink-0 mt-0.5" />
            <div>
                <p class="text-sm font-semibold text-blue-900 dark:text-blue-200">
                    Geliştirme ortamı (Windows)
                </p>
                <p class="mt-0.5 text-sm text-blue-800 dark:text-blue-300">
                    Linux mail servisleri (Postfix, Dovecot, Rspamd, Roundcube) Windows'ta çalışmaz.
                    Production AlmaLinux sunucusunda <code class="font-mono">install.sh</code> ile tüm stack otomatik kurulur.
                </p>
            </div>
        </div>

        <!-- ─── Health Status üst kart ─── -->
        <div :class="['rounded-2xl p-px shadow-xl',
            healthConfig.color === 'emerald' ? 'bg-gradient-to-br from-emerald-500 via-teal-500 to-cyan-500' :
            healthConfig.color === 'amber' ? 'bg-gradient-to-br from-amber-500 via-orange-500 to-red-500' :
            'bg-gradient-to-br from-slate-700 via-slate-800 to-slate-900']">
            <div class="rounded-2xl bg-white dark:bg-slate-900 p-6 lg:p-8 flex items-start justify-between gap-6 flex-wrap">
                <div class="flex items-start gap-4 min-w-0 flex-1">
                    <div :class="['rounded-xl p-3 shadow-lg shrink-0',
                        healthConfig.color === 'emerald' ? 'bg-gradient-to-br from-emerald-500 to-teal-500 shadow-emerald-500/30' :
                        healthConfig.color === 'amber' ? 'bg-gradient-to-br from-amber-500 to-orange-500 shadow-amber-500/30' :
                        'bg-gradient-to-br from-slate-700 to-slate-800 shadow-slate-500/30']">
                        <component :is="healthConfig.icon" class="h-7 w-7 text-white" />
                    </div>
                    <div class="min-w-0">
                        <p class="text-xs uppercase tracking-widest font-semibold text-slate-500">Genel Durum</p>
                        <h2 class="mt-1 text-3xl font-bold text-slate-900 dark:text-white">{{ healthConfig.label }}</h2>
                        <p class="mt-1 text-sm text-slate-600 dark:text-slate-300 max-w-2xl">
                            {{ healthConfig.description }}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- ─── Quick install banner (sadece not_configured durumunda) ─── -->
        <div v-if="health === 'not_configured' && !is_windows_dev"
             class="mt-6 rounded-2xl border border-indigo-200 dark:border-indigo-800 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950/30 dark:to-purple-950/30 p-6">
            <div class="flex items-start gap-4 flex-wrap">
                <div class="rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 p-2.5 shadow shrink-0">
                    <InformationCircleIcon class="h-5 w-5 text-white" />
                </div>
                <div class="flex-1 min-w-[280px]">
                    <h3 class="text-base font-bold text-slate-900 dark:text-slate-100">
                        Mail Stack'i Tek Komutla Kurun
                    </h3>
                    <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
                        Sunucuya SSH ile bağlanın ve aşağıdaki komutu çalıştırın — Postfix + Dovecot + Rspamd + Roundcube
                        kurulup yapılandırılır (~5 dakika).
                    </p>
                    <div class="mt-3 rounded-lg bg-slate-900 dark:bg-slate-950 p-3 overflow-x-auto">
                        <code class="text-xs font-mono text-emerald-300 whitespace-nowrap">
                            curl -fsSL https://onox.com.tr/scripts/mail-stack-install.sh | sudo bash
                        </code>
                    </div>
                    <p class="mt-2 text-xs text-slate-500 dark:text-slate-400">
                        Veya özelleştirme için:
                        <code class="font-mono bg-slate-100 dark:bg-slate-800 px-1 rounded">
                            sudo bash mail-stack-install.sh --webmail snappymail --no-spam-filter
                        </code>
                    </p>
                </div>
            </div>
        </div>

        <!-- ─── 4 Bileşen Kartları ─── -->
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Link v-for="c in components" :key="c.key"
                  :href="route(c.route)"
                  class="group rounded-2xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 overflow-hidden hover:shadow-xl hover:-translate-y-0.5 transition-all">

                <!-- Gradient header -->
                <div :class="['p-5 bg-gradient-to-br', colorClasses[c.color]?.bg || colorClasses.indigo.bg, 'text-white relative']">
                    <div class="flex items-start justify-between mb-3">
                        <div class="rounded-xl bg-white/20 backdrop-blur p-2.5">
                            <component :is="iconMap[c.icon] || PaperAirplaneIcon" class="h-5 w-5 text-white" />
                        </div>
                        <ArrowRightIcon class="h-4 w-4 text-white/70 group-hover:text-white group-hover:translate-x-0.5 transition" />
                    </div>
                    <p class="text-xs uppercase tracking-widest text-white/80 mb-0.5">{{ c.name }}</p>
                    <p class="text-lg font-bold leading-tight">{{ c.subname }}</p>
                </div>

                <!-- Body -->
                <div class="p-4">
                    <p class="text-xs text-slate-600 dark:text-slate-400 leading-relaxed mb-3 line-clamp-2">
                        {{ c.description }}
                    </p>

                    <div class="flex flex-wrap gap-1.5">
                        <span v-if="c.installed && c.running"
                              class="inline-flex items-center gap-1 rounded-md bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400 px-2 py-0.5 text-[11px] font-medium">
                            <span class="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                            Çalışıyor
                        </span>
                        <span v-else-if="c.installed"
                              class="inline-flex items-center gap-1 rounded-md bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 px-2 py-0.5 text-[11px] font-medium">
                            <ExclamationTriangleIcon class="h-3 w-3" />
                            Durdurulmuş
                        </span>
                        <span v-else class="inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 px-2 py-0.5 text-[11px] font-medium">
                            <XCircleIcon class="h-3 w-3" />
                            Kurulu değil
                        </span>
                        <span v-if="c.version" class="inline-flex items-center gap-1 rounded-md bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 text-[11px] font-mono">
                            {{ c.version }}
                        </span>
                    </div>

                    <a v-if="c.access_url" :href="c.access_url" target="_blank" rel="noopener"
                       @click.stop
                       class="mt-3 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:underline">
                        <GlobeAltIcon class="h-3.5 w-3.5" />
                        {{ c.access_url.replace(/^https?:\/\//, '') }}
                    </a>

                    <!-- Şimdi Kur — kurulu değil + Windows dev olmayan ortamlar için -->
                    <button v-if="! c.installed && ! is_windows_dev"
                            type="button"
                            @click.stop.prevent="installComponent(c)"
                            class="mt-3 inline-flex w-full items-center justify-center gap-1.5 rounded-lg bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-indigo-700 disabled:opacity-50"
                            :disabled="installing === c.key">
                        <ArrowDownTrayIcon class="h-3.5 w-3.5" />
                        {{ installing === c.key ? 'Kuruluyor…' : 'Şimdi Kur' }}
                    </button>

                    <Link v-if="c.config_route" :href="route(c.config_route)" @click.stop
                          class="mt-2 inline-flex items-center gap-1 text-[11px] text-slate-500 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400">
                        <CogIcon class="h-3 w-3" />
                        Gelişmiş konfigürasyon →
                    </Link>
                </div>
            </Link>
        </div>

        <!-- ─── Customer Email İstatistikleri ─── -->
        <div v-if="email_stats && (email_stats.total_accounts || email_stats.total_forwarders || email_stats.total_autoresponders)"
             class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 flex items-center justify-between">
                <div>
                    <p class="text-xs uppercase tracking-wider text-slate-500">E-posta Hesapları</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ email_stats.total_accounts || 0 }}</p>
                </div>
                <div class="rounded-lg bg-indigo-100 dark:bg-indigo-900/30 p-2.5">
                    <UserGroupIcon class="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                </div>
            </div>
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 flex items-center justify-between">
                <div>
                    <p class="text-xs uppercase tracking-wider text-slate-500">Yönlendirmeler</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ email_stats.total_forwarders || 0 }}</p>
                </div>
                <div class="rounded-lg bg-sky-100 dark:bg-sky-900/30 p-2.5">
                    <ArrowsRightLeftIcon class="h-5 w-5 text-sky-600 dark:text-sky-400" />
                </div>
            </div>
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5 flex items-center justify-between">
                <div>
                    <p class="text-xs uppercase tracking-wider text-slate-500">Otomatik Yanıtlayıcı</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ email_stats.total_autoresponders || 0 }}</p>
                </div>
                <div class="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-2.5">
                    <MegaphoneIcon class="h-5 w-5 text-purple-600 dark:text-purple-400" />
                </div>
            </div>
        </div>

        <!-- ─── Gelişmiş Yönetim Linkleri ─── -->
        <div v-if="extra_links && extra_links.length > 0" class="mt-6">
            <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-3 flex items-center gap-2">
                <CogIcon class="h-5 w-5 text-slate-500" />
                Gelişmiş Yönetim
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                <Link v-for="link in extra_links" :key="link.route"
                      :href="route(link.route)"
                      class="group flex items-center gap-3 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-4 hover:border-indigo-300 dark:hover:border-indigo-700 hover:shadow-md transition-all">
                    <div :class="['rounded-lg p-2 shrink-0 shadow',
                        link.color === 'amber' ? 'bg-gradient-to-br from-amber-500 to-orange-500' :
                        link.color === 'indigo' ? 'bg-gradient-to-br from-indigo-500 to-purple-600' :
                        link.color === 'sky' ? 'bg-gradient-to-br from-sky-500 to-cyan-500' :
                        link.color === 'emerald' ? 'bg-gradient-to-br from-emerald-500 to-teal-500' :
                        link.color === 'rose' ? 'bg-gradient-to-br from-rose-500 to-pink-500' :
                        link.color === 'slate' ? 'bg-gradient-to-br from-slate-600 to-slate-800' :
                        link.color === 'purple' ? 'bg-gradient-to-br from-purple-500 to-pink-500' :
                        link.color === 'teal' ? 'bg-gradient-to-br from-teal-500 to-cyan-600' :
                        link.color === 'fuchsia' ? 'bg-gradient-to-br from-fuchsia-500 to-pink-600' :
                        'bg-gradient-to-br from-slate-500 to-slate-600']">
                        <component :is="iconMap[link.icon] || CogIcon" class="h-4 w-4 text-white" />
                    </div>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm font-semibold text-slate-900 dark:text-slate-100 truncate">{{ link.title }}</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ link.description }}</p>
                    </div>
                    <ArrowRightIcon class="h-4 w-4 text-slate-400 group-hover:text-indigo-500 group-hover:translate-x-0.5 transition shrink-0" />
                </Link>
            </div>
        </div>

        <!-- ─── Aktif İstatistikler grid ─── -->
        <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
            <!-- MTA Queue -->
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
                <div class="flex items-center gap-2 mb-3">
                    <PaperAirplaneIcon class="h-4 w-4 text-indigo-500" />
                    <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Mail Queue</h4>
                </div>
                <div v-if="mta_queue" class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">Bekleyen</span>
                        <span class="font-bold text-slate-900 dark:text-slate-100">{{ mta_queue.count }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">Donmuş / Başarısız</span>
                        <span class="font-bold text-red-600 dark:text-red-400">{{ mta_queue.frozen }}</span>
                    </div>
                </div>
                <p v-else class="text-xs text-slate-400">MTA kurulu değil</p>
            </div>

            <!-- IMAP Connections -->
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
                <div class="flex items-center gap-2 mb-3">
                    <InboxIcon class="h-4 w-4 text-sky-500" />
                    <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Aktif Bağlantılar</h4>
                </div>
                <div v-if="imap_connections" class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">IMAP</span>
                        <span class="font-bold text-slate-900 dark:text-slate-100">{{ imap_connections.imap }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">POP3</span>
                        <span class="font-bold text-slate-900 dark:text-slate-100">{{ imap_connections.pop3 }}</span>
                    </div>
                </div>
                <p v-else class="text-xs text-slate-400">Dovecot kurulu değil</p>
            </div>

            <!-- Spam Stats -->
            <div class="rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
                <div class="flex items-center gap-2 mb-3">
                    <ShieldCheckIcon class="h-4 w-4 text-emerald-500" />
                    <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">Spam Filtre (24sa)</h4>
                </div>
                <div v-if="spam_stats" class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">Taranan</span>
                        <span class="font-bold text-slate-900 dark:text-slate-100">{{ spam_stats.scanned }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-slate-500">Spam Oranı</span>
                        <span class="font-bold text-red-600 dark:text-red-400">%{{ spam_stats.spam_rate }}</span>
                    </div>
                </div>
                <p v-else class="text-xs text-slate-400">Rspamd kurulu değil</p>
            </div>
        </div>

        <!-- ─── Setup Checklist (production-grade mail için adımlar) ─── -->
        <div class="mt-6 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-5">
            <h3 class="text-base font-semibold text-slate-900 dark:text-slate-100 mb-3 flex items-center gap-2">
                <CheckCircleIcon class="h-5 w-5 text-indigo-500" />
                Mail Stack Kurulum Checklist
            </h3>
            <p class="text-sm text-slate-500 dark:text-slate-400 mb-4">
                Production-kalite mail sistemi için aşağıdaki adımları sırayla tamamlayın.
            </p>
            <ol class="space-y-2.5">
                <li class="flex items-start gap-3 rounded-lg p-3 transition"
                    :class="components[0].installed ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-slate-50 dark:bg-slate-900'">
                    <CheckCircleIcon :class="['h-5 w-5 mt-0.5 shrink-0', components[0].installed ? 'text-emerald-500' : 'text-slate-300']" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">1. Postfix MTA kurulumu</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">SMTP gönderme/alma için ana servis</p>
                    </div>
                    <Link :href="route('admin.mailserver.index')" class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Yönet →</Link>
                </li>
                <li class="flex items-start gap-3 rounded-lg p-3 transition"
                    :class="components[1].installed ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-slate-50 dark:bg-slate-900'">
                    <CheckCircleIcon :class="['h-5 w-5 mt-0.5 shrink-0', components[1].installed ? 'text-emerald-500' : 'text-slate-300']" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">2. Dovecot IMAP/POP3 kurulumu</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Müşteri mail client'larıyla bağlantı + Maildir teslimat</p>
                    </div>
                    <Link :href="route('admin.mail.imap.index')" class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Yönet →</Link>
                </li>
                <li class="flex items-start gap-3 rounded-lg p-3 transition"
                    :class="components[3].installed ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-slate-50 dark:bg-slate-900'">
                    <CheckCircleIcon :class="['h-5 w-5 mt-0.5 shrink-0', components[3].installed ? 'text-emerald-500' : 'text-slate-300']" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">3. Rspamd Spam Filter (önerilir)</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Postfix milter — gelen/giden mailleri tarar, DKIM/DMARC doğrular</p>
                    </div>
                    <Link :href="route('admin.mail.spam.index')" class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Yönet →</Link>
                </li>
                <li class="flex items-start gap-3 rounded-lg p-3 transition"
                    :class="components[2].installed ? 'bg-emerald-50 dark:bg-emerald-950/30' : 'bg-slate-50 dark:bg-slate-900'">
                    <CheckCircleIcon :class="['h-5 w-5 mt-0.5 shrink-0', components[2].installed ? 'text-emerald-500' : 'text-slate-300']" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">4. Webmail (Roundcube önerilir)</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Müşteriler tarayıcıdan mail erişimi için</p>
                    </div>
                    <Link :href="route('admin.mail.webmail.index')" class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Yönet →</Link>
                </li>
                <li class="flex items-start gap-3 rounded-lg p-3 bg-slate-50 dark:bg-slate-900">
                    <KeyIcon class="h-5 w-5 mt-0.5 shrink-0 text-amber-500" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">5. DKIM anahtarları + DNS kayıtları</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Her domain için DKIM signing key + SPF + DMARC DNS record</p>
                    </div>
                    <Link :href="route('admin.mail.dkim.index')" class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Yönet →</Link>
                </li>
                <li class="flex items-start gap-3 rounded-lg p-3 bg-slate-50 dark:bg-slate-900">
                    <ShieldCheckIcon class="h-5 w-5 mt-0.5 shrink-0 text-purple-500" />
                    <div class="flex-1">
                        <p class="text-sm font-medium text-slate-900 dark:text-slate-100">6. Let's Encrypt SSL sertifikası (mail.{{ hostname }})</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">Self-signed cert yerine geçerli sertifika — IMAP/SMTP/Webmail için</p>
                    </div>
                    <a href="https://docs.onox.com.tr/mail/ssl-setup" target="_blank" rel="noopener"
                       class="text-xs font-medium text-indigo-600 hover:underline shrink-0">Rehber →</a>
                </li>
            </ol>
        </div>

        <!-- ─── Audit log ─── -->
        <div v-if="recent_audit && recent_audit.length > 0"
             class="mt-6 rounded-xl border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 dark:border-slate-700 flex items-center gap-3">
                <ClockIcon class="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
                <div>
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">Son Mail Stack İşlemleri</h3>
                    <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">Tüm component audit log'u (MTA + IMAP + Webmail + Spam)</p>
                </div>
            </div>
            <ul class="divide-y divide-slate-100 dark:divide-slate-700 max-h-96 overflow-y-auto">
                <li v-for="entry in recent_audit" :key="entry.id" class="px-6 py-3 flex items-start gap-3">
                    <span class="mt-1 h-2 w-2 rounded-full shrink-0"
                          :class="entry.success === false || entry.success === 0 ? 'bg-red-500' : 'bg-emerald-500'"></span>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-baseline gap-2 flex-wrap">
                            <span class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ entry.action }}</span>
                            <span class="text-[11px] text-slate-400">{{ fmtDate(entry.occurred_at || entry.created_at) }}</span>
                        </div>
                        <div v-if="parsePayload(entry.payload)" class="mt-1 text-xs font-mono text-slate-500 dark:text-slate-400 truncate">
                            <template v-for="(v, k) in parsePayload(entry.payload)" :key="k">
                                <span class="text-slate-400">{{ k }}=</span><span>{{ typeof v === 'object' ? JSON.stringify(v) : v }}</span>&nbsp;·&nbsp;
                            </template>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </AdminLayout>
</template>
