<script setup>
import { ref } from 'vue'
import { Head, router, useForm } from '@inertiajs/vue3'
import CustomerLayout from '@/Layouts/CustomerLayout.vue'
import { KeyIcon, PlusIcon, TrashIcon, XMarkIcon, InformationCircleIcon } from '@heroicons/vue/24/outline'
import { useConfirm } from '@/composables/useConfirm'

const { ask } = useConfirm()

defineProps({ keys: Array })

const showForm = ref(false)
const form = useForm({ label: '', public_key: '' })

const submit = () => form.post(route('customer.security.ssh-keys.store'), {
    onSuccess: () => { showForm.value = false; form.reset() },
})

const remove = async (id) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: 'SSH anahtarı silinsin mi? Bu kullanıcı bu anahtarla artık giriş yapamayacak.',
        variant: 'danger',
        confirmText: 'Sil',
        cancelText: 'İptal',
    })
    if (ok) {
        router.delete(route('customer.security.ssh-keys.destroy', id))
    }
}

const typeBadge = (t) => ({
    'ssh-ed25519': 'bg-emerald-100 text-emerald-700',
    'ssh-rsa': 'bg-blue-100 text-blue-700',
    'ssh-ecdsa': 'bg-purple-100 text-purple-700',
    'sk-ssh-ed25519': 'bg-amber-100 text-amber-700',
}[t] || 'bg-slate-100 text-slate-700')
</script>

<template>
    <Head title="SSH Anahtarları" />
    <CustomerLayout>
        <template #header>SSH Anahtarları</template>

        <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-900">
            <div class="flex gap-3">
                <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-emerald-600" />
                <div>
                    <strong>SSH ile parolasız giriş.</strong> Public key'inizi buraya yapıştırın, authorized_keys'e eklenir.
                    <code class="rounded bg-white px-1 font-mono">~/.ssh/id_ed25519.pub</code> içeriğini kullanın.
                </div>
            </div>
        </div>

        <div class="mb-4 flex justify-end">
            <button @click="showForm = true" 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 Anahtar
            </button>
        </div>

        <div v-if="keys.length === 0" class="rounded-xl border border-dashed border-slate-300 bg-white p-12 text-center">
            <KeyIcon class="mx-auto h-14 w-14 text-slate-300" />
            <h3 class="mt-3 text-lg font-semibold">Henüz SSH anahtarı yok</h3>
            <p class="mt-1 text-sm text-slate-500">İlk anahtarınızı ekleyerek parolasız SSH erişimi açabilirsiniz.</p>
        </div>

        <div v-else class="space-y-3">
            <div v-for="k in keys" :key="k.id" class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-start gap-3">
                        <KeyIcon class="h-5 w-5 mt-0.5 text-amber-500" />
                        <div>
                            <div class="flex items-center gap-2">
                                <span class="font-semibold">{{ k.label }}</span>
                                <span :class="['rounded px-2 py-0.5 text-xs font-mono', typeBadge(k.key_type)]">{{ k.key_type }}</span>
                            </div>
                            <p v-if="k.fingerprint" class="mt-1 font-mono text-xs text-slate-600">{{ k.fingerprint }}</p>
                            <p v-if="k.last_used_at" class="mt-1 text-xs text-slate-500">Son kullanım: {{ k.last_used_at }}</p>
                        </div>
                    </div>
                    <button @click="remove(k.id)" class="rounded p-1.5 text-red-500 hover:bg-red-50"><TrashIcon class="h-4 w-4" /></button>
                </div>
            </div>
        </div>

        <div v-if="showForm" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Yeni SSH Anahtarı</h3>
                    <button @click="showForm = false"><XMarkIcon class="h-5 w-5 text-slate-400" /></button>
                </div>
                <form @submit.prevent="submit" class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium">Etiket</label>
                        <input v-model="form.label" type="text" placeholder="MacBook Pro 2024" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Public Key</label>
                        <textarea v-model="form.public_key" rows="6" placeholder="ssh-ed25519 AAAAC3Nz... user@hostname" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-xs"></textarea>
                        <p class="mt-1 text-xs text-slate-500">Tek satır (boşluk dahil). Sadece public key — private key ASLA paylaşma.</p>
                    </div>
                    <div class="flex justify-end gap-2">
                        <button type="button" @click="showForm = false" class="rounded-lg border border-slate-300 px-4 py-2 text-sm">İptal</button>
                        <button type="submit" :disabled="form.processing" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Ekle</button>
                    </div>
                </form>
            </div>
        </div>
    </CustomerLayout>
</template>
