{% extends "base.html" %}
{% from 'partials/nav_icon.html' import nav_icon %}
{% from 'partials/ui_icon.html' import ui_icon %}

{% block title %}Группы пользователей - AWM{% endblock %}

{% block content %}
<style>
    .group-add-member-form {
        display: grid;
        grid-template-columns: 2fr 1fr auto;
        gap: 8px;
        margin-bottom: 10px;
        align-items: start;
        overflow: visible;
    }
    .group-add-member-form .awm-user-picker {
        width: 100%;
    }
    .group-add-member-form .btn {
        white-space: nowrap;
    }
    .group-members-card {
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg-secondary);
        padding: 12px;
        margin-top: 10px;
        overflow: visible;
    }
    .group-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px;
        margin-top: 8px;
    }
    .group-info-box {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px 10px;
        background: var(--surface);
    }
    .group-info-label {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 4px;
    }
    .group-info-value {
        font-weight: 600;
    }
    .group-files-list .list-item-name small {
        font-size: 11px;
        color: var(--text-muted);
        margin-left: 6px;
    }
    .group-members-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }
    .group-members-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }
    .group-member-role-label {
        display: inline-block;
        font-weight: 600;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--surface);
    }
    .group-member-role-label.admin {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
        color:var(--success);
    }
    .group-member-role-label.member {
        background: rgba(59, 130, 246, 0.10);
        border-color: rgba(59, 130, 246, 0.30);
        color: #1d4ed8;
    }
    @media (max-width: 840px) {
        .group-add-member-form {
            grid-template-columns: 1fr;
        }
    }
    .icon-title-row {
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 10px;
        align-items: end;
    }
    .icon-title-row .icon-select-compact {
        min-width: 0;
        width: 100%;
        text-align: center;
        font-size: 16px;
        height: 42px;
        min-height: 42px;
        padding: 0 10px;
        line-height: 42px;
        box-sizing: border-box;
    }
    @media (max-width: 760px) {
        .icon-title-row {
            grid-template-columns: 1fr;
        }
    }
</style>
<div class="card">
    <div class="ui-page-header is-inset">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ nav_icon('groups') }}</span>
            <div>
                <h2 class="ui-page-header__title">Группы пользователей</h2>
                <p class="ui-page-header__subtitle">Управление группами, участниками и администраторами группы.</p>
            </div>
        </div>
        <div class="ui-page-header__actions" style="align-items:center;">
            <label style="display:flex; align-items:center; gap:6px; font-size:13px;">
                <input type="checkbox" id="groups-show-hidden" onchange="loadGroups()">
                Показать скрытые
            </label>
            <button class="btn btn-primary" onclick="openCreateGroupModal()">{{ ui_icon('plus') }}Создать группу</button>
        </div>
    </div>
    <div id="groups-list" class="list-wrap awm-list-scroll" style="max-height:min(70vh, 720px);">
        <div class="empty-state">Загрузка...</div>
    </div>
    <div id="groups-pager" class="awm-pagination-host"></div>
</div>

<div id="group-modal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:720px;">
        <div class="modal-header">
            <h3 id="group-modal-title">Группа</h3>
            <button type="button" class="close-btn" onclick="closeGroupModal()" aria-label="Закрыть">&times;</button>
        </div>
        <form id="group-form">
            <input type="hidden" id="group-id">
            <div class="icon-title-row">
                <div class="form-group">
                    <label>Значок</label>
                    <select id="group-icon" class="icon-select-compact"></select>
                </div>
                <div class="form-group">
                    <label>Название группы</label>
                    <input type="text" id="group-name" required>
                </div>
            </div>
            <div class="form-group">
                <label>Описание</label>
                <textarea id="group-description" rows="2"></textarea>
            </div>
            <div style="display:flex; gap:8px; justify-content:flex-end;">
                <button type="button" class="btn btn-secondary" id="group-toggle-visibility-btn" style="display:none;" onclick="toggleGroupVisibility()"></button>
                <button type="button" class="btn btn-danger" id="group-delete-btn" style="display:none;" onclick="deleteCurrentGroup()">Удалить группу</button>
                <button type="submit" class="btn btn-primary">Сохранить</button>
                <button type="button" class="btn btn-secondary" onclick="closeGroupModal()">Отмена</button>
            </div>
        </form>
        <hr style="margin:14px 0;">
        <div class="group-members-card">
            <div class="group-members-header">
                <h4 class="group-members-title">Информация о группе</h4>
            </div>
            <div id="group-overview-panel" class="group-info-grid"></div>
        </div>
        <div class="group-members-card">
            <div class="group-members-header">
                <h4 class="group-members-title">Участники</h4>
            </div>
            <form id="group-member-form" class="group-add-member-form">
                <div id="group-member-user-picker" class="awm-user-picker">
                    <div class="awm-user-picker-field">
                        <input type="text" id="group-member-user-query" class="form-control awm-user-picker-query" placeholder="Начните ввод логина" autocomplete="off" autocapitalize="off" spellcheck="false" aria-autocomplete="list" aria-controls="group-member-user-menu" aria-expanded="false" role="combobox">
                        <input type="hidden" id="group-member-user-id" class="awm-user-picker-value" value="">
                        <button type="button" class="awm-user-picker-clear" title="Очистить" aria-label="Очистить выбранного пользователя">&times;</button>
                    </div>
                    <div id="group-member-user-menu" class="awm-user-picker-menu" role="listbox" hidden></div>
                </div>
                <select id="group-member-role">
                    <option value="member">Участник</option>
                    <option value="admin">Администратор</option>
                </select>
                <button type="submit" class="btn btn-secondary">Добавить</button>
            </form>
            <div id="group-members-list" class="list-wrap"></div>
        </div>
        <div class="group-members-card">
            <div class="group-members-header">
                <h4 class="group-members-title">Доступные файлы группы</h4>
                <button id="group-create-dir-btn" class="btn btn-secondary btn-sm" style="display:none;" onclick="createGroupDirectory()">+ Папка</button>
            </div>
            <div id="group-files-list" class="list-wrap group-files-list"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentGroupId = null;
