// App Layer - Main Application Entry Point
// This is the root of the application following Feature-Sliced Design

// No std-widgets needed since we're using Layout components

// Import from shared layer (design system, UI kit)
import { Theme } from "../shared/design-system/tokens/theme.slint";

// Import widgets (standalone UI blocks)
import { NavigationWidget } from "../widgets/navigation/index.slint";

// Import pages
import { Dashboard } from "../pages/dashboard/index.slint";

export component App {
    width: 100%;
    height: 100%;
    
    // Application state
    in-out property <string> current-page: "Dashboard";
    in-out property <string> user-initials: "JD";
    
    // Callbacks
    callback navigation-changed(string);
    callback theme-toggle-clicked();
    callback logout-clicked();
    callback buy-clicked();
    callback sell-clicked();
    callback start-drag-window();
    callback minimize-window();
    callback maximize-window();
    callback close-window();
    
    // Global drag area - covers entire window but sits behind interactive elements
    TouchArea {
        width: 100%;
        height: 100%;
        z: -1;
        
        moved => {
            if (self.pressed) {
                root.start-drag-window();
            }
        }
    }
    
    VerticalLayout {
        spacing: 0px;
        
        // Title Bar - fixed height
        Rectangle {
            height: 32px;
            background: Theme.surface;
            
            HorizontalLayout {
                padding: 4px;
                spacing: 8px;
                
                // Draggable area (left side) - takes most of the space
                Rectangle {
                    horizontal-stretch: 1;
                    
                    Text {
                        text: "Ziya Trading Platform";
                        color: Theme.text-primary;
                        font-size: 14px;
                        font-weight: 600;
                        vertical-alignment: center;
                        x: 8px;
                    }
                }
                
                // Theme Toggle Button - fixed size
                Rectangle {
                    width: 40px;
                    height: 20px;
                    border-radius: 10px;
                    background: Theme.is-dark-mode ? Theme.primary : Theme.border;
                    
                    Rectangle {
                        width: 16px;
                        height: 16px;
                        border-radius: 8px;
                        background: white;
                        x: Theme.is-dark-mode ? 22px : 2px;
                        y: 2px;
                        
                        animate x { duration: 200ms; easing: ease-in-out; }
                    }
                    
                    TouchArea {
                        clicked => {
                            theme-toggle-clicked();
                        }
                    }
                }
                
                // Window Controls - fixed size
                HorizontalLayout {
                    spacing: 2px;
                    
                    // Minimize Button
                    Rectangle {
                        width: 28px;
                        height: 24px;
                        border-radius: 2px;
                        background: minimize-area.pressed ? #30404040 : minimize-area.has-hover ? #20404040 : transparent;
                        
                        Text {
                            text: "−";
                            color: Theme.text-primary;
                            font-size: 14px;
                            font-weight: 400;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                        
                        minimize-area := TouchArea {
                            clicked => { minimize-window(); }
                        }
                    }
                    
                    // Maximize Button
                    Rectangle {
                        width: 28px;
                        height: 24px;
                        border-radius: 2px;
                        background: maximize-area.pressed ? #30404040 : maximize-area.has-hover ? #20404040 : transparent;
                        
                        Text {
                            text: "□";
                            color: Theme.text-primary;
                            font-size: 12px;
                            font-weight: 400;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                        
                        maximize-area := TouchArea {
                            clicked => { maximize-window(); }
                        }
                    }
                    
                    // Close Button
                    Rectangle {
                        width: 28px;
                        height: 24px;
                        border-radius: 2px;
                        background: close-area.pressed ? #E53E3E : close-area.has-hover ? #C53030 : transparent;
                        
                        Text {
                            text: "×";
                            color: close-area.has-hover ? white : Theme.text-primary;
                            font-size: 16px;
                            font-weight: 400;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                        
                        close-area := TouchArea {
                            clicked => { close-window(); }
                        }
                    }
                }
            }
        }
        
        // Main content area - stretches to fill remaining vertical space
        HorizontalLayout {
            spacing: 0px;
            
            // Navigation Widget (Sidebar) - fixed width
            NavigationWidget {
                width: 280px;
                current-page: root.current-page;
                user-initials: root.user-initials;
                
                navigation-changed(page) => {
                    root.current-page = page;
                    root.navigation-changed(page);
                }
                
                logout-clicked => { root.logout-clicked(); }
            }
            
            // Main content area - stretches to fill remaining horizontal space
            Rectangle {
                background: Theme.background;
                
                // Page routing based on current-page
                if current-page == "Dashboard": Dashboard {
                    user-initials: root.user-initials;
                    logout => { root.logout-clicked(); }
                    trade-buy(asset, amount) => { root.buy-clicked(); }
                    trade-sell(asset, amount) => { root.sell-clicked(); }
                }
                
                if current-page == "Trading": Rectangle {
                    background: Theme.background;
                    
                    VerticalLayout {
                        padding: 24px;
                        spacing: 16px;
                        alignment: center;
                        
                        Text {
                            text: "🎯 Trading Interface";
                            font-size: 32px;
                            font-weight: 700;
                            color: Theme.text-primary;
                            horizontal-alignment: center;
                        }
                        
                        Text {
                            text: "Advanced trading features coming soon...";
                            font-size: 18px;
                            color: Theme.text-secondary;
                            horizontal-alignment: center;
                        }
                    }
                }
                
                if current-page == "Portfolio": Rectangle {
                    background: Theme.background;
                    
                    VerticalLayout {
                        padding: 24px;
                        spacing: 16px;
                        alignment: center;
                        
                        Text {
                            text: "💼 Portfolio Management";
                            font-size: 32px;
                            font-weight: 700;
                            color: Theme.text-primary;
                            horizontal-alignment: center;
                        }
                        
                        Text {
                            text: "Portfolio tracking and management features coming soon...";
                            font-size: 18px;
                            color: Theme.text-secondary;
                            horizontal-alignment: center;
                        }
                    }
                }
                
                if current-page == "Markets": Rectangle {
                    background: Theme.background;
                    
                    VerticalLayout {
                        padding: 24px;
                        spacing: 16px;
                        alignment: center;
                        
                        Text {
                            text: "📈 Market Data";
                            font-size: 32px;
                            font-weight: 700;
                            color: Theme.text-primary;
                            horizontal-alignment: center;
                        }
                        
                        Text {
                            text: "Real-time market data and analysis coming soon...";
                            font-size: 18px;
                            color: Theme.text-secondary;
                            horizontal-alignment: center;
                        }
                    }
                }
                
                if current-page == "HuntingGround": Rectangle {
                    background: Theme.background;
                    
                    VerticalLayout {
                        padding: 24px;
                        spacing: 16px;
                        alignment: center;
                        
                        Text {
                            text: "🎯 Token Hunting Ground";
                            font-size: 32px;
                            font-weight: 700;
                            color: Theme.text-primary;
                            horizontal-alignment: center;
                        }
                        
                        Text {
                            text: "Discover and track new tokens coming soon...";
                            font-size: 18px;
                            color: Theme.text-secondary;
                            horizontal-alignment: center;
                        }
                    }
                }
                
                if current-page == "Profile": Rectangle {
                    background: Theme.background;
                    
                    VerticalLayout {
                        padding: 24px;
                        spacing: 16px;
                        alignment: center;
                        
                        Text {
                            text: "👤 User Profile";
                            font-size: 32px;
                            font-weight: 700;
                            color: Theme.text-primary;
                            horizontal-alignment: center;
                        }
                        
                        Text {
                            text: "Profile management and settings coming soon...";
                            font-size: 18px;
                            color: Theme.text-secondary;
                            horizontal-alignment: center;
                        }
                    }
                }
            }
        }
    }
}