import { alert, api, formatDateTime, h } from './common.js';
import { user } from './page.js';
import { createTable } from './table.js';
import { openUserDialog } from './user-dialog.js';

const ROLES = {
    trainer: { title: 'Тренер', badge: 'text-bg-primary' },
    trainee: { title: 'Тренирующийся', badge: 'text-bg-secondary' },
};

if (!user.is_superuser) {
    location.href = 'index.html';
}

const container = document.getElementById('users');
const reload = () => location.reload();

const addButton = () => {
    const button = h('button', { type: 'button', class: 'btn btn-primary mb-3' }, '+ Добавить пользователя');
    button.addEventListener('click', () => openUserDialog(null, reload));
    return button;
};

const editButton = (user) => {
    const button = h('button', { type: 'button', class: 'btn btn-sm btn-outline-secondary' }, 'Изменить');
    button.addEventListener('click', () => openUserDialog(user, reload));
    return button;
};

function usersView(users) {
    if (!users.length) {
        return h('div', {}, addButton(), alert('info', 'Пользователей нет.'));
    }
    return h('div', {},
        addButton(),
        h('p', { class: 'text-muted' },
            'Пользователей: ', h('strong', {}, `${users.length}`),
            ', тренеров: ', h('strong', {}, `${users.filter((user) => user.role === 'trainer').length}`)),
        createTable({
            id: 'users-table',
            rows: users,
            columns: [
                { title: 'ID', className: 'text-nowrap', sort: (user) => user.id, cell: (user) => `${user.id}` },
                { title: 'Email', className: 'text-nowrap', sort: (user) => user.email, cell: (user) => user.email },
                { title: 'Имя', sort: (user) => user.first_name, cell: (user) => user.first_name },
                { title: 'Фамилия', sort: (user) => user.last_name, cell: (user) => user.last_name },
                {
                    title: 'Роль',
                    className: 'text-nowrap',
                    sort: (user) => user.role,
                    cell: (user) => h('span', { class: `badge ${ROLES[user.role].badge}` }, ROLES[user.role].title),
                },
                {
                    title: 'Активен',
                    sort: (user) => Number(user.is_active),
                    cell: (user) => user.is_active ? 'Да' : h('span', { class: 'text-muted' }, 'Нет'),
                },
                { title: 'Создан', className: 'text-nowrap', sort: (user) => user.created_at, cell: (user) => formatDateTime(user.created_at) },
                {
                    title: 'Последний вход',
                    className: 'text-nowrap',
                    sort: (user) => user.last_login || '',
                    cell: (user) => user.last_login ? formatDateTime(user.last_login) : h('span', { class: 'text-muted' }, '—'),
                },
                { title: '', cell: editButton },
            ],
        }));
}

try {
    container.replaceChildren(usersView(await api('/users/')));
} catch (error) {
    container.replaceChildren(alert('danger', `Не удалось загрузить пользователей: ${error.message}`));
}