// Demo Application - Task Manager
// Showcases all shadcn-style UI components

import { Theme, Typography, SpacingSystem } from "theme/theme.slint";
import { Button } from "components/button.slint";
import { Input } from "components/input.slint";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "components/card.slint";
import { Badge } from "components/badge.slint";
import { Item } from "components/item.slint";
import { Sidebar, NavItem } from "components/sidebar.slint";
import { Dialog } from "components/dialog.slint";
import { ToastContainer, ToastMessage } from "components/toast.slint";

export component Demo inherits Window {
    title: "Slint Shadcn UI - Task Manager Demo";
    background: Theme.colors.background;

    // Window size settings - optimized for lower memory usage
    min-width: 600px;
    min-height: 400px;
    preferred-width: 800px;
    preferred-height: 600px;
    
    // Application state
    in-out property <string> new-task-title: "";
    in-out property <string> current-view: "tasks";
    in-out property <bool> sidebar-collapsed: false;
    in-out property <bool> dialog-open: false;
    in-out property <[ToastMessage]> toasts: [];
    
    // Sidebar navigation items
    property <[NavItem]> nav-items: [
        { icon: "📝", label: "Tasks", active: current-view == "tasks" },
        { icon: "🎨", label: "Components", active: current-view == "components" },
        { icon: "⚙", label: "Settings", active: current-view == "settings" },
    ];
    
    // Callbacks
    callback add-task(string);
    callback show-toast(string, string);
    
    // Main layout
    VerticalLayout {
        // Top bar
        Rectangle {
            height: 60px;
            background: Theme.colors.card;
            
            Rectangle {
                y: parent.height - 1px;
                height: 1px;
                background: Theme.colors.border;
            }
            
            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;
                alignment: space-between;
                
                // Left: Title and badge
                HorizontalLayout {
                    spacing: SpacingSystem.spacing.s3;
                    alignment: start;
                    
                    Text {
                        text: "📋 Task Manager";
                        font-size: Typography.sizes.xl;
                        font-weight: Typography.weights.bold;
                        color: Theme.colors.foreground;
                        vertical-alignment: center;
                    }
                    
                    Badge {
                        text: "Demo";
                        variant: "secondary";
                    }
                }
                
                // Right: Theme toggle button
                Button {
                    text: Theme.is-dark-mode ? "☀ Light" : "🌙 Dark";
                    variant: "outline";
                    size: "sm";
                    
                    clicked => {
                        Theme.toggle-theme();
                    }
                }
            }
        }
        
        // Main content area
        HorizontalLayout {
            // Sidebar
            Sidebar {
                items: nav-items;
                collapsed: sidebar-collapsed;

                item-clicked(index) => {
                    if index == 0 { current-view = "tasks"; }
                    else if index == 1 { current-view = "components"; }
                    else if index == 2 { current-view = "settings"; }
                }

                toggle-collapsed => {
                    sidebar-collapsed = !sidebar-collapsed;
                }
            }

            // Main content area
            Rectangle {
                background: Theme.colors.background;
                horizontal-stretch: 1;
                vertical-stretch: 1;

                Flickable {
                    width: 100%;
                    height: 100%;
                    viewport-height: content-layout.preferred-height;
                    
                    content-layout := VerticalLayout {
                        padding: SpacingSystem.spacing.s6;
                        spacing: SpacingSystem.spacing.s6;
                        
                        // Tasks view
                        if current-view == "tasks": VerticalLayout {
                            spacing: SpacingSystem.spacing.s6;
                            
                            // Add task card
                            Card {
                                CardHeader {
                                    CardTitle { text: "Add New Task"; }
                                    CardDescription { text: "Create a new task to track your work"; }
                                }
                                
                                CardContent {
                                    Input {
                                        value <=> new-task-title;
                                        placeholder: "Enter task title...";
                                        
                                        accepted(text) => {
                                            if text != "" {
                                                root.add-task(text);
                                            }
                                        }
                                    }
                                }
                                
                                CardFooter {
                                    Button {
                                        text: "Add Task";
                                        
                                        clicked => {
                                            if new-task-title != "" {
                                                root.add-task(new-task-title);
                                            }
                                        }
                                    }
                                    
                                    Button {
                                        text: "Clear";
                                        variant: "outline";
                                        
                                        clicked => {
                                            new-task-title = "";
                                        }
                                    }
                                }
                            }
                            
                            // Example task 1
                            Card {
                                hoverable: true;
                                
                                CardHeader {
                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        alignment: space-between;
                                        
                                        CardTitle { text: "Design UI Components"; }
                                        Badge { text: "In Progress"; variant: "default"; }
                                    }
                                }
                                
                                CardContent {
                                    CardDescription {
                                        text: "Create a comprehensive set of UI components following shadcn design principles with proper theming support.";
                                    }
                                }
                                
                                CardFooter {
                                    Button {
                                        text: "Complete";
                                        size: "sm";
                                        
                                        clicked => {
                                            root.show-toast("Task completed!", "success");
                                        }
                                    }
                                    
                                    Button {
                                        text: "Delete";
                                        variant: "destructive";
                                        size: "sm";
                                        
                                        clicked => {
                                            dialog-open = true;
                                        }
                                    }
                                }
                            }
                            
                            // Example task 2
                            Card {
                                hoverable: true;
                                
                                CardHeader {
                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        alignment: space-between;
                                        
                                        CardTitle { text: "Write Documentation"; }
                                        Badge { text: "Todo"; variant: "secondary"; }
                                    }
                                }
                                
                                CardContent {
                                    CardDescription {
                                        text: "Document all components with usage examples and API references for developers.";
                                    }
                                }
                                
                                CardFooter {
                                    Button {
                                        text: "Start";
                                        variant: "outline";
                                        size: "sm";
                                        
                                        clicked => {
                                            root.show-toast("Task started!", "default");
                                        }
                                    }
                                }
                            }
                            
                            // Example task 3
                            Card {
                                hoverable: true;
                              
                                CardHeader {
                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        alignment: space-between;
                                        
                                        CardTitle { text: "Test Components"; }
                                        Badge { text: "Done"; variant: "outline"; }
                                    }
                                }
                                
                                CardContent {
                                    CardDescription {
                                        text: "Thoroughly test all components across different themes and screen sizes.";
                                    }
                                }
                                
                                CardFooter {
                                    Button {
                                        text: "View Details";
                                        variant: "ghost";
                                        size: "sm";
                                    }
                                }
                            }
                        }
                        
                        // Components showcase view
                        if current-view == "components": VerticalLayout {
                            spacing: SpacingSystem.spacing.s6;
                            
                            // Button showcase
                            Card {
                                CardHeader {
                                    CardTitle { text: "Button Component"; }
                                    CardDescription { text: "Various button styles and sizes"; }
                                }
                           
                                CardContent {
                                    VerticalLayout {
                                        spacing: SpacingSystem.spacing.s4;
                                        
                                        // Variants
                                        HorizontalLayout {
                                            spacing: SpacingSystem.spacing.s2;
                                            
                                            Button { text: "Default"; }
                                            Button { text: "Secondary"; variant: "secondary"; }
                                            Button { text: "Outline"; variant: "outline"; }
                                            Button { text: "Ghost"; variant: "ghost"; }
                                            Button { text: "Destructive"; variant: "destructive"; }
                                        }
                                        
                                        // Sizes
                                        HorizontalLayout {
                                            spacing: SpacingSystem.spacing.s2;
                                            alignment: center;
                                            
                                            Button { text: "Small"; size: "sm"; }
                                            Button { text: "Medium"; size: "md"; }
                                            Button { text: "Large"; size: "lg"; }
                                        }
                                        
                                        // Disabled
                                        HorizontalLayout {
                                            spacing: SpacingSystem.spacing.s2;
                                            
                                            Button { text: "Disabled"; disabled: true; }
                                        }
                                    }
                                }
                            }
                            
                            // Badge showcase
                            Card {
                                CardHeader {
                                    CardTitle { text: "Badge Component"; }
                                    CardDescription { text: "Status indicators and labels"; }
                                }
                                
                                CardContent {
                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        
                                        Badge { text: "Default"; }
                                        Badge { text: "Secondary"; variant: "secondary"; }
                                        Badge { text: "Destructive"; variant: "destructive"; }
                                        Badge { text: "Outline"; variant: "outline"; }
                                    }
                                }
                            }
                            
                            // Input showcase
                            Card {
                                CardHeader {
                                    CardTitle { text: "Input Component"; }
                                    CardDescription { text: "Text input fields with various states"; }
                                }
                                
                                CardContent {
                                    VerticalLayout {
                                        spacing: SpacingSystem.spacing.s4;
                                        
                                        Input { placeholder: "Normal input..."; }
                                        Input { placeholder: "Disabled input..."; disabled: true; }
                                        Input { placeholder: "Error input..."; error: true; }
                                    }
                                }
                            }
                            
                            // Item showcase
                            Card {
                                CardHeader {
                                CardTitle { text: "Item Component"; }
                                    CardDescription { text: "List items with icons and descriptions"; }
                                }
                                
                                CardContent {
                                    VerticalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        
                                        Item {
                                            icon: "📁";
                                            title: "Project Files";
                                            description: "All your project documents and resources";
                                        }
                                        
                                        Item {
                                            icon: "⭐";
                                            title: "Favorites";
                                            description: "Your starred items for quick access";
                                            selected: true;
                                        }
                                        
                                        Item {
                                            icon: "🗑";
                                            title: "Trash";
                                            description: "Recently deleted items";
                                        }
                                    }
                                }
                            }
                            
                            // Dialog and Toast showcase
                            Card {
                                CardHeader {
                                    CardTitle { text: "Dialog & Toast"; }
                                    CardDescription { text: "Modal dialogs and notification toasts"; }
                                }
                                
                                CardContent {
                                    HorizontalLayout {
                                        spacing: SpacingSystem.spacing.s2;
                                        
                                        Button {
                                            text: "Open Dialog";
                                            
                                            clicked => {
                                                dialog-open = true;
                                            }
                                        }
                                        
                                        Button {
                                            text: "Show Success Toast";
                                            variant: "outline";
                                            
                                            clicked => {
                                                root.show-toast("Operation successful!", "success");
                                            }
                                        }
                                        
                                        Button {
                                            text: "Show Error Toast";
                                            variant: "outline";
                                            
                                            clicked => {
                                                root.show-toast("Something went wrong!", "error");
                                            }
                                        }
                                        
                            Button {
                                            text: "Show Warning Toast";
                                            variant: "outline";
                                            
                                            clicked => {
                                                root.show-toast("Please be careful!", "warning");
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        
                        // Settings view
                        if current-view == "settings": VerticalLayout {
                            spacing: SpacingSystem.spacing.s6;
                            
                            Card {
                                CardHeader {
                                    CardTitle { text: "Appearance"; }
                                    CardDescription { text: "Customize the look and feel of the application"; }
                                }
                                
                                CardContent {
                                    VerticalLayout {
                                        spacing: SpacingSystem.spacing.s4;
                                        
                                        HorizontalLayout {
                                            spacing: SpacingSystem.spacing.s4;
                                            alignment: space-between;
                                            
                                            VerticalLayout {
                                                spacing: SpacingSystem.spacing.s1;
                                                
                                                Text {
                                                    text: "Theme";
                                                    font-size: Typography.sizes.base;
                                                    font-weight: Typography.weights.medium;
                                                    color: Theme.colors.foreground;
                                                }
                                                
                                                Text {
                                                    text: "Choose between light and dark mode";
                                                    font-size: Typography.sizes.sm;
                                                    color: Theme.colors.muted-foreground;
                                                }
                                            }
                                            
                                            Button {
                                                text: Theme.is-dark-mode ? "Dark Mode" : "Light Mode";
                                                variant: "outline";
                                                
                                                clicked => {
                                                    Theme.toggle-theme();
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            
                            Card {
                                CardHeader {
                                    CardTitle { text: "About"; }
                                    CardDescription { text: "Information about this demo application"; }
                                }
                                
                                CardContent {
                                    VerticalLayout {
                                        spacing: SpacingSystem.spacing.s3;
                                        
                                        Text {
                                            text: "Slint Shadcn UI Component Library";
                                            font-size: Typography.sizes.base;
                                            font-weight: Typography.weights.semibold;
                                            color: Theme.colors.foreground;
                                        }
                                        
                                        Text {
                                            text: "A comprehensive set of UI components inspired by shadcn/ui, built with Slint. Features include theme support, smooth animations, and a clean, modern design.";
                                            font-size: Typography.sizes.sm;
                                            color: Theme.colors.muted-foreground;
                                            wrap: word-wrap;
                                        }
                                        
                                        HorizontalLayout {
                                            spacing: SpacingSystem.spacing.s2;
                                            
                                            Badge { text: "v1.0.0"; variant: "secondary"; }
                                            Badge { text: "Slint 1.14"; variant: "outline"; }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    // Dialog overlay - inline implementation
    Dialog {
        open: dialog-open;
        title: "Confirm Delete";
        description: "Are you sure you want to delete this task? This action cannot be undone.";
        
        close => {
            dialog-open = false;
        }
    }
    
    // Toast container
    Rectangle {
        x: parent.width - 390px;
        y: 20px;
        width: 370px;
        
        ToastContainer {
            toasts: toasts;
            
            toast-dismissed(index) => {
                // Will be handled by Rust
            }
        }
    }
}