<!-- #region RootLayout [C:3] [TYPE Layout] [SEMANTICS sveltekit, layout, sidebar, navigation, shell] -->
<!-- @ingroup Routes -->
<!-- @BRIEF Root layout component providing global UI structure: Sidebar, TopNavbar, Footer, TaskDrawer, Toasts. -->
<!-- @LAYER Layout -->
<!-- @RELATION DEPENDS_ON -> [Sidebar] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:TopNavbar] -->
<!-- @RELATION DEPENDS_ON -> [Footer] -->
<!-- @RELATION DEPENDS_ON -> [Toast] -->
<!-- @RELATION DEPENDS_ON -> [ProtectedRoute] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:TaskDrawer] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:Breadcrumbs] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:AssistantChatPanel] -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:isProductionContextStore] -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:selectedEnvironmentStore] -->
<!-- @RELATION BINDS_TO -> [EXT:frontend:sidebarStore] -->
<!-- @UX_STATE Loading -> Sidebar/TopNavbar rendered; page content loading. -->
<!-- @UX_STATE LoginRoute -> Only login page content rendered, no shell. -->
<!-- @UX_STATE Authenticated -> Full shell rendered with Sidebar, TopNavbar, Footer, global components. -->
<!-- @UX_FEEDBACK Production context warning bar visible when isProductionContext = true. -->
<!-- @UX_FEEDBACK Toast notifications rendered globally. -->
<!-- @INVARIANT All pages except /login wrapped in ProtectedRoute. -->
<!-- @INVARIANT Sidebar width adapts (ml-60 vs ml-16) based on sidebar expanded state. -->
<script lang="ts">
    import '../app.css';
    import Footer from '$lib/components/layout/Footer.svelte';
    import Toast from '$lib/components/ui/Toast.svelte';
    import ProtectedRoute from '$lib/components/auth/ProtectedRoute.svelte';
    import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
    import Sidebar from '$lib/components/layout/Sidebar.svelte';
    import TopNavbar from '$lib/components/layout/TopNavbar.svelte';
    import TaskDrawer from '$lib/components/layout/TaskDrawer.svelte';
    import AssistantChatPanel from '$lib/components/assistant/AssistantChatPanel.svelte';
    import TranslationRunGlobalIndicator from '$lib/components/translate/TranslationRunGlobalIndicator.svelte';
    import { t } from '$lib/i18n/index.svelte.js';
    import {
        isProductionContextStore,
        selectedEnvironmentStore
    } from '$lib/stores/environmentContext.svelte.js';
    import { page } from '$app/state';
    import { sidebarStore } from '$lib/stores/sidebar.svelte.js';
    let { children } = $props();

    let isLoginPage = $derived(page.url.pathname === '/login');
    let isExpanded = $derived(sidebarStore.value?.isExpanded ?? true);
    let isProductionContext = $derived(isProductionContextStore.value);
    let selectedEnvironment = $derived(selectedEnvironmentStore.value);
</script>

<Toast />

<!-- Global persistent translation run progress indicator -->
<TranslationRunGlobalIndicator />

<main class="min-h-screen {isProductionContext ? 'bg-destructive-light/40' : 'bg-surface-page'}">
    {#if isLoginPage}
        <div class="p-4">
            {@render children?.()}
        </div>
    {:else}
        <ProtectedRoute>
            <!-- Sidebar -->
            <Sidebar />

            <!-- Main content area with TopNavbar -->
            <div class="flex flex-col min-h-screen {isExpanded ? 'md:ml-60' : 'md:ml-16'} transition-all duration-200">
                <!-- Top Navigation Bar -->
                <TopNavbar />
                <!-- Breadcrumbs -->
                <div class="mt-16 flex items-center justify-between px-4 pt-3 md:px-6">
                    <Breadcrumbs />
                    {#if isProductionContext}
                        <span class="flex items-center gap-1.5 rounded-full border border-warning/30 bg-warning-light px-3 py-1 text-xs font-semibold uppercase tracking-wide text-warning">
                            PROD
                        </span>
                    {/if}
                </div>

                <!-- Page content -->
                <div class="flex-grow px-4 pb-6 pt-2 md:px-6">
                    {@render children?.()}
                </div>

                <!-- Footer -->
                <Footer />
            </div>

            <!-- Global Task Drawer -->
            <TaskDrawer />
            <AssistantChatPanel />
        </ProtectedRoute>
    {/if}
</main>
<!-- #endregion RootLayout -->
