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

export struct ProductUnitDisplayData {
    serial-id: string,
    state: string,
    state-color: color,
    assigned-card-name: string,
}

export component ProductDetailPanel inherits Rectangle {
    in property <string> product-name;
    in property <string> product-id;
    in property <image> product-image;
    in property <bool> has-image;
    in property <string> shopify-url;
    in property <string> github-issue-ref;    // e.g. "BigscreenVR/beyond-outgoing#42"
    in property <[ProductUnitDisplayData]> units;

    // Unit creation state
    in-out property <bool> creating-unit: false;
    in-out property <string> new-serial-input: "";
    in-out property <bool> creation-in-progress: false;

    // Auto-focus trigger: incremented when creating-unit becomes true
    property <int> serial-focus-trigger: 0;
    changed creating-unit => {
        if root.creating-unit {
            root.serial-focus-trigger += 1;
        }
    }

    // Unit selection state
    in-out property <int> selected-unit-index: -1;
    in-out property <string> selected-unit-serial: "";

    // Serial unit search (D-25)
    in-out property <string> unit-search-query: "";
    callback unit-search-changed(string);

    // Computed content height for unit list (absolute positioning)
    property <length> unit-content-height:
        root.units.length * 44px
        + (root.creating-unit ? 44px : 0px)
        + (root.units.length == 0 && !root.creating-unit ? 30px : 0px)
        + 8px;

    // No scroll reset needed — clipped Rectangle with absolute y-positioning

    callback set-image-clicked(string);       // product_id
    callback view-shopify-clicked(string);    // product_id
    callback view-issue-clicked(string);      // product_id
    callback archive-clicked(string);         // product_id
    callback create-unit-with-serial(string, string);   // (product_id, serial_id) — serial_id may be empty
    callback unit-selection-changed(string, string);    // (product_id, serial_id) — empty = deselected
    callback change-unit-state-clicked(string, string); // (product_id, serial_id) — D-18.2 entry point

    width: 320px;
    background: Colors.surface;
    border-radius: 6px;

    VerticalLayout {
        spacing: 0px;
        alignment: stretch;

        // Fixed header area — product info, links, search
        VerticalLayout {
            vertical-stretch: 0;
            padding: 12px;
            spacing: 8px;

            // Header: clickable product image + name
            HorizontalLayout {
                spacing: 8px;
                alignment: stretch;

                // Product image or placeholder -- clickable to Set Image
                image-touch := TouchArea {
                    width: 64px;
                    height: 64px;
                    mouse-cursor: pointer;
                    clicked => { root.set-image-clicked(root.product-id); }

                    Rectangle {
                        width: 64px;
                        height: 64px;
                        border-radius: 6px;
                        clip: true;
                        background: image-touch.has-hover ? Colors.surface-elevated : Colors.border-default;
                        if root.has-image : Image {
                            source: root.product-image;
                            width: 64px;
                            height: 64px;
                            image-fit: contain;
                        }
                        if !root.has-image : Text {
                            text: "?";
                            font-size: Typography.size-lg;
                            color: Colors.text-muted;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                        // UNIT badge overlay when a unit is selected
                        if root.selected-unit-serial != "" : Rectangle {
                            x: parent.width - 22px;
                            y: parent.height - 22px;
                            width: 20px;
                            height: 20px;
                            border-radius: 10px;
                            background: Colors.accent;
                            Text {
                                text: "U";
                                font-size: Typography.size-xs;
                                color: #ffffff;
                                horizontal-alignment: center;
                                vertical-alignment: center;
                            }
                        }
                    }
                }

                VerticalLayout {
                    spacing: 0px;
                    alignment: start;
                    // Product name
                    Text {
                        text: root.product-name;
                        font-size: Typography.size-lg;
                        font-weight: 700;
                        color: Colors.text-primary;
                        wrap: word-wrap;
                    }
                    // Selected unit serial subtext — directly beneath name
                    if root.selected-unit-serial != "" : Text {
                        text: root.selected-unit-serial;
                        font-size: Typography.size-xs;
                        color: Colors.text-muted;
                    }

                }
            }

            // Shopify link
            Text {
                text: "Shopify:";
                font-size: Typography.size-xs;
                color: Colors.text-muted;
            }
            if root.shopify-url != "" : Rectangle {
                height: 18px;
                Text {
                    x: 0px;
                    text: "View Product Page";
                    font-size: Typography.size-sm;
                    color: Colors.accent;
                    vertical-alignment: center;
                }
                shopify-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.view-shopify-clicked(root.product-id); }
                }
            }
            if root.shopify-url == "" : Text {
                text: "Not linked";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
            }
            // GH Issue link
            Text {
                text: "GitHub issue:";
                font-size: Typography.size-xs;
                color: Colors.text-muted;
            }
            if root.github-issue-ref != "" : Rectangle {
                height: 18px;
                Text {
                    x: 0px;
                    text: root.github-issue-ref;
                    font-size: Typography.size-sm;
                    color: Colors.accent;
                    vertical-alignment: center;
                }
                issue-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.view-issue-clicked(root.product-id); }
                }
            }
            if root.github-issue-ref == "" : Text {
                text: "Not synced";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
            }

            // Section: Serial unit search input (D-25) + add button
            HorizontalLayout {
                spacing: 8px;

                // Search input replaces the static "Serial Units" header
                Rectangle {
                    height: 28px;
                    border-radius: 4px;
                    background: Colors.background;
                    border-width: 1px;
                    border-color: Colors.border-default;
                    horizontal-stretch: 1;

                    serial-search := TextInput {
                        x: 8px;
                        y: 0px;
                        width: parent.width - 16px;
                        height: parent.height;
                        font-size: Typography.size-sm;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                        text <=> root.unit-search-query;

                        edited => {
                            root.unit-search-changed(self.text);
                        }
                    }

                    // Placeholder text when empty
                    if root.unit-search-query == "" : Text {
                        x: 8px;
                        y: 0px;
                        width: parent.width - 16px;
                        height: parent.height;
                        text: "Find serial units";
                        font-size: Typography.size-sm;
                        color: Colors.text-dim;
                        vertical-alignment: center;
                    }
                }

                // Wrapper to vertically center the 24px [+] button against the 28px search box
                VerticalLayout {
                    alignment: center;
                    Rectangle {
                        width: 24px;
                        height: 24px;
                        border-radius: 4px;
                        background: root.creation-in-progress ? Colors.accent-dim : Colors.accent;
                        opacity: root.creation-in-progress ? 0.4 : 1.0;
                        TouchArea {
                            mouse-cursor: root.creation-in-progress ? default : pointer;
                            clicked => {
                                if !root.creation-in-progress {
                                    root.creating-unit = true;
                                    root.new-serial-input = root.unit-search-query;
                                }
                            }
                        }
                        Text {
                            text: "+";
                            font-size: Typography.size-sm;
                            color: white;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                }
            }

        } // end header VerticalLayout

        // Unit list — clipped Rectangle with absolute positioning
        // (Flickable bottom-aligns content in Slint regardless of y/alignment settings)
        unit-list-area := Rectangle {
            vertical-stretch: 1;
            clip: true;

            if root.units.length == 0 && !root.creating-unit : Text {
                x: 12px;
                y: 4px;
                width: parent.width - 24px;
                text: "No units created yet. Use + to add the first unit.";
                font-size: Typography.size-sm;
                color: Colors.text-dim;
                wrap: word-wrap;
            }

            for unit-data[unit-index] in root.units : Rectangle {
                x: 12px;
                y: unit-index * 1px * 44 + 4px;
                width: parent.width - 24px;
                height: unit-data.assigned-card-name != "" ? 52px : 40px;
                background: unit-index == root.selected-unit-index
                    ? Colors.surface-elevated
                    : (unit-touch.has-hover ? Colors.surface-popup : transparent);
                border-radius: 4px;

                // Left border accent indicator when selected
                if unit-index == root.selected-unit-index : Rectangle {
                    x: 0px;
                    y: 0px;
                    width: 3px;
                    height: parent.height;
                    border-radius: 2px;
                    background: Colors.accent;
                }

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

                    VerticalLayout {
                        spacing: 2px;
                        alignment: center;
                        horizontal-stretch: 1;

                        Text {
                            text: unit-data.serial-id;
                            font-size: Typography.size-sm;
                            color: Colors.text-primary;
                        }
                        if unit-data.assigned-card-name != "" : Text {
                            text: unit-data.assigned-card-name;
                            font-size: Typography.size-xs;
                            color: Colors.text-secondary;
                            overflow: elide;
                        }
                    }

                    // State badge pill — right-aligned, vertically centered
                    VerticalLayout {
                        alignment: center;
                        Rectangle {
                            height: 20px;
                            min-width: 70px;
                            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;
                                    horizontal-alignment: center;
                                    vertical-alignment: center;
                                }
                            }
                        }
                    }
                }

                unit-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        if unit-index == root.selected-unit-index {
                            root.selected-unit-index = -1;
                            root.selected-unit-serial = "";
                            root.unit-selection-changed(root.product-id, "");
                        } else {
                            root.selected-unit-index = unit-index;
                            root.selected-unit-serial = unit-data.serial-id;
                            root.unit-selection-changed(root.product-id, unit-data.serial-id);
                        }
                    }
                }
            }

            // Inline serial input row (visible when creating-unit)
            if root.creating-unit : Rectangle {
                x: 12px;
                y: root.units.length * 1px * 44 + 4px;
                width: parent.width - 24px;
                height: 36px;
                background: Colors.background;
                border-radius: 4px;
                border-width: 1px;
                border-color: Colors.accent;

                // Auto-focus: bind a local property to trigger; changed handler fires when element is created
                property <int> focus-trigger: root.serial-focus-trigger;
                changed focus-trigger => {
                    serial-input.focus();
                    // Input is at absolute y position — will be visible if within clip area
                }

                serial-input := TextInput {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    font-size: Typography.size-sm;
                    color: Colors.text-primary;
                    text <=> root.new-serial-input;
                    vertical-alignment: center;

                    accepted => {
                        root.create-unit-with-serial(root.product-id, root.new-serial-input);
                        root.creating-unit = false;
                        root.creation-in-progress = true;
                    }

                    key-pressed(event) => {
                        if event.text == Key.Escape {
                            root.creating-unit = false;
                            return accept;
                        }
                        return reject;
                    }
                }

                // Placeholder text when empty
                if root.new-serial-input == "" : Text {
                    x: 8px;
                    y: 0px;
                    width: parent.width - 16px;
                    height: parent.height;
                    text: "Serial number (Enter to confirm)";
                    font-size: Typography.size-sm;
                    color: Colors.text-dim;
                    vertical-alignment: center;
                }
            }
        } // end unit-list-area

        // Bottom action row
        HorizontalLayout {
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 6px;
            padding-bottom: 6px;
            height: 48px;
            spacing: 8px;

        // Change State button — visible when a unit is selected (D-18.2)
        if root.selected-unit-serial != "" : Rectangle {
            height: 36px;
            horizontal-stretch: 1;
            border-radius: 4px;
            background: change-state-touch.has-hover ? Colors.accent-hover : Colors.accent-dim;
            border-width: 1px;
            border-color: Colors.accent;

            change-state-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    root.change-unit-state-clicked(root.product-id, root.selected-unit-serial);
                }
            }

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

        // Archive product button
        Rectangle {
            height: 36px;
            horizontal-stretch: 1;
            background: archive-touch.pressed ? Colors.archive-action : (archive-touch.has-hover ? #3a2a1a : transparent);
            border-width: 1px;
            border-color: Colors.archive-action;
            border-radius: 4px;

            Text {
                text: "Archive product";
                width: parent.width;
                height: parent.height;
                horizontal-alignment: center;
                vertical-alignment: center;
                color: archive-touch.pressed ? #ffffff : Colors.archive-action;
                font-size: Typography.size-sm;
            }

            archive-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => { root.archive-clicked(root.product-id); }
            }
        }
        } // end bottom action row
    } // end outer VerticalLayout
}