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

export component StateTransitionModal inherits Rectangle {
    in property <string> serial-id: "";
    in property <string> current-state: "";
    in property <string> product-name: "";
    in property <bool> is-assigned: false;  // true when unit has assigned_card_id
    // show-unassign-option: true from card context (D-18.1), false from product detail (D-18.2)
    in property <bool> show-unassign-option: false;

    in-out property <bool> unassign-checked: false;

    // (serial_id, new_state, unassign)
    callback state-selected(string, string, bool);
    callback close-requested();

    // State options per D-18:
    // From card (show-unassign-option=true): Delivered, Returned, Processing, Available + Unassign checkbox
    // From product detail (show-unassign-option=false): Returned, Processing, Available (no Delivered)
    // "Assigned" is NOT manually selectable (D-19)

    background: Colors.surface-elevated;
    border-radius: 12px;
    border-width: 1px;
    border-color: Colors.border-muted;

    // Absorb clicks so backdrop dismiss doesn't fire through the modal
    TouchArea {}

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

        // Header
        HorizontalLayout {
            alignment: stretch;
            Text {
                text: "Change state: " + root.serial-id;
                font-size: Typography.size-lg;
                font-weight: 700;
                color: Colors.text-primary;
                horizontal-stretch: 1;
                wrap: no-wrap;
                overflow: elide;
            }
            Rectangle {
                width: 24px;
                height: 24px;
                close-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => { root.close-requested(); }
                }
                Text {
                    text: "x";
                    font-size: Typography.size-sm;
                    color: close-touch.has-hover ? Colors.text-primary : Colors.text-muted;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }
        }

        // Current state info
        Text {
            text: "Current: " + root.current-state;
            font-size: Typography.size-sm;
            color: Colors.text-secondary;
        }

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

        // Delivered — only in card context (show-unassign-option=true, D-18)
        if root.show-unassign-option : Rectangle {
            height: 40px;
            border-radius: 6px;
            background: delivered-touch.has-hover ? #1a7a1a : #153a15;
            border-width: 1px;
            border-color: #1a7a1a;

            Text {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: parent.height;
                text: "Delivered";
                font-size: Typography.size-md;
                color: #ffffff;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            delivered-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    root.state-selected(root.serial-id, "Delivered", root.unassign-checked);
                }
            }
        }

        // Returned
        Rectangle {
            height: 40px;
            border-radius: 6px;
            background: returned-touch.has-hover ? #5a2a6a : #2d1535;
            border-width: 1px;
            border-color: #5a2a6a;

            Text {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: parent.height;
                text: "Returned";
                font-size: Typography.size-md;
                color: #ffffff;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            returned-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    root.state-selected(root.serial-id, "Returned", root.unassign-checked);
                }
            }
        }

        // Processing
        Rectangle {
            height: 40px;
            border-radius: 6px;
            background: processing-touch.has-hover ? #2a5a6a : #153040;
            border-width: 1px;
            border-color: #2a5a6a;

            Text {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: parent.height;
                text: "Processing";
                font-size: Typography.size-md;
                color: #ffffff;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            processing-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    root.state-selected(root.serial-id, "Processing", root.unassign-checked);
                }
            }
        }

        // Available
        Rectangle {
            height: 40px;
            border-radius: 6px;
            background: available-touch.has-hover ? #2d6b2d : #153015;
            border-width: 1px;
            border-color: #2d6b2d;

            Text {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: parent.height;
                text: "Available";
                font-size: Typography.size-md;
                color: #ffffff;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

            available-touch := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    root.state-selected(root.serial-id, "Available", root.unassign-checked);
                }
            }
        }

        // Unassign checkbox — only when show-unassign-option && is-assigned (D-18)
        if root.show-unassign-option && root.is-assigned : HorizontalLayout {
            spacing: 8px;
            alignment: start;
            height: 28px;

            Rectangle {
                width: 18px;
                height: 18px;
                y: 5px;
                border-radius: 3px;
                border-width: 1px;
                border-color: Colors.border-muted;
                background: root.unassign-checked ? Colors.accent : transparent;

                unassign-check-touch := TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.unassign-checked = !root.unassign-checked;
                    }
                }

                if root.unassign-checked : Text {
                    text: "•";
                    font-size: Typography.size-sm;
                    color: #ffffff;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
            }

            Text {
                text: "Also unassign from card";
                font-size: Typography.size-sm;
                color: Colors.text-secondary;
                vertical-alignment: center;
            }
        }

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

            Text {
                x: 0px;
                y: 0px;
                width: parent.width;
                height: parent.height;
                text: "Cancel";
                font-size: Typography.size-sm;
                color: Colors.text-muted;
                horizontal-alignment: center;
                vertical-alignment: center;
            }

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