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

export struct RecipientPickerEntryData {
    recipient-key: string,
    display-name: string,
}

export component RecipientPickerModal inherits Rectangle {
    in property <bool> is-visible: false;
    in property <string> customer-name: "";
    in property <[RecipientPickerEntryData]> recipients;
    in property <int> card-index: -1;

    callback close-picker();
    callback assign-recipient(int, string);    // card-index, recipient-key
    callback create-and-assign(int, string);   // card-index, name
    callback picker-search-changed(string);    // search query

    // Internal state
    property <string> search-text: "";
    property <bool> show-create-form: false;
    property <string> create-name: "";

    // Backdrop
    visible: is-visible;
    background: #00000066;
    width: 100%;
    height: 100%;

    // FocusScope for ESC key handling (works regardless of search focus)
    FocusScope {
        width: parent.width;
        height: parent.height;
        enabled: root.is-visible;
        key-pressed(event) => {
            if event.text == Key.Escape {
                root.search-text = "";
                root.show-create-form = false;
                root.create-name = "";
                root.close-picker();
                return accept;
            }
            return reject;
        }
    }

    // Click backdrop to close
    TouchArea {
        width: parent.width;
        height: parent.height;
        clicked => {
            root.search-text = "";
            root.show-create-form = false;
            root.create-name = "";
            root.close-picker();
        }
    }

    // Centered panel
    Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: 400px;
        height: min(480px, parent.height - 40px);
        background: Colors.surface;
        border-radius: 8px;

        // Stop click propagation to backdrop
        TouchArea {
            width: parent.width;
            height: parent.height;
        }

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

            // Header: title + close button
            HorizontalLayout {
                spacing: 8px;
                Text {
                    text: "Pick Recipient for " + root.customer-name;
                    font-size: Typography.size-lg;
                    font-weight: 600;
                    color: #ffffff;
                    horizontal-stretch: 1;
                    overflow: elide;
                    vertical-alignment: center;
                }
                Rectangle {
                    width: 24px;
                    height: 24px;
                    border-radius: 12px;
                    background: close-header-touch.has-hover ? Colors.border-default : transparent;
                    Text {
                        text: "x";
                        font-size: Typography.size-md;
                        color: Colors.text-muted;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                        width: parent.width;
                        height: parent.height;
                    }
                    close-header-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.search-text = "";
                            root.show-create-form = false;
                            root.create-name = "";
                            root.close-picker();
                        }
                    }
                }
            }

            // List view (shown when show-create-form is false)
            if !root.show-create-form : VerticalLayout {
                spacing: 8px;
                vertical-stretch: 1;

                // Search input
                Rectangle {
                    height: 32px;
                    background: Colors.background;
                    border-color: search-input.has-focus ? Colors.accent : Colors.border-default;
                    border-width: 1px;
                    border-radius: 4px;

                    search-input := TextInput {
                        x: 8px;
                        y: 0px;
                        width: parent.width - 16px;
                        height: parent.height;
                        text <=> root.search-text;
                        font-size: Typography.size-md;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                        edited => { root.picker-search-changed(self.text); }
                    }

                    // Auto-focus search input and reset state when modal becomes visible
                    property <bool> focus-trigger <=> root.is-visible;
                    changed focus-trigger => {
                        if root.is-visible {
                            search-input.focus();
                            list-flick.viewport-y = 0px;
                        }
                    }

                    // Placeholder text when search is empty
                    if root.search-text == "" : Text {
                        x: 8px;
                        y: 0px;
                        width: parent.width - 16px;
                        height: parent.height;
                        text: "Search recipients...";
                        font-size: Typography.size-md;
                        color: Colors.text-dim;
                        vertical-alignment: center;
                    }
                }

                // Scrollable recipient list
                list-flick := Flickable {
                    vertical-stretch: 1;

                    VerticalLayout {
                        for entry[idx] in root.recipients : Rectangle {
                            height: 36px;
                            border-radius: 4px;
                            background: entry-touch.has-hover ? Colors.surface-popup : transparent;

                            HorizontalLayout {
                                padding-left: 8px;
                                padding-right: 8px;
                                Text {
                                    text: entry.display-name;
                                    font-size: Typography.size-md;
                                    color: Colors.text-primary;
                                    vertical-alignment: center;
                                    horizontal-stretch: 1;
                                }
                            }

                            entry-touch := TouchArea {
                                mouse-cursor: pointer;
                                clicked => {
                                    root.search-text = "";
                                    root.assign-recipient(root.card-index, entry.recipient-key);
                                }
                            }
                        }
                    }

                    // Empty state — shown when recipients list is empty and search is active
                    if root.recipients.length == 0 && root.search-text != "" : Text {
                        y: 0px;
                        width: parent.width;
                        height: 40px;
                        text: "No recipients match your search";
                        font-size: Typography.size-sm;
                        color: Colors.text-dim;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    // Empty state — shown when no unlinked recipients exist
                    if root.recipients.length == 0 && root.search-text == "" : Text {
                        y: 0px;
                        width: parent.width;
                        height: 36px;
                        text: "No unlinked recipients found.";
                        font-size: Typography.size-sm;
                        color: Colors.text-muted;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }

                // Separator
                Rectangle {
                    height: 1px;
                    background: Colors.border-default;
                }

                // Create New Recipient row
                Rectangle {
                    height: 36px;
                    border-radius: 4px;
                    background: create-new-touch.has-hover ? Colors.surface-popup : transparent;
                    HorizontalLayout {
                        padding-left: 8px;
                        spacing: 6px;
                        alignment: start;
                        Text {
                            text: "+";
                            font-size: Typography.size-lg;
                            color: Colors.accent;
                            vertical-alignment: center;
                        }
                        Text {
                            text: "Create New Recipient";
                            font-size: Typography.size-md;
                            color: Colors.accent;
                            vertical-alignment: center;
                        }
                    }
                    create-new-touch := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            root.create-name = root.customer-name;
                            root.show-create-form = true;
                        }
                    }
                }
            }

            // Create form (shown when show-create-form is true)
            if root.show-create-form : VerticalLayout {
                spacing: 12px;
                vertical-stretch: 1;

                // Recipient Name label
                Text {
                    text: "Recipient Name";
                    font-size: Typography.size-xs;
                    color: Colors.text-muted;
                }

                // Name input
                Rectangle {
                    height: 32px;
                    background: Colors.background;
                    border-color: Colors.border-default;
                    border-width: 1px;
                    border-radius: 4px;

                    TextInput {
                        x: 8px;
                        y: 0px;
                        width: parent.width - 16px;
                        height: parent.height;
                        text <=> root.create-name;
                        font-size: Typography.size-md;
                        color: Colors.text-primary;
                        vertical-alignment: center;
                    }
                }

                // Shopify Profile URL label
                Text {
                    text: "Shopify Profile URL";
                    font-size: Typography.size-xs;
                    color: Colors.text-muted;
                }

                // URL read-only display
                Text {
                    text: "Auto-filled from order";
                    font-size: Typography.size-sm;
                    color: Colors.text-dim;
                }

                // Spacer to push buttons to bottom
                Rectangle {
                    vertical-stretch: 1;
                    background: transparent;
                }

                // Buttons row
                HorizontalLayout {
                    spacing: 8px;

                    // Back to List button
                    Rectangle {
                        horizontal-stretch: 1;
                        height: 32px;
                        background: back-list-touch.has-hover ? Colors.border-default : Colors.surface-popup;
                        border-radius: 4px;
                        Text {
                            text: "Back to List";
                            font-size: Typography.size-md;
                            color: Colors.text-muted;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                            width: parent.width;
                            height: parent.height;
                        }
                        back-list-touch := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                root.show-create-form = false;
                            }
                        }
                    }

                    // Create & Assign button
                    Rectangle {
                        horizontal-stretch: 1;
                        height: 32px;
                        background: create-assign-touch.has-hover ? Colors.accent-hover : Colors.accent;
                        border-radius: 4px;
                        Text {
                            text: "Create & Assign";
                            font-size: Typography.size-md;
                            font-weight: 600;
                            color: #ffffff;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                            width: parent.width;
                            height: parent.height;
                        }
                        create-assign-touch := TouchArea {
                            mouse-cursor: pointer;
                            clicked => {
                                root.search-text = "";
                                root.show-create-form = false;
                                root.create-and-assign(root.card-index, root.create-name);
                                root.create-name = "";
                            }
                        }
                    }
                }
            }
        }
    }
}