<script setup>
import { ref, onMounted } from 'vue'
import { authService } from '@/services/authService'
import { useToast } from 'primevue/usetoast'
import Button from 'primevue/button'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Tag from 'primevue/tag'

const users = ref([])
const loading = ref(true)
const toast = useToast()
const processing = ref({})

const loadApprovals = async () => {
    loading.value = true
    try {
        users.value = await authService.getApprovals()
    } catch (e) {
        console.error('Failed to load approvals', e)
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to load pending approvals', life: 3000 })
    } finally {
        loading.value = false
    }
}

const handleApprove = async (username) => {
    processing.value[username] = true
    try {
        await authService.approveUser(username)
        toast.add({ severity: 'success', summary: 'Approved', detail: `User ${username} approved`, life: 3000 })
        await loadApprovals()
    } catch (e) {
        console.error('Failed to approve user', e)
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to approve user', life: 3000 })
    } finally {
        processing.value[username] = false
    }
}

const handleDeny = async (username) => {
    processing.value[username] = true
    try {
        await authService.denyUser(username)
        toast.add({ severity: 'info', summary: 'Denied', detail: `User ${username} denied`, life: 3000 })
        await loadApprovals()
    } catch (e) {
        console.error('Failed to deny user', e)
        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to deny user', life: 3000 })
    } finally {
        processing.value[username] = false
    }
}

onMounted(() => {
    loadApprovals()
})
</script>

<template>
    <div class="p-6 md:p-8 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-white mb-2">User Approvals</h1>
                    <p class="text-slate-400">Manage pending user registration requests</p>
                </div>
                <Button icon="pi pi-refresh" rounded outlined @click="loadApprovals" :loading="loading" />
            </div>

            <div class="glass-panel rounded-2xl p-1 overflow-hidden">
                <DataTable :value="users" :loading="loading" class="w-full"
                    pt:headerRow:class="bg-white/5 text-slate-300"
                    pt:bodyRow:class="hover:bg-white/5 transition-colors border-b border-white/5">

                    <template #empty>
                        <div class="p-8 text-center text-slate-500">
                            No pending approvals found.
                        </div>
                    </template>

                    <Column field="username" header="Username" class="text-white font-medium"></Column>
                    <Column field="full_name" header="Full Name" class="text-slate-300"></Column>
                    <Column field="email" header="Email" class="text-slate-400">
                        <template #body="slotProps">
                            {{ slotProps.data.email || '-' }}
                        </template>
                    </Column>
                    <Column field="created_at" header="Registered" class="text-slate-400">
                        <template #body="slotProps">
                            {{ new Date(slotProps.data.created_at).toLocaleDateString() }}
                        </template>
                    </Column>

                    <Column header="Actions" alignFrozen="right" frozen class="w-[200px]">
                        <template #body="slotProps">
                            <div class="flex gap-2 justify-end">
                                <Button icon="pi pi-check" severity="success" text rounded
                                    @click="handleApprove(slotProps.data.username)"
                                    :loading="processing[slotProps.data.username]" tooltip="Approve" />
                                <Button icon="pi pi-times" severity="danger" text rounded
                                    @click="handleDeny(slotProps.data.username)"
                                    :loading="processing[slotProps.data.username]" tooltip="Deny" />
                            </div>
                        </template>
                    </Column>
                </DataTable>
            </div>
        </div>
    </div>
</template>

<style scoped>
.glass-panel {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

:deep(.p-datatable-header-cell) {
    background: transparent !important;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

:deep(.p-datatable-tbody > tr) {
    background: transparent !important;
    color: inherit;
}

:deep(.p-datatable-tbody > tr:hover) {
    background: rgba(255, 255, 255, 0.03) !important;
}
</style>
