// The approved A · Daybook: month context on the left, the selected day's
// schedule, persistent activity or grouped notification history on the right.

import QtQuick
import Quickshell
import qs.config
import qs.services
import qs.widgets

Item {
    id: root

    implicitWidth: 760
    implicitHeight: frame.implicitHeight + Theme.popoverPadding * 2

    function prepare(page: string): void {
        calendar.showToday();
        CalendarAgenda.selectDate(clock.date);
        CalendarAgenda.setVisibleMonth(clock.date.getFullYear(), clock.date.getMonth());
        if (page === "notifications")
            Notifs.markAllRead();
    }

    function reset(): void {
        notifications.reset();
    }

    SystemClock {
        id: clock
        precision: SystemClock.Minutes
    }

    Column {
        id: frame
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: Theme.popoverPadding
        spacing: 0

        Item {
            id: header
            width: parent.width
            height: 42

            Text {
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.right: dateMenuTabs.left
                anchors.rightMargin: Theme.itemSpacing
                anchors.verticalCenter: parent.verticalCenter
                text: Qt.formatDateTime(clock.date, "dddd, MMMM d")
                color: Theme.fg
                elide: Text.ElideRight
                font.family: Theme.fontFamily
                font.features: Theme.tabularFigures
                font.pixelSize: Theme.fontSizeTitle
                font.weight: Font.DemiBold
            }

            Row {
                id: dateMenuTabs
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                spacing: 6

                HeaderPill {
                    text: "Agenda"
                    active: ShellState.dateMenuPage === "agenda"
                    onClicked: ShellState.dateMenuPage = "agenda"
                }

                HeaderPill {
                    text: "Ongoing"
                    active: ShellState.dateMenuPage === "ongoing"
                    badge: Ongoing.count
                    onClicked: ShellState.dateMenuPage = "ongoing"
                }

                HeaderPill {
                    text: "Notifications"
                    active: ShellState.dateMenuPage === "notifications"
                    badge: Notifs.history.length
                    onClicked: ShellState.dateMenuPage = "notifications"
                }

                HeaderPill {
                    visible: ShellState.dateMenuPage === "agenda"
                    text: "Calendar  ↗"
                    onClicked: CalendarAgenda.openCalendar(CalendarAgenda.selectedDate)
                }
            }
        }

        Rectangle {
            width: parent.width
            height: 1
            border.width: 0
            color: Theme.alpha(Theme.fg, 0.10)
        }

        Row {
            id: body
            width: parent.width
            height: Math.min(620, Math.max(438, leftContent.implicitHeight + 28, rightContentHeight + 28))

            Item {
                id: leftColumn
                width: 310
                height: body.height

                Column {
                    id: leftContent
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 14
                    spacing: 12

                    CalendarGrid {
                        id: calendar
                        width: parent.width
                        selectedDate: CalendarAgenda.selectedDate
                        onDateActivated: date => CalendarAgenda.selectDate(date)
                        onVisibleMonthChanged: (year, month) => CalendarAgenda.setVisibleMonth(year, month)
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        border.width: 0
                        visible: media.visible || Weather.available
                        color: Theme.alpha(Theme.fg, 0.08)
                    }

                    MediaCard {
                        id: media
                        width: parent.width
                    }

                    WeatherCard {
                        width: parent.width
                        visible: Weather.available
                    }
                }
            }

            Rectangle {
                width: 1
                height: body.height
                border.width: 0
                color: Theme.alpha(Theme.fg, 0.10)
            }

            Item {
                id: rightColumn
                width: body.width - leftColumn.width - 1
                height: body.height

                readonly property real availableWidth: width - 28

                AgendaPane {
                    id: agenda
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 14
                    visible: ShellState.dateMenuPage === "agenda"
                }

                OngoingPane {
                    id: ongoingPane
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 14
                    maxHeight: body.height - 28
                    visible: ShellState.dateMenuPage === "ongoing"
                }

                Column {
                    id: notificationPane
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.margins: 14
                    spacing: 10
                    visible: ShellState.dateMenuPage === "notifications"

                    Item {
                        width: parent.width
                        height: 28

                        Text {
                            anchors.left: parent.left
                            anchors.right: notificationActions.left
                            anchors.rightMargin: 8
                            anchors.verticalCenter: parent.verticalCenter
                            text: "Notifications"
                            color: Theme.fg
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeLarge
                            font.weight: Font.DemiBold
                        }

                        Row {
                            id: notificationActions
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            spacing: 6

                            HeaderPill {
                                text: "Do Not Disturb"
                                active: Notifs.doNotDisturb
                                icon: "notifications-disabled-symbolic"
                                onClicked: Notifs.doNotDisturb = !Notifs.doNotDisturb
                            }

                            HeaderPill {
                                visible: Notifs.hasNotifications
                                text: "Clear all"
                                onClicked: Notifs.dismissAll()
                            }
                        }
                    }

                    NotificationList {
                        id: notifications
                        width: parent.width
                        maxHeight: body.height - 76
                    }
                }
            }
        }
    }

    readonly property real rightContentHeight: {
        if (ShellState.dateMenuPage === "notifications")
            return notificationPane.implicitHeight;
        if (ShellState.dateMenuPage === "ongoing")
            return ongoingPane.implicitHeight;
        return agenda.implicitHeight;
    }
    readonly property bool ongoingContentFits: ongoingPane.implicitHeight <= body.height - 28

    component HeaderPill: Rectangle {
        id: pill

        required property string text
        property string icon: ""
        property bool active: false
        property int badge: -1
        signal clicked

        width: pillRow.implicitWidth + 20
        height: 28
        radius: Theme.pillRadius
        border.width: 0
        color: {
            if (pill.active)
                return pillMouse.containsMouse ? Theme.alpha(Theme.accent, 0.38) : Theme.alpha(Theme.accent, 0.24);
            return pillMouse.containsMouse ? Theme.alpha(Theme.fg, 0.15) : Theme.alpha(Theme.fg, 0.07);
        }

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

        Row {
            id: pillRow
            anchors.centerIn: parent
            spacing: 6

            ThemedIcon {
                anchors.verticalCenter: parent.verticalCenter
                visible: pill.icon !== ""
                size: visible ? 14 : 0
                icon: pill.icon
                tint: pill.active ? Theme.accent : Theme.fgDim
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                text: pill.text
                color: pill.active ? Theme.accent : Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.weight: Font.Medium
            }

            Rectangle {
                anchors.verticalCenter: parent.verticalCenter
                visible: pill.badge > 0
                width: visible ? badgeText.implicitWidth + 9 : 0
                height: 17
                radius: Theme.pillRadius
                border.width: 0
                color: Theme.alpha(pill.active ? Theme.accent : Theme.fg, 0.12)

                Text {
                    id: badgeText
                    anchors.centerIn: parent
                    text: String(pill.badge)
                    color: pill.active ? Theme.accent : Theme.fgDim
                    font.family: Theme.fontFamily
                    font.features: Theme.tabularFigures
                    font.pixelSize: 9
                    font.weight: Font.DemiBold
                }
            }
        }

        MouseArea {
            id: pillMouse
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: Qt.PointingHandCursor
            onClicked: pill.clicked()
        }
    }
}