// ═══════════════════════════════════════════════════════════════════
//  Neon Design System  –  App Shell Layout
// ═══════════════════════════════════════════════════════════════════
//
//  Three-zone layout: sidebar (left, collapsible) + top bar + main
//  content area. The sidebar can be toggled between full (240px)
//  and icon-only (60px) collapsed mode.
//
//  Import this as the root of any application page, then slot
//  content into the `content` placeholder.
//
// ═══════════════════════════════════════════════════════════════════

import { Theme } from "../theme.slint";
import { NeonSidebar, NeonTopBar, NavItem } from "../components/nav.slint";

export component AppLayout {
    in property <[NavItem]> nav-items;
    in-out property <int> selected-nav-index: -1;
    in property <string> title;

    callback nav-item-clicked(int);
    callback menu-clicked;

    // Slot for page content
    in property <bool> sidebar-collapsed;
    in-out property <bool> sidebar-collapsed-internal: false;

    VerticalLayout {
        // Top bar
        NeonTopBar {
            title: root.title;
            menu-clicked => {
                root.sidebar-collapsed-internal = !root.sidebar-collapsed-internal;
                root.menu-clicked();
            }
        }

        // Body: sidebar + content
        HorizontalLayout {
            spacing: 0px;

            NeonSidebar {
                items: root.nav-items;
                selected-index: root.selected-nav-index;
                collapsed: root.sidebar-collapsed-internal;
                item-clicked(index) => {
                    root.selected-nav-index = index;
                    root.nav-item-clicked(index);
                }
            }

            // Main content — users put their page here
            Rectangle {
                background: Theme.bg-base;
                horizontal-stretch: 1;
                vertical-stretch: 1;

                // Page content slot
                VerticalLayout {
                    padding: Theme.sp-6;
                    spacing: Theme.sp-4;
                    @children
                }
            }
        }
    }
}
