import QtQuick 2.15
import QtGraphicalEffects 1.15

Item {
    id: cardRoot
    width: 300
    height: 200

    property alias content: contentItem.data
    property real elevation: 8
    property real hoverScale: 1.05
    property real pressedScale: 0.95
    property bool isDarkMode: false
    property color cardColor: isDarkMode ? "#2d2d2d" : "#f5f5f5"
    property color shadowColor: isDarkMode ? "#20ffffff" : "#40000000"
    property color pressedColor: isDarkMode ? "#20ffffff" : "#40000000"
    property var onHoverEnter: undefined
    property var onHoverExit: undefined
    property var onClicked: undefined

    DropShadow {
        id: shadow
        anchors.fill: card
        source: card
        horizontalOffset: 0
        verticalOffset: elevation
        samples: 16
        color: shadowColor
        scale: card.scale
    }

    Rectangle {
        id: card
        anchors.fill: parent
        radius: 8
        color: cardColor
        antialiasing: true

        // 按压覆盖层
        Rectangle {
            anchors.fill: parent
            radius: parent.radius
            color: pressedColor
            opacity: mouseArea.pressed ? 0.4 : 0
            Behavior on opacity { NumberAnimation { duration: 100 } }
        }

        Item {
            id: contentItem
            anchors.fill: parent
            anchors.margins: 16
        }

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                cardRoot.z = 999
                if (typeof onHoverEnter === "function") Qt.callLater(onHoverEnter)
            }
            onExited: {
                cardRoot.z = 0
                if (typeof onHoverExit === "function") Qt.callLater(onHoverExit)
            }
            onClicked: {
                if (typeof cardRoot.onClicked === "function") Qt.callLater(cardRoot.onClicked)
            }
        }

        states: [
            State {
                name: "hovered"
                when: mouseArea.containsMouse && !mouseArea.pressed
                PropertyChanges {
                    target: card
                    scale: hoverScale
                }
            },
            State {
                name: "pressed"
                when: mouseArea.pressed
                PropertyChanges {
                    target: card
                    scale: pressedScale
                }
            }
        ]

        transitions: Transition {
            PropertyAnimation {
                properties: "scale"
                duration: 200
                easing.type: Easing.OutQuad
            }
        }
    }
}