import { Theme, SpacingSystem, Typography } from "./theme/theme.slint";
import { Button } from "./components/button.slint";
import { Card } from "./components/card.slint";
import { Switch } from "./components/switch.slint";
import { Badge } from "./components/badge.slint";
import { StatusIndicator, StatusState } from "./components/status-indicator.slint";
import { Progress } from "./components/progress.slint";

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();
    callback navigate(int);
    
    HorizontalLayout {
        // Sidebar
        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; root.navigate(0); }
                    }
                    
                    NavButton {
                        icon: "🌐";
                        title: "Proxies";
                        active: root.current-page == 1;
                        clicked => { rourrent-page = 1; root.navigate(1); }
                    }
                    
                    NavButton {
                        icon: "📋";
                        title: "Profiles";
                        active: root.current-page == 2;
                        clicked => { root.current-page = 2; root.navigate(2); }
                    }
                    
                    NavButton {
                        icon: "🔗";
                        title: "Connections";
                        active: root.current-page == 3;
                        clicked => { root.current-page = 3; root.navigate(3); }
                    }
                    
                    NavButton {
                        icon: "📝";
                        title: "Logs";
                        active: root.current-page == 4;
                        clicked => { root.current-page = 4; root.navigate(4); }
                    }
                    
                    NavButton {
                        icon: "⚙";
                        title: "Settings";
                        active: root.current-page == 5;
                        clicked => { root.current-page = 5; root.navigate(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
        content := Rectangle {
            background: Theme.colors.background;
            
            // Home Page
            if root.current-page == 0: HomePage {
                toggle-mihomo => { root.toggle-mihomo(); }
            }
                  // Proxies Page
            if root.current-page == 1: ProxiesPage {}
            
            // Profiles Page
            if root.current-page == 2: ProfilesPage {}
            
            // Connections Page
            if root.current-page == 3: ConnectionsPage {}
            
            // Logs Page
            if root.current-page == 4: LogsPage {}
            
            // Settings Page
            if root.current-page == 5: SettingsPage {}
        }
    }
}

component NavButton {
    in property <string> icon: "";
    in property <string> title: "";
    in property <bool> active: false;
    
    callback clicked();
    
    private property <bool> hovered: false;
    
    height: 40px;
    
    container := 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-foregr             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 {
   toggle-mihomo();
    
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Home";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        ScrollView {
            VerticalLayout {
                spacing: 16px;
                
                // Profile Card
                Card {
                    VerticalLayout {
                        spacing: 16px;
                        
                        HorizontalLayout {
                            spacing: 12px;
                            
                            Rectangle {
                                width: 48px;
                                height: 48px;
                                border-radius: 12px;
                                background: Theme.colors.primary.transparentize(0.9);
                                
                                Text {
                                    text: "☁";
                                    color: Theme.colors.primary;
                                    font-size: 24px;
                                    horizontal-alignment: center;
                                    vertical-alignment: center;
                                }
                            }
                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                HorizontalLayout {
                                    spacing: 8px;
                                    
                                    Text {
                                        text: "NanoCloud";
                                        color: Theme.colors.foreground;
                                        font-size: 18px;
                                  font-weight: 700;
                                        vertical-alignment: center;
                                    }
                                }
                                
                                HorizontalLayout {
                                    spacing: 8px;
                                    
                                    Text {
                                        text: "🌐 Free-Japan1-Ver.7";
                                        color: Theme.colors.muted-foreground;
                                        font-size: 12px;
                                        vertical-alignment: center;
                                    }
                                    
                                    Badge {
                                        text: "Vmess";
                                        variant: "outline";
                                    }
                                    
                                    Badge {
                                        text: "UDP";
                                        variant: "outline";
                                    }
                                }
                    }
                        }
                        
                        Rectangle {
                            height: 1px;
                            background: Theme.colors.border.transparentize(0.6);
                        }
                        
                        HorizontalLayout {
                            spacing: 24px;
                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                Text {
                                    text: "☁ Usage / Total";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 11px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: "1.26GB / 100GB";
                                    color: Theme.colors.foreground;
                                    font-size: 13px;
                                    font-weight: 500;
                                }
                  n                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                Text {
                                    text: "✓ Expiry Date";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 11px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: "2025-11-11";
                                    color: Theme.colors.foreground;
                                    font-size: 13px;
                                    font-weight: 500;
                                }
                            }
                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                Text {
                                    text: "✓ Last Update";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 11px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: "2025-10-12 10:05";
                                    color: Theme.colors.foreground;
                                    font-size: 13px;
                                    font-weight: 500;
                                }
                            }
                        }
                    }
                }
                
                // Location Card
                Card {
                    VerticalLayout {
                        spacing: 16px;
                        
                        HorizontalLayout {
                            spacing: 24px;
                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                Text {
                                    text: "🌐 IP Address";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 11px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: "47.238.198.100";
                                    color: Theme.colors.foreground;
                                    font-size: 13px;
                                    font-weight: 500;
                                }
                            }
                            
                            VerticalLayout {
                                spacing: 4px;
                                
                                Text {
                                    text: "🌐 Location";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 11px;
                                    font-weight: 600;
                                }
                                
                                Text {
                                    text: "Japan · Tokyo";
                                    color: Theme.colors.foreground;
                                    font-size: 13px;
                                    font-weight: 500;
                                }
                            }
                        }
                    }
         }
                
                // Settings Card
                Card {
                    VerticalLayout {
                        spacing: 0;
                        
                        SettingRow {
                            label: "TUN Mode";
                            Switch {
                                checked: false;
                                toggled(checked) => { debug("TUN mode:", checked); }
                            }
                        }
                        
                        Rectangle {
                            height: 1px;
                            background: Theme.colors.border.transparentize(0.6);
                        }
                        
                        SettingRow {
                            label: "System Proxy";
                            Switch {
                                checked: false;
                                toggled(checked) => { debug("System proxy:", checked); }
                            }
                        }
                        
                        Rectangle {
                            height: 1px;
                            background: Themelors.border.transparentize(0.6);
                        }
                        
                        SettingRow {
                            label: "Proxy Port";
                            Text {
                                text: "7890";
                                color: Theme.colors.primary;
                                font-size: 14px;
                                vertical-alignment: center;
                            }
                        }
                    }
                }
            }
        }
    }
}

