import QtQuick
import "../services" as S
import NovaStats as NS

// Collapsible card for the applet dock.
// Set icon, title, and place applet content as children.
Rectangle {
    id: root

    property string icon: ""
    property string title: ""
    property bool expanded: false
    property color accentColor: NS.ThemeService.base0C

    default property alias content: _contentColumn.children

    width: parent?.width ?? 300
    height: _header.height + (_contentColumn.visible ? _contentColumn.height : 0)
    radius: NS.ThemeService.radius + 2
    color: Qt.rgba(NS.ThemeService.base01.r, NS.ThemeService.base01.g, NS.ThemeService.base01.b, 0.7)
    border.color: Qt.rgba(NS.ThemeService.base03.r, NS.ThemeService.base03.g, NS.ThemeService.base03.b, 0.3)
    border.width: 1
    clip: true

    Behavior on height {
        enabled: !S.ThemeUtil.reducedMotion
        NumberAnimation {
            duration: 150
            easing.type: Easing.OutCubic
        }
    }

    // Header
    Item {
        id: _header
        width: parent.width
        height: 28

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: root.icon
            color: root.accentColor
            font.pixelSize: NS.ThemeService.fontSize
            font.family: NS.ThemeService.iconFontFamily
        }

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 30
            anchors.verticalCenter: parent.verticalCenter
            text: root.title
            color: NS.ThemeService.base05
            font.pixelSize: NS.ThemeService.fontSize - 1
            font.bold: true
            font.family: NS.ThemeService.fontFamily
        }

        Text {
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            text: root.expanded ? "\uF078" : "\uF054"
            color: NS.ThemeService.base04
            font.pixelSize: NS.ThemeService.fontSize - 2
            font.family: NS.ThemeService.iconFontFamily

            Behavior on text {
                enabled: false
            }
        }

        HoverHandler {
            cursorShape: Qt.PointingHandCursor
        }

        TapHandler {
            onTapped: root.expanded = !root.expanded
        }

        // Divider
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: 1
            color: NS.ThemeService.base03
            opacity: root.expanded ? 0.5 : 0
        }
    }

    // Content area - expanded propagated so children can bind `active: parent.expanded`
    Column {
        id: _contentColumn
        property bool expanded: root.expanded
        anchors.top: _header.bottom
        anchors.topMargin: 4
        width: parent.width
        visible: root.expanded
    }
}