metabuilder/qml/components/core/CButton.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QmlComponents 1.0

/**
 * CButton.qml - Material Design 3 button component
 *
 * Variants:
 *   primary   - Filled button (pill, Theme.primary bg, white text)
 *   default   - Tonal button (pill, 12% primary tint bg)
 *   secondary - Tonal button (pill, 12% primary tint bg)
 *   ghost     - Outlined button (pill, border, transparent bg)
 *   outlined  - Outlined button (alias for ghost)
 *   text      - Text button (no border, no bg, colored text)
 *   danger    - Filled danger button (pill, Theme.error bg)
 */
Button {
    id: control

    property string variant: "default" // default, primary, secondary, ghost, outlined, danger, text
    property string size: "md" // sm, md, lg
    property string iconSource: ""
    property string iconText: ""
    property bool loading: false

    readonly property string _effectiveIcon: iconText || iconSource

    // MD3 sizing: sm=32, md=40, lg=48
    implicitHeight: {
        switch (size) {
            case "sm": return 32
            case "lg": return 48
            default: return 40
        }
    }

    implicitWidth: Math.max(implicitHeight, contentRow.implicitWidth + _paddingH * 2)

    readonly property int _paddingH: {
        switch (size) {
            case "sm": return 16
            case "lg": return 28
            default: return 24
        }
    }

    font.pixelSize: 14
    font.weight: Font.DemiBold

    // Resolve whether this variant is filled, outlined, tonal, or text
    readonly property bool _isFilled: variant === "primary" || variant === "danger"
    readonly property bool _isOutlined: variant === "ghost" || variant === "outlined"
    readonly property bool _isText: variant === "text"
    readonly property bool _isTonal: variant === "default" || variant === "secondary"

    // Base fill color (before state layers)
    readonly property color _baseFill: {
        if (variant === "primary") return Theme.primary
        if (variant === "danger") return Theme.error
        if (_isTonal) return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
        return "transparent" // ghost, outlined, text
    }

    // Foreground / text color
    readonly property color _foreground: {
        if (!enabled) return Theme.textDisabled
        if (variant === "primary") return "#ffffff"
        if (variant === "danger") return "#ffffff"
        return Theme.primary
    }

    opacity: enabled ? 1.0 : 0.38
    Behavior on opacity { NumberAnimation { duration: Theme.transitionShortest } }

    background: Rectangle {
        radius: control.height / 2

        // State layer: hover = 8% overlay, pressed = 12% overlay
        readonly property color _stateLayer: {
            if (control._isFilled) return "#ffffff" // white overlay on filled
            return Theme.primary                     // primary overlay on others
        }

        color: {
            if (!control.enabled) {
                if (control._isFilled) return Theme.surface
                return "transparent"
            }
            if (control.down) {
                if (control._isFilled)
                    return Qt.rgba(_stateLayer.r, _stateLayer.g, _stateLayer.b, 0.12)
                          // blend: we layer 12% on top of base
                          // For filled, darken slightly instead
                if (control._isTonal)
                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.22)
                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.12)
            }
            if (control.hovered) {
                if (control._isFilled)
                    return control._baseFill // overlay handled by stateOverlay
                if (control._isTonal)
                    return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.18)
                return Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
            }
            return control._baseFill
        }

        border.width: control._isOutlined ? 1 : 0
        border.color: control.enabled ? Theme.border : Theme.actionDisabled

        Behavior on color { ColorAnimation { duration: Theme.transitionShortest } }

        // State layer overlay for filled buttons (hover/press)
        Rectangle {
            anchors.fill: parent
            radius: parent.radius
            visible: control._isFilled && control.enabled && (control.hovered || control.down)
            color: control.variant === "danger" ? "#000000" : "#ffffff"
            opacity: control.down ? 0.12 : (control.hovered ? 0.08 : 0)

            Behavior on opacity { NumberAnimation { duration: Theme.transitionShortest } }
        }
    }

    contentItem: Item {
        implicitWidth: contentRow.implicitWidth
        implicitHeight: contentRow.implicitHeight

        RowLayout {
            id: contentRow
            anchors.centerIn: parent
            spacing: 8

            BusyIndicator {
                Layout.preferredWidth: 16
                Layout.preferredHeight: 16
                running: control.loading
                visible: control.loading
            }

            Text {
                visible: control._effectiveIcon !== "" && !control.loading
                text: control._effectiveIcon
                font.pixelSize: control.font.pixelSize
                color: control._foreground
            }

            Text {
                text: control.text
                font: control.font
                color: control._foreground
            }
        }
    }
}