<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue'
import { Head, Link, router } from '@inertiajs/vue3'
import { ref } from 'vue'
import {
    InboxIcon, ArrowDownTrayIcon, PlayIcon, StopIcon, ArrowPathIcon,
    CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon,
    LockClosedIcon, SignalIcon, ServerStackIcon,
} from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

const props = defineProps({
    name: { type: String, required: true },
    description: { type: String, required: true },
    strengths: { type: Array, required: true },
    installed: { type: Boolean, required: true },
    running: { type: Boolean, required: true },
    enabled: { type: Boolean, required: true },
    version: { type: String, default: null },
    ports: { type: Array, default: () => [] },
    connections: { type: Object, default: null },
    hostname: { type: String, default: '' },
    is_windows_dev: { type: Boolean, default: false },
})

const busyAction = ref(null)

function action(act) {
    busyAction.value = act
    router.post(route('admin.mail.imap.action', { action: act }), {}, {
        preserveScroll: true,
        onFinish: () => { busyAction.value = null },
    })
}

async function install() {
    const ok = await ask({
        title: 'Onaylayın',
        message: 'Dovecot kurulacak. IMAP/POP3 portları (143, 993, 110, 995) açılacak. Devam?',
        variant: 'info',
        confirmText: 'Onayla',
        cancelText: 'İptal',
    })
    if (!ok) return
    busyAction.value = 'install'
    router.post(route('admin.mail.imap.install'), {}, {
        preserveScroll: true,
        onFinish: () => { busyAction.value = null },
    })
}
</script>

