<?php
/**
 * Template Name: Luminous Workspace Player Shell
 * File Location: page-learning-shell.php
 */
?>
<!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>Learning Workspace | Luminous Learning</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": {
                    "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",
                    "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",
                    "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-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"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
            },
            "spacing": {
                    "margin-mobile": "16px",
                    "container-max-width": "1280px",
                    "base": "4px",
                    "margin-desktop": "48px",
                    "gutter": "24px"
            },
            "fontFamily": {
                    "label-sm": ["Be Vietnam Pro"],
                    "body-md": ["Be Vietnam Pro"],
                    "label-lg": ["Be Vietnam Pro"],
                    "headline-lg": ["Montserrat"],
                    "display-lg": ["Montserrat"],
                    "body-lg": ["Be Vietnam Pro"],
                    "headline-md": ["Montserrat"],
                    "headline-lg-mobile": ["Montserrat"]
            },
            "fontSize": {
                    "label-sm": ["12px", {"lineHeight": "16px", "fontWeight": "500"}],
                    "body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                    "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"}],
                    "headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
                    "headline-lg-mobile": ["28px", {"lineHeight": "36px", "fontWeight": "700"}]
            }
          },
        },
      }
    </script>
    <style>
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }
        .active-glow { box-shadow: 0 0 20px rgba(255, 107, 0, 0.2); border: 2px solid #ff6b00; }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #e1e3e4; border-radius: 10px; }
        .timeline-line::before { content: ''; position: absolute; left: 23px; top: 40px; bottom: -20px; width: 2px; background: #edeeef; z-index: 0; }
        .timeline-line-active::before { content: ''; position: absolute; left: 23px; top: 40px; bottom: -20px; width: 2px; background: #ff6b00; border-style: dashed; z-index: 0; }
        .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
        .accordion-item.active .accordion-content { max-height: 500px; }
        .accordion-item.active .rotate-icon { transform: rotate(180deg); }
    </style>
</head>
<body class="bg-background text-on-surface font-body-md min-h-screen antialiased">

    <div class="flex h-screen overflow-hidden">
        
        <?php get_template_part('partials/learning', 'sidebar'); ?>

        <div class="flex flex-col flex-1 min-w-0 overflow-hidden">
            
            <?php get_template_part('partials/learning', 'topbar'); ?>

            <main id="workspace-dynamic-content" class="ml-64 p-margin-desktop bg-background min-h-[calc(100vh-64px)] pb-32 overflow-y-auto transition-opacity duration-200">
            </main>

            <?php get_template_part('partials/learning', 'footer'); ?>

        </div>
    </div>

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

        async function fetchWorkspaceMarkup(targetId, viewName) {
            try {
                const response = await fetch(`${wpAjaxUrl}?action=load_portal_view&view_name=${viewName}`);
                if (!response.ok) throw new Error('Dynamic runtime fetching error exception.');
                const markup = await response.text();
                
                const targetContainer = document.getElementById(targetId);
                targetContainer.innerHTML = markup;
                executeWorkspaceScripts(targetId);
            } catch (error) {
                console.error('Failed to resolve modular view template segment:', error);
            }
        }

        async function navigateWorkspace(viewName) {
            const content = document.getElementById('workspace-dynamic-content');
            content.style.opacity = '0';
            
            await fetchWorkspaceMarkup('workspace-dynamic-content', viewName);
            
            // Evaluates and renders active item styling states across components
            updateTopbarNavigationState(viewName);
            
            content.style.opacity = '1';
            window.location.hash = `/workspace/${viewName}`;
        }

        function updateTopbarNavigationState(viewName) {
            const liveLink = document.getElementById('nav-link-live');
            if (!liveLink) return;

            // Target CSS strings configured from instructions
            const activeClasses = ["relative", "text-primary", "font-bold", "after:content-['']", "after:absolute", "after:left-0", "after:bottom-[-4px]", "after:w-full", "after:h-[3px]", "after:bg-primary", "after:rounded-full"];
            const inactiveClasses = ["text-on-surface-variant", "font-medium"];

            if (viewName === 'live-stream-room') {
                liveLink.classList.remove(...inactiveClasses);
                liveLink.classList.add(...activeClasses);
            } else {
                liveLink.classList.remove(...activeClasses);
                liveLink.classList.add(...inactiveClasses);
            }
        }

        function executeWorkspaceScripts(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);
            });
        }

        // Initialize Workspace with the default Lesson View Panel on boot load
        window.addEventListener('DOMContentLoaded', () => {
            navigateWorkspace('active-lesson-player');
        });
    </script>
    <?php wp_footer(); ?>
</body>
</html>