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

const { ask } = useConfirm()

const props = defineProps({ protections: Array, account_email: String })

const showForm = ref(false)

const form = useForm({
    protected_path: '',
    max_logins_per_hour: 4,
    email_alert: true,
    alert_email: props.account_email,
    disable_user_on_leech: false,
    redirect_url: '',
})

const submit = () => form.post(route('customer.security.leech.store'), {
    preserveScroll: true,
    onSuccess: () => { showForm.value = false; form.reset(); form.max_logins_per_hour = 4; form.email_alert = true; form.alert_email = props.account_email },
})

const remove = async (p) => {
    const ok = await ask({
        title: 'Onaylayın',
        message: `${p.protected_path} korumasi kaldırılacak?`,
        variant: 'danger',
        confirmText: 'Sil',
        cancelText: 'İptal',
    })
    if (!ok) return
    router.delete(route('customer.security.leech.destroy', p.id), { preserveScroll: true })
}
</script>

<template>
    <Head title="Leech Koruması" />
    <CustomerLayout>
        <template #header>Leech Koruması</template>

        <div class="mb-4 rounded-xl border border-indigo-200 bg-indigo-50 p-4 text-sm text-indigo-900">
            <div class="flex gap-3">
                <InformationCircleIcon class="h-5 w-5 flex-shrink-0 text-indigo-600" />
                <div>
                    <strong>Leech Protection:</strong> Aynı kullanıcı adıyla saatte X farklı IP'den giriş yapılırsa
                    (parola paylaşımı / brute force), sistem otomatik aksiyon alır. Paid içerik / üyelik siteleri için kritik.
                </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 Korumalı Dizin
            </button>
        </div>

        <div v-if="protections.length === 0" class="rounded-xl border border-dashed border-slate-300 bg-white p-12 text-center">
            <ShieldCheckIcon class="mx-auto h-14 w-14 text-slate-300" />
            <h3 class="mt-3 text-lg font-semibold">Henüz leech koruması yok</h3>
            <p class="mt-1 text-sm text-slate-500">Üyelik alanlarınız varsa şifre paylaşımına karşı koruma ekleyin.</p>
        </div>

        <div v-else class="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
            <table class="min-w-full divide-y divide-slate-200 text-sm">
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-2 text-left">Korumalı Yol</th>
                        <th class="px-4 py-2 text-left">Maks Giriş/saat</th>
                        <th class="px-4 py-2 text-left">Eylem</th>
                        <th class="px-4 py-2 text-left">Uyarı E-postası</th>
                        <th class="px-4 py-2"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    <tr v-for="p in protections" :key="p.id" class="hover:bg-slate-50">
                        <td class="px-4 py-2 font-mono text-sm">
                            <FolderIcon class="inline h-4 w-4 text-amber-500 mr-1" />
                            {{ p.protected_path }}
                        </td>
                        <td class="px-4 py-2 font-mono text-xs">{{ p.max_logins_per_hour }}</td>
                        <td class="px-4 py-2 text-xs">
                            <span v-if="p.disable_user_on_leech" class="rounded bg-red-100 px-2 py-0.5 font-semibold text-red-700">User Disable</span>
                            <span v-else-if="p.redirect_url" class="rounded bg-amber-100 px-2 py-0.5 font-semibold text-amber-700">Redirect</span>
                            <span v-else class="text-slate-500">Sadece log</span>
                        </td>
                        <td class="px-4 py-2 text-xs">{{ p.email_alert ? p.alert_email : '—' }}</td>
                        <td class="px-4 py-2 text-right">
                            <button @click="remove(p)" class="rounded p-1.5 text-red-500 hover:bg-red-50"><TrashIcon class="h-4 w-4" /></button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </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-md rounded-xl bg-white p-6 shadow-xl">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Yeni Leech Koruması</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">Korunacak Yol</label>
                        <input v-model="form.protected_path" type="text" placeholder="/members" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-sm" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium">Maks. Giriş/saat ({{ form.max_logins_per_hour }})</label>
                        <input v-model.number="form.max_logins_per_hour" type="range" min="1" max="50" class="mt-1 w-full" />
                        <p class="text-xs text-slate-500 mt-1">Aynı kullanıcı saatte bu sayıdan fazla farklı IP'den login olursa leech sayılır.</p>
                    </div>
                    <label class="flex items-center gap-2 cursor-pointer text-sm">
                        <input v-model="form.email_alert" type="checkbox" />
                        <span>E-posta uyarısı gönder</span>
                    </label>
                    <input v-if="form.email_alert" v-model="form.alert_email" type="email" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" />

                    <label class="flex items-center gap-2 cursor-pointer text-sm">
                        <input v-model="form.disable_user_on_leech" type="checkbox" />
                        <span>Leech tespit edilirse kullanıcıyı disable et</span>
                    </label>
                    <div>
                        <label class="block text-sm font-medium">Yönlendirme URL (opsiyonel)</label>
                        <input v-model="form.redirect_url" type="url" placeholder="https://siten.com/account-disabled" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm" />
                    </div>

                    <div class="flex justify-end gap-2 border-t pt-3">
                        <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">Aktifleştir</button>
                    </div>
                </form>
            </div>
        </div>
    </CustomerLayout>
</template>
