// =============================================================================
// GLINT UI: Ultimate Reactive Showcase Architecture
// =============================================================================

@version 1
@style "main.glts"

// ── 1. Global Configuration & Constants ──────────────────────────────────────

@global $APP_TITLE    = "Glint Design System & Rhei Demo"
@global $IS_PRODUCTION = false

// Глобальное состояние приложения
@global $access_level = 3.0
@global $username     = "Guest"
@global $volume_level = 0.0
@global $is_enabled   = false
@global $search_query = "Type to search..."
@global $team_members = ["Alexander", "Beatrice", "Cyrus", "Diana"]

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

// ── 2. Logic Layer (Document-level Rhai Script) ──────────────────────────────

!rhei: { 
    // Вспомогательные UI-функции
    fn level_label(lvl) {
        if lvl >= 8.0 { "Admin" }
        else if lvl >= 5.0 { "Moderator" }
        else { "Guest" }
    }

    fn volume_icon(vol) {
        if vol == 0.0  { "🔇" }
        else if vol < 40.0 { "🔈" }
        else if vol < 75.0 { "🔉" }
        else { "🔊" }
    }

    // Демонстрация сложных вычислений при загрузке документа
    const TARGET = 20;
    fn fib(n) {
        if n < 2 { return n; }
        let a = 0; let b = 1;
        for i in 2..=n {
            let c = a + b;
            a = b; b = c;
        }
        b
    }
    
    print(`Initializing Glint Engine...`);
    let result = fib(TARGET);
    print(`Fibonacci(${TARGET}) computed on load: ${result}`);
}

// ── 3. UI Components ─────────────────────────────────────────────────────────

@component ProfileCard(username: String, access_level: Float) {
    Panel {
        Header !rhei: { "User: " + username }
        Label(text=$username)
        
        // Сложное условие в Rhai: вычисляется при каждом обновлении VDOM
        @if !rhei: { (access_level >= 5.0) && (username.len() > 0) } {
            Text "✅ Administrator Privileges Active"
            Text !rhei: { "Role: " + level_label(access_level) }
        } @else {
            Text "🔒 Restricted Access Mode"
            Text "Role: Guest"
        }
    }
}

// ── 4. Main Application Tree ─────────────────────────────────────────────────

Window(
    title=$APP_TITLE, 
    width=1280, 
    height=800, 
    resizable=true
) {
    // Локальное состояние окна
    @let $show_metrics = true

    Panel(id="main_viewport", padding=24) {
        
        Header "Dashboard Overview"
        Text "Welcome to the ultimate Glint component test suite."
        Divider()
        
        // ── Секция A: Control Panel (Переменные и биндинги) ──────────────────
        Header "A. Control Panel & State Bindings"

	Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
        
        Panel {
            Input(placeholder=$search_query, value=$search_query)
            Toggle(label="Enable Live Metrics", value=$is_enabled)
            Text !rhei: { "Live search query: " + search_query }
        }

        @if $is_enabled {
            Text "✅ Features are ON. You can adjust the system."
        } @else {
            Text "⛔ Features are OFF."
        }
        
        Divider()

        // ── Секция B: Arithmetic Conditions & Reactive Text ──────────────────
        Header "B. Rhei Arithmetic Conditions"
        
        Slider(value=$volume_level)
        ProgressBar(value=$volume_level)
        
        // Трехуровневое ветвление с использованием Rhai-условий
        @if !rhei: { volume_level == 0.0 } {
            Text "🔇 Muted"
        } @else {
            @if !rhei: { volume_level >= 75.0 } {
                Text "🔊 High volume — protect your hearing!"
            } @else {
                // Инлайн-текст, вызывающий функцию из глобального скрипта
                Text !rhei: { volume_icon(volume_level) + " Volume OK: " + volume_level + " / 100" }
            }
        }
        
        Divider()

        // ── Секция C: Access Control & Component Instantiation ───────────────
        Header "C. Multi-variable Logic & Components"
        
        Slider(value=$access_level)
        
        !rhei: { "Current slider level: " + access_level + " → " + level_label(access_level) }
        
        Panel {
            Button(label="Grant Admin (Level 9)") {
                @on click {
                    !rhei: { access_level = 9.0; }
                }
            }
            Button(label="Reset (Level 1)") {
                @on click {
                    !rhei: { access_level = 1.0; }
                }
            }
        }

        @if !rhei: {
            let threshold = 5.0;
            access_level >= threshold
        } {
            Text "🛡️ Access granted — Privileged Zone"
            ProfileCard(username=$username, access_level=$access_level)
        } @else {
            Text "🚫 Access denied — Raise your level to 5+"
        }
        
        Divider()

        // ── Секция D: Dynamic List Rendering (@each) ─────────────────────────
        Header "D. Team Management (Reactive Grid)"
        
        // Передаем direction и columns как свойства компонента
        Panel(columns=2, direction="grid") {
            @each $name in $team_members {
                Panel {
                    ProfileCard(username=$name, access_level=$access_level) 
                    
                    Button(label="Promote System-wide") {
                        @on click {
                            !rhei: { 
                                // VDOM автоматически заменит "$name" на "Alexander", "Beatrice" и т.д.
                                let target_name = "$name"; 
                                print("Promoting triggered by " + target_name);
                                
                                if access_level < 10.0 {
                                    access_level += 1.0;
                                }
                            }
                        }
                    }
                }
            }
        }

        Divider()

        // ── Секция E: Footer Metadata ────────────────────────────────────────
        Panel {
            Text "System Version: 1.0.5-stable"
            
            // Многострочный скрипт прямо внутри текстового узла
            !rhei: { 
                let pct = (access_level * 10.0).to_string();
                "Access Power: " + pct + "% | Integrity: OK"
            }
        }
    }
}