// Dialog Component - Simplified version
// Modal dialog with backdrop and smooth animations

import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Animations } from "../utils/animations.slint";

export component Dialog {
    // Public properties
    in-out property <bool> open: false;
    in property <string> title: "";
    in property <string> description: "";
    
    // Callbacks
    callback close();
    
    width: 100%;
    height: 100%;
    
    // Only show when open
    if open: Rectangle {
        width: 100%;
        height: 100%;
        background: #00000080;
        
        // Close on backdrop click
        TouchArea {
            clicked => {
                root.close();
            }
        }
        
        // Dialog content container (centered)
        VerticalLayout {
            alignment: center;
            
            HorizontalLayout {
                alignment: center;
                
                // Dialog card
                Rectangle {
                    width: 500px;
                    background: Theme.colors.card;
                    border-radius: SpacingSystem.radius.lg;
                    border-width: 1px;
                    border-color: Theme.colors.border;
                    drop-shadow-blur: 20px;
                    drop-shadow-color: #00000040;
                    
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s6;
                        spacing: SpacingSystem.spacing.s4;
                        
                        // Header
                        HorizontalLayout {
                            spacing: SpacingSystem.spacing.s4;
                            alignment: space-between;
                            
                            VerticalLayout {
                                spacing: SpacingSystem.spacing.s2;
                                
                                // Title
                                Text {
                                    text: title;
                                    font-size: Typography.sizes.xl;
                                    font-weight: Typography.weights.semibold;
                                    color: Theme.colors.card-foreground;
                                    wrap: word-wrap;
                                }
                                
                                // Description
                                Text {
                                    text: description;
                                    font-size: Typography.sizes.sm;
                                    color: Theme.colors.muted-foreground;
                                    wrap: word-wrap;
                                }
                            }
                            
                            // Close button
                            Rectangle {
                                width: 32px;
                                height: 32px;
                                border-radius: SpacingSystem.radius.md;
                                background: close-touch.has-hover ? Theme.colors.muted : Colors.transparent;
                                
                                animate background { 
                                    duration: Animations.durations.fast; 
                                    easing: Animations.ease-in-out; 
                                }
                                
                                Text {
                                    text: "✕";
                                    font-size: Typography.sizes.lg;
                                    color: Theme.colors.muted-foreground;
                                    horizontal-alignment: center;
                                    vertical-alignment: center;
                                }
                                
                                close-touch := TouchArea {
                                    clicked => {
                                        root.close();
                                    }
                                }
                            }
                        }
                    }
                    
                    // Prevent backdrop click from closing
                    TouchArea {
                        // Consume clicks to prevent backdrop from receiving them
                    }
                }
            }
        }
    }
}