import { Theme } from "./theme/theme.slint";
import { Button } from "./components/button.slint";
import { Card } from "./components/card.slint";
import { Switch } from "./components/switch.slint";
import { StatusIndicator, StatusState } from "./components/status-indicator.slint";
import { ScrollView } from "std-widgets.slint";

// Component definitions must come before usage
component NavButton {
    in property <string> icon: "";
    in property <string> title: "";
    in property <bool> active: false;
    
    callback clicked();
    
    private property <bool> hovered: false;
    
    height: 40px;
    
    Rectangle {
        background: active ? Theme.colors.primary.transparentize(0.9) :
                    hovered ? Theme.colors.muted.transparentize(0.5) :
                    transparent;
        border-radius: 8px;
        
        HorizontalLayout {
            padding-left: 12px;
            padding-right: 12px;
            spacing: 12px;
            
            Text {
                text: root.icon;
                color: active ? Theme.colors.primary : Theme.colors.muted-foreground;
                font-size: 18px;
                vertical-alignment: center;
                width: 20px;
            }
            
            Text {
                text: root.title;
                color: active ? Theme.colors.foreground : Theme.colors.muted-foreground;
                font-size: 14px;
                font-weight: 500;
                vertical-alignment: center;
            }
        }
        
        TouchArea {
            clicked => { root.clicked(); }
            moved => { root.hovered = self.has-hover; }
        }
    }
}

