<?php
/**
 * Template Name: Luminous Creating Course Shell
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="light">
<head>
    <meta charset="<?php bloginfo('charset'); ?>"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Luminous Learning Portal</title>
    
    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
    <?php wp_head(); ?>

    <script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "tertiary-fixed": "#f2daff",
                        "on-tertiary": "#ffffff",
                        "surface-container-high": "#e7e8e9",
                        "tertiary-container": "#ae8cc6",
                        "primary-fixed-dim": "#ffb693",
                        "surface-bright": "#f8f9fa",
                        "secondary-fixed-dim": "#59de9b",
                        "surface-container": "#edeeef",
                        "secondary-fixed": "#78fbb6",
                        "surface": "#f8f9fa",
                        "outline": "#8e7164",
                        "secondary-container": "#75f8b3",
                        "inverse-primary": "#ffb693",
                        "on-primary": "#ffffff",
                        "soft-lilac": "#F2F2FB",
                        "surface-variant": "#e1e3e4",
                        "surface-dim": "#d9dadb",
                        "on-secondary": "#ffffff",
                        "on-secondary-fixed-variant": "#005232",
                        "primary-container": "#ff6b00",
                        "surface-container-low": "#f3f4f5",
                        "on-error-container": "#93000a",
                        "inverse-on-surface": "#f0f1f2",
                        "on-secondary-fixed": "#002111",
                        "primary-fixed": "#ffdbcc",
                        "tertiary-fixed-dim": "#ddb9f6",
                        "on-primary-fixed": "#351000",
                        "tertiary": "#705287",
                        "error-container": "#ffdad6",
                        "on-surface-variant": "#5a4136",
                        "surface-container-highest": "#e1e3e4",
                        "on-background": "#191c1d",
                        "secondary": "#006d43",
                        "error": "#ba1a1a",
                        "on-tertiary-fixed": "#290d3f",
                        "on-surface": "#191c1d",
                        "inverse-surface": "#2e3132",
                        "on-tertiary-fixed-variant": "#573a6e",
                        "warm-orange": "#F9AD6D",
                        "on-primary-fixed-variant": "#7a3000",
                        "outline-variant": "#e2bfb0",
                        "alert-coral": "#EA7052",
                        "on-tertiary-container": "#412457",
                        "surface-container-lowest": "#ffffff",
                        "on-secondary-container": "#007147",
                        "background": "#f8f9fa",
                        "surface-tint": "#a04100",
                        "primary": "#a04100",
                        "on-primary-container": "#572000",
                        "on-error": "#ffffff"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                    "spacing": {
                        "gutter": "24px",
                        "container-max-width": "1280px",
                        "base": "4px",
                        "margin-mobile": "16px",
                        "margin-desktop": "48px"
                    },
                    "fontFamily": {
                        "label-sm": ["Be Vietnam Pro"],
                        "body-md": ["Be Vietnam Pro"],
                        "headline-md": ["Montserrat"],
                        "headline-lg-mobile": ["Montserrat"],
                        "label-lg": ["Be Vietnam Pro"],
                        "headline-lg": ["Montserrat"],
                        "display-lg": ["Montserrat"],
                        "body-lg": ["Be Vietnam Pro"]
                    },
                    "fontSize": {
                        "label-sm": ["12px", {"lineHeight": "16px", "fontWeight": "500"}],
                        "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                        "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
                        "headline-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}],
                        "label-lg": ["14px", {"lineHeight": "20px", "letterSpacing": "0.01em", "fontWeight": "600"}],
                        "headline-lg": ["32px", {"lineHeight": "40px", "fontWeight": "700"}],
                        "display-lg": ["48px", {"lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                        "body-lg": ["18px", {"lineHeight": "28px", "fontWeight": "400"}]
                    }
                },
            },
        }
    </script>
<style>
        body {
            background-color: #f8f9fa;
            color: #191c1d;
            font-family: 'Be Vietnam Pro', sans-serif;
        }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(225, 227, 228, 0.5);
        }
    </style>
</head>
<body class="min-h-screen overflow-x-hidden">

    <?php get_template_part('partials/create-lesson-topbar'); ?>
    
    <div class="flex h-full min-h-screen">
        <?php get_template_part('partials/create-lesson-sidebar'); ?>
        
        <main id="portal-viewport-canvas" class="flex-1 lg:ml-64 p-6 md:p-margin-desktop bg-background pb-24 lg:pb-12 transition-all duration-200">
        </main>
    </div>

    <div id="portal-overlay-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-200 p-4">
        <div class="bg-white rounded-2xl w-full max-w-4xl shadow-2xl border border-outline-variant relative overflow-hidden transform transition-all duration-200" id="portal-modal-content">
        </div>
    </div>

    <script>
        const wpAjaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>";

        async function fetchViewMarkup(containerId, templateName) {
            try {
                const response = await fetch(`${wpAjaxUrl}?action=load_portal_view&view_name=${templateName}`);
                if (response.ok) {
                    document.getElementById(containerId).innerHTML = await response.text();
                    executeEmbeddedScripts(containerId);
                }
            } catch (err) {
                console.error("View resolution runtime exception:", err);
            }
        }
        
        // Map of views to their respective sidebar target element IDs
        const navParentMap = {
            'create-academy-lesson': 'nav-step-basics',
            'create-skill-lesson': 'nav-step-basics',
            'create-curriculum-lesson': 'nav-step-curriculum',
            'create-resources-lesson': 'nav-step-resources',
            'create-publish-lesson': 'nav-step-publish'
        };

        async function navigate(viewName, params = {}) {
            const viewport = document.getElementById('portal-viewport-canvas');
            if (viewport) viewport.style.opacity = '0.3';
            
            // 1. Build Query Parameters string dynamically from the params argument object
            const queryString = Object.keys(params)
                .map(key => `&${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
                .join('');

            // 2. Fetch view markup utilizing the global endpoint with the parameters appended
            try {
                const response = await fetch(`${wpAjaxUrl}?action=load_portal_view&view_name=${viewName}${queryString}`);
                if (response.ok) {
                    document.getElementById('portal-viewport-canvas').innerHTML = await response.text();
                    executeEmbeddedScripts('portal-viewport-canvas');
                } else {
                    console.error("Failed to load view markup stream.");
                }
            } catch (err) {
                console.error("View resolution runtime exception:", err);
            }
            
            if (viewport) viewport.style.opacity = '1';
            
            // 3. Clear all active styles from every list item anchor in the sidebar navigation
            const activeClasses = "bg-primary-container/10 text-primary font-bold border-r-4 border-primary translate-x-1";
            const inactiveClasses = "text-on-surface-variant hover:bg-surface-variant";
            
            // Query lists containing sidebar step wrappers
            const stepItems = ['nav-step-basics', 'nav-step-curriculum', 'nav-step-resources', 'nav-step-publish'];
            
            stepItems.forEach(id => {
                const li = document.getElementById(id);
                if (li) {
                    const link = li.querySelector('a');
                    if (link) {
                        // Strip active modifiers away cleanly
                        activeClasses.split(' ').forEach(cls => link.classList.remove(cls));
                        // Add basic defaults back
                        inactiveClasses.split(' ').forEach(cls => link.classList.add(cls));
                    }
                }
            });

            // 4. Find the matching step layout parent ID and apply active classes
            const parentId = navParentMap[viewName];
            const activeLi = document.getElementById(parentId);
            
            if (activeLi) {
                const activeLink = activeLi.querySelector('a');
                if (activeLink) {
                    // Strip regular defaults away cleanly
                    inactiveClasses.split(' ').forEach(cls => activeLink.classList.remove(cls));
                    // Inject structural active accents
                    activeClasses.split(' ').forEach(cls => activeLink.classList.add(cls));
                }
            }

            // 5. Update browser window tracking state hash safely
            window.location.hash = `/${viewName}`;
        }

        async function openOverlay(overlayName, params = {}) {
            const queryString = Object.keys(params)
                .map(key => `&${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
                .join('');

            await fetchViewMarkup('portal-modal-content', `${overlayName}${queryString}`);
            document.getElementById('portal-overlay-modal').classList.remove('hidden');
        }

        function closeOverlay() {
            document.getElementById('portal-overlay-modal').classList.add('hidden');
            document.getElementById('portal-modal-content').innerHTML = '';
        }

        function executeEmbeddedScripts(containerId) {
            const scripts = document.getElementById(containerId).querySelectorAll("script");
            scripts.forEach(oldScript => {
                const newScript = document.createElement("script");
                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                oldScript.parentNode.replaceChild(newScript, oldScript);
            });
        }

        document.getElementById('portal-overlay-modal').addEventListener('click', function(e) {
            if (e.target === this) closeOverlay();
        });

        window.addEventListener('DOMContentLoaded', () => {
            navigate('create-academy-lesson');
        });
    </script>
    <?php wp_footer(); ?>
</body>
</html>