(() => {
    const SECTIONS = [
        { id: 'desktop', label: 'Desktop Type' },
        { id: 'profile', label: 'Benutzerdaten' },
        { id: 'apps', label: 'App-Installation' },
        { id: 'widgets', label: 'Widget-Installation' },
    ];

    const escapeHtml = (value) => String(value)
        .replaceAll('&', '&')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#39;');

    const clone = (value) => JSON.parse(JSON.stringify(value));

    const sameSelection = (left, right) => {
        const nextLeft = [...left].sort();
        const nextRight = [...right].sort();

        return JSON.stringify(nextLeft) === JSON.stringify(nextRight);
    };

    const summarizeSection = (sectionId) => {
        if (sectionId === 'desktop') {
            return 'Windows-aehnlicher Standard fuer Desktop-Typ und Skin-Auswahl.';
        }

        if (sectionId === 'profile') {
            return 'Lokales Profil fuer Name, E-Mail, Telefon und spaetere LDAP-/Keycloak-Synchronisierung.';
        }

        if (sectionId === 'apps') {
            return 'Bestimmt, welche Desktop-Apps fuer diesen Benutzer sichtbar bleiben.';
        }

        return 'Steuert, welche Widgets in der rechten Leiste des Desktops aktiv sind.';
    };

    const renderSkinChoices = (state) => state.bootstrap.options.skins.map((skin) => {
        const isActive = state.draft.desktop.active_skin === skin.skin_id;

        return `
            <button
                class="usm-choice${isActive ? ' is-active' : ''}"
                type="button"
                data-action="select-skin"
                data-skin-id="${escapeHtml(skin.skin_id)}"
            >
                <strong>${escapeHtml(skin.label)}</strong>
                <p>${escapeHtml(summarizeSkin(skin.skin_id))}</p>
            </button>
        `;
    }).join('');

    const summarizeSkin = (skinId) => {
        if (skinId === 'apple') {
            return 'Top-Bar, rechte Icon-Anordnung und Finder-nahe Fensterelemente.';
        }

        if (skinId === 'linux') {
            return 'Klassische Arbeitsflaeche mit neutralem Fensterstil und Linux-Taskbar.';
        }

        return 'Standardisiertes Control-Panel-Muster mit Windows-naher Einstellungslogik.';
    };

    const renderAppItems = (state) => state.bootstrap.options.apps.map((app) => {
        const checked = state.draft.apps.enabled_ids.includes(app.app_id);

        return `
            <label class="usm-item">
                <input
                    type="checkbox"
                    data-action="toggle-app"
                    data-app-id="${escapeHtml(app.app_id)}"
                    ${checked ? 'checked' : ''}
                    ${app.required ? 'disabled' : ''}
                >
                <span class="usm-item-main">
                    <strong>${escapeHtml(app.title)}</strong>
                    <p>${escapeHtml(app.summary || '')}</p>
                    <span class="usm-item-meta">${app.required ? 'Pflicht-App' : 'Optional sichtbar'}</span>
                </span>
            </label>
        `;
    }).join('');

    const renderWidgetItems = (state) => state.bootstrap.options.widgets.map((widget) => {
        const checked = state.draft.widgets.active_ids.includes(widget.widget_id);

        return `
            <label class="usm-item">
                <input
                    type="checkbox"
                    data-action="toggle-widget"
                    data-widget-id="${escapeHtml(widget.widget_id)}"
                    ${checked ? 'checked' : ''}
                >
                <span class="usm-item-main">
                    <strong>${escapeHtml(widget.title)}</strong>
                    <p>${escapeHtml(widget.summary || '')}</p>
                    <span class="usm-item-meta">${widget.default_enabled ? 'Standard-Widget' : 'Optionales Widget'}</span>
                </span>
            </label>
        `;
    }).join('');

    const renderProfileFields = (state) => `
        <div class="usm-grid">
            ${renderField('name', 'Name', state.draft.profile.name)}
            ${renderField('email', 'E-Mail', state.draft.profile.email, 'email')}
            ${renderField('phone', 'Telefon', state.draft.profile.phone, 'tel')}
            ${renderField('birthdate', 'Geburtsdatum', state.draft.profile.birthdate, 'date')}
            ${renderField('title', 'Titel', state.draft.profile.title)}
            ${renderField('department', 'Abteilung', state.draft.profile.department)}
            ${renderField('city', 'Ort', state.draft.profile.city)}
            ${renderField('website', 'Website', state.draft.profile.website, 'url')}
        </div>
        <div class="usm-field">
            <label class="usm-label" for="usm-notes">Notizen</label>
            <textarea id="usm-notes" class="usm-textarea" data-field="profile.notes">${escapeHtml(state.draft.profile.notes || '')}</textarea>
        </div>
    `;

    const renderField = (fieldId, label, value, type = 'text') => `
        <div class="usm-field">
            <label class="usm-label" for="usm-${escapeHtml(fieldId)}">${escapeHtml(label)}</label>
            <input
                id="usm-${escapeHtml(fieldId)}"
                class="usm-input"
                type="${escapeHtml(type)}"
                data-field="profile.${escapeHtml(fieldId)}"
                value="${escapeHtml(value || '')}"
            >
        </div>
    `;

    const sectionContent = (state) => {
        if (state.activeSection === 'desktop') {
            return `
                <section class="usm-card">
                    <p class="usm-kicker">Desktop Type</p>
                    <h2>Skin-Auswahl</h2>
                    <p class="usm-copy">Die direkte Skin-Umschaltung liegt jetzt im Setup. Die Auswahl wird pro Benutzer gespeichert.</p>
                    <div class="usm-choice-grid">
                        ${renderSkinChoices(state)}
                    </div>
                </section>
            `;
        }

        if (state.activeSection === 'profile') {
            return `
                <section class="usm-card">
                    <p class="usm-kicker">Benutzerdaten</p>
                    <h2>Persoenliches Profil</h2>
                    <p class="usm-copy">Diese Daten werden zunaechst lokal gespeichert und spaeter an LDAP oder Keycloak angebunden.</p>
                    ${renderProfileFields(state)}
                </section>
            `;
        }

        if (state.activeSection === 'apps') {
            return `
                <section class="usm-card">
                    <p class="usm-kicker">App-Auswahl</p>
                    <h2>Sichtbare Desktop-Apps</h2>
                    <p class="usm-copy">Aenderungen an der App-Auswahl werden nach dem Speichern mit einem Desktop-Reload sauber uebernommen.</p>
                    <div class="usm-list">
                        ${renderAppItems(state)}
                    </div>
                </section>
            `;
        }

        return `
            <section class="usm-card">
                <p class="usm-kicker">Widget-Auswahl</p>
                <h2>Aktive Widget-Leiste</h2>
                <p class="usm-copy">Widgets bleiben Teil der Desktop-Mechanik und werden hier nur benutzerbezogen ein- oder ausgeblendet.</p>
                <div class="usm-list">
                    ${renderWidgetItems(state)}
                </div>
            </section>
        `;
    };

    const renderApp = (root, state) => {
        if (state.loading) {
            root.innerHTML = '<div class="usm-loading"><p class="usm-copy">Einstellungen werden geladen.</p></div>';
            return;
        }

        if (state.error && !state.bootstrap) {
            root.innerHTML = `<div class="usm-error-state"><p class="usm-message is-error">${escapeHtml(state.error)}</p></div>`;
            return;
        }

        root.innerHTML = `
            <div class="usm-shell">
                <div class="usm-frame">
                    <aside class="usm-nav">
                        <div class="usm-brand">
                            <p class="usm-kicker">Setup</p>
                            <h1>User Self Management</h1>
                            <p>Ein gemeinsamer Setup-Bereich fuer Desktop-Typ, Benutzerdaten, Apps und Widgets.</p>
                        </div>
                        <div class="usm-nav-list">
                            ${SECTIONS.map((section) => `
                                <button
                                    class="usm-nav-button${state.activeSection === section.id ? ' is-active' : ''}"
                                    type="button"
                                    data-action="open-section"
                                    data-section-id="${escapeHtml(section.id)}"
                                >
                                    <strong>${escapeHtml(section.label)}</strong>
                                    <span class="usm-meta">${escapeHtml(summarizeSection(section.id))}</span>
                                </button>
                            `).join('')}
                        </div>
                    </aside>
                    <main class="usm-main">
                        <div class="usm-panel">
                            <section class="usm-hero">
                                <div>
                                    <p class="usm-kicker">Desktop Setup</p>
                                    <h2 class="usm-title">${escapeHtml(sectionTitle(state.activeSection))}</h2>
                                    <p class="usm-copy">${escapeHtml(summarizeSection(state.activeSection))}</p>
                                </div>
                                <div class="usm-pill-row">
                                    <span class="usm-pill">LDAP: geplant</span>
                                    <span class="usm-pill">Keycloak: geplant</span>
                                    <span class="usm-pill">Scope: ${escapeHtml(state.bootstrap.meta.storage_scope || 'guest')}</span>
                                </div>
                            </section>
                            ${sectionContent(state)}
                            <section class="usm-actions">
                                <div>
                                    <p class="usm-note">Skin- und App-Aenderungen koennen einen Reload ausloesen, damit Fenster, Icons und Menue sauber synchron bleiben.</p>
                                    <p class="usm-message${state.error ? ' is-error' : state.success ? ' is-success' : ''}">${escapeHtml(state.error || state.success || '')}</p>
                                </div>
                                <button class="usm-button" type="button" data-action="save-settings" ${state.saving ? 'disabled' : ''}>
                                    ${state.saving ? 'Speichert ...' : 'Aenderungen speichern'}
                                </button>
                            </section>
                        </div>
                    </main>
                </div>
            </div>
        `;
    };

    const sectionTitle = (sectionId) => {
        const current = SECTIONS.find((section) => section.id === sectionId);
        return current ? current.label : 'Setup';
    };

    const setDraftValue = (draft, path, value) => {
        const segments = path.split('.');
        let cursor = draft;

        segments.slice(0, -1).forEach((segment) => {
            cursor = cursor[segment];
        });

        cursor[segments[segments.length - 1]] = value;
    };

    const toggleSelection = (collection, value) => {
        const next = new Set(collection);

        if (next.has(value)) {
            next.delete(value);
        } else {
            next.add(value);
        }

        return Array.from(next);
    };

    const buildPatch = (state) => ({
        profile: state.draft.profile,
        desktop: {
            active_skin: state.draft.desktop.active_skin,
        },
        apps: {
            enabled_ids: state.draft.apps.enabled_ids,
        },
        widgets: {
            active_ids: state.draft.widgets.active_ids,
        },
    });

    const requiresReload = (before, after) => before.desktop.active_skin !== after.desktop.active_skin
        || !sameSelection(before.apps.enabled_ids, after.apps.enabled_ids);

    const attachInteractions = (root, state, options) => {
        root.addEventListener('click', async (event) => {
            const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;

            if (!button) {
                return;
            }

            const action = button.dataset.action;

            if (action === 'open-section') {
                state.activeSection = button.dataset.sectionId || 'desktop';
                renderApp(root, state);
                return;
            }

            if (action === 'select-skin') {
                state.draft.desktop.active_skin = button.dataset.skinId || state.draft.desktop.active_skin;
                renderApp(root, state);
                return;
            }

            if (action === 'save-settings') {
                if (!options.apiBase || state.saving) {
                    return;
                }

                state.saving = true;
                state.error = '';
                state.success = '';
                renderApp(root, state);

                try {
                    const before = clone(state.bootstrap.preferences);
                    const response = await window.fetch(options.apiBase, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            Accept: 'application/json',
                        },
                        body: JSON.stringify(buildPatch(state)),
                    });

                    if (!response.ok) {
                        throw new Error(`save-failed:${response.status}`);
                    }

                    const payload = await response.json();
                    const after = payload.preferences;
                    state.bootstrap = payload;
                    state.draft = clone(after);
                    state.success = payload.meta?.requires_reload
                        ? 'Gespeichert. Desktop wird fuer Skin- oder App-Aenderungen neu geladen.'
                        : 'Einstellungen wurden gespeichert.';
                    state.saving = false;
                    renderApp(root, state);

                    if (window.desktopShell?.dispatchUserSettingsUpdate) {
                        window.desktopShell.dispatchUserSettingsUpdate({
                            preferences: after,
                            requiresReload: payload.meta?.requires_reload || requiresReload(before, after),
                        });
                    }

                    return;
                } catch (error) {
                    state.saving = false;
                    state.error = 'Speichern fehlgeschlagen. Die lokalen Einstellungen bleiben unveraendert.';
                    renderApp(root, state);
                    return;
                }
            }
        });

        root.addEventListener('change', (event) => {
            const target = event.target;

            if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) {
                return;
            }

            if (target.dataset.field) {
                setDraftValue(state.draft, target.dataset.field, target.value);
                return;
            }

            if (target.dataset.appId) {
                state.draft.apps.enabled_ids = toggleSelection(state.draft.apps.enabled_ids, target.dataset.appId);
                renderApp(root, state);
                return;
            }

            if (target.dataset.widgetId) {
                state.draft.widgets.active_ids = toggleSelection(state.draft.widgets.active_ids, target.dataset.widgetId);
                renderApp(root, state);
            }
        });
    };

    window.initUserSelfManagementApp = (root, options = {}) => {
        if (!(root instanceof HTMLElement) || root.dataset.usmInitialized === 'true') {
            return;
        }

        root.dataset.usmInitialized = 'true';

        const state = {
            loading: true,
            saving: false,
            error: '',
            success: '',
            activeSection: 'desktop',
            bootstrap: null,
            draft: null,
        };

        attachInteractions(root, state, options);
        renderApp(root, state);

        if (!options.apiBase) {
            state.loading = false;
            state.error = 'Die Setup-API ist nicht konfiguriert.';
            renderApp(root, state);
            return;
        }

        window.fetch(options.apiBase, {
            headers: {
                Accept: 'application/json',
            },
        })
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`load-failed:${response.status}`);
                }

                return response.json();
            })
            .then((payload) => {
                state.loading = false;
                state.bootstrap = payload;
                state.draft = clone(payload.preferences);
                renderApp(root, state);
            })
            .catch(() => {
                state.loading = false;
                state.error = 'Die Einstellungen konnten nicht geladen werden.';
                renderApp(root, state);
            });
    };
})();