let currentGroupData = null;
let groupMemberUserPicker = null;
const STANDARD_GROUP_ICONS = ["👥", "🛠️", "⚙️", "🔒", "🧩", "💼", "📦", "🌐", "🚀", "🧠"];

function esc(v) {
    return String(v || '').replace(/[&<>"']/g, (s) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[s]));
}

async function apiCall(method, url, data = null) {
    const options = { method, headers: { 'Content-Type': 'application/json' } };
    if (data !== null) options.body = JSON.stringify(data);
    const response = await fetch(url, options);
    if (!response.ok) {
        const err = await response.json().catch(() => ({}));
        throw new Error(err.detail || `HTTP ${response.status}`);
    }
    return response.json();
}

function buildPersonLabel(item) {
    const fullName = (item.full_name || '').trim();
    if (fullName) return fullName;
    const firstName = (item.first_name || '').trim();
    const lastName = (item.last_name || '').trim();
    const fl = [firstName, lastName].filter(Boolean).join(' ').trim();
    return fl || item.username || '-';
}

function normalizeRole(role) {
    const value = String(role || '').trim().toLowerCase();
    if (value === 'admin') return 'admin';
    if (value === 'mamber') return 'member';
    return value || 'member';
}

function roleCaption(role) {
    return normalizeRole(role) === 'admin' ? 'admin' : 'member';
}

function roleTitle(role) {
    return normalizeRole(role) === 'admin' ? 'Администратор' : 'Участник';
}

function yesNo(v) {
    return v ? 'Да' : 'Нет';
}

function renderGroupIconOptions(selectedIcon = '') {
    const select = document.getElementById('group-icon');
    if (!select) return;
    const options = ['<option value="">Без значка</option>']
        .concat(STANDARD_GROUP_ICONS.map((icon) => `<option value="${icon}" ${selectedIcon === icon ? 'selected' : ''}>${icon}</option>`))
        .join('');
    select.innerHTML = options;
}

function initGroupMemberUserPicker() {
    if (groupMemberUserPicker || !window.awmUserPicker) return;
    const root = document.getElementById('group-member-user-picker');
    if (!root) return;
    groupMemberUserPicker = window.awmUserPicker.mount({
        root,
        minQueryLength: 1,
        emptyHint: 'Введите часть логина или имени',
        notFoundText: 'Никого не найдено',
        fetchUsers: window.awmUserPicker.fetchFromUrl('/api/groups/users/candidates', { limit: 40 }),
        formatUser: (user) => {
            const username = String(user.username || '').trim();
            const person = buildPersonLabel(user);
            const email = String(user.email || '').trim();
            const subtitleParts = [];
            if (person && person !== username && person !== '-') subtitleParts.push(person);
            if (email) subtitleParts.push(email);
            return {
                id: String(user.id || ''),
                title: username || ('#' + (user.id || '')),
                subtitle: subtitleParts.join(' · '),
            };
        },
    });
}

function setGroupMemberPickerDisabled(disabled) {
    initGroupMemberUserPicker();
    if (groupMemberUserPicker) groupMemberUserPicker.setDisabled(disabled);
}

function clearGroupMemberPicker() {
    initGroupMemberUserPicker();
    if (groupMemberUserPicker) groupMemberUserPicker.clear({ silent: true });
    else {
        const hid = document.getElementById('group-member-user-id');
        const q = document.getElementById('group-member-user-query');
        if (hid) hid.value = '';
        if (q) q.value = '';
    }
}

let allGroups = [];
const groupsPager = { offset: 0, limit: 20, total: 0 };

function renderGroupsPage() {
    const wrap = document.getElementById('groups-list');
    const page = window.awmPagination.sliceClient(allGroups, groupsPager.offset, groupsPager.limit);
    groupsPager.total = page.total;
    if (!page.items.length) {
        wrap.innerHTML = awmEmptyState('Группы отсутствуют', 'users');
    } else {
        wrap.innerHTML = page.items.map((g) => {
            const canOpen = Boolean(g.is_member) || Boolean(g.can_manage);
            const status = Number(g.is_active) ? 'активна' : 'скрыта';
            const meta = canOpen
                ? `${esc(g.description || '-')} · владелец: ${esc(g.owner_username || '-')} · участников: ${Number(g.members_count || 0)} · файлов: ${Number(g.files_count || 0)} · ${g.is_member ? 'вы участник' : 'вы не участник'} · ${status}`
                : `вы не участник · ${status} · состав и данные только для участников`;
            const actions = canOpen
                ? `<button class="btn btn-secondary btn-sm" onclick="openGroupModal(${g.id})">${awmIcon(g.can_manage ? 'sliders' : 'eye')}${g.can_manage ? 'Управление' : 'Открыть'}</button>`
                : '';
            return `
            <div class="list-item">
                <div class="list-item-info">
                    <div class="list-item-name">${g.icon ? esc(g.icon) : awmIcon('users')} ${esc(g.name)} ${Number(g.is_active) ? '' : '<span class="group-member-role-label">скрыта</span>'}</div>
                    <div class="list-item-meta">${meta}</div>
                </div>
                <div class="list-item-actions">${actions}</div>
            </div>`;
        }).join('');
    }
    const host = document.getElementById('groups-pager');
    if (host && window.awmPagination) {
        host.innerHTML = window.awmPagination.renderBarHtml({
            total: groupsPager.total,
            limit: groupsPager.limit,
            offset: groupsPager.offset,
            idPrefix: 'groups',
        });
        window.awmPagination.bindBar(host, groupsPager, (next) => {
            groupsPager.limit = next.limit;
            groupsPager.offset = next.offset;
            renderGroupsPage();
        });
    }
}

async function loadGroups() {
    const includeHidden = document.getElementById('groups-show-hidden')?.checked ? '1' : '0';
    try {
        allGroups = await apiCall('GET', `/api/groups?include_hidden=${includeHidden}`);
        groupsPager.offset = 0;
        renderGroupsPage();
    } catch (e) {
        document.getElementById('groups-list').innerHTML = `<div class="empty-state">Ошибка: ${esc(e.message)}</div>`;
    }
}

function openCreateGroupModal() {
    currentGroupId = null;
    currentGroupData = null;
    document.getElementById('group-modal-title').textContent = 'Создать группу';
    document.getElementById('group-id').value = '';
    document.getElementById('group-name').value = '';
    renderGroupIconOptions();
    document.getElementById('group-description').value = '';
    document.getElementById('group-overview-panel').innerHTML = '<div class="empty-state">Сводка будет доступна после создания группы</div>';
    document.getElementById('group-members-list').innerHTML = '<div class="empty-state">Участники появятся после создания группы</div>';
    document.getElementById('group-files-list').innerHTML = '<div class="empty-state">Файлы группы появятся после создания группы</div>';
    clearGroupMemberPicker();
    document.getElementById('group-member-role').value = 'member';
    document.getElementById('group-name').disabled = false;
    document.getElementById('group-icon').disabled = false;
    document.getElementById('group-description').disabled = false;
    setGroupMemberPickerDisabled(false);
    document.getElementById('group-member-role').disabled = false;
    document.getElementById('group-member-form').querySelector('button[type="submit"]').disabled = false;
    document.getElementById('group-toggle-visibility-btn').style.display = 'none';
    document.getElementById('group-delete-btn').style.display = 'none';
    document.getElementById('group-form').querySelector('button[type="submit"]').style.display = 'inline-flex';
    document.getElementById('group-modal').style.display = 'flex';
}

async function openGroupModal(groupId) {
    currentGroupId = groupId;
    document.getElementById('group-modal').style.display = 'flex';
    const group = await apiCall('GET', `/api/groups/${groupId}`);
    currentGroupData = group;
    document.getElementById('group-modal-title').textContent = `Группа: ${group.name}`;
    document.getElementById('group-id').value = String(group.id);
    document.getElementById('group-name').value = group.name || '';
    renderGroupIconOptions(group.icon || '');
    document.getElementById('group-description').value = group.description || '';
    const canManage = Boolean(group.can_manage);
    const isMember = Boolean(group.is_member);
    const saveBtn = document.getElementById('group-form').querySelector('button[type="submit"]');
    const visBtn = document.getElementById('group-toggle-visibility-btn');
    const delBtn = document.getElementById('group-delete-btn');
    const createDirBtn = document.getElementById('group-create-dir-btn');
    saveBtn.style.display = canManage ? 'inline-flex' : 'none';
    visBtn.style.display = canManage ? 'inline-flex' : 'none';
    delBtn.style.display = canManage ? 'inline-flex' : 'none';
    visBtn.textContent = Number(group.is_active) ? 'Скрыть группу' : 'Показать группу';
    document.getElementById('group-name').disabled = !canManage;
    document.getElementById('group-icon').disabled = !canManage;
    document.getElementById('group-description').disabled = !canManage;
    setGroupMemberPickerDisabled(!canManage);
    document.getElementById('group-member-role').disabled = !canManage;
    document.getElementById('group-member-form').querySelector('button[type="submit"]').disabled = !canManage;
    if (createDirBtn) {
        createDirBtn.style.display = isMember ? 'inline-flex' : 'none';
        createDirBtn.disabled = !isMember;
    }
    renderGroupOverview(group);
    if (isMember) {
        await loadGroupMembers(groupId);
        await loadGroupFiles(groupId);
    } else {
        document.getElementById('group-members-list').innerHTML = '<div class="empty-state">Список участников доступен только участникам группы.</div>';
        document.getElementById('group-files-list').innerHTML = '<div class="empty-state">Файлы группы доступны только участникам.</div>';
    }
}

function closeGroupModal() {
    document.getElementById('group-modal').style.display = 'none';
}

async function loadGroupMembers(groupId) {
    const list = document.getElementById('group-members-list');
    const canManage = Boolean(currentGroupData && currentGroupData.can_manage);
    const members = await apiCall('GET', `/api/groups/${groupId}/members`);
    if (!members.length) {
        list.innerHTML = '<div class="empty-state">Нет участников</div>';
        return;
    }
    list.innerHTML = members.map((m) => `
        <div class="list-item">
            <div class="list-item-info">
                <div class="list-item-name">
                    <span class="group-member-role-label ${normalizeRole(m.role)}">${roleTitle(m.role)}</span>
                    ${esc(roleCaption(m.role))} (${esc(buildPersonLabel(m))})
                </div>
                <div class="list-item-meta">@${esc(m.username)} · ${esc(m.email || '-')}</div>
            </div>
            <div class="list-item-actions">
                <select onchange="changeMemberRole(${groupId}, ${m.user_id}, this.value)" ${canManage ? '' : 'disabled'}>
                    <option value="member" ${normalizeRole(m.role) === 'member' ? 'selected' : ''}>Участник</option>
                    <option value="admin" ${normalizeRole(m.role) === 'admin' ? 'selected' : ''}>Администратор</option>
                </select>
                <button class="btn btn-danger btn-sm" onclick="removeMember(${groupId}, ${m.user_id})" ${canManage ? '' : 'disabled'}>Удалить</button>
            </div>
        </div>
    `).join('');
}

function renderGroupOverview(group) {
    const panel = document.getElementById('group-overview-panel');
    if (!panel) return;
    panel.innerHTML = `
        <div class="group-info-box">
            <div class="group-info-label">Владелец</div>
            <div class="group-info-value">@${esc(group.owner_username || '-')}</div>
        </div>
        <div class="group-info-box">
            <div class="group-info-label">Участников</div>
            <div class="group-info-value">${Number(group.members_count || 0)}</div>
        </div>
        <div class="group-info-box">
            <div class="group-info-label">Файлов в пространстве</div>
            <div class="group-info-value">${Number(group.files_count || 0)}</div>
        </div>
        <div class="group-info-box">
            <div class="group-info-label">Статус</div>
            <div class="group-info-value">${Number(group.is_active) ? 'Активна' : 'Скрыта'}</div>
        </div>
        <div class="group-info-box">
            <div class="group-info-label">Вы участник</div>
            <div class="group-info-value">${yesNo(Boolean(group.is_member))}</div>
        </div>
        <div class="group-info-box">
            <div class="group-info-label">Можете управлять</div>
            <div class="group-info-value">${yesNo(Boolean(group.can_manage))}</div>
        </div>
    `;
}

async function loadGroupFiles(groupId) {
    const list = document.getElementById('group-files-list');
    try {
        const files = await apiCall('GET', `/api/groups/${groupId}/files`);
        if (!files.length) {
            list.innerHTML = '<div class="empty-state">В группе нет сохранённых файлов</div>';
            return;
        }
        list.innerHTML = files.map((f) => `
            <div class="list-item">
                <div class="list-item-info">
                    <div class="list-item-name">${awmIcon(f.is_directory ? 'folder' : 'file')} ${esc(f.name)} <small>${f.is_directory ? 'directory' : esc(f.language || 'plaintext')}</small></div>
                    <div class="list-item-meta">${esc(f.description || '-')} · updated: ${esc(f.updated_at || '-')}</div>
                </div>
                <div class="list-item-actions">
                    ${f.is_directory ? '' : `<a class="btn btn-secondary btn-sm" href="/api/code-workspace/${f.id}/download">Скачать</a>`}
                    <a class="btn btn-primary btn-sm" href="/code-editor?workspace_file_id=${f.id}&scope=group:${groupId}">Открыть в редакторе</a>
                </div>
            </div>
        `).join('');
    } catch (e) {
        list.innerHTML = `<div class="empty-state">Ошибка загрузки файлов: ${esc(e.message)}</div>`;
    }
}

async function createGroupDirectory() {
    if (!currentGroupId) return;
    const path = await awmPrompt('Путь общей папки (например: team/shared)');
    if (!path || !path.trim()) return;
    try {
        await apiCall('POST', '/api/code-workspace', {
            path: path.trim(),
            is_directory: true,
            group_id: currentGroupId,
        });
        await loadGroupFiles(currentGroupId);
    } catch (e) {
        alert(e.message);
    }
}

document.getElementById('group-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const id = document.getElementById('group-id').value;
    const payload = {
        name: document.getElementById('group-name').value.trim(),
        icon: document.getElementById('group-icon').value || null,
        description: document.getElementById('group-description').value.trim(),
    };
    try {
        if (!id) {
            const created = await apiCall('POST', '/api/groups', payload);
            currentGroupId = created.id;
            document.getElementById('group-id').value = String(created.id);
            await openGroupModal(created.id);
        } else {
            await apiCall('PUT', `/api/groups/${id}`, payload);
        }
        await loadGroups();
    } catch (e2) {
        alert(e2.message);
    }
});

document.getElementById('group-member-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    if (!currentGroupId) return;
    initGroupMemberUserPicker();
    const userId = Number(
        (groupMemberUserPicker && groupMemberUserPicker.getValue())
        || document.getElementById('group-member-user-id').value
        || 0
    );
    const role = document.getElementById('group-member-role').value;
    if (!userId) return;
    try {
        await apiCall('POST', `/api/groups/${currentGroupId}/members`, { user_id: userId, role });
        clearGroupMemberPicker();
        await loadGroupMembers(currentGroupId);
    } catch (e2) {
        alert(e2.message);
    }
});

