/**
 * SubsiteAppLayout - Lightweight app layout for subsites
 * 
 * This is a minimal version that avoids importing from shared modules
 * that would pull in heavy CSS (AppLayout, Components, etc.)
 */
import React, { Suspense, lazy } from 'react';
import type { ReactNode } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import { CssVarsProvider } from "@mui/joy";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import type { EmotionCache } from "@emotion/cache";
import { PrimeReactProvider } from "primereact/api";

// Import only minimal CSS - no theme CSS, no primeicons
import 'react-toastify/dist/ReactToastify.css';
import 'primereact/resources/primereact.min.css';

const ReqForm = lazy(() => import('./req/ReqForm.jsx'));

interface MinimalJoyWrapperProps {
    children: ReactNode;
}

// Inline minimal JoyUI wrapper to avoid importing Components.jsx
function MinimalJoyWrapper({ children }: MinimalJoyWrapperProps): React.ReactElement {
    const cache = React.useRef<EmotionCache | null>(null);
    if (!cache.current) {
        cache.current = createCache({ key: "joy-sub" });
    }
    return (
        <CacheProvider value={cache.current}>
            <CssVarsProvider>{children}</CssVarsProvider>
        </CacheProvider>
    );
}

interface SubsiteRootProps {
    child: string;
    [key: string]: unknown;
}

export default function SubsiteRoot({ child, ...props }: SubsiteRootProps): React.ReactElement {
    if (typeof window !== 'undefined') {
        window.toast = toast;
    }
    const theme = typeof document !== 'undefined'
        ? document.documentElement.getAttribute("data-theme")
        : 'light';

    return (
        <PrimeReactProvider>
            <ToastContainer
                position="top-right"
                autoClose={5000}
                hideProgressBar={false}
                newestOnTop={true}
                closeOnClick={true}
                rtl={false}
                pauseOnFocusLoss={false}
                draggable
                pauseOnHover
                theme={theme === 'dark' ? 'dark' : 'light'}
            />
            <MinimalJoyWrapper>
                {child === "ReqForm" && (
                    <Suspense fallback={<div style={{ padding: '2rem', textAlign: 'center' }}>Loading...</div>}>
                        <ReqForm {...props} />
                    </Suspense>
                )}
            </MinimalJoyWrapper>
        </PrimeReactProvider>
    );
}
