<template>
    <div>
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-bold text-neutral-900">{{ $t('admin.roles.title') }}</h2>
            <MalioButton
                icon-name="mdi:plus"
                icon-position="left"
                button-class="w-auto px-4"
                :label="$t('admin.roles.addRole')"
                @click="openCreate"
            />
        </div>

        <DataTable
            :columns="columns"
            :items="items"
            :loading="isLoading"
            :empty-message="$t('admin.roles.empty')"
            @row-click="openEdit"
        >
            <template #cell-isSystem="{ item }">
                <span
                    v-if="item.isSystem"
                    class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-600"
                >
                    {{ $t('admin.roles.system') }}
                </span>
            </template>
            <template #cell-permissions="{ item }">
                <span class="text-neutral-600">{{ item.permissions.length }}</span>
            </template>
            <template #actions="{ item }">
                <MalioButtonIcon
                    v-if="!item.isSystem"
                    icon="mdi:delete-outline"
                    :aria-label="$t('common.delete')"
                    variant="ghost"
                    icon-size="20"
                    button-class="text-neutral-400 hover:text-red-500"
                    @click.stop="handleDelete(item.id)"
                />
            </template>
        </DataTable>

        <RoleDrawer
            v-model="drawerOpen"
            :item="selectedItem"
            :permissions="permissions"
            @saved="onSaved"
        />
    </div>
</template>

<script setup lang="ts">
import type { Role } from '~/modules/core/services/roles'
import { useRoleService } from '~/modules/core/services/roles'
import type { Permission } from '~/modules/core/services/permissions'
import { usePermissionService } from '~/modules/core/services/permissions'

import type { DataTableColumn } from '~/components/ui/DataTable.vue'

const { t } = useI18n()

const columns = computed<DataTableColumn[]>(() => [
    { key: 'label', label: t('admin.roles.label'), primary: true },
    { key: 'code', label: t('admin.roles.code') },
    { key: 'permissions', label: t('admin.roles.permissions') },
    { key: 'isSystem', label: '' },
])

const roleService = useRoleService()
const permissionService = usePermissionService()

const items = ref<Role[]>([])
const permissions = ref<Permission[]>([])
const isLoading = ref(true)
const drawerOpen = ref(false)
const selectedItem = ref<Role | null>(null)

async function loadItems() {
    isLoading.value = true
    try {
        items.value = await roleService.list()
    } finally {
        isLoading.value = false
    }
}

async function loadPermissions() {
    permissions.value = await permissionService.list()
}

function openCreate() {
    selectedItem.value = null
    drawerOpen.value = true
}

function openEdit(item: Role) {
    selectedItem.value = item
    drawerOpen.value = true
}

async function handleDelete(id: number) {
    await roleService.remove(id)
    await loadItems()
}

async function onSaved() {
    await loadItems()
}

onMounted(() => {
    loadItems()
    loadPermissions()
})
</script>
