cms/resources/js/app.js

import './bootstrap';
import { mount } from 'svelte';
import Login from './components/auth/Login.svelte';
import TwoFactor from './components/auth/TwoFactor.svelte';
import Dashboard from './components/admin/Dashboard.svelte';
import Profile from './components/admin/Profile.svelte';
import PageIndex from './components/admin/PageIndex.svelte';
import PageEditor from './components/admin/PageEditor.svelte';
import ThemeIndex from './components/admin/ThemeIndex.svelte';
import UserIndex from './components/admin/UserIndex.svelte';
import UserEditor from './components/admin/UserEditor.svelte';
import RoleManager from './components/admin/RoleManager.svelte';
import ThemeEditor from './components/admin/ThemeEditor.svelte';
import MediaManager from './components/admin/MediaManager.svelte';
import Navigation from './components/admin/Navigation.svelte';
import TranslationManager from './components/admin/TranslationManager.svelte';
import Settings from './components/admin/Settings.svelte';

const mountApp = () => {
    const app = document.getElementById('app');
    if (app) {
        const adminPath = app.dataset.adminPath || 'loom';
        const props = {
            adminPath: `/${adminPath}`,
            user: app.dataset.user ? JSON.parse(app.dataset.user) : null,
            status: app.dataset.status || null,
            errors: app.dataset.errors ? JSON.parse(app.dataset.errors) : null
        };

        // Clear placeholder content before mounting
        app.innerHTML = '';

        if (app.dataset.component === 'Login') {
            mount(Login, { target: app, props });
        } else if (app.dataset.component === 'TwoFactor') {
            mount(TwoFactor, { target: app, props });
        } else if (app.dataset.component === 'Dashboard') {
            mount(Dashboard, { target: app, props: { ...props, permissions: app.dataset.permissions ? JSON.parse(app.dataset.permissions) : {} } });
        } else if (app.dataset.component === 'Profile') {
            mount(Profile, { target: app, props });
        } else if (app.dataset.component === 'PageIndex') {
            mount(PageIndex, { target: app, props: { ...props, pages: JSON.parse(app.dataset.pages) } });
        } else if (app.dataset.component === 'PageEditor') {
            try {
                const pageData = app.dataset.page ? JSON.parse(app.dataset.page) : null;
                mount(PageEditor, { target: app, props: {
                    ...props,
                    page: pageData,
                    permissions: app.dataset.permissions ? JSON.parse(app.dataset.permissions) : {},
                    availableLocales: app.dataset.availableLocales ? JSON.parse(app.dataset.availableLocales) : ['en'],
                    defaultLocale: app.dataset.defaultLocale || 'en',
                    a11yIssues: app.dataset.a11yIssues ? JSON.parse(app.dataset.a11yIssues) : [],
                    includeInNavigation: app.dataset.includeInNavigation === 'true'
                } });
            } catch (e) {
                console.error("[app.js] Critical failure mounting PageEditor:", e);
                app.innerHTML = `<div class="ui negative message"><div class="header">Editor Error</div><p>Failed to initialize the editor. Please check the console for details.</p><pre>${e.message}</pre></div>`;
            }
        } else if (app.dataset.component === 'ThemeIndex') {
            mount(ThemeIndex, { target: app, props: { ...props, themes: JSON.parse(app.dataset.themes), activeTheme: app.dataset.activeTheme } });
        } else if (app.dataset.component === 'UserIndex') {
            mount(UserIndex, { target: app, props: { ...props, users: JSON.parse(app.dataset.users) } });
        } else if (app.dataset.component === 'UserEditor') {
            mount(UserEditor, { target: app, props: { ...props, user: app.dataset.user_data ? JSON.parse(app.dataset.user_data) : null, roles: JSON.parse(app.dataset.roles) } });
        } else if (app.dataset.component === 'RoleManager') {
            mount(RoleManager, { target: app, props: { ...props, roles: JSON.parse(app.dataset.roles), permissions: JSON.parse(app.dataset.permissions) } });
        } else if (app.dataset.component === 'ThemeEditor') {
            mount(ThemeEditor, { target: app, props: { ...props, themes: JSON.parse(app.dataset.themes), activeThemeSlug: app.dataset.activeThemeSlug } });
        } else if (app.dataset.component === 'MediaManager') {
            mount(MediaManager, { target: app, props: {
                ...props,
                media: JSON.parse(app.dataset.media),
                permissions: app.dataset.permissions ? JSON.parse(app.dataset.permissions) : {},
                availableLocales: app.dataset.availableLocales ? JSON.parse(app.dataset.availableLocales) : ['en']
            } });
        } else if (app.dataset.component === 'Navigation') {
            mount(Navigation, { target: app, props: { ...props, items: JSON.parse(app.dataset.items), pages: JSON.parse(app.dataset.pages), parentItems: JSON.parse(app.dataset.parentItems) } });
        } else if (app.dataset.component === 'TranslationManager') {
            mount(TranslationManager, { target: app, props: { ...props, locale: app.dataset.locale, overrides: JSON.parse(app.dataset.overrides), availableLocales: JSON.parse(app.dataset.availableLocales) } });
        } else if (app.dataset.component === 'Settings') {
            mount(Settings, { target: app, props: { ...props, settings: JSON.parse(app.dataset.settings) } });
        }

        const content = document.getElementById('siteweaver-content');
        if (content) {
            content.classList.add('loaded');
        }

        const postEditor = document.getElementById('post-editor');
        if (postEditor) {
            const adminPath = postEditor.dataset.adminPath || 'loom';
            const postProps = {
                adminPath: `/${adminPath}`,
                user: postEditor.dataset.user ? JSON.parse(postEditor.dataset.user) : null,
                status: postEditor.dataset.status || null,
                errors: postEditor.dataset.errors ? JSON.parse(postEditor.dataset.errors) : null
            };

            try {
                const pageData = postEditor.dataset.post && postEditor.dataset.post !== 'null' ? JSON.parse(postEditor.dataset.post) : null;
                mount(PageEditor, { target: postEditor, props: {
                    ...postProps,
                    page: pageData,
                    permissions: postEditor.dataset.permissions ? JSON.parse(postEditor.dataset.permissions) : {},
                    availableLocales: postEditor.dataset.availableLocales ? JSON.parse(postEditor.dataset.availableLocales) : ['en'],
                    defaultLocale: postEditor.dataset.defaultLocale || 'en',
                    a11yIssues: postEditor.dataset.a11yIssues ? JSON.parse(postEditor.dataset.a11yIssues) : [],
                    includeInNavigation: postEditor.dataset.includeInNavigation === 'true'
                } });
            } catch (e) {
                console.error("[app.js] Critical failure mounting PostEditor:", e);
                postEditor.innerHTML = `<div class="ui negative message"><div class="header">Editor Error</div><p>Failed to initialize the editor. Please check the console for details.</p><pre>${e.message}</pre></div>`;
            }
        }
    } else {
        // Even if #app is not found, ensure #siteweaver-content is shown
        const content = document.getElementById('siteweaver-content');
        if (content) {
            content.classList.add('loaded');
        }
    }
};

if (document.readyState === 'loading') {
    window.addEventListener('DOMContentLoaded', mountApp);
} else {
    mountApp();
}