// Settings Page - App and Clash settings
import { Theme, Typography, SpacingSystem } from "../theme/theme.slint";
import { Container } from "../layouts/container.slint";
import { Switch } from "../components/switch.slint";
import { Button } from "../components/button.slint";
import { SettingItem } from "../types.slint";

export component SettingsPage inherits Rectangle {
    in property <[SettingItem]> app-settings;
    in property <[SettingItem]> clash-settings;

    callback toggle-setting(string /* key */, bool /* value */);
    callback load-settings();

    background: Theme.colors.background;

    VerticalLayout {
        // Fixed header
        Rectangle {
            height: 48px;
            background: Theme.colors.background;

            HorizontalLayout {
                padding: SpacingSystem.spacing.s4;

                Text {
                    text: "Settings";
                    font-size: Typography.sizes.xl;
                    font-weight: Typography.weights.bold;
                    color: Theme.colors.foreground;
                    vertical-alignment: center;
                }
            }
        }

        // Scrollable content
        Flickable {
            viewport-height: content-layout.preferred-height + SpacingSystem.spacing.s4 * 2;

            content-layout := VerticalLayout {
                padding: SpacingSystem.spacing.s4;
                spacing: SpacingSystem.spacing.s4;

                // App Settings Section
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s3;

                        // Section title
                        Text {
                            text: "App 设置";
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                            color: Theme.colors.foreground;
                        }

                        // App settings list
                        for setting in app-settings: Rectangle {
                            height: 48px;

                            HorizontalLayout {
                                padding-top: SpacingSystem.spacing.s2;
                                padding-bottom: SpacingSystem.spacing.s2;
                                spacing: SpacingSystem.spacing.s3;
                                alignment: space-between;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s3;

                                    // Icon
                                    Text {
                                        text: "✓";
                                        font-size: Typography.sizes.base;
                                        color: Theme.colors.primary;
                                        vertical-alignment: center;
                                    }

                                    // Label
                                    Text {
                                        text: setting.label;
                                        font-size: Typography.sizes.sm;
                                        color: Theme.colors.foreground;
                                        vertical-alignment: center;
                                    }
                                }

                                // Control based on type
                                if setting.type == "switch": Switch {
                                    checked: setting.enabled;

                                    toggled => {
                                        root.toggle-setting(setting.key, self.checked);
                                    }
                                }

                                if setting.type == "button": Button {
                                    text: setting.value;
                                    variant: "link";
                                    size: "sm";
                                }

                                if setting.type == "text": Text {
                                    text: setting.value;
                                    font-size: Typography.sizes.sm;
                                    color: Theme.colors.muted-foreground;
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }

                // Clash Settings Section
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s3;

                        // Section title
                        Text {
                            text: "Clash 设置";
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                            color: Theme.colors.foreground;
                        }

                        // Clash settings list
                        for setting in clash-settings: Rectangle {
                            height: 48px;

                            HorizontalLayout {
                                padding-top: SpacingSystem.spacing.s2;
                                padding-bottom: SpacingSystem.spacing.s2;
                                spacing: SpacingSystem.spacing.s3;
                                alignment: space-between;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s3;

                                    // Icon
                                    Text {
                                        text: "⚙";
                                        font-size: Typography.sizes.base;
                                        color: Theme.colors.primary;
                                        vertical-alignment: center;
                                    }

                                    // Label
                                    Text {
                                        text: setting.label;
                                        font-size: Typography.sizes.sm;
                                        color: Theme.colors.foreground;
                                        vertical-alignment: center;
                                    }
                                }

                                // Control based on type
                                if setting.type == "switch": Switch {
                                    checked: setting.enabled;

                                    toggled => {
                                        root.toggle-setting(setting.key, self.checked);
                                    }
                                }

                                if setting.type == "button": Button {
                                    text: setting.value;
                                    variant: "link";
                                    size: "sm";
                                }

                                if setting.type == "text": Text {
                                    text: setting.value;
                                    font-size: Typography.sizes.sm;
                                    color: Theme.colors.muted-foreground;
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }

                // Miscellaneous Section
                Container {
                    VerticalLayout {
                        padding: SpacingSystem.spacing.s4;
                        spacing: SpacingSystem.spacing.s3;

                        // Section title
                        Text {
                            text: "杂项";
                            font-size: Typography.sizes.base;
                            font-weight: Typography.weights.semibold;
                            color: Theme.colors.foreground;
                        }

                        // Misc items
                        Rectangle {
                            height: 48px;

                            HorizontalLayout {
                                padding-top: SpacingSystem.spacing.s2;
                                padding-bottom: SpacingSystem.spacing.s2;
                                spacing: SpacingSystem.spacing.s3;
                                alignment: space-between;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s3;

                                    Text {
                                        text: "📁";
                                        font-size: Typography.sizes.base;
                                        vertical-alignment: center;
                                    }

                                    Text {
                                        text: "App 目录";
                                        font-size: Typography.sizes.sm;
                                        color: Theme.colors.foreground;
                                        vertical-alignment: center;
                                    }
                                }

                                Button {
                                    text: "打开";
                                    variant: "link";
                                    size: "sm";
                                }
                            }
                        }

                        Rectangle {
                            height: 48px;

                            HorizontalLayout {
                                padding-top: SpacingSystem.spacing.s2;
                                padding-bottom: SpacingSystem.spacing.s2;
                                spacing: SpacingSystem.spacing.s3;
                                alignment: space-between;

                                HorizontalLayout {
                                    spacing: SpacingSystem.spacing.s3;

                                    Text {
                                        text: "📋";
                                        font-size: Typography.sizes.base;
                                        vertical-alignment: center;
                                    }

                                    Text {
                                        text: "App 版本";
                                        font-size: Typography.sizes.sm;
                                        color: Theme.colors.foreground;
                                        vertical-alignment: center;
                                    }
                                }

                                Text {
                                    text: "v1.0.0";
                                    font-size: Typography.sizes.sm;
                                    color: Theme.colors.muted-foreground;
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}