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

export component SearchBar inherits Rectangle {
    in-out property <string> search-text;
    in property <int> result-count: 0;
    out property <bool> input-has-focus: search-input.has-focus;
    callback text-changed(string);

    public function focus-input() {
        search-input.focus();
    }

    public function focus-and-set-cursor-end() {
        search-input.focus();
        // Position cursor at end of text with no selection;
        // large offset is clamped to text length by Slint
        search-input.set-selection-offsets(2147483647, 2147483647);
    }

    public function remove-focus() {
        // Move focus away from TextInput to the defocus scope
        defocus-scope.focus();
    }

    height: 32px;
    border-radius: 16px;
    background: Colors.surface;
    border-width: 1px;
    border-color: search-input.has-focus ? Colors.accent : Colors.border-default;

    // Hidden FocusScope to receive focus when defocusing the TextInput
    defocus-scope := FocusScope {
        x: 0px;
        y: 0px;
        width: 0px;
        height: 0px;
    }

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

        // Search icon placeholder
        Text {
            text: "\u{1F50D}";
            font-size: Typography.size-md;
            color: Colors.text-muted;
            vertical-alignment: center;
            width: 20px;
        }

        search-input := TextInput {
            text <=> root.search-text;
            font-size: Typography.size-md;
            color: Colors.text-primary;
            vertical-alignment: center;
            horizontal-alignment: left;
            edited => {
                root.text-changed(self.text);
            }
        }

        // Result count badge (shown only when search text is non-empty)
        if root.search-text != "" : Text {
            text: root.result-count == 1 ? "1 result" : "\{root.result-count} results";
            font-size: Typography.size-xs;
            color: Colors.text-muted;
            vertical-alignment: center;
            horizontal-alignment: right;
            width: 80px;
        }
    }

    // Placeholder overlay — absolute positioned so it doesn't steal layout space
    // TouchArea forwards clicks to focus the TextInput
    if root.search-text == "" && !search-input.has-focus : Rectangle {
        x: 40px;
        y: 0px;
        width: root.width - 52px;
        height: root.height;

        Text {
            text: "Search by name or item...";
            font-size: Typography.size-md;
            color: Colors.text-muted;
            vertical-alignment: center;
            horizontal-alignment: center;
        }

        TouchArea {
            mouse-cursor: text;
            clicked => {
                search-input.focus();
            }
        }
    }
}