component SettingRow {
    in property <string> label: "";
    
    height: 48px;
    
    Horout {
        spacing: 12px;
        alignment: space-between;
        
        HorizontalLayout {
            spacing: 8px;
            
            Text {
                text: "✓";
                color: Theme.colors.muted-foreground;
                font-size: 14px;
                vertical-alignment: center;
            }
            
            Text {
                text: root.label;
                color: Theme.colors.foreground;
                font-size: 14px;
                vertical-alignment: center;
            }
        }
        
        @children
    }
}

component ProxiesPage {
    Vertica {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Proxies";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        Card {
            Text {
                text: "Proxy management page - Coming soon";
                color: Theme.colors.muted-foreground;
            }
        }
    }
}

component ProfilesPage {
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Profiles";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        ScrollView {
            GridLayout {
                spacing: 16px;
                
                Card {
                    min-width: 280px;
                    height: 120px;
                    
                    VerticalLayout {
                        spacing: 8px;
                        
                        HorizontalLayout {
                            spacing: 8px;
                            
                            Text {
                                text: "☁";
                                font-size: 18px;
                                vertical-alignment: center;
                            }
                            
                            Text {
                                text: "NanoCloud";
                                color: Theme.colors.foreground;
                                font-size: 16px;
                                font-weight: 600;
                                vertical-alignment: center;
                            }
                        }
                        
                        Text {
                            text: "Free tier subscription - Japan servers";
                            color: Theme.colors.muted-foreground;
                            font-size: 12px;
                        }
                        
                        Progress {
                            value: 1.26;
                        }
                        
                        HorizontalLayout {
                            alignment: space-between;
                            
                            Text {
                                text: "Updated: Just now";
                          color: Theme.colors.muted-foreground;
                                font-size: 10px;
                            }
                            
                            Text {
                                text: "1.26 / 100 GB";
                                color: Theme.colors.foreground;
                                font-size: 10px;
                            }
                        }
                    }
                }
                
                Card {
                    min-width: 280px;
                    height: 120px;
                    
                    VerticalLayout {
                        spacing: 8px;
                        
                        HorizontalLayout {
                            spacing: 8px;
                            
                            Text {
                                text: "📄";
                                font-size: 18px;
                                vertical-alignment: center;
                            }
                            
                            Text {
                                text: "Local Config";
                           color: Theme.colors.foreground;
                                font-size: 16px;
                                font-weight: 600;
                                vertical-alignment: center;
                            }
                        }
                        
                        Text {
                            text: "Custom local configuration file";
                            color: Theme.colors.muted-foreground;
                            font-size: 12px;
                        }
                        
                        Text {
                            text: "Local Profile";
                            color: Theme.colors.muted-foreground;
                            font-size: 10px;
                        }
                    }
                }
            }
        }
    }
}