component HomePage {
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Home";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        ScrollView {
            VerticalLayout {
                spacing: 16px;
                
                Card {
                    VerticalLayout {
                        spacing: 16px;
                        
                        Text {
                            text: "Welcome to Clash Manager";
                            font-size: 18px;
                            font-weight: 600;
                            color: Theme.colors.foreground;
                        }
                        
                        Text {
                            text: "Click the navigation buttons on the left to switch between pages.";
                            color: Theme.colors.muted-foreground;
                            font-size: 14px;
                        }
                    }
                }
                
                Card {
                    VerticalLayout {
                        spacing: 12px;
                        
                        Text {
                            text: "Quick Settings";
                            font-size: 16px;
                            font-weight: 600;
                            color: Theme.colors.foreground;
                        }
                        
                        HorizontalLayout {
                            spacing: 12px;
                            alignment: space-between;
                            
                            Text {
                                text: "TUN Mode";
                                color: Theme.colors.foreground;
                                vertical-alignment: center;
                            }
                            
                            Switch {
                                checked: false;
                                toggled(checked) => {
                                    debug("TUN mode:", checked);
                                }
                            }
                        }
                        
                        HorizontalLayout {
                            spacing: 12px;
                            alignment: space-between;
                            
                            Text {
                                text: "System Proxy";
                                color: Theme.colors.foreground;
                                vertical-alignment: center;
                            }
                            
                            Switch {
                                checked: false;
                                toggled(checked) => {
                                    debug("System proxy:", checked);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

component SimplePage {
    in property <string> page-title: "Page";
    
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: root.page-title;
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        Card {
            VerticalLayout {
                spacing: 12px;
                
                Text {
                    text: root.page-title + " page content";
                    font-size: 16px;
                    font-weight: 600;
                    color: Theme.colors.foreground;
                }
                
                Text {
                    text: "This page is under construction. Full implementation coming soon!";
                    color: Theme.colors.muted-foreground;
                }
            }
        }
    }
}

export component App inherits Window {
    title: "Clash Manager";
    preferred-width: 1200px;
    preferred-height: 800px;
    background: Theme.colors.background;
    
    in-out property <int> current-page: 0;
    in-out property <StatusState> mihomo-status: StatusState.stopped;
    in-out property <bool> mihomo-loading: false;
    
    callback toggle-mihomo();
    
    HorizontalLayout {
        // Sidebar
        Rectangle {
            width: 240px;
            background: Theme.colors.background;
            border-width: 1px;
            border-color: Theme.colors.border;
            
            VerticalLayout {
                padding: 16px;
                spacing: 16px;
                
                // Header
                HorizontalLayout {
                    spacing: 12px;
                    
                    Rectangle {
                        width: 32px;
                        height: 32px;
                        border-radius: 8px;
                        background: Theme.colors.primary;
                        
                        Text {
                            text: "C";
                            color: Theme.colors.primary-foreground;
                            font-size: 18px;
                            font-weight: 700;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                    
                    VerticalLayout {
                        spacing: 2px;
                        
                        Text {
                            text: "Clash Manager";
                            color: Theme.colors.foreground;
                            font-size: 14px;
                            font-weight: 600;
                        }
                        
                        Text {
                            text: "v1.0.0";
                            color: Theme.colors.muted-foreground;
                            font-size: 12px;
                        }
                    }
                }
                
                // Navigation
                VerticalLayout {
                    spacing: 4px;
                    
                    Text {
                        text: "NAVIGATION";
                        color: Theme.colors.muted-foreground;
                        font-size: 10px;
                        font-weight: 600;
                    }
                    
                    NavButton {
                        icon: "🏠";
                        title: "Home";
                        active: root.current-page == 0;
                        clicked => { root.current-page = 0; }
                    }
                    
                    NavButton {
                        icon: "🌐";
                        title: "Proxies";
                        active: root.current-page == 1;
                        clicked => { root.current-page = 1; }
                    }
                    
                    NavButton {
                        icon: "📋";
                        title: "Profiles";
                        active: root.current-page == 2;
                        clicked => { root.current-page = 2; }
                    }
                    
                    NavButton {
                        icon: "🔗";
                        title: "Connections";
                        active: root.current-page == 3;
                        clicked => { root.current-page = 3; }
                    }
                    
                    NavButton {
                        icon: "📝";
                        title: "Logs";
                        active: root.current-page == 4;
                        clicked => { root.current-page = 4; }
                    }
                    
                    NavButton {
                        icon: "⚙";
                        title: "Settings";
                        active: root.current-page == 5;
                        clicked => { root.current-page = 5; }
                    }
                }
                
                Rectangle {
                    vertical-stretch: 1;
                }
                
                // Status Footer
                Rectangle {
                    background: mihomo-status == StatusState.starting ? #eab30820 :
                                mihomo-status == StatusState.running ? #22c55e20 :
                                transparent;
                    border-radius: 8px;
                    
                    HorizontalLayout {
                        padding: 12px;
                        spacing: 12px;
                        alignment: space-between;
                        
                        HorizontalLayout {
                            spacing: 12px;
                            
                            StatusIndicator {
                                state: root.mihomo-status;
                            }
                            
                            VerticalLayout {
                                spacing: 2px;
                                
                                Text {
                                    text: "Clash";
                                    color: mihomo-status == StatusState.running ? #22c55e :
                                           mihomo-status == StatusState.starting ? #eab308 :
                                           #9ca3af;
                                    font-size: 12px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: mihomo-status == StatusState.running ? "Running" :
                                           mihomo-status == StatusState.starting ? "Starting..." :
                                           "Stopped";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 10px;
                                }
                            }
                        }
                        
                        Button {
                            width: 32px;
                            height: 32px;
                            text: mihomo-loading ? "..." : (mihomo-status == StatusState.running ? "||" : ">");
                            variant: "ghost";
                            disabled: mihomo-loading;
                            
                            clicked => {
                                root.toggle-mihomo();
                            }
                        }
                    }
                }
            }
        }
        
        // Content Area
        Rectangle {
            background: Theme.colors.background;
            
            if root.current-page == 0: HomePage {}
            if root.current-page == 1: SimplePage { page-title: "Proxies"; }
            if root.current-page == 2: SimplePage { page-title: "Profiles"; }
            if root.current-page == 3: SimplePage { page-title: "Connections"; }
            if root.current-page == 4: SimplePage { page-title: "Logs"; }
            if root.current-page == 5: SimplePage { page-title: "Settings"; }
        }
    }
}