// =============================================================================
// GLINT UI: Compact Reactive Test Suite (Fixed Layout)
// =============================================================================

@version 1
@style "main.glts"

// ── 1. Global Application State ──────────────────────────────────────────────
@global $APP_TITLE = "Glint Core Console"
@global $username = "Operator"
@global $volume_level = 50.0
@global $is_enabled = true
@global $access_level = 5.0
@global $team_nodes = ["Alpha", "Bravo", "Charlie"]
@global $show_toast = true

@singleton SystemSettings {
    theme = "ocean-blue",
    refresh_rate = 60,
    debug_mode = true,
    storage_path = fs:/var/lib/glint/assets
}

!rhei: {
    fn load_status(val) {
        if val == 0.0 { "💤 Muted" }
        else if val >= 80.0 { "🔥 Overload" }
        else { "⚡ Active" }
    }

    let sum = 0;
    for i in 1..=5 { sum = sum + i; }
    print("Rhai Engine online. Checksum: " + sum);
}

// ── 2. Reusable UI Components ────────────────────────────────────────────────
@component NodeCard(nodename: String, level: Float) {
    Panel(class="ui-card") {
        Label(text=$nodename)
        @if !rhei: { level >= 5.0 } {
            Text "🛡️ Secure Node"
        } @else {
            Text "🔓 Guest Node"
        }
    }
}

// ── 3. Application Layout Tree ───────────────────────────────────────────────
Window(title=$APP_TITLE, width=1024, height=720) {
    Panel(class="sticky-header") {
    	Header "Glint Compiler/Runtime Demostration"
    }
    Panel(class="layout-viewport") {

        // --- Верхняя панель (Header Section) ---
        Panel(class="layout-row") {
            Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
            Panel(class="layout-col") {
                Header "Glint Reactive Dashboard"
                Text !rhei: { "User: " + username + " | Status: " + load_status(volume_level) }
            }
        }

        Divider()

        // --- Главная рабочая область (Workspace Split) ---
        Panel(class="layout-row") {

            // Левая колонка: Интерактивное состояние и биндинги
            Panel(class="layout-col") {
                Panel(class="ui-card") {
                    Header "State Bindings"
                    Input(placeholder="Change title...", value=$APP_TITLE)
                    Toggle(label="Live Engine", value=$is_enabled)

                    @if $is_enabled {
                        Text "🟢 System: ONLINE"
                    } @else {
                        Text "🔴 System: OFFLINE"
                    }
                }

                Panel(class="ui-card") {
                    Header "Control Channels"
                    Slider(value=$volume_level)
                    ProgressBar(value=$volume_level)
                    Text !rhei: { "Metrics Level: " + volume_level + "%" }
                }
            }

            // Правая колонка: Тестирование геометрии и каскада стилей
            Panel(class="layout-col") {
                Panel(class="geometry-box") {
                    Header "Box Model Geometry"
                    Text "Asymmetric padding layout container."
                    Panel(class="margin-test-item") {
                        Text "Margin-Top Spacer Box"
                    }
                }

                Panel(class="inheritance-box") {
                    Text "Inherited Yellow Color & 18px Font Size"
                    Text(class="override-style") "Explicit Style Override (Pink, 12px)"
                }

                // Управление уровнем доступа и изменение переменных по клику
                Panel(class="ui-card") {
                    Header "Access Management"
                    Slider(value=$access_level)

                    // ── ТЕСТ POSITION: ABSOLUTE ─────────────────────
                    Panel(class="abs-demo-container") {
                        Panel(class="abs-demo-badge") {
                            Text "ABSOLUTE!"
                        }
                        Text "(бадж спозиционирован абсолютно)"
                        Button(label="Press me") {}
                    }

                    Panel(class="layout-row") {
                        Button(label="Set Admin (Lvl 9)", class="btn-custom") {
                            @on click { !rhei: { access_level = 9.0; } }
                        }
                        Button(label="Reset Access") {
                            @on click { !rhei: { access_level = 1.0; } }
                        }
                    }
                }
            }
        }

        // --- Динамический список узлов (@each Grid) ---
        Panel(direction="grid", columns=3, gap=12, class="layout-clean") {
            @each $node in $team_nodes {
                NodeCard(nodename=$node, level=$access_level)
            }
        }

        // --- Нижняя панель распределения пространства ---
        Panel(class="flex-row-bar") {
            Panel(class="fill-10") { Text "Grow 10%" }
            Panel(class="fixed-120") { Text "Fixed 120px" }
            Panel(class="fill-20") { Text "Grow 20%" }
        }
    }

    // ── ТЕСТ ФИКСИРОВАННЫХ СЛОЕВ ───────────────────
    @if $show_toast {
        Panel(class="fixed-toast") {
            Panel(class="layout-row") {
                Text "🔔 [FIXED LAYER TEST]: Runtime compiled successfully!"
                Button(label="❌", class="btn-close") {
                    @on click { !rhei: { show_toast = false; } }
                }
            }
        }
    }

    Panel(class="scroll-test-box") {
    Header "Scroll Test"
    Text "Line 1: Item A"
    Text "Line 2: Item B"
    Text "Line 3: Item C"
    Text "Line 4: Item D"
    Text "Line 5: Item E"
    Text "Line 6: Item F"
    Text "Line 7: Item G"
    Text "Line 8: Item H"
    Text "Line 9: Item I"
    Text "Line 10: Item J"
}

    // ── ДЕМО POSITION: ABSOLUTE (Overlay-карточка) ────────────────────
    Panel(class="absolute-demo-section") {
        Header "Position: Absolute Demo"
        Panel(class="abs-stage") {
            Panel(class="abs-overlay") {
                Text "🎯 Абсолютно спозиционирована!"
                Text "top: 10px | right: 10px"
            }
            Text "Этот текст — часть нормального потока."
            Text "Оверлей лежит поверх, не влияя на раскладку."
            Text "Работает как position: absolute в CSS."
        }
    }

Panel(class="sticky-container") {
        Text "Scroll down to test sticky effect (внутренний скролл):"

        // Стикер внутри скролл-контейнера
        Panel(class="sticky-header") {
            Text "📌 STICKY: я прилип к верху!"
        }

        // Большой блок текста снизу, чтобы гарантировать появление скролла
        Panel(class="scroll-spacer") {
            Text "Item 1: Лорем ипсум долор сит амет..."
            Text "Item 2: Консектетур адипискинг элит."
            Text "Item 3: Сед до эйусмод темпор."
            Text "Item 4: Инсидидунт ут лаборе."
            Text "Item 5: Долоре магна аликва."
            Text "Item 6: Ут enim ад миним veniam."
            Text "Item 7: Квис нострум экзерситатион."
            Text "Item 8: Уллаmко лаборис ниси ут."
            Text "Item 9: Аликип экс иа коммодо."
            Text "— Конец тестового контента —"
        }
    }
}