import { Theme, SpacingSystem, Typography } from "../theme/theme.slint";
import { Card } from "../components/card.slint";
import { Switch } from "../components/switch.slint";
import { Button } from "../components/button.slint";
import { Select, SelectOption } from "../components/select.slint";
import { Separator, Orientation } from "../components/separator.slint";

export component SettingsPage {
    // App Settings
    in property <bool> auto-start: false;
    in property <bool> silent-start: false;
    in property <bool> clash-core: false;
    
    // Clash Settings
    in property <bool> tun-mode: false;
    in property <bool> allow-lan: false;
    in property <bool> ipv6: false;
    in property <bool> unified-delay: false;
    in property <int> log-level-index: 1;
    in property <int> proxy-port: 7890;
    
    // Misc
    in property <string> app-dir: "C:/Program Files/Clash";
    in property <string> config-dir: "C:/Users/User/.config/clash";
    in property <string> core-dir: "C:/Program Files/Clash/core";
    in property <string> app-version: "1.0.0";
    
    callback toggle-auto-start(bool);
    callback toggle-silent-start(bool);
    callback toggle-clash-core(bool);
    callback toggle-tun-mode(bool);
    callback toggle-allow-lan(bool);
    callback toggle-ipv6(bool);
    callback toggle-unified-delay(bool);
    callback log-level-changed(int);
    callback open-port-settings();
    callback open-tun-config();
    callback open-directory(string);
    
    VerticalLayout {
        padding: SpacingSystem.spacing.s4;
        spacing: SpacingSystem.spacing.s4;
        
        // Header
        Text {
            text: "Settings";
            color: Theme.colors.foreground;
            font-size: Typography.sizes.xl;
            font-weight: Typography.weights.bold;
        }
        
        ScrollView {
            VerticalLayout {
                spacing: SpacingSystem.spacing.s3;
                
                // App Settings Section
                Card {
                    VerticalLayout {
                        spacing: SpacingSystem.spacing.s3;
                        
                        Text {
                            text: "App Settings";
                            color: Theme.colors.foreground;
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                        }
                        
                        SettingRow {
                            icon: "🚀";
                            label: "Auto Start";
                            
                            Switch {
                                checked: root.auto-start;
                                toggled(checked) => {
                                    root.toggle-auto-start(checked);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                icon: "🔇";
                            label: "Silent Start";
                            
                            Switch {
                                checked: root.silent-start;
                                toggled(checked) => {
                                    root.toggle-silent-start(checked);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "⚙";
                            label: "Clash Core";
                            
                            Switch {
                                checked: root.clash-core;
                                toggled(checked) => {
                                    root.toggle-clash-core(checked);
                                }
                            }
                        }
                    }
                }
                
                // Clash Settings Section
                Card {
                    VerticalLayout {
                        spacing: SpacingSystem.spacing.s3;
                        
                        Text {
                            text: "Clash Settings";
                            color: Theme.colors.foreground;
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                        }
                        
                        SettingRow {
                            icon: "🌐";
                            label: "TUN Mode";
                            
                            HorizontalLayout {
                                spacing: SpacingSystem.spacing.s2;
                                
                                Switch
                                    checked: root.tun-mode;
                                    toggled(checked) => {
                                        root.toggle-tun-mode(checked);
                                    }
                                }
                                
                                Button {
                                    width: 24px;
                                    height: 24px;
                                    text: "⚙";
                                    variant: "ghost";
                                    
                                    clicked => {
                                        root.open-tun-config();
                                    }
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "📡";
                            label: "Allow LAN";
                            
                            Switch {
                                checked: root.allow-lan;
                                toggled(checked) => {
                                    root.toggle-allow-lan(checked);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "🌍";
                            label: "IPv6";
                            
                            Switch {
                                checked: root.ipv6;
                                toggled(checked) => {
                                    root.toggle-ipv6(checked);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "⏱";
                            label: "Unified Delay";
                            
                            Switch {
                                checked: root.unified-delay;
                                toggled(checked) => {
                                    root.toggle-unified-delay(checked);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "📝";
                            label: "Log Level";
                            
                            Select {
                                options: [
                                    { label: "Debug", valueg" },
                                    { label: "Info", value: "info" },
                                    { label: "Warn", value: "warn" },
                                    { label: "Error", value: "error" },
                                ];
                                selected-index: root.log-level-index;
                                
                                selected(index, value) => {
                                    root.log-level-changed(index);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "🔌";
                            label: "Proxy Port";
                            
                            Button {
                                text: root.proxy-port;
                                variant: "link";
                                
                                clicked => {
                                    root.open-port-settings();
                                }
                                            }
                    }
                }
                
                // Miscellaneous Section
                Card {
                    VerticalLayout {
                        spacing: SpacingSystem.spacing.s3;
                        
                        Text {
                            text: "Miscellaneous";
                            color: Theme.colors.foreground;
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                        }
                        
                        SettingRow {
                            icon: "📁";
                     l: "App Directory";
                            
                            Button {
                                text: "Open";
                                variant: "link";
                                
                                clicked => {
                                    root.open-directory(root.app-dir);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "📁";
                            label: "Config Directory";
                            
                            Button {
                                text: "Open";
                                variant: "link";
                                
                                clicked => {
                                    root.open-directory(root.config-dir);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "📁";
                            label: "Core Directory";
                            
                            Button {
                                text: "Open";
                                variant: "link";
                                
                                clicked => {
                                    root.open-directory(root.core-dir);
                                }
                            }
                        }
                        
                        Separator { orientation: Orientation.horizontal; }
                        
                        SettingRow {
                            icon: "ℹ";
                            label: "App Version";
                            
                            Text {
                                text: root.app-version;
                                color: Theme.colors.muted-foreground;
                                font-size: Typography.sizes.sm;
                                vertical-alignment: center;
                            }
                        }
                    }
                }
            }
        }
    }
}

component SettingRow {
    in property <string> icon: "";
    in property <string> label: "";
    
    height: 40px;
    
    HorizontalLayout {
        spacing: SpacingSystem.spacing.s3;
        alignment: space-between;
        
        HorizontalLayout {
            spacing: SpacingSystem.spacing.s2;
            
            Text {
                text: root.icon;
                font-size: Typography.sizes.base;
                vertical-alignment: center;
            }
            
            Text {
                text: root.label;
                color: Theme.colors.foreground;
                font-size: Typography.sizes.sm;
                vertical-alignment: center;
            }
        }
        
        @children
    }
}