import { Colors, Typography } from "tokens.slint";

export component SettingsModal {
    in-out property <bool> modal-open: false;
    in-out property <string> store-slug-text: "";
    in-out property <string> github-project-url-text: "";
    in-out property <string> error-message: "";

    in-out property <bool> shopify-token-configured: false;
    in-out property <string> shopify-token-text: "";
    in-out property <bool> shopify-token-changing: false;
    in-out property <bool> saving-in-progress: false;
    in-out property <bool> clear-confirming: false;
    callback shopify-clear-clicked();
    callback shopify-change-clicked();

    in-out property <bool> discord-token-configured: false;
    in-out property <string> discord-token-text: "";
    in-out property <bool> discord-token-changing: false;
    in-out property <bool> discord-clear-confirming: false;
    callback discord-save-token-clicked();
    callback discord-clear-clicked();
    callback discord-change-clicked();

    callback save-clicked();
    callback cancel-clicked();

    // Full overlay backdrop — only rendered when modal is open
    if root.modal-open : Rectangle {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        background: #00000080;

        // Backdrop click dismisses modal
        TouchArea {
            width: parent.width;
            height: parent.height;
            clicked => {
                root.shopify-token-changing = false;
                root.clear-confirming = false;
                root.shopify-token-text = "";
                root.discord-token-changing = false;
                root.discord-clear-confirming = false;
                root.discord-token-text = "";
                root.cancel-clicked();
            }
        }

        // Escape key handler — auto-focus when modal opens to steal focus from search bar
        modal-focus := FocusScope {
            init => { self.focus(); }
            key-pressed(event) => {
                if event.text == Key.Escape {
                    root.shopify-token-changing = false;
                    root.clear-confirming = false;
                    root.shopify-token-text = "";
                    root.discord-token-changing = false;
                    root.discord-clear-confirming = false;
                    root.discord-token-text = "";
                    root.cancel-clicked();
                    return accept;
                }
                return reject;
            }
        }

        // Centered modal panel
        Rectangle {
            x: (parent.width - 480px) / 2;
            y: (parent.height - 580px) / 2;
            width: 480px;
            height: 580px;
            background: Colors.surface;
            border-radius: 8px;

            // Auto-reset clear-confirming after 3 seconds
            clear-reset-timer := Timer {
                interval: 3000ms;
                running: root.clear-confirming;
                triggered => {
                    root.clear-confirming = false;
                }
            }

            // Auto-reset discord-clear-confirming after 3 seconds
            discord-clear-timer := Timer {
                interval: 3000ms;
                running: root.discord-clear-confirming;
                triggered => {
                    root.discord-clear-confirming = false;
                }
            }

            // Stop backdrop clicks from going through the panel
            TouchArea {
                width: parent.width;
                height: parent.height;
            }

            // Title
            Text {
                x: 24px;
                y: 20px;
                text: "Settings";
                font-size: Typography.size-lg;
                font-weight: 700;
                color: Colors.text-primary;
            }

            // --- Field 1: Shopify Store Slug ---
            Text {
                x: 24px;
                y: 60px;
                text: "Shopify Store Slug";
                font-size: Typography.size-sm;
                color: Colors.text-muted;
            }

            Rectangle {
                x: 24px;
                y: 78px;
                width: parent.width - 48px;
                height: 36px;
                border-radius: 6px;
                background: Colors.background;
                border-width: 1px;
                border-color: slug-input.has-focus ? Colors.accent : Colors.border-default;

                slug-input := TextInput {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text <=> root.store-slug-text;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    vertical-alignment: center;
                    enabled: !root.saving-in-progress;
                    key-pressed(event) => {
                        if event.text == Key.Escape {
                            root.cancel-clicked();
                            return accept;
                        }
                        return reject;
                    }
                }

                if root.store-slug-text == "" : Text {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text: "e.g. my-store";
                    font-size: Typography.size-md;
                    color: Colors.text-dim;
                    vertical-alignment: center;
                }
            }

            // --- Field 2: GitHub Project URL ---
            Text {
                x: 24px;
                y: 126px;
                text: "GitHub Project URL";
                font-size: Typography.size-sm;
                color: Colors.text-muted;
            }

            Rectangle {
                x: 24px;
                y: 144px;
                width: parent.width - 48px;
                height: 36px;
                border-radius: 6px;
                background: Colors.background;
                border-width: 1px;
                border-color: project-input.has-focus ? Colors.accent : Colors.border-default;

                project-input := TextInput {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text <=> root.github-project-url-text;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    vertical-alignment: center;
                    enabled: !root.saving-in-progress;
                    key-pressed(event) => {
                        if event.text == Key.Escape {
                            root.cancel-clicked();
                            return accept;
                        }
                        return reject;
                    }
                }

                if root.github-project-url-text == "" : Text {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text: "https://github.com/orgs/BigscreenVR/projects/11";
                    font-size: Typography.size-md;
                    color: Colors.text-dim;
                    vertical-alignment: center;
                }
            }

            // Helper text
            Text {
                x: 24px;
                y: 184px;
                width: parent.width - 48px;
                height: 28px;
                text: "Paste the URL from your GitHub Projects board";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
                wrap: word-wrap;
            }

            // --- Field 3: Shopify Access Token ---
            Text {
                x: 24px;
                y: 218px;
                text: "Shopify Access Token";
                font-size: Typography.size-sm;
                color: Colors.text-muted;
            }

            Text {
                x: 24px;
                y: 234px;
                text: "Stored securely in Windows Credential Manager";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
            }

            // Token input: shown when not configured or changing
            if !root.shopify-token-configured || root.shopify-token-changing : Rectangle {
                x: 24px;
                y: 252px;
                width: parent.width - 48px;
                height: 36px;
                border-radius: 6px;
                background: Colors.background;
                border-width: 1px;
                border-color: token-input.has-focus ? Colors.accent : Colors.border-default;

                token-input := TextInput {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text <=> root.shopify-token-text;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    vertical-alignment: center;
                    input-type: InputType.password;
                    enabled: !root.saving-in-progress;
                    key-pressed(event) => {
                        if event.text == Key.Escape {
                            root.cancel-clicked();
                            return accept;
                        }
                        return reject;
                    }
                }

                if root.shopify-token-text == "" : Text {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text: "shpat_xxxxxxxxxxxxxxxxxxxx";
                    font-size: Typography.size-md;
                    color: Colors.text-dim;
                    vertical-alignment: center;
                }
            }

            // Token configured state: shown when configured and not changing
            if root.shopify-token-configured && !root.shopify-token-changing : HorizontalLayout {
                x: 24px;
                y: 252px;
                width: parent.width - 48px;
                height: 36px;
                spacing: 8px;
                alignment: space-between;

                Text {
                    text: "Status: Configured";
                    font-size: Typography.size-sm;
                    color: Colors.success;
                    vertical-alignment: center;
                }

                // Flexible spacer
                Rectangle { }

                // Change Token button
                Rectangle {
                    width: 110px;
                    height: 28px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: Colors.border-default;
                    background: change-touch.has-hover ? Colors.surface-popup : transparent;

                    Text {
                        text: "Change Token";
                        font-size: Typography.size-md;
                        color: Colors.text-muted;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    change-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.shopify-token-changing = true;
                            root.shopify-token-text = "";
                        }
                    }
                }

                // Clear button
                Rectangle {
                    width: 90px;
                    height: 28px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: root.clear-confirming ? Colors.error : (clear-touch.has-hover ? Colors.error : Colors.border-default);
                    background: root.clear-confirming ? #3a1a1a : (clear-touch.has-hover ? #3a1a1a : transparent);

                    Text {
                        text: root.clear-confirming ? "Confirm Clear" : "Clear";
                        font-size: Typography.size-md;
                        color: root.clear-confirming ? Colors.error : Colors.text-muted;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    clear-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            if root.clear-confirming {
                                root.shopify-clear-clicked();
                                root.clear-confirming = false;
                            } else {
                                root.clear-confirming = true;
                            }
                        }
                    }
                }
            }

            // --- Field 4: Discord Bot Token ---
            Text {
                x: 24px;
                y: 340px;
                text: "Discord Bot Token";
                font-size: Typography.size-sm;
                color: Colors.text-muted;
            }

            Text {
                x: 24px;
                y: 356px;
                text: "Stored securely in Windows Credential Manager";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
            }

            // Hint text: shown when not configured and not changing
            if !root.discord-token-configured && !root.discord-token-changing : Text {
                x: 24px;
                y: 374px;
                width: parent.width - 48px;
                text: "Add a Discord bot token to enable real avatar images.";
                font-size: Typography.size-xs;
                color: Colors.text-muted;
            }

            // "Add Token" button: shown when not configured and not changing
            if !root.discord-token-configured && !root.discord-token-changing : Rectangle {
                x: 24px;
                y: 394px;
                width: 96px;
                height: 28px;
                border-radius: 6px;
                border-width: 1px;
                border-color: Colors.border-default;
                background: discord-add-touch.has-hover ? Colors.surface-popup : transparent;

                Text {
                    text: "Add Token";
                    font-size: Typography.size-md;
                    color: Colors.text-secondary;
                    width: parent.width;
                    height: parent.height;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }

                discord-add-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.discord-token-changing = true;
                    }
                }
            }

            // Token entry mode: shown when changing (Add Token or Change Token was clicked)
            if root.discord-token-changing : Rectangle {
                x: 24px;
                y: 374px;
                width: parent.width - 48px;
                height: 36px;
                border-radius: 6px;
                background: Colors.background;
                border-width: 1px;
                border-color: discord-token-input.has-focus ? Colors.accent : Colors.border-default;

                discord-token-input := TextInput {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text <=> root.discord-token-text;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    vertical-alignment: center;
                    input-type: InputType.password;
                    key-pressed(event) => {
                        if event.text == Key.Escape {
                            root.cancel-clicked();
                            return accept;
                        }
                        return reject;
                    }
                }

                if root.discord-token-text == "" : Text {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text: "Paste bot token...";
                    font-size: Typography.size-md;
                    color: Colors.text-dim;
                    vertical-alignment: center;
                }
            }

            // Save/Discard buttons: shown when changing (Add Token or Change Token was clicked)
            if root.discord-token-changing : HorizontalLayout {
                x: 24px;
                y: 416px;
                width: parent.width - 48px;
                height: 28px;
                spacing: 8px;
                alignment: start;

                // Save Token button
                Rectangle {
                    width: 100px;
                    height: 28px;
                    border-radius: 6px;
                    background: discord-save-touch.has-hover ? Colors.accent-hover : Colors.accent;

                    Text {
                        text: "Save Token";
                        font-size: Typography.size-md;
                        color: #ffffff;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    discord-save-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.discord-save-token-clicked();
                            root.discord-token-changing = false;
                        }
                    }
                }

                // Discard Changes button
                Rectangle {
                    width: 130px;
                    height: 28px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: Colors.border-default;
                    background: discord-discard-touch.has-hover ? Colors.surface-popup : Colors.surface-elevated;

                    Text {
                        text: "Discard Changes";
                        font-size: Typography.size-md;
                        color: Colors.text-secondary;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    discord-discard-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.discord-token-changing = false;
                            root.discord-token-text = "";
                        }
                    }
                }
            }

            // Configured state: status + Change/Clear in ONE row (SC03: match Shopify layout exactly)
            if root.discord-token-configured && !root.discord-token-changing : HorizontalLayout {
                x: 24px;
                y: 374px;
                width: parent.width - 48px;
                height: 36px;
                spacing: 8px;
                alignment: space-between;

                Text {
                    text: "Status: Configured";
                    font-size: Typography.size-sm;
                    color: Colors.success;
                    vertical-alignment: center;
                }

                // Flexible spacer
                Rectangle { }

                // Change Token button
                Rectangle {
                    width: 110px;
                    height: 28px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: Colors.border-default;
                    background: discord-change-touch.has-hover ? Colors.surface-popup : transparent;

                    Text {
                        text: "Change Token";
                        font-size: Typography.size-md;
                        color: Colors.text-muted;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    discord-change-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.discord-token-changing = true;
                            root.discord-token-text = "";
                        }
                    }
                }

                // Clear Token button
                Rectangle {
                    width: 90px;
                    height: 28px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: root.discord-clear-confirming ? Colors.error : (discord-clear-touch.has-hover ? Colors.error : Colors.border-default);
                    background: root.discord-clear-confirming ? #3a1a1a : (discord-clear-touch.has-hover ? #3a1a1a : transparent);

                    Text {
                        text: root.discord-clear-confirming ? "Confirm Clear" : "Clear";
                        font-size: Typography.size-md;
                        color: root.discord-clear-confirming ? Colors.error : Colors.text-muted;
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    discord-clear-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            if root.discord-clear-confirming {
                                root.discord-clear-clicked();
                                root.discord-clear-confirming = false;
                            } else {
                                root.discord-clear-confirming = true;
                            }
                        }
                    }
                }
            }

            // Error message area
            if root.error-message != "" : Text {
                x: 24px;
                y: 440px;
                width: parent.width - 48px;
                height: 22px;
                text: root.error-message;
                font-size: Typography.size-sm;
                color: Colors.error;
                wrap: word-wrap;
            }

            // Button row
            HorizontalLayout {
                x: 24px;
                y: 530px;
                width: parent.width - 48px;
                height: 36px;
                spacing: 12px;
                alignment: end;

                // Cancel button (secondary, outlined)
                Rectangle {
                    width: 80px;
                    height: 36px;
                    border-radius: 6px;
                    border-width: 1px;
                    border-color: Colors.border-default;
                    background: cancel-touch.has-hover ? Colors.surface-popup : transparent;

                    Text {
                        text: "Cancel";
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        color: Colors.text-muted;
                        font-size: Typography.size-md;
                    }

                    cancel-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.shopify-token-changing = false;
                            root.clear-confirming = false;
                            root.shopify-token-text = "";
                            root.discord-token-changing = false;
                            root.discord-clear-confirming = false;
                            root.discord-token-text = "";
                            root.cancel-clicked();
                        }
                    }
                }

                // Save button (primary)
                Rectangle {
                    width: 120px;
                    height: 36px;
                    border-radius: 6px;
                    background: root.saving-in-progress ? Colors.surface-popup : (save-touch.has-hover ? Colors.accent-hover : Colors.accent);

                    Text {
                        text: root.saving-in-progress ? "Saving..." : "Save Settings";
                        width: parent.width;
                        height: parent.height;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        color: #ffffff;
                        font-size: Typography.size-md;
                    }

                    save-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            if !root.saving-in-progress {
                                root.save-clicked();
                            }
                        }
                    }
                }
            }
        }
    }
}