component ConnectionsPage {
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Connections";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        ScrollView {
            VerticalLayout {
                spacing: 8px;
                
                for  Card {
                    height: 60px;
                    
                    HorizontalLayout {
                        spacing: 12px;
                        
                        Rectangle {
                            width: 40px;
                            height: 40px;
                            border-radius: 8px;
                            background: Theme.colors.primary.transparentize(0.9);
                            
                            Text {
                                text: "🔗";
                                font-size: 18px;
                                horizontal-alignment: center;
                                vertical-alignment: center;
                            }
                        }
                        
                        VerticalLayout {
                            spacing: 4px;
                            
                            Text {
                                text: "192.168.1.100:54321 → github.com:443";
                                color: Theme.colors.foreground;
                                font-size: 14px;
                                font-weight: 500;
                            }
                            
                            HorizontalLayout {
                                spacing: 12px;
                                
                                Text {
                                    text: "HTTPS";
                                    color: Theme.colors.muted-foreground;
                                    font-size: 12px;
                                }
                                
                                Text {
                                    text: "↑ 1.2 KB/s";
                                    color: Theme.colors.primary;
                                    font-size: 12px;
                                }
                                
                                Text {
                                    text: "↓ 45.6 KB/s";
                                    color: Theme.colors.secondary;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

component LogsPage {
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Logs";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        Card {
            ScrollView {
                VerticalLayout {
                    spacing: 0;
                    
                    for i in 20: LogRow {
                        time: "10:23:45";
                        level: i < 5 ? "info" : (i < 10 ? "debug" : (i < 15 ? "warn" : "error"));
                        message: "Sample log message " + i;
                    }
                }
            }
        }
    }
}

component LogRow {
    in property <string> time: "";
    in property <string> level: "";
    in property <string> message: "";
    
    private property <color> level-color: level == "error" ? #ef4444 :
                                          level == "warn" ? #eab308 :
                                          level == "info" ? #3b82f6 :
                                          #6b7280;
    
    : 24px;
    
    HorizontalLayout {
        padding-left: 8px;
        padding-right: 8px;
        spacing: 8px;
        
        Text {
            text: root.time;
            color: Theme.colors.muted-foreground;
            font-size: 11px;
            font-family: "monospace";
            vertical-alignment: center;
            width: 80px;
        }
        
        Text {
            text: root.level;
            color: root.level-color;
            font-size: 11px;
            font-family: "monospace";
            font-weight: 700;
            vertical-alignment: center;
            width: 60px;
        }
        
        Text {
            text: root.message;
            color: Theme.colors.foreground;
            font-size: 11px;
            font-family: "monospace";
            vertical-alignment: center;
        }
    }
}

component SettingsPage {
    VerticalLayout {
        padding: 24px;
        spacing: 16px;
        
        Text {
            text: "Settings";
            font-size: 24px;
            font-weight: 700;
            color: Theme.colors.foreground;
        }
        
        ScrollView {
            VerticalLayout {
                spacing: 16px;
                
                Card {
                    VerticalLayout {
                        spacing: 12px;
                        
                        Text {
                            text: "App Settings";
                            font-size: 16px;
                            font-weight: 600;
                            color: Theme.colors.foreground;
                        }
                        
                        SettingRow {
                            label: "Auto Start";
                            Switch {
                                checked: false;
                                toggled(checked)  debug("Auto start:", checked); }
                            }
                        }
                        
                        SettingRow {
                            label: "Silent Start";
                            Switch {
                                checked: false;
                                toggled(checked) => { debug("Silent start:", checked); }
                            }
                        }
                    }
                }
                
                Card {
                    VerticalLayout {
                        spacing: 12px;
                        
                        Text {
                            t Settings";
                            font-size: 16px;
                            font-weight: 600;
                            color: Theme.colors.foreground;
                        }
                        
                        SettingRow {
                            label: "Allow LAN";
                            Switch {
                                checked: false;
                                toggled(checked) => { debug("Allow LAN:", checked); }
                            }
                        }
                        
                        SettingRow {
                            label: "IPv6";
                            Switch {
                                checked: false;
                                toggled(checked) => { debug("IPv6:", checked); }
                            }
                        }
                    }
                }
            }
        }
    }
}