/**
 * GoingsOn - Sharing (Groups) Module
 * Shared-workspace admin: your identity public key, the groups you belong to,
 * and (for groups you administer) member management. Sharing a project into a
 * group lives on the project itself; this section is the group side of it.
 *
 * Backend: SyncKit group commands (Groups p4 / GO -> SyncStore M4). Admin
 * commands round-trip to the server via the SyncKit client; listing members is
 * admin-only (the server gates it), so member panels render only for groups you
 * administer; a listMembers failure is treated as "not the admin".
 */

(function() {
    'use strict';
    const esc = GoingsOn.utils.escapeHtml;
    const escAttr = GoingsOn.utils.escapeAttrValue;

    /**
     * Render the sharing section into a settings container. Loads the groups you
     * belong to, your public key, and each group's members (admin-only).
     * @param {HTMLElement} container
     */
    async function renderSharingSection(container) {
        let groups;
        try {
            groups = await GoingsOn.api.groups.list();
        } catch (err) {
            // The commands require a configured sync client; guide the user there.
            container.innerHTML = `
                <div class="settings-section">
                    <h3 class="settings-heading">Sharing</h3>
                    <p class="text-secondary">Connect cloud sync to share projects with a group.</p>
                    <div class="sync-section-actions">
                        <button class="btn btn-secondary" data-act="settings.showSection" data-a1="sync">Go to Cloud Sync</button>
                    </div>
                </div>
            `;
            return;
        }

        // Your public key is what an admin needs to add you. Non-fatal if
        // encryption is not set up yet.
        let pubkey = null;
        try {
            pubkey = await GoingsOn.api.groups.myPubkey();
        } catch (_) {}

        // Members are admin-only; fetch per group and swallow the not-admin error.
        const cards = await Promise.all(groups.map(async (g) => {
            let members = null;
            try {
                members = await GoingsOn.api.groups.listMembers(g.id);
            } catch (_) {}
            return renderGroupCard(g, members);
        }));

        const pubkeyBlock = pubkey
            ? `
                <p class="settings-desc">Share this public key with a group admin so they can add you. It is not a secret.</p>
                <div class="form-group">
                    <input type="text" class="form-input" id="my-group-pubkey" value="${escAttr(pubkey)}" readonly>
                </div>
                <div class="sync-section-actions">
                    <button class="btn btn-secondary" data-act="settings.copyMyGroupPubkey">Copy public key</button>
                </div>
            `
            : `<p class="text-secondary">Set up sync encryption first. Your sharing key is created with it.</p>`;

        const groupsBlock = groups.length
            ? cards.join('')
            : `<p class="text-secondary">You are not in any groups yet. Create one to share a project.</p>`;

        container.innerHTML = `
            <div class="settings-section">
                <h3 class="settings-heading">Sharing</h3>

                <div class="settings-section-block">
                    <h4 class="settings-subheading">Your public key</h4>
                    ${pubkeyBlock}
                </div>

                <div class="settings-section-block">
                    <h4 class="settings-subheading">Create a group</h4>
                    <p class="settings-desc">You become the group admin and can add members and share projects into it.</p>
                    <div class="form-group">
                        <input type="text" class="form-input" id="new-group-name" placeholder="Group name" maxlength="100">
                    </div>
                    <div class="sync-section-actions">
                        <button class="btn btn-primary" data-act="settings.createGroup">Create Group</button>
                    </div>
                </div>

                <div class="settings-section-block">
                    <h4 class="settings-subheading">Your groups</h4>
                    ${groupsBlock}
                </div>
            </div>
        `;
    }

    /**
     * One group card. When `members` is null the caller is not the group admin,
     * so only the name and a member badge render; otherwise the admin member
     * panel (list + add + remove) renders.
     */
    function renderGroupCard(group, members) {
        const gid = escAttr(group.id);

        if (members === null) {
            return `
                <div class="group-card">
                    <div class="group-card-header">
                        <span class="group-card-name">${esc(group.name)}</span>
                        <span class="group-card-role text-secondary">Member</span>
                    </div>
                </div>
            `;
        }

        const memberRows = members.map((m) => {
            const isAdmin = m.role === 'admin';
            const removeBtn = isAdmin
                ? ''
                : `<button class="btn btn-small btn-danger" data-act="settings.removeGroupMember" data-a1="${gid}" data-a2="${escAttr(m.userId)}" data-a3="${escAttr(m.email)}">Remove</button>`;
            return `
                <div class="group-member-row">
                    <span class="group-member-email">${esc(m.email)}</span>
                    <span class="group-member-role text-secondary">${esc(m.role)}</span>
                    ${removeBtn}
                </div>
            `;
        }).join('');

        return `
            <div class="group-card">
                <div class="group-card-header">
                    <span class="group-card-name">${esc(group.name)}</span>
                    <span class="group-card-role text-secondary">Admin</span>
                </div>
                <div class="group-member-list">
                    ${memberRows || '<p class="text-secondary">No members yet.</p>'}
                </div>
                <div class="group-add-member">
                    <div class="form-group">
                        <input type="text" class="form-input" id="add-member-email-${gid}" placeholder="Member email">
                    </div>
                    <div class="form-group">
                        <textarea class="form-textarea" id="add-member-pubkey-${gid}" placeholder="Paste the member's public key"></textarea>
                    </div>
                    <div class="sync-section-actions">
                        <button class="btn btn-secondary" data-act="settings.addGroupMember" data-a1="${gid}">Add Member</button>
                    </div>
                </div>
            </div>
        `;
    }

    /**
     * Re-render the sharing section if the settings overlay is open. Called after
     * every mutation so the panel reflects server state.
     */
    function refreshSharingSection() {
        const overlay = document.getElementById('settings-overlay');
        const container = document.getElementById('settings-content');
        if (overlay && !overlay.classList.contains('hidden') && container) {
            return renderSharingSection(container);
        }
    }

    async function createGroup() {
        const input = document.getElementById('new-group-name');
        const name = input?.value.trim();
        if (!name) {
            GoingsOn.ui.showToast('Enter a group name', 'error');
            return;
        }
        try {
            await GoingsOn.api.groups.create(name);
            GoingsOn.groups.invalidate();  // New group name must resolve in badges.
            GoingsOn.ui.showToast(`Group "${name}" created`);
            refreshSharingSection();
        } catch (err) {
            GoingsOn.ui.showToast('Failed to create group: ' + GoingsOn.utils.getErrorMessage(err), 'error');
        }
    }

    async function copyMyGroupPubkey() {
        const input = document.getElementById('my-group-pubkey');
        if (!input) return;
        const value = input.value;
        try {
            await navigator.clipboard.writeText(value);
            GoingsOn.ui.showToast('Public key copied');
        } catch (_) {
            // Clipboard API unavailable; select the field so the user can copy it.
            input.focus();
            input.select();
            GoingsOn.ui.showToast('Press Ctrl/Cmd+C to copy', 'info');
        }
    }

    async function addGroupMember(groupId) {
        const email = document.getElementById(`add-member-email-${groupId}`)?.value.trim();
        const pubkey = document.getElementById(`add-member-pubkey-${groupId}`)?.value.trim();
        if (!email || !pubkey) {
            GoingsOn.ui.showToast('Enter the member email and their public key', 'error');
            return;
        }
        try {
            await GoingsOn.api.groups.addMember(groupId, email, pubkey);
            GoingsOn.ui.showToast(`Added ${email}`);
            refreshSharingSection();
        } catch (err) {
            GoingsOn.ui.showToast('Failed to add member: ' + GoingsOn.utils.getErrorMessage(err), 'error');
        }
    }

    async function removeGroupMember(groupId, userId, email) {
        const confirmed = await GoingsOn.ui.showConfirmDialog(
            'Remove member',
            `Remove ${email} from this group? They keep whatever they already synced but see nothing new.`,
            { confirmText: 'Remove', danger: true }
        );
        if (!confirmed) return;
        try {
            await GoingsOn.api.groups.removeMember(groupId, userId);
            GoingsOn.ui.showToast(`Removed ${email}`);
            refreshSharingSection();
        } catch (err) {
            GoingsOn.ui.showToast('Failed to remove member: ' + GoingsOn.utils.getErrorMessage(err), 'error');
        }
    }

    // Populate GoingsOn Namespace

    Object.assign(GoingsOn.settings, {
        renderSharingSection,
        createGroup,
        copyMyGroupPubkey,
        addGroupMember,
        removeGroupMember,
    });

})();