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

export struct PickerUnitData {
    serial-id: string,
    state: string,
    state-color: color,
    selectable: bool,
    product-id: string,
    assigned-name: string,
    is-available-section: bool,
    matches-search: bool,
    is-on-card: bool,
}

export struct PickerProductData {
    product-id: string,
    name: string,
    units: [PickerUnitData],
    is-collapsed: bool,
    available-count: int,
    assigned-count: int,
    match-count: int,
    name-matches-search: bool,
    is-on-card: bool,
}

export component LookupModal {
    in property <string> target-card-name: "";
    in-out property <string> search-text: "";
    in property <[PickerProductData]> products: [];
    in property <string> target-card-id: "";
    in property <length> tree-viewport-height: 40px;
    in-out property <bool> show-create-form: false;
    in-out property <string> new-item-name: "";
    in-out property <string> new-item-shopify-url: "";
    in property <bool> shopify-fetch-in-progress: false;
    in property <string> shopify-fetched-image-url: "";

    in-out property <string> expanded-product-id: "";
    in-out property <string> creating-unit-product-id: "";
    in-out property <string> new-unit-serial-id: "";
    in-out property <bool> reassign-prompt-visible: false;
    in-out property <string> reassign-prompt-text: "";
    in-out property <string> reassign-serial-id: "";
    in-out property <string> reassign-product-id: "";

    // Inline validation state for create form
    private property <bool> name-error: false;

    callback search-changed(string);
    callback item-selected(string, string, string);        // product-id, name, hint (for product-level add)
    callback create-confirmed(string, string);              // display-name, shopify-url
    callback close-requested();
    callback unit-selected(string, string, string);        // serial-id, product-id, card-id
    callback unit-force-reassign(string, string, string);  // serial-id, product-id, card-id
    callback create-unit-confirmed(string, string);        // product-id, serial-number
    callback toggle-product-expanded(string);              // product-id

    // Incremented by Rust to request focus on the search input.
    // Uses a counter so that repeated opens each trigger a changed event.
    private property <int> search-focus-trigger: 0;

    // Called from Rust after setting lookup-modal-open = true.
    // Triggers a changed event inside the search Rectangle, which then calls search-input.focus().
    public function focus-lookup-search() {
        root.search-focus-trigger += 1;
    }

    // Full overlay backdrop
    Rectangle {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        background: #00000066;

        // Backdrop click dismisses modal
        TouchArea {
            width: parent.width;
            height: parent.height;
            clicked => {
                root.close-requested();
            }
        }

        // Escape key handler — retained for keyboard-only users who have not clicked into a TextInput
        modal-focus := FocusScope {
            key-pressed(event) => {
                if event.text == Key.Escape {
                    root.close-requested();
                    return accept;
                }
                return reject;
            }
        }

        // Centered modal panel — stops backdrop click from propagating through panel
        Rectangle {
            x: (parent.width - 480px) / 2;
            y: (parent.height - 580px) / 2;
            width: 480px;
            height: 580px;
            background: Colors.surface;
            border-radius: 12px;

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

            // Title
            Text {
                x: 24px;
                y: 20px;
                text: "Shipment Product Lookup";
                font-size: Typography.size-lg;
                font-weight: 600;
                color: #ffffff;
            }

            // Subtitle
            Text {
                x: 24px;
                y: 46px;
                text: "Adding item to " + root.target-card-name;
                font-size: Typography.size-sm;
                color: Colors.text-muted;
            }

            // Close button (X) - top right
            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.close-requested();
                    }
                }
            }

            // Main content area - search+results OR create form
            if !root.show-create-form : Rectangle {
                x: 0px;
                y: 76px;
                width: parent.width;
                height: parent.height - 76px;

                // Mirror root.search-focus-trigger so we can watch it with 'changed' inside this element.
                // 'changed' only accepts locally-scoped property names.
                property <int> local-focus-trigger <=> root.search-focus-trigger;

                // Focus search-input whenever Rust requests focus (modal open) or Back is pressed.
                // init would fire at construction time while modal is invisible, so we use changed instead.
                changed local-focus-trigger => {
                    search-input.focus();
                }

                // Search input
                Rectangle {
                    x: 24px;
                    y: 0px;
                    width: parent.width - 48px;
                    height: 36px;
                    border-radius: 6px;
                    background: Colors.background;
                    border-width: 1px;
                    border-color: Colors.border-default;

                    search-input := TextInput {
                        x: 10px;
                        y: 0px;
                        width: parent.width - 20px;
                        height: parent.height;
                        text <=> root.search-text;
                        font-size: Typography.size-md;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                        edited => {
                            root.search-changed(self.text);
                        }
                        key-pressed(event) => {
                            if event.text == Key.Escape {
                                root.close-requested();
                                return accept;
                            }
                            return reject;
                        }
                    }

                    // Placeholder text when empty
                    if root.search-text == "" : Text {
                        x: 10px;
                        y: 0px;
                        width: parent.width - 20px;
                        height: parent.height;
                        text: "Search products or serial numbers...";
                        font-size: Typography.size-md;
                        color: Colors.text-dim;
                        vertical-alignment: center;
                    }
                }

                // Results area — reassignment prompt + product tree
                Rectangle {
                    x: 24px;
                    y: 44px;
                    width: parent.width - 48px;
                    height: parent.height - 44px - 16px;

                    // Reassignment prompt — rendered at TOP of results area (Pitfall 7)
                    if root.reassign-prompt-visible : Rectangle {
                        x: 0px;
                        y: 0px;
                        width: parent.width;
                        height: 80px;
                        z: 10;
                        background: Colors.surface-popup;
                        border-radius: 8px;
                        border-width: 1px;
                        border-color: Colors.warning;

                        Text {
                            x: 8px;
                            y: 4px;
                            width: parent.width - 180px;
                            height: 52px;
                            text: root.reassign-prompt-text;
                            font-size: Typography.size-xs;
                            color: Colors.warning;
                            wrap: word-wrap;
                            vertical-alignment: top;
                        }

                        // "Move it" button
                        Rectangle {
                            x: parent.width - 168px;
                            y: 28px;
                            width: 72px;
                            height: 24px;
                            border-radius: 4px;
                            background: move-touch.has-hover ? Colors.warning : Colors.accent-dim;
                            move-touch := TouchArea {
                                mouse-cursor: pointer;
                                clicked => {
                                    root.unit-force-reassign(root.reassign-serial-id, root.reassign-product-id, root.target-card-id);
                                    root.reassign-prompt-visible = false;
                                }
                            }
                            Text {
                                text: "Move it";
                                width: parent.width;
                                height: parent.height;
                                horizontal-alignment: center;
                                vertical-alignment: center;
                                font-size: Typography.size-xs;
                                color: #ffffff;
                            }
                        }

                        // "Keep Here" button
                        Rectangle {
                            x: parent.width - 88px;
                            y: 28px;
                            width: 72px;
                            height: 24px;
                            border-radius: 4px;
                            border-width: 1px;
                            border-color: Colors.border-default;
                            background: keep-touch.has-hover ? Colors.surface-popup : transparent;
                            keep-touch := TouchArea {
                                mouse-cursor: pointer;
                                clicked => {
                                    root.reassign-prompt-visible = false;
                                }
                            }
                            Text {
                                text: "Keep Here";
                                width: parent.width;
                                height: parent.height;
                                horizontal-alignment: center;
                                vertical-alignment: center;
                                font-size: Typography.size-xs;
                                color: Colors.text-muted;
                            }
                        }
                    }

                    // Product tree — Flickable with variable height
                    Flickable {
                        x: 0px;
                        y: root.reassign-prompt-visible ? 88px : 0px;
                        width: parent.width;
                        height: parent.height - (root.reassign-prompt-visible ? 88px : 0px);
                        viewport-height: root.tree-viewport-height;

                        VerticalLayout {
                            spacing: 0px;

                            // Per-product rows
                            for product-data[product-idx] in root.products : VerticalLayout {
                                spacing: 0px;

                                // Product row
                                Rectangle {
                                    visible: product-data.name-matches-search;
                                    height: product-data.name-matches-search ? 32px : 0px;
                                    border-radius: 4px;
                                    background: product-row-hover.has-hover ? Colors.surface-popup : transparent;
                                    opacity: product-data.is-on-card ? 0.4 : 1.0;

                                    // Row click area for expand/collapse (below HorizontalLayout in z-order, covers full row)
                                    product-row-hover := TouchArea {
                                        width: parent.width - 36px;  // exclude [+] button area
                                        height: parent.height;
                                        mouse-cursor: pointer;
                                        clicked => {
                                            root.toggle-product-expanded(product-data.product-id);
                                        }
                                    }

                                    HorizontalLayout {
                                        padding-left: 8px;
                                        padding-right: 8px;
                                        spacing: 4px;
                                        alignment: stretch;

                                        // Chevron — collapsed > / expanded v (G-04: plain ASCII, no border artifact)
                                        Text {
                                            text: root.expanded-product-id == product-data.product-id ? "v" : ">";
                                            font-size: Typography.size-xs;
                                            color: Colors.text-muted;
                                            vertical-alignment: center;
                                            width: 12px;
                                        }

                                        // Product name
                                        Text {
                                            text: product-data.name;
                                            font-size: Typography.size-sm;
                                            color: Colors.text-primary;
                                            vertical-alignment: center;
                                            horizontal-stretch: 1;
                                        }

                                        // Count summary (when search inactive and product has units)
                                        if root.search-text == "" && (product-data.available-count > 0 || product-data.assigned-count > 0) : Text {
                                            text: "(" + product-data.available-count + " avail, " + product-data.assigned-count + " assigned)";
                                            font-size: Typography.size-xs;
                                            color: Colors.text-dim;
                                            vertical-alignment: center;
                                        }

                                        // Match count pill (when search active AND units match)
                                        if root.search-text != "" && product-data.match-count > 0 : VerticalLayout {
                                            alignment: center;
                                            Rectangle {
                                                height: 20px;
                                                border-radius: 8px;
                                                background: Colors.accent-dim;
                                                HorizontalLayout {
                                                    padding-left: 6px;
                                                    padding-right: 6px;
                                                    Text {
                                                        text: product-data.match-count + " matches";
                                                        font-size: Typography.size-xs;
                                                        color: #ffffff;
                                                        vertical-alignment: center;
                                                    }
                                                }
                                            }
                                        }

                                        // [+] add-to-card button for parent product (G-07: hidden when already on card)
                                        if !product-data.is-on-card : VerticalLayout {
                                            alignment: center;
                                            Rectangle {
                                                width: 24px;
                                                height: 24px;
                                                border-radius: 4px;
                                                border-width: 1px;
                                                border-color: product-plus-touch.has-hover ? Colors.accent : Colors.border-default;
                                                background: product-plus-touch.has-hover ? Colors.accent : transparent;
                                                Text {
                                                    text: "+";
                                                    font-size: Typography.size-sm;
                                                    color: product-plus-touch.has-hover ? #ffffff : Colors.accent;
                                                    horizontal-alignment: center;
                                                    vertical-alignment: center;
                                                }
                                                product-plus-touch := TouchArea {
                                                    width: parent.width;
                                                    height: parent.height;
                                                    mouse-cursor: pointer;
                                                    clicked => {
                                                        root.item-selected(product-data.product-id, product-data.name, "");
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                // Expanded unit section — only when this product is expanded
                                if product-data.product-id == root.expanded-product-id : VerticalLayout {
                                    padding-left: 16px;
                                    spacing: 0px;

                                    // Available section header
                                    if product-data.available-count > 0 : Text {
                                        text: "Available";
                                        font-size: Typography.size-xs;
                                        color: Colors.text-dim;
                                        height: 20px;
                                        vertical-alignment: center;
                                    }

                                    // Available units (first loop — is-available-section == true)
                                    for unit-data[unit-idx] in product-data.units : Rectangle {
                                        visible: unit-data.is-available-section && unit-data.matches-search;
                                        height: (unit-data.is-available-section && unit-data.matches-search) ? 28px : 0px;
                                        border-radius: 4px;
                                        background: avail-unit-hover.has-hover ? Colors.surface-popup : transparent;
                                        opacity: unit-data.is-on-card ? 0.4 : 1.0;

                                        // Row hover area — declared before HorizontalLayout for lower z-order
                                        avail-unit-hover := TouchArea {
                                            width: parent.width - 36px;
                                            height: parent.height;
                                        }

                                        HorizontalLayout {
                                            padding-left: 8px;
                                            padding-right: 8px;
                                            spacing: 8px;
                                            alignment: stretch;

                                            // Serial ID
                                            Text {
                                                text: unit-data.serial-id;
                                                font-size: Typography.size-xs;
                                                color: Colors.text-primary;
                                                vertical-alignment: center;
                                                horizontal-stretch: 1;
                                            }

                                            // State badge pill (G-02: dynamic width, vertically centered)
                                            VerticalLayout {
                                                alignment: center;
                                                Rectangle {
                                                    height: 20px;
                                                    border-radius: 8px;
                                                    background: unit-data.state-color;
                                                    HorizontalLayout {
                                                        padding-left: 6px;
                                                        padding-right: 6px;
                                                        Text {
                                                            text: unit-data.state;
                                                            font-size: Typography.size-xs;
                                                            color: #ffffff;
                                                            vertical-alignment: center;
                                                        }
                                                    }
                                                }
                                            }

                                            // [+] button — available unit add (G-05: border, G-07: hidden when on card)
                                            if !unit-data.is-on-card : VerticalLayout {
                                                alignment: center;
                                                Rectangle {
                                                    width: 24px;
                                                    height: 24px;
                                                    border-radius: 4px;
                                                    border-width: 1px;
                                                    border-color: avail-plus-touch.has-hover ? Colors.accent : Colors.border-default;
                                                    background: avail-plus-touch.has-hover ? Colors.accent : transparent;
                                                    Text {
                                                        text: "+";
                                                        font-size: Typography.size-sm;
                                                        color: avail-plus-touch.has-hover ? #ffffff : Colors.accent;
                                                        horizontal-alignment: center;
                                                        vertical-alignment: center;
                                                    }
                                                    avail-plus-touch := TouchArea {
                                                        width: parent.width;
                                                        height: parent.height;
                                                        mouse-cursor: pointer;
                                                        clicked => {
                                                            root.unit-selected(unit-data.serial-id, unit-data.product-id, root.target-card-id);
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    // Assigned section header
                                    if product-data.assigned-count > 0 : Text {
                                        text: "Assigned";
                                        font-size: Typography.size-xs;
                                        color: Colors.text-dim;
                                        height: 20px;
                                        vertical-alignment: center;
                                    }

                                    // Assigned units (second loop — is-available-section == false)
                                    for unit-data2[unit-idx2] in product-data.units : Rectangle {
                                        visible: !unit-data2.is-available-section && unit-data2.matches-search;
                                        height: (!unit-data2.is-available-section && unit-data2.matches-search) ? 36px : 0px;
                                        border-radius: 4px;
                                        background: assigned-unit-hover.has-hover ? Colors.surface-popup : transparent;
                                        opacity: unit-data2.is-on-card ? 0.4 : 1.0;

                                        // Row hover area — declared before HorizontalLayout for lower z-order
                                        assigned-unit-hover := TouchArea {
                                            width: parent.width - 36px;
                                            height: parent.height;
                                        }

                                        HorizontalLayout {
                                            padding-left: 8px;
                                            padding-right: 8px;
                                            spacing: 8px;
                                            alignment: stretch;

                                            // Serial ID + assigned-name stacked
                                            VerticalLayout {
                                                spacing: 2px;
                                                horizontal-stretch: 1;
                                                alignment: center;

                                                Text {
                                                    text: unit-data2.serial-id;
                                                    font-size: Typography.size-xs;
                                                    color: Colors.text-primary;
                                                }

                                                if unit-data2.assigned-name != "" : Text {
                                                    text: "-> " + unit-data2.assigned-name;
                                                    font-size: Typography.size-xs;
                                                    color: Colors.text-secondary;
                                                }
                                            }

                                            // State badge pill (G-02: dynamic width, vertically centered)
                                            VerticalLayout {
                                                alignment: center;
                                                Rectangle {
                                                    height: 20px;
                                                    border-radius: 8px;
                                                    background: unit-data2.state-color;
                                                    HorizontalLayout {
                                                        padding-left: 6px;
                                                        padding-right: 6px;
                                                        Text {
                                                            text: unit-data2.state;
                                                            font-size: Typography.size-xs;
                                                            color: #ffffff;
                                                            vertical-alignment: center;
                                                        }
                                                    }
                                                }
                                            }

                                            // [+] button — triggers reassignment prompt (G-05: border, G-07: hidden when on card)
                                            if !unit-data2.is-on-card : VerticalLayout {
                                                alignment: center;
                                                Rectangle {
                                                    width: 24px;
                                                    height: 24px;
                                                    border-radius: 4px;
                                                    border-width: 1px;
                                                    border-color: assigned-plus-touch.has-hover ? Colors.accent : Colors.border-default;
                                                    background: assigned-plus-touch.has-hover ? Colors.accent : transparent;
                                                    Text {
                                                        text: "+";
                                                        font-size: Typography.size-sm;
                                                        color: assigned-plus-touch.has-hover ? #ffffff : Colors.accent;
                                                        horizontal-alignment: center;
                                                        vertical-alignment: center;
                                                    }
                                                    assigned-plus-touch := TouchArea {
                                                        width: parent.width;
                                                        height: parent.height;
                                                        mouse-cursor: pointer;
                                                        clicked => {
                                                            root.reassign-prompt-visible = true;
                                                            root.reassign-prompt-text = unit-data2.serial-id + " is assigned to " + unit-data2.assigned-name + ". Move it to this card?";
                                                            root.reassign-serial-id = unit-data2.serial-id;
                                                            root.reassign-product-id = unit-data2.product-id;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    // Inline SN entry (D-16, D-17) — conditionally rendered
                                    if root.creating-unit-product-id == product-data.product-id : Rectangle {
                                        height: 36px;
                                        background: Colors.background;
                                        border-width: 1px;
                                        border-color: Colors.border-default;
                                        border-radius: 4px;

                                        // TextInput area (takes up all but OK button)
                                        sn-input := TextInput {
                                            x: 8px;
                                            y: 0px;
                                            width: parent.width - 56px;
                                            height: parent.height;
                                            text <=> root.new-unit-serial-id;
                                            font-size: Typography.size-md;
                                            color: Colors.text-primary;
                                            vertical-alignment: center;
                                            accepted => {
                                                root.create-unit-confirmed(product-data.product-id, root.new-unit-serial-id);
                                                root.creating-unit-product-id = "";
                                                root.new-unit-serial-id = "";
                                            }
                                            key-pressed(event) => {
                                                if event.text == Key.Escape {
                                                    root.creating-unit-product-id = "";
                                                    root.new-unit-serial-id = "";
                                                    return accept;
                                                }
                                                return reject;
                                            }
                                        }

                                        // Placeholder overlay
                                        if root.new-unit-serial-id == "" : Text {
                                            x: 8px;
                                            y: 0px;
                                            width: parent.width - 56px;
                                            height: parent.height;
                                            text: "Serial number...";
                                            font-size: Typography.size-md;
                                            color: Colors.text-dim;
                                            vertical-alignment: center;
                                        }

                                        // OK button
                                        Rectangle {
                                            x: parent.width - 48px;
                                            y: 6px;
                                            width: 40px;
                                            height: 24px;
                                            border-radius: 4px;
                                            background: ok-touch.has-hover ? Colors.accent-hover : Colors.accent;
                                            ok-touch := TouchArea {
                                                mouse-cursor: pointer;
                                                clicked => {
                                                    root.create-unit-confirmed(product-data.product-id, root.new-unit-serial-id);
                                                    root.creating-unit-product-id = "";
                                                    root.new-unit-serial-id = "";
                                                }
                                            }
                                            Text {
                                                text: "OK";
                                                width: parent.width;
                                                height: parent.height;
                                                horizontal-alignment: center;
                                                vertical-alignment: center;
                                                font-size: Typography.size-xs;
                                                color: #ffffff;
                                            }
                                        }
                                    }

                                    // "Create New Unit" button (D-15, D-18)
                                    Rectangle {
                                        height: 28px;
                                        border-radius: 4px;
                                        background: create-unit-hover.has-hover ? Colors.surface-popup : transparent;
                                        create-unit-hover := TouchArea {
                                            mouse-cursor: pointer;
                                            clicked => {
                                                root.creating-unit-product-id = product-data.product-id;
                                                root.new-unit-serial-id = "";
                                            }
                                        }
                                        Text {
                                            x: 8px;
                                            y: 0px;
                                            width: parent.width - 8px;
                                            height: parent.height;
                                            text: "Create New Unit";
                                            font-size: Typography.size-sm;
                                            color: Colors.accent;
                                            vertical-alignment: center;
                                        }
                                    }
                                }
                            }

                            // Empty state when no products match search
                            if root.products.length == 0 : Text {
                                text: "No products matched";
                                font-size: Typography.size-sm;
                                color: Colors.text-dim;
                                height: 40px;
                                vertical-alignment: center;
                            }

                            // "Create New Product" row — always at bottom (D-19)
                            Rectangle {
                                height: 40px;
                                border-radius: 4px;
                                background: create-product-hover.has-hover ? Colors.surface-popup : transparent;
                                create-product-hover := TouchArea {
                                    mouse-cursor: pointer;
                                    clicked => {
                                        root.show-create-form = true;
                                        root.new-item-name = "";
                                        root.new-item-shopify-url = "";
                                        root.name-error = false;
                                    }
                                }

                                HorizontalLayout {
                                    padding-left: 8px;
                                    spacing: 8px;

                                    Text {
                                        text: "+";
                                        font-size: Typography.size-lg;
                                        color: Colors.accent;
                                        vertical-alignment: center;
                                        width: 20px;
                                    }

                                    Text {
                                        text: "Create New Product";
                                        font-size: Typography.size-md;
                                        color: Colors.accent;
                                        vertical-alignment: center;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // Create New form
            if root.show-create-form : Rectangle {
                x: 0px;
                y: 76px;
                width: parent.width;
                height: parent.height - 76px;

                // Auto-focus display name input when create form is shown.
                // This init fires when show-create-form becomes true (modal is already visible at that point).
                init => {
                    create-name-input.focus();
                }

                // Display name input label
                Text {
                    x: 24px;
                    y: 8px;
                    text: "Display name";
                    font-size: Typography.size-sm;
                    color: Colors.text-muted;
                }

                Rectangle {
                    x: 24px;
                    y: 28px;
                    width: parent.width - 48px;
                    height: 36px;
                    border-radius: 6px;
                    background: Colors.background;
                    border-width: 1px;
                    border-color: root.name-error ? Colors.error : Colors.border-default;

                    create-name-input := TextInput {
                        x: 10px;
                        y: 0px;
                        width: parent.width - 20px;
                        height: parent.height;
                        text <=> root.new-item-name;
                        font-size: Typography.size-md;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                        edited => {
                            root.name-error = false;
                        }
                        key-pressed(event) => {
                            if event.text == Key.Escape {
                                root.close-requested();
                                return accept;
                            }
                            return reject;
                        }
                    }
                }

                // Name required error
                if root.name-error : Text {
                    x: 24px;
                    y: 66px;
                    text: "Name required";
                    font-size: Typography.size-xs;
                    color: Colors.error;
                }

                // Shopify URL label
                Text {
                    x: 24px;
                    y: 76px;
                    text: "Shopify product URL (optional)";
                    font-size: Typography.size-sm;
                    color: Colors.text-muted;
                }

                Rectangle {
                    x: 24px;
                    y: 96px;
                    width: parent.width - 48px;
                    height: 36px;
                    border-radius: 6px;
                    background: Colors.background;
                    border-width: 1px;
                    border-color: Colors.border-default;

                    TextInput {
                        x: 10px;
                        y: 0px;
                        width: parent.width - 20px;
                        height: parent.height;
                        text <=> root.new-item-shopify-url;
                        font-size: Typography.size-md;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                        key-pressed(event) => {
                            if event.text == Key.Escape {
                                root.close-requested();
                                return accept;
                            }
                            return reject;
                        }
                    }
                }

                // Shopify fetch status
                if root.shopify-fetch-in-progress : Text {
                    x: 24px;
                    y: 138px;
                    text: "Fetching image...";
                    font-size: Typography.size-xs;
                    color: Colors.text-muted;
                }

                // Fetched image preview (when fetch completes) — placeholder rectangle only
                if root.shopify-fetched-image-url != "" && !root.shopify-fetch-in-progress : Rectangle {
                    x: 24px;
                    y: 138px;
                    width: 36px;
                    height: 36px;
                    border-radius: 4px;
                    background: Colors.border-default;
                }

                // Create button
                Rectangle {
                    x: 24px;
                    y: 184px;
                    width: 80px;
                    height: 32px;
                    border-radius: 6px;
                    background: create-btn-touch.has-hover ? Colors.accent-hover : Colors.accent;

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

                    create-btn-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            if root.new-item-name == "" {
                                root.name-error = true;
                            } else {
                                root.create-confirmed(root.new-item-name, root.new-item-shopify-url);
                            }
                        }
                    }
                }

                // Back button
                Rectangle {
                    x: 112px;
                    y: 184px;
                    width: 64px;
                    height: 32px;
                    border-radius: 6px;
                    background: back-btn-touch.has-hover ? Colors.border-default : Colors.surface-popup;

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

                    back-btn-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.show-create-form = false;
                        }
                    }
                }
            }
        }

    }
}