// Persistent work and privacy activity inside the Daybook.

import QtQuick
import qs.config
import qs.services
import qs.modules.quicksettings

Item {
    id: root

    property real maxHeight: 500
    implicitHeight: content.implicitHeight

    Column {
        id: content
        width: parent.width
        spacing: 12

        Item {
            width: parent.width
            height: 38

            Column {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 2

                Text {
                    text: "PERSISTENT ACTIVITY"
                    color: Theme.fgMuted
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.DemiBold
                    font.letterSpacing: 0.9
                }
                Text {
                    text: "Ongoing"
                    color: Theme.fg
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeLarge
                    font.weight: Font.DemiBold
                }
            }

            Text {
                anchors.right: parent.right
                anchors.bottom: parent.bottom
                text: Ongoing.count === 0 ? "Nothing active" : Ongoing.count + (Ongoing.count === 1 ? " activity" : " activities")
                color: Theme.fgDim
                font.family: Theme.fontFamily
                font.features: Theme.tabularFigures
                font.pixelSize: Theme.fontSizeSmall
            }
        }

        Item {
            width: parent.width
            height: visible ? 190 : 0
            visible: Ongoing.count === 0

            Column {
                anchors.centerIn: parent
                spacing: 8

                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "\u{F04A5}"
                    color: Theme.fgMuted
                    font.family: Theme.fontMono
                    font.pixelSize: 24
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "Nothing ongoing"
                    color: Theme.fg
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSize
                    font.weight: Font.DemiBold
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: "Focus, Caffeine, recording and privacy activity appear here."
                    color: Theme.fgDim
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                }
            }
        }

        ScrollColumn {
            width: parent.width
            // Header + footer + the two 12px Column gaps consume 116px.
            // Keeping that outside the scroll budget prevents the pane from
            // growing beyond the Daybook when every producer is active.
            maxHeight: Math.max(0, root.maxHeight - 116)
            spacing: 8
            visible: Ongoing.count > 0

            Repeater {
                model: Ongoing.activities

                Rectangle {
                    id: activityRow
                    required property var modelData

                    width: parent.width
                    height: 62
                    radius: Theme.cardRadius
                    border.width: 0
                    color: rowMouse.containsMouse
                        ? Theme.alpha(Theme.fg, 0.10)
                        : Theme.alpha(Theme.fg, 0.055)

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

                    Text {
                        id: activityIcon
                        anchors.left: parent.left
                        anchors.leftMargin: 13
                        anchors.verticalCenter: parent.verticalCenter
                        text: activityRow.modelData.glyph
                        color: root.toneColor(activityRow.modelData.tone)
                        font.family: Theme.fontMono
                        font.pixelSize: 17
                    }

                    Column {
                        anchors.left: activityIcon.right
                        anchors.leftMargin: 11
                        anchors.right: activityAction.visible ? activityAction.left : activityState.left
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        spacing: 3

                        Text {
                            width: parent.width
                            text: activityRow.modelData.label
                            color: Theme.fg
                            elide: Text.ElideRight
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSize
                            font.weight: Font.DemiBold
                        }
                        Text {
                            width: parent.width
                            text: activityRow.modelData.detail
                            color: Theme.fgDim
                            elide: Text.ElideRight
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeSmall
                        }
                    }

                    Rectangle {
                        id: activityState
                        anchors.right: activityAction.visible ? activityAction.left : parent.right
                        anchors.rightMargin: activityAction.visible ? 7 : 12
                        anchors.verticalCenter: parent.verticalCenter
                        width: stateLabel.implicitWidth + 16
                        height: 25
                        radius: Theme.pillRadius
                        border.width: 0
                        color: Theme.alpha(root.toneColor(activityRow.modelData.tone), 0.12)

                        Text {
                            id: stateLabel
                            anchors.centerIn: parent
                            text: activityRow.modelData.state
                            color: root.toneColor(activityRow.modelData.tone)
                            font.family: Theme.fontFamily
                            font.features: Theme.tabularFigures
                            font.pixelSize: Theme.fontSizeSmall
                            font.weight: Font.DemiBold
                        }
                    }

                    Rectangle {
                        id: activityAction
                        z: 2
                        anchors.right: parent.right
                        anchors.rightMargin: 9
                        anchors.verticalCenter: parent.verticalCenter
                        visible: activityRow.modelData.action !== ""
                        width: visible ? actionLabel.implicitWidth + 18 : 0
                        height: 28
                        radius: Theme.pillRadius
                        border.width: 0
                        color: actionMouse.containsMouse
                            ? Theme.alpha(activityRow.modelData.tone === "danger" ? Theme.danger : Theme.fg, 0.20)
                            : Theme.alpha(activityRow.modelData.tone === "danger" ? Theme.danger : Theme.fg, 0.08)

                        Text {
                            id: actionLabel
                            anchors.centerIn: parent
                            text: activityRow.modelData.action
                            color: activityRow.modelData.tone === "danger" ? Theme.danger : Theme.fg
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeSmall
                            font.weight: Font.Medium
                        }

                        MouseArea {
                            id: actionMouse
                            anchors.fill: parent
                            hoverEnabled: true
                            cursorShape: Qt.PointingHandCursor
                            onClicked: Ongoing.invoke(activityRow.modelData.kind)
                        }
                    }

                    MouseArea {
                        id: rowMouse
                        anchors.fill: parent
                        z: 1
                        enabled: activityRow.modelData.kind !== "caffeine"
                        hoverEnabled: enabled
                        cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
                        onClicked: Ongoing.activate(activityRow.modelData.kind)
                    }
                }
            }
        }

        Rectangle {
            width: parent.width
            height: 54
            radius: Theme.cardRadius
            border.width: 0
            visible: Ongoing.count > 0
            color: Theme.alpha(Theme.fg, 0.035)

            Column {
                anchors.left: parent.left
                anchors.leftMargin: 13
                anchors.verticalCenter: parent.verticalCenter
                spacing: 3
                Text {
                    text: "Visible until it ends"
                    color: Theme.fg
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.DemiBold
                }
                Text {
                    text: "Completed screenshots, devices and other brief events stay in Signal Glass."
                    color: Theme.fgDim
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                }
            }
        }
    }

    function toneColor(tone: string): color {
        if (tone === "danger")
            return Theme.danger;
        if (tone === "warn")
            return Theme.warn;
        if (tone === "ok")
            return Theme.ok;
        return Theme.accent;
    }
}