<template>
    <Head title="IMAP/POP3 Yönetimi" />
    <AdminLayout>
        <template #header>
            <Link :href="route('admin.mail.dashboard')" class="text-slate-400 hover:text-indigo-600 mr-2">←</Link>
            IMAP/POP3 Yönetimi (Dovecot)
        </template>

        <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" />
            <p class="text-sm text-blue-800 dark:text-blue-300">
                Dovecot Linux'a özgü. Windows dev'de "Kurulu değil" — Production AlmaLinux'ta install.sh ile otomatik gelir.
            </p>
        </div>

        <!-- Status üst kart -->
        <div class="rounded-2xl bg-gradient-to-br from-sky-500 to-cyan-500 p-px shadow-xl">
            <div class="rounded-2xl bg-white dark:bg-slate-900 p-6 lg:p-8">
                <div class="flex items-start justify-between flex-wrap gap-6">
                    <div class="flex items-start gap-4">
                        <div class="rounded-xl bg-gradient-to-br from-sky-500 to-cyan-500 p-3 shadow-lg shadow-sky-500/30">
                            <InboxIcon class="h-7 w-7 text-white" />
                        </div>
                        <div>
                            <p class="text-xs uppercase tracking-widest font-semibold text-sky-600 dark:text-sky-400">IMAP/POP3 Server</p>
                            <h2 class="mt-1 text-3xl font-bold text-slate-900 dark:text-white">{{ name }}</h2>
                            <p v-if="version" class="mt-1 text-sm font-mono text-slate-500">{{ version }}</p>
                            <div class="mt-3 flex flex-wrap gap-2 text-xs">
                                <span v-if="installed"
                                      :class="['inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 font-medium',
                                          running
                                            ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 ring-1 ring-emerald-200'
                                            : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 ring-1 ring-red-200']">
                                    <span :class="['h-1.5 w-1.5 rounded-full', running ? 'bg-emerald-500 animate-pulse' : 'bg-red-500']"></span>
                                    {{ running ? 'Çalışıyor' : 'Durmuş' }}
                                </span>
                                <span v-else class="inline-flex items-center gap-1 rounded-full bg-slate-100 text-slate-500 px-2.5 py-1 font-medium">
                                    Kurulu değil
                                </span>
                                <span v-if="installed && enabled" class="inline-flex items-center gap-1 rounded-full bg-indigo-100 text-indigo-700 px-2.5 py-1 font-medium">
                                    Auto-start
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <button v-if="!installed" @click="install" :disabled="busyAction === 'install'"
                                type="button"
                                class="inline-flex items-center gap-1.5 rounded-lg bg-sky-600 px-4 py-2 text-sm font-semibold text-white hover:bg-sky-700 disabled:opacity-50">
                            <ArrowDownTrayIcon :class="['h-4 w-4', busyAction === 'install' && 'animate-spin']" />
                            Kur
                        </button>
                        <template v-else>
                            <button @click="action('reload')" :disabled="busyAction === 'reload' || !running" type="button"
                                    class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-50">
                                <ArrowPathIcon :class="['h-4 w-4', busyAction === 'reload' && 'animate-spin']" />
                                Reload
                            </button>
                            <button v-if="running" @click="action('stop')" :disabled="busyAction === 'stop'" type="button"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-red-300 dark:border-red-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-red-700 dark:text-red-400 hover:bg-red-50 disabled:opacity-50">
                                <StopIcon class="h-4 w-4" />
                                Stop
                            </button>
                            <button v-else @click="action('start')" :disabled="busyAction === 'start'" type="button"
                                    class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-300 dark:border-emerald-700 bg-white dark:bg-slate-800 px-4 py-2 text-sm font-semibold text-emerald-700 dark:text-emerald-400 hover:bg-emerald-50 disabled:opacity-50">
                                <PlayIcon class="h-4 w-4" />
                                Start
                            </button>
                        </template>
                    </div>
                </div>

                <p class="mt-5 text-sm text-slate-600 dark:text-slate-400 leading-relaxed">{{ description }}</p>
            </div>
        </div>

        <!-- Active connections -->
        <div v-if="installed && connections" 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">IMAP Bağlantıları</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ connections.imap }}</p>
                </div>
                <div class="rounded-lg bg-sky-100 dark:bg-sky-900/30 p-2.5">
                    <InboxIcon 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">POP3 Bağlantıları</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ connections.pop3 }}</p>
                </div>
                <div class="rounded-lg bg-purple-100 dark:bg-purple-900/30 p-2.5">
                    <SignalIcon class="h-5 w-5 text-purple-600 dark:text-purple-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">Toplam</p>
                    <p class="mt-1 text-3xl font-bold text-slate-900 dark:text-slate-100">{{ connections.total }}</p>
                </div>
                <div class="rounded-lg bg-emerald-100 dark:bg-emerald-900/30 p-2.5">
                    <ServerStackIcon class="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
                </div>
            </div>
        </div>

        <!-- Strengths -->
        <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="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-emerald-500" />
                    Özellikler
                </h3>
                <ul class="space-y-2">
                    <li v-for="s in strengths" :key="s" class="flex items-start gap-2 text-sm text-slate-700 dark:text-slate-300">
                        <CheckCircleIcon class="h-4 w-4 mt-0.5 text-emerald-500 shrink-0" />
                        <span>{{ s }}</span>
                    </li>
                </ul>
            </div>

            <!-- Ports info -->
            <div class="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">
                    <LockClosedIcon class="h-5 w-5 text-indigo-500" />
                    Açık Portlar
                </h3>
                <ul class="divide-y divide-slate-100 dark:divide-slate-700">
                    <li v-for="p in ports" :key="p.name" class="py-2.5 flex items-center justify-between gap-3 text-sm">
                        <div class="flex items-center gap-2 min-w-0">
                            <code class="font-mono text-xs bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded shrink-0">{{ p.port }}</code>
                            <span class="font-semibold text-slate-900 dark:text-slate-100">{{ p.name }}</span>
                            <span class="text-xs text-slate-500 truncate">{{ p.description }}</span>
                        </div>
                        <span :class="['text-[10px] uppercase font-bold tracking-wider px-1.5 py-0.5 rounded shrink-0',
                            p.tls === 'SSL/TLS'
                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400'
                                : 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400']">
                            {{ p.tls }}
                        </span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Client config helper -->
        <div v-if="installed" class="mt-6 rounded-xl border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-950/30 p-5">
            <h3 class="text-base font-semibold text-indigo-900 dark:text-indigo-200 mb-3 flex items-center gap-2">
                <InformationCircleIcon class="h-5 w-5" />
                Müşteri Mail Client Yapılandırması
            </h3>
            <p class="text-sm text-indigo-800 dark:text-indigo-300 mb-3">
                Thunderbird, Outlook veya mobile mail uygulamalarında müşterilerin kullanması gereken ayarlar:
            </p>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
                <div class="rounded-lg bg-white dark:bg-slate-800 border border-indigo-200 dark:border-indigo-800 p-3">
                    <p class="text-xs uppercase tracking-wider text-indigo-600 dark:text-indigo-400 font-semibold mb-1">Gelen (IMAP)</p>
                    <p class="font-mono text-slate-900 dark:text-slate-100 text-xs">
                        Server: <strong>mail.{{ hostname }}</strong><br>
                        Port: <strong>993</strong> (SSL/TLS)<br>
                        Kullanıcı: <strong>e-posta@domain.com</strong>
                    </p>
                </div>
                <div class="rounded-lg bg-white dark:bg-slate-800 border border-indigo-200 dark:border-indigo-800 p-3">
                    <p class="text-xs uppercase tracking-wider text-indigo-600 dark:text-indigo-400 font-semibold mb-1">Giden (SMTP)</p>
                    <p class="font-mono text-slate-900 dark:text-slate-100 text-xs">
                        Server: <strong>mail.{{ hostname }}</strong><br>
                        Port: <strong>587</strong> (STARTTLS)<br>
                        Kullanıcı: <strong>e-posta@domain.com</strong>
                    </p>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
