<script setup>
import AdminService from '@/service/AdminService';
import { onMounted, ref } from 'vue';

const createEmail = ref('');
const createPassword = ref('');
const createLoading = ref(false);
const createError = ref('');
const createSuccess = ref('');

const roles = ref([]);
const assignEmail = ref('');
const assignRoles = ref([]);
const assignLoading = ref(false);
const assignError = ref('');
const assignSuccess = ref('');

const usersPage = ref({ content: [], totalElements: 0, number: 0, size: 10 });
const tableLoading = ref(false);

const editDialogVisible = ref(false);
const editForm = ref({ id: null, email: '', password: '', roles: [] });
const editSaving = ref(false);
const editError = ref('');

async function loadRoles() {
    try {
        roles.value = await AdminService.getRoles();
    } catch (e) {
        roles.value = [];
    }
}

async function loadUsers(page = 0, size = usersPage.value.size || 10) {
    tableLoading.value = true;
    try {
        usersPage.value = await AdminService.listUsers(page, size);
    } catch (e) {
        usersPage.value = { content: [], totalElements: 0, number: 0, size };
    } finally {
        tableLoading.value = false;
    }
}

onMounted(async () => {
    await Promise.all([loadRoles(), loadUsers(0, 10)]);
});

async function onCreateUser() {
    createError.value = '';
    createSuccess.value = '';
    createLoading.value = true;
    try {
        await AdminService.createUser(createEmail.value.trim().toLowerCase(), createPassword.value);
        createSuccess.value = 'Пользователь создан';
        createEmail.value = '';
        createPassword.value = '';
        await loadUsers(usersPage.value.number, usersPage.value.size);
    } catch (e) {
        createError.value = e?.message || 'Ошибка создания пользователя';
    } finally {
        createLoading.value = false;
    }
}

async function onAssignRoles() {
    assignError.value = '';
    assignSuccess.value = '';
    assignLoading.value = true;
    try {
        await AdminService.assignRoles(assignEmail.value.trim().toLowerCase(), assignRoles.value);
        assignSuccess.value = 'Роли обновлены';
        await loadUsers(usersPage.value.number, usersPage.value.size);
    } catch (e) {
        assignError.value = e?.message || 'Ошибка назначения ролей';
    } finally {
        assignLoading.value = false;
    }
}

function openEdit(user) {
    editError.value = '';
    editForm.value = {
        id: user.id,
        email: user.email,
        password: '',
        roles: String(user.roles || '')
            .split(',')
            .map((r) => r.trim())
            .filter((r) => r.length > 0)
    };
    editDialogVisible.value = true;
}

async function saveEdit() {
    editError.value = '';
    editSaving.value = true;
    try {
        const payload = { id: editForm.value.id };
        if (editForm.value.email && editForm.value.email !== '') payload.email = editForm.value.email;
        if (editForm.value.password && editForm.value.password !== '') payload.password = editForm.value.password;
        if (Array.isArray(editForm.value.roles)) payload.roles = editForm.value.roles;
        await AdminService.updateUser(payload);
        editDialogVisible.value = false;
        await loadUsers(usersPage.value.number, usersPage.value.size);
    } catch (e) {
        editError.value = e?.message || 'Ошибка сохранения';
    } finally {
        editSaving.value = false;
    }
}

async function removeUser(user) {
    if (!confirm('Удалить пользователя?')) return;
    try {
        await AdminService.deleteUser(user.id);
        await loadUsers(usersPage.value.number, usersPage.value.size);
    } catch (e) {
        // ignore for now
    }
}
</script>

<template>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 p-6">
        <div class="bg-surface-0 dark:bg-surface-900 p-6 rounded-md">
            <h2 class="text-xl font-semibold mb-4">Создать пользователя</h2>
            <div class="mb-4">
                <label class="block mb-2">Email</label>
                <InputText v-model="createEmail" placeholder="user@example.com" class="w-full" />
            </div>
            <div class="mb-4">
                <label class="block mb-2">Пароль</label>
                <Password v-model="createPassword" :feedback="false" placeholder="Пароль" fluid />
            </div>
            <div v-if="createError" class="text-red-500 text-sm mb-2">{{ createError }}</div>
            <div v-if="createSuccess" class="text-green-500 text-sm mb-2">{{ createSuccess }}</div>
            <Button :loading="createLoading" label="Создать" @click="onCreateUser" />
        </div>

        <div class="bg-surface-0 dark:bg-surface-900 p-6 rounded-md">
            <h2 class="text-xl font-semibold mb-4">Назначить роли</h2>
            <div class="mb-4">
                <label class="block mb-2">Email</label>
                <InputText v-model="assignEmail" placeholder="user@example.com" class="w-full" />
            </div>
            <div class="mb-4">
                <label class="block mb-2">Роли</label>
                <MultiSelect v-model="assignRoles" :options="roles" class="w-full" display="chip" />
            </div>
            <div v-if="assignError" class="text-red-500 text-sm mb-2">{{ assignError }}</div>
            <div v-if="assignSuccess" class="text-green-500 text-sm mb-2">{{ assignSuccess }}</div>
            <Button :loading="assignLoading" label="Назначить" @click="onAssignRoles" />
        </div>

        <div class="bg-surface-0 dark:bg-surface-900 p-6 rounded-md lg:col-span-3">
            <h2 class="text-xl font-semibold mb-4">Пользователи</h2>
            <DataTable :value="usersPage.content" :loading="tableLoading" tableStyle="min-width: 50rem">
                <Column field="id" header="ID" style="width: 6rem" />
                <Column field="email" header="Email" />
                <Column field="roles" header="Роли" />
                <Column header="Действия" style="width: 16rem">
                    <template #body="{ data }">
                        <Button label="Редактировать" size="small" class="mr-2" @click="openEdit(data)" />
                        <Button label="Удалить" size="small" severity="danger" @click="removeUser(data)" />
                    </template>
                </Column>
            </DataTable>
            <div class="flex justify-end mt-4">
                <Paginator :rows="usersPage.size" :totalRecords="usersPage.totalElements" :first="usersPage.number * usersPage.size" @page="(e) => loadUsers(e.page, e.rows)" />
            </div>
        </div>

        <Dialog v-model:visible="editDialogVisible" modal header="Редактировать пользователя" :style="{ width: '30rem' }">
            <div class="mb-3">
                <label class="block mb-2">Email</label>
                <InputText v-model="editForm.email" class="w-full" />
            </div>
            <div class="mb-3">
                <label class="block mb-2">Пароль (опционально)</label>
                <Password v-model="editForm.password" :feedback="false" toggleMask fluid />
            </div>
            <div class="mb-3">
                <label class="block mb-2">Роли</label>
                <MultiSelect v-model="editForm.roles" :options="roles" class="w-full" display="chip" />
            </div>
            <div v-if="editError" class="text-red-500 text-sm mb-2">{{ editError }}</div>
            <div class="flex justify-end gap-2">
                <Button label="Отмена" severity="secondary" @click="editDialogVisible = false" />
                <Button :loading="editSaving" label="Сохранить" @click="saveEdit" />
            </div>
        </Dialog>
    </div>
</template>
