import QtQuick
import Quickshell
import "." as M

M.HoverPanel {
    id: menuWindow

    popupMode: true
    contentWidth: 350

    // Header: title + clear all + DND toggle
    Item {
        width: menuWindow.contentWidth
        height: 32

        Text {
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.verticalCenter: parent.verticalCenter
            text: "Notifications"
            color: M.Theme.base05
            font.pixelSize: M.Theme.fontSize + 1
            font.family: M.Theme.fontFamily
            font.bold: true
        }

        Row {
            anchors.right: parent.right
            anchors.rightMargin: 8
            anchors.verticalCenter: parent.verticalCenter
            spacing: 8

            // DND toggle
            Text {
                text: M.NotifService.dnd ? "\uDB82\uDE93" : "\uDB80\uDC9C"
                color: M.NotifService.dnd ? M.Theme.base09 : M.Theme.base04
                font.pixelSize: M.Theme.fontSize
                font.family: M.Theme.iconFontFamily
                anchors.verticalCenter: parent.verticalCenter

                MouseArea {
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: M.NotifService.toggleDnd()
                }
            }

            // Clear all
            Text {
                text: "\uF1F8"
                color: clearArea.containsMouse ? M.Theme.base08 : M.Theme.base04
                font.pixelSize: M.Theme.fontSize
                font.family: M.Theme.iconFontFamily
                anchors.verticalCenter: parent.verticalCenter
                visible: M.NotifService.count > 0

                MouseArea {
                    id: clearArea
                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: menuWindow._cascadeDismiss()
                }
            }
        }
    }

    property var _pendingDismissIds: []

    // Collapsed groups set — reassign to trigger reactivity
    property var _collapsedGroups: ({})

    property real _savedScrollY: 0
    property bool _restoringScroll: false

    function _toggleCollapse(appName) {
        _savedScrollY = notifList.contentY;
        _restoringScroll = true;
        const next = Object.assign({}, _collapsedGroups);
        if (next[appName])
            delete next[appName];
        else
            next[appName] = true;
        _collapsedGroups = next;
    }

    // Group notifications by appName, sorted by max urgency desc then most recent time desc
    readonly property var _groups: {
        const map = {};
        for (const n of M.NotifService.list) {
            const key = n.appName || "";
            if (!map[key])
                map[key] = {
                    appName: key,
                    appIcon: n.appIcon,
                    notifs: [],
                    maxUrgency: 0,
                    maxTime: 0
                };
            map[key].notifs.push(n);
            if (n.urgency > map[key].maxUrgency)
                map[key].maxUrgency = n.urgency;
            if (n.time > map[key].maxTime)
                map[key].maxTime = n.time;
        }
        return Object.values(map).sort((a, b) => {
            if (b.maxUrgency !== a.maxUrgency)
                return b.maxUrgency - a.maxUrgency;
            return b.maxTime - a.maxTime;
        });
    }

    // Flat model: group header followed by its notifications (omitted when collapsed)
    readonly property var _flatModel: {
        const arr = [];
        for (const g of _groups) {
            const collapsed = !!_collapsedGroups[g.appName];
            arr.push({
                type: "header",
                appName: g.appName,
                appIcon: g.appIcon,
                count: g.notifs.length,
                collapsed: collapsed,
                summaries: g.notifs.map(n => n.summary || "")
            });
            if (!collapsed) {
                for (const n of g.notifs)
                    arr.push({
                        type: "notif",
                        data: n
                    });
            }
        }
        return arr;
    }

    // Collect visible (non-dismissing) notif delegates, optionally filtered by appName
    function _getVisibleNotifDelegates(appName) {
        const result = [];
        for (let i = 0; i < _flatModel.length; i++) {
            const item = _flatModel[i];
            if (item.type !== "notif")
                continue;
            if (appName !== undefined && item.data.appName !== appName)
                continue;
            const d = notifList.itemAtIndex(i);
            if (d && d._type === "notif" && d._notif?.state !== "dismissing")
                result.push(d);
        }
        return result;
    }

    function _startCascade(visibles, ids) {
        _pendingDismissIds = ids;
        if (visibles.length === 0) {
            _finishCascade();
            return;
        }
        for (let i = 0; i < visibles.length; i++) {
            _cascadeTimer.createObject(menuWindow, {
                _target: visibles[i],
                _delay: i * 60,
                _isLast: i === visibles.length - 1
            });
        }
    }

    function _cascadeDismiss() {
        if (M.NotifService.list.length === 0)
            return;
        const ids = M.NotifService.list.map(n => n.id);
        _startCascade(_getVisibleNotifDelegates(), ids);
    }

    function _cascadeGroupDismiss(appName) {
        const ids = M.NotifService.list.filter(n => n.appName === appName).map(n => n.id);
        if (ids.length === 0)
            return;
        _startCascade(_getVisibleNotifDelegates(appName), ids);
    }

    function _finishCascade() {
        const ids = _pendingDismissIds;
        _pendingDismissIds = [];
        for (const id of ids)
            M.NotifService.dismiss(id);
    }

    property Component _cascadeTimer: Component {
        Timer {
            property var _target
            property int _delay
            property bool _isLast
            interval: _delay
            running: true
            onTriggered: {
                if (_target && _target.dismissVisualOnly)
                    _target.dismissVisualOnly();
                if (_isLast)
                    _bulkTimer.createObject(menuWindow, {});
                destroy();
            }
        }
    }

    property Component _bulkTimer: Component {
        Timer {
            interval: 400 // swipe (200) + collapse (150) + margin
            running: true
            onTriggered: {
                menuWindow._finishCascade();
                destroy();
            }
        }
    }

    // Separator
    Rectangle {
        width: menuWindow.contentWidth - 16
        height: 1
        anchors.horizontalCenter: parent.horizontalCenter
        color: M.Theme.base03
    }

    // Notification list (scrollable)
    ListView {
        id: notifList
        width: menuWindow.contentWidth
        height: Math.min(contentHeight, 60 * (M.Modules.notifications.maxVisible || 10))
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        model: menuWindow._flatModel

        onContentHeightChanged: {
            if (menuWindow._restoringScroll) {
                contentY = Math.min(menuWindow._savedScrollY, Math.max(0, contentHeight - height));
                menuWindow._restoringScroll = false;
            }
        }

        delegate: Item {
            id: notifDelegate
            required property var modelData
            required property int index

            readonly property string _type: modelData.type
            readonly property var _notif: _type === "notif" ? modelData.data : null

            width: menuWindow.contentWidth
            height: _displayTargetHeight * _heightScale
            clip: true
            opacity: 0

            readonly property real _targetHeight: {
                if (_type === "header")
                    return modelData.collapsed ? (28 + modelData.count * (M.Theme.fontSize + 4)) : 28;
                return _notifCard.implicitHeight;
            }

            // Animated version of _targetHeight — smoothly transitions header height on collapse
            property real _displayTargetHeight: _targetHeight
            Behavior on _displayTargetHeight {
                NumberAnimation {
                    duration: 150
                    easing.type: Easing.OutCubic
                }
            }

            property real _heightScale: 1
            property bool _skipDismiss: false

            function dismiss() {
                if (_type !== "notif" || _notif.state === "dismissing")
                    return;
                _notif.beginDismiss();
                _dismissAnim.start();
            }

            function dismissVisualOnly() {
                if (_type !== "notif" || _notif.state === "dismissing")
                    return;
                _notif.beginDismiss();
                _skipDismiss = true;
                _dismissAnim.start();
            }

            Component.onCompleted: fadeIn.start()

            NumberAnimation {
                id: fadeIn
                target: notifDelegate
                property: "opacity"
                to: 1
                duration: 150
                easing.type: Easing.OutCubic
            }

            // ---- Group header ----
            Item {
                visible: notifDelegate._type === "header"
                anchors.fill: parent

                HoverHandler {
                    id: _headerHover
                }

                // Tap target for collapse — covers header row only, excludes dismiss button
                Item {
                    anchors.left: parent.left
                    anchors.right: _groupDismissBtn.left
                    anchors.top: parent.top
                    height: 28

                    TapHandler {
                        cursorShape: Qt.PointingHandCursor
                        onTapped: menuWindow._toggleCollapse(notifDelegate.modelData.appName)
                    }
                }

                Image {
                    id: _headerIcon
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.top: parent.top
                    anchors.topMargin: (28 - height) / 2
                    width: M.Theme.fontSize + 2
                    height: M.Theme.fontSize + 2
                    source: {
                        if (notifDelegate._type !== "header")
                            return "";
                        const ic = notifDelegate.modelData.appIcon;
                        if (!ic)
                            return "";
                        return (ic.startsWith("/") || ic.startsWith("file://")) ? ic : Quickshell.iconPath(ic, "dialog-information");
                    }
                    visible: status === Image.Ready
                    fillMode: Image.PreserveAspectFit
                    sourceSize: Qt.size(M.Theme.fontSize + 2, M.Theme.fontSize + 2)
                    asynchronous: true
                }

                // Collapse chevron
                Text {
                    id: _chevron
                    anchors.right: _groupDismissBtn.left
                    anchors.rightMargin: 8
                    anchors.top: parent.top
                    height: 28
                    verticalAlignment: Text.AlignVCenter
                    text: notifDelegate._type === "header" && notifDelegate.modelData.collapsed ? "\u25B8" : "\u25BE"
                    color: M.Theme.base04
                    font.pixelSize: M.Theme.fontSize - 2
                    font.family: M.Theme.fontFamily
                    opacity: _headerHover.hovered ? 1 : 0
                }

                // App name
                Text {
                    anchors.left: _headerIcon.visible ? _headerIcon.right : parent.left
                    anchors.leftMargin: _headerIcon.visible ? 6 : 10
                    anchors.right: _chevron.left
                    anchors.rightMargin: 4
                    anchors.top: parent.top
                    height: 28
                    verticalAlignment: Text.AlignVCenter
                    text: notifDelegate._type === "header" ? (notifDelegate.modelData.appName || "Unknown") : ""
                    color: M.Theme.base05
                    font.pixelSize: M.Theme.fontSize - 1
                    font.family: M.Theme.fontFamily
                    font.bold: true
                    elide: Text.ElideRight
                }

                // Dismiss button — opacity-hidden when header not hovered
                Text {
                    id: _groupDismissBtn
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.top: parent.top
                    height: 28
                    verticalAlignment: Text.AlignVCenter
                    text: "\uF1F8"
                    color: _groupDismissHover.hovered ? M.Theme.base08 : M.Theme.base04
                    font.pixelSize: M.Theme.fontSize - 1
                    font.family: M.Theme.iconFontFamily
                    opacity: _headerHover.hovered ? 1 : 0

                    HoverHandler {
                        id: _groupDismissHover
                    }

                    TapHandler {
                        cursorShape: Qt.PointingHandCursor
                        onTapped: {
                            if (notifDelegate._type === "header")
                                menuWindow._cascadeGroupDismiss(notifDelegate.modelData.appName);
                        }
                    }
                }

                // Collapsed preview: one line per notification summary
                Repeater {
                    model: (notifDelegate._type === "header" && notifDelegate.modelData.collapsed) ? notifDelegate.modelData.summaries : []

                    Text {
                        required property string modelData
                        required property int index
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        y: 28 + index * (M.Theme.fontSize + 4)
                        height: M.Theme.fontSize + 4
                        verticalAlignment: Text.AlignVCenter
                        text: modelData
                        elide: Text.ElideRight
                        font.pixelSize: M.Theme.fontSize - 2
                        font.family: M.Theme.fontFamily
                        color: M.Theme.base04
                    }
                }
            }

            // ---- Individual notification ----

            M.NotifCard {
                id: _notifCard
                visible: notifDelegate._type === "notif"
                anchors.fill: parent
                anchors.leftMargin: 8
                notif: notifDelegate._notif
                showAppName: false
                dismissOnAction: false
                iconSize: 24
                bodyMaxLines: 2
                onDismissRequested: notifDelegate.dismiss()
            }

            SequentialAnimation {
                id: _dismissAnim
                ParallelAnimation {
                    NumberAnimation {
                        target: notifDelegate
                        property: "x"
                        to: menuWindow.contentWidth
                        duration: 200
                        easing.type: Easing.InCubic
                    }
                    NumberAnimation {
                        target: notifDelegate
                        property: "opacity"
                        to: 0
                        duration: 200
                        easing.type: Easing.InCubic
                    }
                }
                NumberAnimation {
                    target: notifDelegate
                    property: "_heightScale"
                    to: 0
                    duration: 150
                    easing.type: Easing.OutCubic
                }
                ScriptAction {
                    script: {
                        if (notifDelegate._notif && !notifDelegate._skipDismiss)
                            M.NotifService.dismiss(notifDelegate._notif.id);
                    }
                }
            }
        }
    }

    // Empty state
    Text {
        visible: M.NotifService.count === 0
        width: menuWindow.contentWidth
        height: 48
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        text: "No notifications"
        color: M.Theme.base04
        font.pixelSize: M.Theme.fontSize
        font.family: M.Theme.fontFamily
    }
}