/**
 * SettingsSurface — root settings surface
 *
 * Reads globals:
 *   __SECTION__          — active section name (string)
 *   __BASE__             — base path
 *   __CONFIG_SECTIONS__  — v0.38.3: extension config sections (array|null)
 *
 * Layout: topbar + left nav + content area (same CSS classes as before).
 * All sections are native Preact components loaded lazily.
 */
const { html } = window;
const { useState, useEffect, useCallback } = hooks;
const { render } = preact;

import { ToastContainer } from '../../primitives/toast.js';
import { DialogStack } from '../../shell/dialog-stack.js';

// ── Lazy section imports ────────────────────
// Each returns a Promise<{ default: Component }> or { SectionName: Component }
const sectionModules = {
    general:       () => import('./general.js'),
    appearance:    () => import('./appearance.js'),
    profile:       () => import('./profile.js'),
    teams:         () => import('./teams.js'),
    connections:   () => import('./connections.js'),
    notifications: () => import('./notifications.js'),
};

// ── Nav structure ───────────────────────────
const NAV_ITEMS = [
    { key: 'general',       label: 'General' },
    { key: 'appearance',    label: 'Appearance' },
    { key: 'profile',       label: 'Profile' },
    { key: 'teams',         label: 'Teams' },
    { key: 'connections',   label: 'Connections' },
    { key: 'notifications', label: 'Notifications' },
];

// ── Section title map ───────────────────────
const SECTION_TITLES = {
    general: 'General', appearance: 'Appearance',
    profile: 'Profile', teams: 'Teams',
    connections: 'Connections', notifications: 'Notifications',
};

// ── v0.38.3: Extension config sections ──────
// Packages declare config_section in their manifest. The backend passes
// matching entries via __CONFIG_SECTIONS__. We merge them into the nav
// and section module map for lazy loading.
const _configSections = window.__CONFIG_SECTIONS__ || [];
const EXT_NAV_ITEMS = _configSections.map(cs => ({ key: cs.package_id, label: cs.label }));
const _base = window.__BASE__ || '';
for (const cs of _configSections) {
    const pkgId = cs.package_id;
    const component = cs.component || 'js/config.js';
    sectionModules[pkgId] = () => import(`${_base}/surfaces/${pkgId}/${component}`);
    SECTION_TITLES[pkgId] = cs.label;
}

function SettingsSurface() {
    const BASE    = window.__BASE__ || '';
    const section = window.__SECTION__ || 'general';

    const [SectionComponent, setSectionComponent] = useState(null);

    // Load the section component
    useEffect(() => {
        setSectionComponent(null);

        if (sectionModules[section]) {
            sectionModules[section]().then(mod => {
                // Module exports the component as the first named export
                const Comp = mod.default || Object.values(mod)[0];
                setSectionComponent(() => Comp);
            }).catch(e => {
                console.error('[settings] Failed to load section:', section, e);
            });
        }
        // Bridge sections are handled inline
    }, [section]);

    const onNavClick = useCallback((e) => {
        e.preventDefault();
        const href = e.currentTarget.getAttribute('href');
        if (href) location.replace(href);
    }, []);

    const backClick = useCallback((e) => {
        e.preventDefault();
        const RETURN_KEY = 'sb_settings_return';
        const returnURL = sessionStorage.getItem(RETURN_KEY);
        sessionStorage.removeItem(RETURN_KEY);
        location.href = returnURL || BASE + '/';
    }, []);

    // Stash return URL on first load
    useEffect(() => {
        const RETURN_KEY = 'sb_settings_return';
        if (!sessionStorage.getItem(RETURN_KEY)) {
            const ref = document.referrer;
            if (ref && ref.startsWith(location.origin) && !ref.includes('/settings')) {
                sessionStorage.setItem(RETURN_KEY, ref);
            } else {
                sessionStorage.setItem(RETURN_KEY, location.origin + BASE + '/');
            }
        }
    }, []);

    const title = SECTION_TITLES[section] || 'Settings';

    return html`
        <div class="surface-settings" style="flex-direction:column;">
            ${/* Top Bar */''}
            <div class="settings-topbar">
                <a href="${BASE}/" class="settings-topbar-back" onClick=${backClick}>
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="19" y1="12" x2="5" y2="12"/>
                        <polyline points="12 19 5 12 12 5"/>
                    </svg>
                    Back
                </a>
                <div class="settings-topbar-sep"></div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     style="color:var(--text-2)">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                    <circle cx="9" cy="7" r="4"/>
                </svg>
                <span class="settings-topbar-title">Settings</span>
            </div>

            <div style="display:flex;flex:1;min-height:0;">
                ${/* Left Nav */''}
                <div class="settings-nav">
                    ${NAV_ITEMS.map(item => html`
                        <a href="${BASE}/settings/${item.key}"
                           class="settings-nav-link ${section === item.key ? 'active' : ''}"
                           onClick=${onNavClick}>
                            ${item.label}
                        </a>
                    `)}

                    ${EXT_NAV_ITEMS.length > 0 && html`
                        <div>
                            <div class="settings-nav-sep"></div>
                            <div class="settings-nav-label" style="font-size:10px;font-weight:600;color:var(--text-3);padding:8px 12px 4px;text-transform:uppercase;letter-spacing:0.5px;">Extensions</div>
                            ${EXT_NAV_ITEMS.map(item => html`
                                <a href="${BASE}/settings/${item.key}"
                                   class="settings-nav-link ${section === item.key ? 'active' : ''}"
                                   onClick=${onNavClick}>
                                    ${item.label}
                                </a>
                            `)}
                        </div>
                    `}
                </div>

                ${/* Content */''}
                <div class="settings-content">
                    <h2>${title}</h2>

                    ${SectionComponent
                        ? html`<${SectionComponent} />`
                        : html`<div class="settings-placeholder">Loading\u2026</div>`
                    }
                </div>
            </div>
        </div>
        <${ToastContainer} />
        <${DialogStack} />
    `;
}

// ── Mount ────────────────────────────────────
const mount = document.getElementById('settings-mount');
if (mount) {
    render(html`<${SettingsSurface} />`, mount);
    console.log('[settings] Surface mounted');
}

export { SettingsSurface };
