export struct ChipData {
    label: string,
    selected: bool,
    chip-color: color,
    count: int,   // Card count for this chip (0 = hide pill)
}

export component ChipBar inherits Rectangle {
    in property <[ChipData]> chips;
    callback chip-toggled(int);

    height: 36px;
    background: #1a1e2a;

    Flickable {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        interactive: true;

        HorizontalLayout {
            padding-left: 8px;
            padding-right: 8px;
            padding-top: 5px;
            padding-bottom: 5px;
            spacing: 6px;
            alignment: start;

            for chip[idx] in root.chips : Rectangle {
                height: 26px;
                border-radius: 13px;
                background: chip.selected ? chip.chip-color : #2d3348;
                // Use a fixed 28px width for count pill area when count > 0 to avoid
                // forward-reference to id inside conditional block (Slint limitation)
                width: chip-text.preferred-width + (chip.count > 0 ? 28px + 22px : 20px);

                chip-text := Text {
                    x: 10px;
                    text: chip.label;
                    font-size: 11px;
                    color: chip.selected ? #ffffff : #8a92a8;
                    horizontal-alignment: left;
                    vertical-alignment: center;
                }

                // Count pill — only visible when count > 0
                if chip.count > 0 : Rectangle {
                    x: chip-text.x + chip-text.preferred-width + 5px;
                    y: 4px;
                    width: 28px;
                    height: 18px;
                    border-radius: 9px;
                    background: chip.selected ? #ffffff33 : #3a4060;

                    Text {
                        x: 4px;
                        width: 20px;
                        text: chip.count;
                        font-size: 9px;
                        color: chip.selected ? #ffffff : #6a7490;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }
                }

                TouchArea {
                    mouse-cursor: pointer;
                    clicked => {
                        root.chip-toggled(idx);
                    }
                }
            }
        }
    }
}