import { Theme, AnimationPresets } from "theme.slint";

// Re-export the Theme global so `slint::include_modules!()` in
// `main.rs` exposes a public `Theme` Rust type. Without this, the
// `impl_theme_access!(DemoWindow, Theme)` invocation can't find the
// Theme symbol — Slint exposes globals to Rust only when they're
// explicitly exported from the entry file. Consumers do the same
// thing in THEIR app.slint when they want to call
// `theme::set_dark_mode` from Rust.
export { Theme, AnimationPresets } from "theme.slint";
import { NeonButton, PrimaryNeonButton, GhostNeonButton, DangerNeonButton, ButtonGroup } from "index.slint";
import { NeonInput, NeonSearchInput, NeonTextArea } from "index.slint";
import { NeonCard, NeonSection, InfoCard } from "index.slint";
import { NeonModal, NeonDrawer, NeonConfirmDialog } from "index.slint";
import { NeonBadge, StatusDot, NeonTag, CountBadge } from "index.slint";
import { NeonToggle, NeonCheckbox, NeonRadioGroup } from "index.slint";
import { NeonSlider, NeonProgressBar, NeonSpinner } from "index.slint";
import { NeonListGroup, NeonDataTable, RowEntry, ListItemEntry } from "index.slint";
import { IconHome, IconLayers, IconSettings, IconBell, IconX, IconChevronLeft, IconChevronRight, IconSun, IconMoon, IconSearch, IconInfo, IconFolder, IconFile, IconChevronDown } from "index.slint";
import { NeonBarChart, NeonLineChart } from "index.slint";
import { NeonSelect, SelectOption, NeonDatePicker } from "index.slint";
import { NeonTreeView, TreeItem } from "index.slint";
import { NeonColorPicker } from "index.slint";
import { NeonTooltip } from "index.slint";
import { NeonPagination, NeonBreadcrumbs } from "index.slint";
import { NeonSplitView } from "index.slint";
import { NeonNotification } from "index.slint";
import { NeonDropdown } from "index.slint";
import { NeonAccordion, NeonSteps, NeonTabs, NeonEmptyState, NeonSkeleton, NeonProgressCircular } from "index.slint";
import { AccordionSection, StepInfo } from "components/advanced.slint";
import { NeonVStack, NeonHStack, NeonContainer, NeonSpacer, NeonDivider } from "index.slint";

