<!-- #region RootLayout [C:3] [TYPE Layout] [SEMANTICS sveltekit, layout, sidebar, navigation, shell] -->
<!-- @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 -> [EXT:frontend: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 Navbar from '../components/Navbar.svelte';
    import Footer from '../components/Footer.svelte';
    import Toast from '../components/Toast.svelte';
    import ProtectedRoute from '../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-red-50/40' : 'bg-slate-50'}">
    {#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 pt-3">
                    <Breadcrumbs />
                </div>

                {#if isProductionContext}
                    <div class="mx-4 mb-3 md:mx-6">
                        <div class="flex items-center gap-3 rounded-lg border border-red-400 bg-gradient-to-r from-red-50 to-red-100 px-4 py-3 shadow-sm ring-1 ring-red-200">
                            <div class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-600 text-white shadow-sm">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                            </div>
                            <div class="flex-1 text-sm">
                                <span class="font-bold text-red-800">{$t.common?.prod_context_warning || "PROD context active"}:</span>
                                <span class="ml-1.5 font-semibold text-red-700">{selectedEnvironment?.name || selectedEnvironment?.id || 'environment'}</span>
                            </div>
                            <div class="hidden flex-shrink-0 items-center gap-1.5 rounded-full bg-red-600/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-red-700 sm:flex">
                                <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-red-600"></span>
                                PROD
                            </div>
                        </div>
                    </div>
                {/if}

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

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

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