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

export struct ShopifySuggestion {
    label: string,       // "Product Name (order #XXXX)"
    url: string,         // Shopify product URL
}

export component AddProductForm inherits Rectangle {
    in property <[ShopifySuggestion]> suggestions;
    in-out property <string> name-value;
    in-out property <string> shopify-url-value;
    in property <bool> has-image-preview;
    in property <image> image-preview;
    in property <string> validation-error;    // "Product name is required" or ""
    in property <bool> show-suggestions: false;

    callback submit-clicked();
    callback discard-clicked();
    callback name-changed(string);
    callback shopify-url-changed(string);
    callback set-image-clicked();
    callback suggestion-selected(string);     // the URL

    width: 480px;
    height: 520px;
    background: Colors.surface;
    border-radius: 12px;

    // Block clicks from passing through to the backdrop dismiss handler
    TouchArea {}

    // Close button (X) - top right, matching LookupModal pattern
    Rectangle {
        x: parent.width - 40px;
        y: 12px;
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background: close-touch.has-hover ? Colors.border-default : transparent;

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

        close-touch := TouchArea {
            mouse-cursor: pointer;
            clicked => { root.discard-clicked(); }
        }
    }

    VerticalLayout {
        padding: 24px;
        spacing: 8px;
        alignment: start;

        // Title
        Text {
            text: "Add Product";
            font-size: Typography.size-lg;
            font-weight: 600;
            color: #ffffff;
        }

        // Name field
        VerticalLayout {
            spacing: 4px;
            Text { text: "Name"; font-size: Typography.size-sm; color: Colors.text-muted; }
            Rectangle {
                height: 32px;
                background: Colors.background;
                border-radius: 6px;
                border-width: 1px;
                border-color: Colors.border-default;
                TextInput {
                    x: 8px;
                    y: (parent.height - self.preferred-height) / 2;
                    width: parent.width - 16px;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    text <=> root.name-value;
                    edited => { root.name-changed(self.text); }
                }
            }
            if root.validation-error != "" : Text {
                text: root.validation-error;
                font-size: Typography.size-xs;
                color: Colors.error;
            }
        }

        // Shopify URL field with auto-suggest
        VerticalLayout {
            spacing: 4px;
            Text { text: "Shopify URL"; font-size: Typography.size-sm; color: Colors.text-muted; }
            Rectangle {
                height: 32px;
                background: Colors.background;
                border-radius: 6px;
                border-width: 1px;
                border-color: Colors.border-default;
                TextInput {
                    x: 8px;
                    y: (parent.height - self.preferred-height) / 2;
                    width: parent.width - 16px;
                    font-size: Typography.size-md;
                    color: Colors.text-primary;
                    text <=> root.shopify-url-value;
                    edited => { root.shopify-url-changed(self.text); }
                }
            }
            // Auto-suggest dropdown
            if root.show-suggestions && root.suggestions.length > 0 : Rectangle {
                background: Colors.surface-popup;
                border-radius: 4px;
                height: min(root.suggestions.length * 28px, 140px);
                clip: true;

                VerticalLayout {
                    for suggestion[idx] in root.suggestions : Rectangle {
                        height: 28px;
                        background: suggest-touch.has-hover ? Colors.surface-elevated : transparent;
                        Text {
                            x: 8px;
                            text: suggestion.label;
                            font-size: Typography.size-sm;
                            color: Colors.text-primary;
                            vertical-alignment: center;
                        }
                        suggest-touch := TouchArea {
                            mouse-cursor: pointer;
                            clicked => { root.suggestion-selected(suggestion.url); }
                        }
                    }
                }
            }
        }

        // Image hint — images are set via the product detail sidecar after creation
        Text {
            text: "Tip: Set a product image after creating by clicking the image in the product detail panel.";
            font-size: Typography.size-xs;
            color: Colors.text-muted;
            wrap: word-wrap;
        }

        // Buttons
        HorizontalLayout {
            spacing: 8px;
            alignment: end;

            // Discard (secondary)
            Rectangle {
                height: 32px;
                width: 80px;
                border-radius: 4px;
                background: Colors.surface-elevated;
                TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.discard-clicked(); }
                }
                Text {
                    text: "Discard";
                    font-size: Typography.size-sm;
                    color: Colors.text-secondary;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }

            // Add Product (primary)
            Rectangle {
                height: 32px;
                width: 110px;
                border-radius: 4px;
                background: Colors.accent;
                TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.submit-clicked(); }
                }
                Text {
                    text: "Add Product";
                    font-size: Typography.size-sm;
                    color: white;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
        }
    }
}