import { Palette } from "std-widgets.slint";

// Professional title bar component with theme support
export component TitleBar {
    // Window state
    in-out property <bool> is-maximized: false;
    in-out property <bool> is-dark-theme: true;
    
    // Callbacks for window controls
    callback minimize-window();
    callback maximize-window();
    callback close-window();
    callback toggle-theme();

    height: 40px;

    Rectangle {
        background: Palette.alternate-background;
        
        // Bottom border using a separate rectangle
        Rectangle {
            width: 100%;
            height: 1px;
            y: parent.height - 1px;
            background: Palette.border;
        }
        
        HorizontalLayout {
            spacing: 0px;
            alignment: space-between;
            padding-left: 16px;
            padding-right: 8px;
            padding-top: 8px;
            padding-bottom: 8px;
            
            // Left side - App title and drag area
            HorizontalLayout {
                spacing: 12px;
                alignment: start;
                
                // App icon
                Rectangle {
                    width: 24px;
                    height: 24px;
                    border-radius: 6px;
                    background: Palette.accent-background;
                    
                    Text {
                        text: "Z";
                        color: Palette.accent-foreground;
                        font-size: 14px;
                        font-weight: 700;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }
                
                // App title
                Text {
                    text: "Ziya - Trading Platform";
                    color: Palette.alternate-foreground;
                    font-size: 14px;
                    font-weight: 500;
                    vertical-alignment: center;
                }
            }
            
            // Right side - Theme toggle and window controls
            HorizontalLayout {
                spacing: 4px;
                alignment: end;
                
                // Theme toggle button
                Rectangle {
                    width: 32px;
                    height: 24px;
                    border-radius: 6px;
                    
                    states [
                        pressed when theme-touch-area.pressed: {
                            background: Palette.selection-background;
                            in {
                                animate background { duration: 100ms; }
                            }
                        }
                        hover when theme-touch-area.has-hover: {
                            background: Palette.control-background;
                            in {
                                animate background { duration: 150ms; }
                            }
                        }
                    ]
                    
                    Text {
                        text: is-dark-theme ? "☀️" : "🌙";
                        font-size: 14px;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                    
                    theme-touch-area := TouchArea {
                        clicked => {
                            root.toggle-theme();
                        }
                    }
                }
                
                // Minimize button
                Rectangle {
                    width: 32px;
                    height: 24px;
                    border-radius: 6px;
                    
                    states [
                        pressed when minimize-touch-area.pressed: {
                            background: Palette.selection-background;
                            in {
                                animate background { duration: 100ms; }
                            }
                        }
                        hover when minimize-touch-area.has-hover: {
                            background: Palette.control-background;
                            in {
                                animate background { duration: 150ms; }
                            }
                        }
                    ]
                    
                    Text {
                        text: "−";
                        color: Palette.alternate-foreground;
                        font-size: 16px;
                        font-weight: 300;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                    
                    minimize-touch-area := TouchArea {
                        clicked => {
                            root.minimize-window();
                        }
                    }
                }
                
                // Maximize button
                Rectangle {
                    width: 32px;
                    height: 24px;
                    border-radius: 6px;
                    
                    states [
                        pressed when maximize-touch-area.pressed: {
                            background: Palette.selection-background;
                            in {
                                animate background { duration: 100ms; }
                            }
                        }
                        hover when maximize-touch-area.has-hover: {
                            background: Palette.control-background;
                            in {
                                animate background { duration: 150ms; }
                            }
                        }
                    ]
                    
                    Text {
                        text: "□";
                        color: Palette.alternate-foreground;
                        font-size: 14px;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                    
                    maximize-touch-area := TouchArea {
                        clicked => {
                            root.maximize-window();
                        }
                    }
                }
                
                // Close button
                Rectangle {
                    width: 32px;
                    height: 24px;
                    border-radius: 6px;
                    
                    states [
                        pressed when close-touch-area.pressed: {
                            background: #d53f3f;
                            in {
                                animate background { duration: 100ms; }
                            }
                        }
                        hover when close-touch-area.has-hover: {
                            background: #f56565;
                            in {
                                animate background { duration: 150ms; }
                            }
                        }
                    ]
                    
                    Text {
                        text: "×";
                        color: close-touch-area.has-hover ? white : Palette.alternate-foreground;
                        font-size: 16px;
                        font-weight: 400;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                    
                    close-touch-area := TouchArea {
                        clicked => {
                            root.close-window();
                        }
                    }
                }
            }
        }
    }
}