@inherits LayoutComponentBase

<div class="flex min-h-screen">

    @* Desktop sidebar — collapsible *@
    <aside class="@($"hidden shrink-0 border-r border-sidebar-border bg-sidebar transition-all duration-300 ease-in-out md:block {(sidebarCollapsed ? "w-16" : "w-64")}")">
        <NavMenu Collapsed="sidebarCollapsed" OnToggleSidebar="ToggleSidebar" />
    </aside>

    @* Mobile overlay *@
    @if (mobileOpen)
    {
        <div class="fixed inset-0 z-40 flex md:hidden">
            @* Backdrop *@
            <div class="fixed inset-0 bg-black/60 backdrop-blur-sm" @onclick="CloseMobile"></div>

            @* Drawer *@
            <aside class="relative z-50 flex w-72 flex-col bg-sidebar shadow-xl">
                @* Close button *@
                <button class="absolute right-3 top-3 rounded-md p-1 text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
                        @onclick="CloseMobile">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18" /><path d="m6 6 12 12" />
                    </svg>
                </button>
                <NavMenu OnNavigated="CloseMobile" />
            </aside>
        </div>
    }

    @* Main content *@
    <div class="flex flex-1 flex-col overflow-hidden">
        @* Top bar *@
        <header class="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background/80 px-4 backdrop-blur-sm md:px-6">
            @* Mobile menu button *@
            <button class="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:hidden"
                    @onclick="OpenMobile">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="4" x2="20" y1="12" y2="12" /><line x1="4" x2="20" y1="6" y2="6" /><line x1="4" x2="20" y1="18" y2="18" />
                </svg>
            </button>

            @* Desktop collapse toggle *@
            <button class="hidden rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground md:inline-flex"
                    @onclick="ToggleSidebar"
                    title="@(sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar")">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect width="18" height="18" x="3" y="3" rx="2" />
                    <path d="M9 3v18" />
                </svg>
            </button>

            <div class="flex-1 text-sm font-medium text-muted-foreground">
                Enciphered UI Components
            </div>
            <a href="https://learn.microsoft.com/aspnet/core/"
               target="_blank"
               class="text-sm text-muted-foreground transition-colors hover:text-foreground">
                About
            </a>
        </header>

        @* Page content *@
        <main class="flex-1 overflow-auto p-4 md:p-6">
            @Body
        </main>
    </div>
</div>

@code {
    private bool sidebarCollapsed;
    private bool mobileOpen;

    private void ToggleSidebar() => sidebarCollapsed = !sidebarCollapsed;
    private void OpenMobile() => mobileOpen = true;
    private void CloseMobile() => mobileOpen = false;
}