async function changeMemberRole(groupId, userId, role) {
    try {
        await apiCall('PATCH', `/api/groups/${groupId}/members/${userId}`, { role });
        await loadGroupMembers(groupId);
    } catch (e) {
        alert(e.message);
    }
}

async function removeMember(groupId, userId) {
    if (!await awmConfirm('Удалить пользователя из группы?')) return;
    try {
        await apiCall('DELETE', `/api/groups/${groupId}/members/${userId}`);
        await loadGroupMembers(groupId);
    } catch (e) {
        alert(e.message);
    }
}

async function toggleGroupVisibility() {
    if (!currentGroupId || !currentGroupData) return;
    const nextActive = Number(currentGroupData.is_active) ? 0 : 1;
    const action = nextActive ? 'показать' : 'скрыть';
    if (!await awmConfirm(`Действительно ${action} группу?`)) return;
    try {
        await apiCall('PUT', `/api/groups/${currentGroupId}`, { is_active: nextActive });
        await openGroupModal(currentGroupId);
        await loadGroups();
    } catch (e) {
        alert(e.message);
    }
}

async function deleteCurrentGroup() {
    if (!currentGroupId) return;
    if (!await awmConfirm('Удалить группу? Доступ у ресурсов группы станет личным у владельцев.')) return;
    try {
        await apiCall('DELETE', `/api/groups/${currentGroupId}`);
        closeGroupModal();
        await loadGroups();
    } catch (e) {
        alert(e.message);
    }
}

renderGroupIconOptions();
initGroupMemberUserPicker();
loadGroups();
</script>
{% endblock %}