import { Theme } from "../theme.slint";
import { DarkButton } from "../components/dark_button.slint";
import { DarkComboBox } from "../components/dark_combo_box.slint";
import { SettingsBridge, AppState, ConnectionState } from "../globals.slint";

export component TabSettings inherits Rectangle {
    background: Theme.bg-primary;

    VerticalLayout {
        padding: 20px;
        spacing: 16px;
        alignment: start;

        Text {
            text: "Settings";
            color: Theme.fg-primary;
            font-size: 20px;
            font-weight: 700;
        }

        // Keyboard layout
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;

            HorizontalLayout {
                padding: 16px;
                spacing: 12px;

                VerticalLayout {
                    alignment: center;
                    Text { text: "Keyboard Layout"; color: Theme.fg-primary; font-size: 14px; }
                    Text { text: "Controls how keycodes are displayed"; color: Theme.fg-secondary; font-size: 11px; }
                }

                Rectangle { horizontal-stretch: 1; }

                VerticalLayout {
                    alignment: center;
                    DarkComboBox {
                        width: 200px;
                        model: SettingsBridge.available-layouts;
                        current-index <=> SettingsBridge.selected-layout-index;
                        selected(value) => { SettingsBridge.change-layout(self.current-index); }
                    }
                }
            }
        }

        // OTA Firmware Update
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;

            VerticalLayout {
                padding: 16px;
                spacing: 10px;

                Text { text: "OTA Firmware Update"; color: Theme.accent-cyan; font-size: 14px; font-weight: 600; }
                Text { text: "Update firmware via USB (no programming cable needed)"; color: Theme.fg-secondary; font-size: 11px; }

                HorizontalLayout {
                    spacing: 8px;

                    Text {
                        horizontal-stretch: 1;
                        text: SettingsBridge.ota-path != "" ? SettingsBridge.ota-path : "No firmware file selected";
                        color: SettingsBridge.ota-path != "" ? Theme.fg-primary : Theme.fg-secondary;
                        font-size: 12px;
                        vertical-alignment: center;
                        overflow: elide;
                    }

                    DarkButton {
                        text: "Browse...";
                        clicked => { SettingsBridge.ota-browse(); }
                    }
                }

                HorizontalLayout {
                    spacing: 12px;

                    DarkButton {
                        text: SettingsBridge.ota-flashing ? "Flashing..." : "Flash OTA";
                        primary: true;
                        enabled: !SettingsBridge.ota-flashing
                            && SettingsBridge.ota-path != ""
                            && AppState.connection == ConnectionState.connected;
                        clicked => { SettingsBridge.ota-start(); }
                    }

                    Text {
                        text: SettingsBridge.ota-status;
                        color: Theme.fg-primary;
                        font-size: 12px;
                        vertical-alignment: center;
                        horizontal-stretch: 1;
                    }
                }

                if SettingsBridge.ota-flashing || SettingsBridge.ota-progress > 0 : Rectangle {
                    height: 20px;
                    background: Theme.bg-primary;
                    border-radius: 4px;

                    Rectangle {
                        x: 0;
                        width: parent.width * clamp(SettingsBridge.ota-progress, 0, 1);
                        height: 100%;
                        background: SettingsBridge.ota-progress >= 1.0 ? Theme.accent-green : Theme.accent-purple;
                        border-radius: 4px;
                    }

                    Text {
                        text: round(SettingsBridge.ota-progress * 100) + "%";
                        color: Theme.fg-primary;
                        font-size: 11px;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }
            }
        }

        // Config backup / restore
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;

            VerticalLayout {
                padding: 16px;
                spacing: 10px;

                Text { text: "Configuration Backup"; color: Theme.accent-cyan; font-size: 14px; font-weight: 600; }
                Text { text: "Export or import your full keyboard configuration (keymaps, macros, combos, etc.)"; color: Theme.fg-secondary; font-size: 11px; }

                HorizontalLayout {
                    spacing: 12px;

                    DarkButton {
                        text: SettingsBridge.config-busy ? "Working..." : "Export Config";
                        primary: true;
                        enabled: !SettingsBridge.config-busy
                            && AppState.connection == ConnectionState.connected;
                        clicked => { SettingsBridge.config-export(); }
                    }

                    DarkButton {
                        text: SettingsBridge.config-busy ? "Working..." : "Import Config";
                        enabled: !SettingsBridge.config-busy
                            && AppState.connection == ConnectionState.connected;
                        clicked => { SettingsBridge.config-import(); }
                    }

                    Text {
                        text: SettingsBridge.config-status;
                        color: Theme.fg-primary;
                        font-size: 12px;
                        vertical-alignment: center;
                        horizontal-stretch: 1;
                    }
                }

                if SettingsBridge.config-busy : Rectangle {
                    height: 20px;
                    background: Theme.bg-primary;
                    border-radius: 4px;

                    Rectangle {
                        x: 0;
                        width: parent.width * clamp(SettingsBridge.config-progress, 0, 1);
                        height: 100%;
                        background: SettingsBridge.config-progress >= 1.0 ? Theme.accent-green : Theme.accent-purple;
                        border-radius: 4px;
                    }

                    Text {
                        text: round(SettingsBridge.config-progress * 100) + "%";
                        color: Theme.fg-primary;
                        font-size: 11px;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }
            }
        }

        // About
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;

            VerticalLayout {
                padding: 16px;
                spacing: 8px;

                Text { text: "About"; color: Theme.fg-primary; font-size: 14px; font-weight: 600; }
                Text { text: "KeSp Controller v1.0.0"; color: Theme.fg-secondary; font-size: 12px; }
                Text { text: "Split keyboard configurator"; color: Theme.fg-secondary; font-size: 12px; }
                Text { text: "Made with Slint"; color: Theme.accent-purple; font-size: 11px; }
            }
        }

        Rectangle { vertical-stretch: 1; }
    }
}