export component DemoWindow inherits Window {
    title: "Neon Design System";
    preferred-width: 1200px; preferred-height: 800px;
    background: Theme.bg-base;

    in-out property <bool> is-dark: true;
    in-out property <bool> modal-open: false;
    in-out property <bool> drawer-open: false;
    in-out property <bool> confirm-open: false;
    in-out property <bool> show-toast: false;
    in-out property <string> toast-message: "Export complete!";
    in-out property <bool> left-collapsed: false;
    in-out property <length> left-panel-width: 240px;
    in-out property <bool> right-visible: true;
    in-out property <length> right-panel-width: 240px;
    in-out property <int> active-tab: 0;
    in-out property <int> active-view: 0;
    in-out property <int> active-right-view: 0; // 0=Properties, 1=Alerts, 2=History
    in-out property <int> radio-idx: 0;
    in property <string> status-text: "Ready";
    in-out property <bool> disable-inputs: false;
    // Advanced demo data
    in-out property <int> accordion-idx: 0;
    // Focus management
    in-out property <int> focus-idx: -1;
    in property <int> focus-count:
        root.active-tab == 0 ? 8 :
        root.active-tab == 3 ? 3 :
        root.active-tab == 5 ? 2 :
        root.active-tab == 6 ? 1 :
        root.active-tab == 7 ? 5 : 0;
    in property <[StepInfo]> step-data: [
        { label: "Plan", completed: true, active: false, pending: false },
        { label: "Design", completed: false, active: true, pending: false },
        { label: "Build", completed: false, active: false, pending: true },
        { label: "Deploy", completed: false, active: false, pending: true },
    ];
    in property <[AccordionSection]> accordion-data: [
        { title: "Project Details", expanded: true },
        { title: "Structural Analysis", expanded: false },
        { title: "Cost Estimation", expanded: false },
    ];

    // Keyboard navigation via FocusScope
    fs := FocusScope {
        key-pressed(event) => {
            if (event.text == "escape") {
                if (root.modal-open) { root.modal-open = false; return accept; }
                if (root.drawer-open) { root.drawer-open = false; return accept; }
                if (root.confirm-open) { root.confirm-open = false; return accept; }
                if (root.show-toast) { root.show-toast = false; return accept; }
                root.focus-idx = -1; return accept;
            }
            if (event.text == "return" || event.text == "enter" || event.text == " ") {
                if (root.modal-open) { root.modal-open = false; return accept; }
                return accept;
            }
            // Tab / Shift+Tab: navigate focusable components
            if (event.text == "tab") {
                root.focus-idx = (root.focus-idx + 1);
                if (root.focus-idx >= root.focus-count) { root.focus-idx = 0; }
                return accept;
            }
            if (event.text == "backtab") {
                root.focus-idx = (root.focus-idx - 1);
                if (root.focus-idx < 0) { root.focus-idx = root.focus-count - 1; }
                return accept;
            }
            // Arrow Up/Down: tree navigation (tab 6)
            if (event.text == "up") {
                if (root.active-tab == 6 && root.tree-sel > 0) { root.tree-sel -= 1; return accept; }
            }
            if (event.text == "down") {
                if (root.active-tab == 6 && root.tree-sel < root.tree-items.length - 1) { root.tree-sel += 1; return accept; }
            }
            if (event.text == "left") {
                if (root.active-tab > 0) { root.active-tab -= 1; root.focus-idx = -1; }
                return accept;
            }
            if (event.text == "right") {
                if (root.active-tab < root.tabs.length - 1) { root.active-tab += 1; root.focus-idx = -1; }
                return accept;
            }
            return reject;
        }
    }

    in property <[string]> tabs: ["Dashboard", "Models", "Analytics", "Settings", "Charts", "Forms", "Tree", "Utilities", "Layout", "Typography"];
    in property <[string]> radio-items: ["Real-time", "Scheduled", "Manual"];
    in property <[RowEntry]> rows: [
        { cells: ["001", "Bridge A-103", "Active", "75%"] },
        { cells: ["002", "Tunnel B-207", "Review", "45%"] },
        { cells: ["003", "Road C-5", "Draft", "20%"] },
    ];
    in property <[ListItemEntry]> items: [
        { text: "Bridge A-103", secondary: "Modified 2h ago", icon: "", disabled: false },
        { text: "Tunnel B-207", secondary: "Modified yesterday", icon: "", disabled: false },
    ];

    // Charts data
    in property <[float]> chart-values: [42, 68, 25, 91, 54, 78, 33];
    in property <[string]> chart-labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
    in property <[float]> line-values: [30, 55, 80, 45, 70, 90, 60];

    // Select options
    in property <[SelectOption]> select-opts: [
        { label: "Bridge A-103", value: "br103", disabled: false },
        { label: "Tunnel B-207", value: "tb207", disabled: false },
        { label: "Road C-5", value: "rc005", disabled: false },
        { label: "Archived", value: "arch", disabled: true },
    ];
    in-out property <int> select-idx: -1;

    // Tree data
    in property <[TreeItem]> tree-items: [
        { label: "InfraProject", depth: 0, expanded: true, has-children: true, icon: "📁", selected: false },
        { label: "src", depth: 1, expanded: true, has-children: true, icon: "📂", selected: false },
        { label: "bridges.rs", depth: 2, expanded: false, has-children: false, icon: "📄", selected: false },
        { label: "tunnels.rs", depth: 2, expanded: false, has-children: false, icon: "📄", selected: false },
        { label: "models", depth: 1, expanded: false, has-children: true, icon: "📂", selected: false },
        { label: "bridge_a103.ifc", depth: 2, expanded: false, has-children: false, icon: "📄", selected: false },
        { label: "docs", depth: 1, expanded: false, has-children: true, icon: "📂", selected: false },
        { label: "README.md", depth: 2, expanded: false, has-children: false, icon: "📄", selected: false },
    ];
    in-out property <int> tree-sel: -1;

    // Overlays
    NeonModal { open: root.modal-open; title: "New Project"; closed => { root.modal-open = false; }
        VerticalLayout { spacing: Theme.sp-4;
            NeonInput { placeholder: "Name"; label: "Project"; }
            NeonInput { placeholder: "Description"; label: "Description"; }
            HorizontalLayout { spacing: Theme.sp-2; alignment: end;
                GhostNeonButton { text: "Cancel"; clicked => { root.modal-open = false; } }
                PrimaryNeonButton { text: "Create"; clicked => { root.modal-open = false; } }
            }
        }
    }
    NeonDrawer { open: root.drawer-open; title: "Notifications"; closed => { root.drawer-open = false; }
        VerticalLayout { spacing: Theme.sp-4; NeonCard { title: "Update v2.4.1"; Text { text: "Engine ready"; font-size: Theme.font-sm; color: Theme.text-muted; } } }
    }
    NeonConfirmDialog { open: root.confirm-open; title: "Delete"; message: "Delete Bridge A-103?"; confirm-danger: true;
        confirmed => { root.confirm-open = false; } cancelled => { root.confirm-open = false; }
    }
    NeonNotification { message: root.toast-message; shown: root.show-toast; dismissed => { root.show-toast = false; } }

    // VSCode-style layout
    VerticalLayout { spacing: 0;
        // Top Bar
        Rectangle { min-height: 36px;
            Rectangle { background: Theme.bg-elevated; Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; } }
            HorizontalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-2; alignment: start;
                Text { text: "Neon Design System"; font-size: Theme.font-sm; font-weight: 600; color: Theme.text-primary; vertical-alignment: center; }
                Rectangle { horizontal-stretch: 1; }
                // Theme toggle
                Rectangle { width: 28px; height: 28px; border-radius: Theme.radius-md; background: th.has-hover ? Theme.bg-hover : transparent;
                    if (!root.is-dark) : IconMoon { color: Theme.neon-cyan; size: 16px; x: 6px; y: 6px; }
                    th := TouchArea { clicked => { root.is-dark = !root.is-dark; Theme.dark-mode = root.is-dark; } mouse-cursor: MouseCursor.pointer; }
                }
                // Disabled state toggle
                Rectangle { width: 28px; height: 28px; border-radius: Theme.radius-md; background: dh.has-hover ? Theme.bg-hover : transparent;
                    Text { text: root.disable-inputs ? "🔒" : "🔓"; font-size: 16px; x: 5px; y: 5px; }
                    dh := TouchArea { clicked => { root.disable-inputs = !root.disable-inputs; } mouse-cursor: MouseCursor.pointer; }
                }
                Rectangle { width: 28px; height: 28px; border-radius: Theme.radius-md; background: rh.has-hover ? Theme.bg-hover : transparent;
                    IconChevronRight { color: Theme.text-muted; size: 16px; x: 6px; y: 6px; }
                    rh := TouchArea { clicked => { root.right-visible = !root.right-visible; } mouse-cursor: MouseCursor.pointer; }
                }
            }
        }
        // Body
        HorizontalLayout { spacing: 0; vertical-stretch: 1;
            // Activity Bar (48px) + Side Bar (contextual)
            Rectangle {
                width: 48px;
                Rectangle { background: Theme.bg-elevated; }
                VerticalLayout { spacing: 0; padding-top: Theme.sp-1;
                    // Explorer
                    Rectangle { width: 48px; height: 44px; background: root.active-view == 0 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-view == 0 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconHome { color: root.active-view == 0 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        TouchArea { clicked => { if (root.left-collapsed) { root.left-collapsed = false; root.active-view = 0; } else if (root.active-view == 0) { root.left-collapsed = true; } else { root.active-view = 0; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    // Search
                    Rectangle { width: 48px; height: 44px; background: root.active-view == 1 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-view == 1 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconSearch { color: root.active-view == 1 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        TouchArea { clicked => { if (root.left-collapsed) { root.left-collapsed = false; root.active-view = 1; } else if (root.active-view == 1) { root.left-collapsed = true; } else { root.active-view = 1; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    // Git
                    Rectangle { width: 48px; height: 44px; background: root.active-view == 2 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-view == 2 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconLayers { color: root.active-view == 2 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        CountBadge { count: 3; x: 28px; y: 4px; }
                        TouchArea { clicked => { if (root.left-collapsed) { root.left-collapsed = false; root.active-view = 2; } else if (root.active-view == 2) { root.left-collapsed = true; } else { root.active-view = 2; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    Rectangle { vertical-stretch: 1; }
                }
            }
            // Side Bar (contextual panel)
            Rectangle {
                width: root.left-collapsed ? 0px : root.left-panel-width;
                animate width { duration: 150ms; }
                clip: true;
                Rectangle { background: Theme.bg-elevated; Rectangle { width: 1px; background: Theme.border; x: parent.width - 1px; height: 100%; }
                    // Explorer view
                    if (root.active-view == 0) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "EXPLORER"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; vertical-stretch: 1;
                            NeonTreeView { items: root.tree-items; selected-index: root.tree-sel; item-clicked(i) => { root.tree-sel = i; } }
                        }
                        Rectangle { min-height: 36px; background: lc1.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronLeft { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            lc1 := TouchArea { clicked => { root.left-collapsed = true; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                    // Search view
                    if (root.active-view == 1) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "SEARCH"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; vertical-stretch: 1;
                            NeonSearchInput { label: ""; }
                            Text { text: "2 results in 2 files"; font-size: Theme.font-xs; color: Theme.text-dim; }
                            NeonCard { title: "bridge.rs"; Text { text: "...fn compute()..."; font-size: Theme.font-xs; color: Theme.text-dim; } }
                            NeonCard { title: "tunnel.rs"; Text { text: "...fn analyze()..."; font-size: Theme.font-xs; color: Theme.text-dim; } }
                        }
                        Rectangle { min-height: 36px; background: lc2.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronLeft { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            lc2 := TouchArea { clicked => { root.left-collapsed = true; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                    // Git view
                    if (root.active-view == 2) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "SOURCE CONTROL"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; vertical-stretch: 1;
                            NeonCard { title: "Changes";
                                VerticalLayout { spacing: Theme.sp-1;
                                    Text { text: "3 pending changes"; font-size: Theme.font-xs; color: Theme.text-dim; }
                                    Text { text: "M src/bridge.rs"; font-size: Theme.font-xs; color: Theme.neon-green; }
                                    Text { text: "M src/tunnel.rs"; font-size: Theme.font-xs; color: Theme.neon-green; }
                                    Text { text: "A src/main.rs";   font-size: Theme.font-xs; color: Theme.neon-cyan; }
                                }
                            }
                            ButtonGroup { PrimaryNeonButton { text: "Commit"; } NeonButton { text: "Pull"; } }
                        }
                        Rectangle { min-height: 36px; background: lc3.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronLeft { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            lc3 := TouchArea { clicked => { root.left-collapsed = true; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                }
            }
            // Left resize divider
            Rectangle {
                width: 4px;
                background: dr1.has-hover ? Theme.neon-cyan : transparent;
                animate background { duration: 150ms; }
                dr1 := TouchArea {
                    moved => { root.left-panel-width = (root.left-panel-width + dr1.mouse-x - 2px).max(160px).min(500px); }
                    mouse-cursor: MouseCursor.col-resize;
                }
            }
            // Center: Tabs + Content
            Rectangle { horizontal-stretch: 1;
                VerticalLayout { spacing: 0;
                    // VSCode tabs
                    Rectangle { min-height: 35px;
                        Rectangle { background: Theme.bg-elevated; Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; } }
                        HorizontalLayout { spacing: 0;
                            for tab[idx] in root.tabs : Rectangle { min-width: 100px; min-height: 35px;
                                Rectangle { background: idx == root.active-tab ? Theme.bg-base : Theme.bg-elevated; }
                                if (idx == root.active-tab) : Rectangle { height: 2px; background: Theme.neon-cyan; width: 100%; }
                                HorizontalLayout { spacing: Theme.sp-2; padding: Theme.sp-2; alignment: center;
                                    Text { text: tab; font-size: Theme.font-xs; color: idx == root.active-tab ? Theme.neon-cyan : Theme.text-muted; font-weight: idx == root.active-tab ? 600 : 400; horizontal-stretch: 1; vertical-alignment: center; }
                                }
                                TouchArea { clicked => { root.active-tab = idx; } mouse-cursor: MouseCursor.pointer; }
                            }
                            Rectangle { min-width: 30px; min-height: 35px; Text { text: "+"; color: Theme.text-muted; font-size: Theme.font-lg; horizontal-alignment: center; vertical-alignment: center; } }
                        }
                    }
                    // Tab content
                    Rectangle { vertical-stretch: 1;
                        Flickable { vertical-stretch: 1; horizontal-stretch: 1;
                            if (root.active-tab == 0) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4;
                                    NeonCard { title: "Dashboard";
                                        ButtonGroup {
                                            PrimaryNeonButton { text: "Modal"; has-focus: root.focus-idx == 0; clicked => { root.modal-open = true; } }
                                            NeonButton { text: "Drawer"; has-focus: root.focus-idx == 1; clicked => { root.drawer-open = true; } }
                                            DangerNeonButton { text: "Confirm"; has-focus: root.focus-idx == 2; clicked => { root.confirm-open = true; } }
                                        }
                                    }
                                    NeonSection { title: "Inputs";
                                                HorizontalLayout { spacing: Theme.sp-6;
                                                    VerticalLayout { spacing: Theme.sp-4; horizontal-stretch: 1; NeonInput { placeholder: "Name"; label: "Project"; enabled: !root.disable-inputs; has-focus: root.focus-idx == 3; } NeonSearchInput { enabled: !root.disable-inputs; has-focus: root.focus-idx == 4; } }
                                                    VerticalLayout { spacing: Theme.sp-4; horizontal-stretch: 1; NeonToggle { label: "Auto-sync"; enabled: !root.disable-inputs; has-focus: root.focus-idx == 5; } NeonCheckbox { label: "Enable"; enabled: !root.disable-inputs; has-focus: root.focus-idx == 6; } }
                                        }
                                    }
                                    NeonSection { title: "Controls";
                                        VerticalLayout { spacing: Theme.sp-4; max-width: 400px;
                                            NeonSlider { label: "Zoom"; enabled: !root.disable-inputs; has-focus: root.focus-idx == 7; }
                                            NeonProgressBar { value: 0.65; show-label: true; }
                                            HorizontalLayout { spacing: Theme.sp-3; NeonSpinner { } Text { text: "Loading..."; font-size: Theme.font-sm; color: Theme.text-muted; } }
                                        }
                                    }
                                    NeonSection { title: "Badges";
                                        HorizontalLayout { spacing: Theme.sp-3;
                                            NeonBadge { text: "Active"; color: Theme.neon-green; }
                                            NeonBadge { text: "Pending"; color: Theme.neon-amber; variant: "outline"; }
                                            NeonBadge { text: "Error"; color: Theme.neon-red; }
                                            NeonTag { text: "Structural"; }
                                            CountBadge { count: 12; }
                                            StatusDot { color: Theme.neon-green; label: "Live"; }
                                        }
                                    }
                                }
                            }
                            if (root.active-tab == 1) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-5;
                                    NeonSection { title: "Data Table";
                                        NeonDataTable { columns: ["ID", "Name", "Status", "Progress"]; rows: root.rows; sort-column: 0; sort-asc: true; }
                                    }
                                    NeonSection { title: "List";
                                        NeonListGroup { items: root.items; }
                                    }
                                }
                            }
                            if (root.active-tab == 2) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-5;
                                    HorizontalLayout { spacing: Theme.sp-6;
                                        InfoCard { icon-text: "◈"; label: "Models"; value: "1,247"; }
                                        InfoCard { icon-text: "⚠"; label: "Errors"; value: "3"; accent-color: Theme.neon-red; }
                                        InfoCard { icon-text: "✓"; label: "Done"; value: "12"; accent-color: Theme.neon-green; }
                                    }
                                }
                            }
                            if (root.active-tab == 3) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-5;
                                    NeonCard { title: "Settings";
                                        NeonInput { placeholder: "Key"; label: "API Key"; enabled: !root.disable-inputs; has-focus: root.active-tab == 3 && root.focus-idx == 0; }
                                        NeonToggle { label: "Notifications"; enabled: !root.disable-inputs; has-focus: root.active-tab == 3 && root.focus-idx == 1; }
                                        NeonRadioGroup { items: root.radio-items; selected-index: root.radio-idx; enabled: !root.disable-inputs; }
                                    }
                                }
                            }
                            // ── Charts Tab ──
                            if (root.active-tab == 4) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4;
                                    NeonCard { title: "Bar Chart";
                                        NeonBarChart { values: root.chart-values; labels: root.chart-labels; chart-height: 160px; }
                                    }
                                    NeonCard { title: "Line Chart";
                                        NeonLineChart { values: root.line-values; labels: root.chart-labels; chart-height: 160px; }
                                    }
                                }
                            }
                            // ── Forms Tab ──
                            if (root.active-tab == 5) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4;
                                    HorizontalLayout { spacing: Theme.sp-4;
                                        NeonCard { title: "Select"; horizontal-stretch: 1;
                                            NeonSelect { options: root.select-opts; selected-index: root.select-idx; label: "Structure"; enabled: !root.disable-inputs; has-focus: root.active-tab == 5 && root.focus-idx == 0; }
                                        }
                                        NeonCard { title: "Date Picker"; horizontal-stretch: 1;
                                            NeonDatePicker { label: "Inspection"; year: 2026; month: 5; enabled: !root.disable-inputs; has-focus: root.active-tab == 5 && root.focus-idx == 1; }
                                        }
                                    }
                                    NeonCard { title: "Color Picker";
                                        NeonColorPicker { }
                                    }
                                }
                            }
                            // ── Tree Tab ──
                            if (root.active-tab == 6) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4;
                                    NeonCard { title: "Project Tree";
                                        NeonTreeView { items: root.tree-items; selected-index: root.tree-sel; has-focus: root.active-tab == 6 && root.focus-idx == 0; }
                                    }
                                }
                            }
                            // ── Utilities Tab ──
                            if (root.active-tab == 7) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-6;
                                    NeonSection { title: "Pagination";
                                        NeonPagination { total-pages: 12; current-page: 3; }
                                    }
                                    NeonSection { title: "Breadcrumbs";
                                        NeonBreadcrumbs { items: ["Home", "Projects", "Bridge A-103", "Models"]; }
                                    }
                                    NeonSection { title: "Tooltip Demo";
                                        HorizontalLayout { spacing: Theme.sp-4; alignment: start;
                                            Rectangle { width: 100px; height: 36px; border-radius: Theme.radius-md;
                                                border-width: 1px; border-color: Theme.neon-cyan;
                                                Text { text: "Hover me"; color: Theme.neon-cyan; font-size: Theme.font-sm;
                                                    horizontal-alignment: center; vertical-alignment: center; }
                                                tt := TouchArea {
                                                    clicked => { root.show-toast = true; root.toast-message = "Button clicked!"; }
                                                    mouse-cursor: MouseCursor.pointer;
                                                }
                                            }
                                            NeonTooltip { text: "Click to trigger a toast notification"; shown: tt.has-hover; offset-x: 0px; offset-y: -28px; }
                                        }
                                    }
                                    NeonSection { title: "Toast Notification";
                                        NeonButton { text: "Show Toast"; clicked => { root.show-toast = true; root.toast-message = "Operation completed successfully!"; } }
                                    }
                                    NeonSection { title: "Dropdown Menu";
                                        NeonDropdown { label: "Select action...";
                                            items: [
                                                { label: "Open Project", value: "open", disabled: false },
                                                { label: "Export IFC", value: "export", disabled: false },
                                                { label: "Duplicate", value: "dup", disabled: false },
                                                { label: "Archive", value: "arch", disabled: true },
                                                { label: "Delete", value: "del", disabled: false },
                                            ];
                                        }
                                    }
                                    NeonSection { title: "Accordion";
                                        NeonAccordion { sections: root.accordion-data; expanded-index: root.accordion-idx; }
                                    }
                                    NeonSection { title: "Steps / Wizard";
                                        NeonSteps { steps: root.step-data; current-step: 1; }
                                    }
                                    NeonSection { title: "Tabs (standalone)";
                                        NeonTabs { tab-titles: ["Tab A", "Tab B", "Tab C"]; }
                                    }
                                    NeonSection { title: "Empty State";
                                        NeonEmptyState { icon-text: "📊"; title: "No data yet"; description: "Import a model to start visualizing."; has-action: true; action-label: "Import"; }
                                    }
                                    NeonSection { title: "Skeleton Loading";
                                        HorizontalLayout { spacing: Theme.sp-3;
                                            VerticalLayout { spacing: Theme.sp-2; NeonSkeleton { skeleton-width: 200px; skeleton-height: 14px; } NeonSkeleton { skeleton-width: 160px; skeleton-height: 14px; } NeonSkeleton { skeleton-width: 180px; skeleton-height: 14px; } }
                                            NeonSkeleton { skeleton-width: 60px; skeleton-height: 60px; }
                                        }
                                    }
                                    NeonSection { title: "Progress Circular";
                                        HorizontalLayout { spacing: Theme.sp-4; alignment: center;
                                            NeonProgressCircular { value: 0.0; size: 48px; }
                                            NeonProgressCircular { value: 0.33; size: 48px; color: Theme.neon-amber; }
                                            NeonProgressCircular { value: 0.66; size: 48px; color: Theme.neon-cyan; }
                                            NeonProgressCircular { value: 1.0; size: 48px; color: Theme.neon-green; }
                                        }
                                    }
                                }
                            }
                            // ── Layout Tab ──
                            if (root.active-tab == 8) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-6;
                                    NeonSection { title: "NeonVStack - Vertical Stack";
                                        NeonVStack { spacing: Theme.sp-3;
                                            NeonCard { title: "Card 1"; Text { text: "VStack children"; font-size: Theme.font-sm; color: Theme.text-muted; } }
                                            NeonCard { title: "Card 2"; Text { text: "with consistent spacing"; font-size: Theme.font-sm; color: Theme.text-muted; } }
                                            NeonCard { title: "Card 3"; Text { text: "from Theme tokens"; font-size: Theme.font-sm; color: Theme.text-muted; } }
                                        }
                                    }
                                    NeonSection { title: "NeonHStack - Horizontal Stack";
                                        NeonHStack { spacing: Theme.sp-4; alignment: "center";
                                            NeonCard { title: "Left"; horizontal-stretch: 1; Text { text: "A"; font-size: Theme.font-xl; color: Theme.neon-cyan; horizontal-alignment: center; } }
                                            NeonCard { title: "Center"; horizontal-stretch: 1; Text { text: "B"; font-size: Theme.font-xl; color: Theme.neon-cyan; horizontal-alignment: center; } }
                                            NeonCard { title: "Right"; horizontal-stretch: 1; Text { text: "C"; font-size: Theme.font-xl; color: Theme.neon-cyan; horizontal-alignment: center; } }
                                        }
                                    }
                                    NeonSection { title: "NeonHStack with NeonSpacer";
                                        NeonHStack { spacing: Theme.sp-2; alignment: "center";
                                            Text { text: "Left aligned"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            NeonSpacer { }
                                            PrimaryNeonButton { text: "Submit"; }
                                            DangerNeonButton { text: "Cancel"; }
                                        }
                                    }
                                    NeonSection { title: "NeonContainer - Centered (sm preset)";
                                        NeonContainer { sm: true;
                                            NeonCard { title: "Max 640px";
                                                Text { text: "Use sm/md/lg/xl presets for responsive centering."; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            }
                                        }
                                    }
                                    NeonSection { title: "NeonDivider - Separator";
                                        VerticalLayout { spacing: Theme.sp-3;
                                            Text { text: "Above divider"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            NeonDivider { }
                                            Text { text: "Below divider"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            NeonHStack { spacing: Theme.sp-3; alignment: "center";
                                                Text { text: "Left"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                                NeonDivider { orientation: "vertical"; height: 24px; }
                                                Text { text: "Right"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            }
                                        }
                                    }
                                }
                            }
                            // ── Typography Tab ──
                            if (root.active-tab == 9) : Rectangle {
                                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-6;
                                    NeonSection { title: "Headings (inline Text)";
                                        VerticalLayout { spacing: Theme.sp-3;
                                            Text { text: "H1 - Page Title (28px)"; font-size: Theme.font-3xl; font-weight: 700; color: Theme.text-primary; }
                                            Text { text: "H2 - Section Title (22px)"; font-size: Theme.font-2xl; font-weight: 700; color: Theme.text-primary; }
                                            Text { text: "H3 - Panel Title (18px)"; font-size: Theme.font-xl; font-weight: 700; color: Theme.text-primary; }
                                            Text { text: "H4 - Group Header (15px)"; font-size: Theme.font-lg; font-weight: 600; color: Theme.text-muted; }
                                            Text { text: "H5 - Sub-label (13px)"; font-size: Theme.font-base; font-weight: 600; color: Theme.text-muted; }
                                            Text { text: "H6 - LABEL (11px)"; font-size: Theme.font-xs; font-weight: 600; color: Theme.text-dim; }
                                        }
                                    }
                                    NeonSection { title: "Body and Caption";
                                        VerticalLayout { spacing: Theme.sp-3;
                                            Text { text: "Body - Paragraph at 13px. Standard size with word-wrap."; font-size: Theme.font-base; color: Theme.text-primary; wrap: word-wrap; }
                                            Text { text: "BodySmall - Secondary at 12px."; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            Text { text: "Caption - Hint at 11px in dim."; font-size: Theme.font-xs; color: Theme.text-dim; }
                                            Text { text: "Muted - Status text at 12px."; font-size: Theme.font-sm; color: Theme.text-muted; }
                                        }
                                    }
                                    NeonSection { title: "Typography Components";
                                        VerticalLayout { spacing: Theme.sp-3;
                                            Text { text: "Components like NeonH1..NeonH6 exist in typography.slint."; font-size: Theme.font-sm; color: Theme.text-muted; wrap: word-wrap; }
                                            Text { text: "They auto-bind to Theme.font-*, Theme.text-* tokens."; font-size: Theme.font-sm; color: Theme.text-muted; }
                                            Text { text: "Import: import { NeonH1 } from components/typography.slint;"; font-size: Theme.font-sm; color: Theme.neon-cyan; font-family: Theme.font-mono; }
                                            Text { text: "Use: NeonH1 { text: Page Title; }"; font-size: Theme.font-sm; color: Theme.neon-cyan; font-family: Theme.font-mono; }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            // Right resize divider
            Rectangle {
                width: 4px;
                background: dr2.has-hover ? Theme.neon-cyan : transparent;
                animate background { duration: 150ms; }
                dr2 := TouchArea {
                    moved => { root.right-panel-width = (root.right-panel-width - dr2.mouse-x + 2px).max(160px).min(500px); }
                    mouse-cursor: MouseCursor.col-resize;
                }
            }
            // Right Content Panel (collapsible — activity bar stays visible)
            Rectangle {
                visible: root.right-visible;
                width: root.right-panel-width;
                animate width { duration: 150ms; }
                clip: true;
                Rectangle { background: Theme.bg-elevated;
                    Rectangle { width: 1px; background: Theme.border; height: 100%; }
                    // Properties view
                    if (root.active-right-view == 0) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "PROPERTIES"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; vertical-stretch: 1;
                        NeonSection { title: "Selection";
                            if (root.active-tab == 0) : Text { text: "No item selected"; font-size: Theme.font-sm; color: Theme.text-dim; }
                            if (root.active-tab == 1) : Text { text: "Bridge A-103"; font-size: Theme.font-sm; color: Theme.text-muted; }
                            if (root.active-tab >= 2) : Text { text: "5 models loaded"; font-size: Theme.font-sm; color: Theme.text-muted; }
                        }
                        NeonCard { title: "Transform";
                            VerticalLayout { spacing: Theme.sp-2;
                                HorizontalLayout { spacing: Theme.sp-2; Text { text: "X:"; font-size: Theme.font-xs; color: Theme.text-dim; min-width: 20px; } Text { text: "482,391.45"; font-size: Theme.font-xs; color: Theme.text-primary; } }
                                HorizontalLayout { spacing: Theme.sp-2; Text { text: "Y:"; font-size: Theme.font-xs; color: Theme.text-dim; min-width: 20px; } Text { text: "1,243,891.20"; font-size: Theme.font-xs; color: Theme.text-primary; } }
                                HorizontalLayout { spacing: Theme.sp-2; Text { text: "Z:"; font-size: Theme.font-xs; color: Theme.text-dim; min-width: 20px; } Text { text: "1,520.00"; font-size: Theme.font-xs; color: Theme.text-primary; } }
                            }
                        }
                        Rectangle { vertical-stretch: 1; }
                        NeonButton { text: "Export All"; }
                        }
                        Rectangle { min-height: 36px; background: rc1.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronRight { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            rc1 := TouchArea { clicked => { root.right-visible = false; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                    // Alerts view
                    if (root.active-right-view == 1) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "ALERTS"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; vertical-stretch: 1;
                            NeonCard { title: "System Update";
                                VerticalLayout { spacing: Theme.sp-2; Text { text: "Engine v2.4.1 ready"; font-size: Theme.font-sm; color: Theme.text-muted; }
                                    PrimaryNeonButton { text: "Update Now"; }
                                }
                            }
                            NeonCard { title: "Export Complete";
                                Text { text: "Bridge A-103 exported."; font-size: Theme.font-sm; color: Theme.text-dim; }
                            }
                        }
                        Rectangle { min-height: 36px; background: rc2.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronRight { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            rc2 := TouchArea { clicked => { root.right-visible = false; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                    // History view
                    if (root.active-right-view == 2) : VerticalLayout { spacing: 0;
                        HorizontalLayout { padding: Theme.sp-3; alignment: start;
                            Text { text: "HISTORY"; font-size: 10px; font-weight: 600; color: Theme.text-muted; letter-spacing: 0.5px; horizontal-stretch: 1; vertical-alignment: center; }
                        }
                        VerticalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3; spacing: Theme.sp-2; vertical-stretch: 1;
                            NeonCard { title: "Recent";
                                VerticalLayout { spacing: Theme.sp-1;
                                    Text { text: "• Modified bridge.rs"; font-size: Theme.font-xs; color: Theme.text-dim; }
                                    Text { text: "• Added tunnel.rs"; font-size: Theme.font-xs; color: Theme.text-dim; }
                                    Text { text: "• Deleted old backup"; font-size: Theme.font-xs; color: Theme.text-dim; }
                                }
                            }
                        }
                        Rectangle { min-height: 36px; background: rc3.has-hover ? Theme.bg-hover : transparent;
                            HorizontalLayout { spacing: Theme.sp-2; alignment: center;
                                IconChevronRight { color: Theme.neon-cyan; size: 16px; }
                                Text { text: "Collapse"; font-size: 10px; color: Theme.neon-cyan; }
                            }
                            rc3 := TouchArea { clicked => { root.right-visible = false; } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                }
            }
            // Right Activity Bar (always visible — icons to restore the panel)
            Rectangle { width: 48px;
                Rectangle { background: Theme.bg-base; }
                VerticalLayout { spacing: 0; padding-top: Theme.sp-1;
                    Rectangle { width: 48px; height: 44px; background: root.active-right-view == 0 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-right-view == 0 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconInfo { color: root.active-right-view == 0 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        TouchArea { clicked => { if (!root.right-visible) { root.right-visible = true; root.active-right-view = 0; } else if (root.active-right-view == 0) { root.right-visible = false; } else { root.active-right-view = 0; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    Rectangle { width: 48px; height: 44px; background: root.active-right-view == 1 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-right-view == 1 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconBell { color: root.active-right-view == 1 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        CountBadge { count: 2; x: 28px; y: 4px; }
                        TouchArea { clicked => { if (!root.right-visible) { root.right-visible = true; root.active-right-view = 1; } else if (root.active-right-view == 1) { root.right-visible = false; } else { root.active-right-view = 1; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    Rectangle { width: 48px; height: 44px; background: root.active-right-view == 2 ? #2a2a2a : transparent;
                        Rectangle { width: 3px; height: 24px; background: root.active-right-view == 2 ? Theme.neon-cyan : transparent; x: 0; y: 10px; }
                        IconLayers { color: root.active-right-view == 2 ? Theme.neon-cyan : Theme.text-muted; size: 20px; x: 14px; y: 12px; }
                        TouchArea { clicked => { if (!root.right-visible) { root.right-visible = true; root.active-right-view = 2; } else if (root.active-right-view == 2) { root.right-visible = false; } else { root.active-right-view = 2; } } mouse-cursor: MouseCursor.pointer; }
                    }
                    Rectangle { vertical-stretch: 1; }
                }
            }
        }
        // Status Bar
        Rectangle { height: 24px;
            Rectangle { background: Theme.bg-elevated; Rectangle { height: 1px; background: Theme.border; } }
            HorizontalLayout { padding-left: Theme.sp-3; spacing: Theme.sp-2;
                StatusDot { color: Theme.neon-green; }
                Text { text: root.status-text; font-size: 10px; color: Theme.text-dim; vertical-alignment: center; }
                Rectangle { horizontal-stretch: 1; background: transparent; }
                HorizontalLayout { padding-left: Theme.sp-3; padding-right: Theme.sp-3;
                    Text { text: root.is-dark ? "Dark" : "Light"; font-size: 10px; color: Theme.text-dim; vertical-alignment: center; }
                }
            }
        }
    }
}
