noctalia-shell/Modules/Bar/Calendar/CalendarPanel.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import Quickshell.Wayland
import qs.Commons
import qs.Modules.ControlCenter.Cards
import qs.Services
import qs.Widgets

NPanel {
  id: root

  property ShellScreen screen
  readonly property var now: Time.date

  preferredWidth: (Settings.data.location.showWeekNumberInCalendar ? 400 : 380) * Style.uiScaleRatio
  preferredHeight: (Settings.data.location.weatherEnabled && Settings.data.location.showCalendarWeather ? 600 : 420) * Style.uiScaleRatio
  panelKeyboardFocus: true

  // Helper function to calculate ISO week number
  function getISOWeekNumber(date) {
    const target = new Date(date.valueOf())
    const dayNr = (date.getDay() + 6) % 7
    target.setDate(target.getDate() - dayNr + 3)
    const firstThursday = new Date(target.getFullYear(), 0, 4)
    const diff = target - firstThursday
    const oneWeek = 1000 * 60 * 60 * 24 * 7
    const weekNumber = 1 + Math.round(diff / oneWeek)
    return weekNumber
  }

  panelContent: ColumnLayout {
    id: content
    anchors.fill: parent
    anchors.margins: Style.marginL
    spacing: Style.marginM

    readonly property int firstDayOfWeek: Qt.locale().firstDayOfWeek
    property bool isCurrentMonth: checkIsCurrentMonth()
    readonly property bool weatherReady: Settings.data.location.weatherEnabled && (LocationService.data.weather !== null)

    function checkIsCurrentMonth() {
      return (Time.date.getMonth() === grid.month) && (Time.date.getFullYear() === grid.year)
    }

    Shortcut {
      sequence: "Escape"
      onActivated: {
        if (timerActive) {
          cancelTimer()
        } else {
          cancelTimer()
          root.close()
        }
      }
      context: Qt.WidgetShortcut
      enabled: root.opened
    }

    Connections {
      target: Time
      function onDateChanged() {
        isCurrentMonth = checkIsCurrentMonth()
      }
    }

    // Banner with date/time/clock
    Rectangle {
      Layout.fillWidth: true
      Layout.preferredHeight: capsuleColumn.implicitHeight + Style.marginS * 2
      Layout.bottomMargin: Style.marginM
      radius: Style.radiusL
      color: Color.mPrimary

      ColumnLayout {
        id: capsuleColumn
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.bottom: parent.bottom

        anchors.topMargin: Style.marginS
        anchors.bottomMargin: Style.marginS
        anchors.rightMargin: clockLoader.width + (Style.marginL * 2)
        anchors.leftMargin: Style.marginL

        spacing: 0

        // Combined layout for weather icon, date, and weather text
        RowLayout {
          Layout.fillWidth: true
          height: 60 * Style.uiScaleRatio
          clip: true
          spacing: Style.marginS

          // Today day number - with simple, stable animation
          NText {
            opacity: content.isCurrentMonth ? 1.0 : 0.0
            Layout.preferredWidth: content.isCurrentMonth ? implicitWidth : 0
            elide: Text.ElideNone
            clip: true

            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
            text: Time.date.getDate()
            pointSize: Style.fontSizeXXXL * 1.5
            font.weight: Style.fontWeightBold
            color: Color.mOnPrimary

            Behavior on opacity {
              NumberAnimation {
                duration: Style.animationFast
              }
            }
            Behavior on Layout.preferredWidth {
              NumberAnimation {
                duration: Style.animationFast
                easing.type: Easing.InOutQuad
              }
            }
          }

          // Month, year, location
          ColumnLayout {
            Layout.preferredWidth: 170 * Style.uiScaleRatio
            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
            Layout.bottomMargin: Style.marginXXS
            Layout.topMargin: -Style.marginXXS
            spacing: -Style.marginXS

            RowLayout {
              spacing: 0

              NText {
                text: Qt.locale().monthName(grid.month, Locale.LongFormat).toUpperCase()
                pointSize: Style.fontSizeXL * 1.1
                font.weight: Style.fontWeightBold
                color: Color.mOnPrimary
                Layout.alignment: Qt.AlignBaseline
                elide: Text.ElideRight
              }

              NText {
                text: ` ${grid.year}`
                pointSize: Style.fontSizeM
                font.weight: Style.fontWeightBold
                color: Qt.alpha(Color.mOnPrimary, 0.7)
                Layout.alignment: Qt.AlignBaseline
              }
            }

            RowLayout {
              spacing: 0

              NText {
                text: {
                  if (!Settings.data.location.weatherEnabled)
                    return ""
                  if (!weatherReady)
                    return I18n.tr("calendar.weather.loading")
                  const chunks = Settings.data.location.name.split(",")
                  return chunks[0]
                }
                pointSize: Style.fontSizeM
                font.weight: Style.fontWeightMedium
                color: Color.mOnPrimary
                Layout.maximumWidth: 150
                elide: Text.ElideRight
              }

              NText {
                text: weatherReady ? ` (${LocationService.data.weather.timezone_abbreviation})` : ""
                pointSize: Style.fontSizeXS
                font.weight: Style.fontWeightMedium
                color: Qt.alpha(Color.mOnPrimary, 0.7)
              }
            }
          }

          // Spacer to push content left
          Item {
            Layout.fillWidth: true
          }
        }
      }

      // Analog clock
      ClockLoader {
        id: clockLoader
        anchors.right: parent.right
        anchors.rightMargin: Style.marginM
        anchors.verticalCenter: parent.verticalCenter
        progressColor: Color.mOnPrimary
        Layout.alignment: Qt.AlignVCenter
        now: root.now
      }
    }

    RowLayout {
      Layout.fillWidth: true
      spacing: Style.marginS
      NDivider {
        Layout.fillWidth: true
      }
      NIconButton {
        icon: "chevron-left"
        onClicked: {
          let newDate = new Date(grid.year, grid.month - 1, 1)
          grid.year = newDate.getFullYear()
          grid.month = newDate.getMonth()
          content.isCurrentMonth = content.checkIsCurrentMonth()
          const now = new Date()
          const monthStart = new Date(grid.year, grid.month, 1)
          const monthEnd = new Date(grid.year, grid.month + 1, 0)

          const daysBehind = Math.max(0, Math.ceil((now - monthStart) / (24 * 60 * 60 * 1000)))
          const daysAhead = Math.max(0, Math.ceil((monthEnd - now) / (24 * 60 * 60 * 1000)))

          CalendarService.loadEvents(daysAhead + 30, daysBehind + 30)
        }
      }
      NIconButton {
        icon: "calendar"
        onClicked: {
          grid.month = Time.date.getMonth()
          grid.year = Time.date.getFullYear()
          content.isCurrentMonth = true
          CalendarService.loadEvents()
        }
      }
      NIconButton {
        icon: "chevron-right"
        onClicked: {
          let newDate = new Date(grid.year, grid.month + 1, 1)
          grid.year = newDate.getFullYear()
          grid.month = newDate.getMonth()
          content.isCurrentMonth = content.checkIsCurrentMonth()
          const now = new Date()
          const monthStart = new Date(grid.year, grid.month, 1)
          const monthEnd = new Date(grid.year, grid.month + 1, 0)

          const daysBehind = Math.max(0, Math.ceil((now - monthStart) / (24 * 60 * 60 * 1000)))
          const daysAhead = Math.max(0, Math.ceil((monthEnd - now) / (24 * 60 * 60 * 1000)))

          CalendarService.loadEvents(daysAhead + 30, daysBehind + 30)
        }
      }
    }
    RowLayout {
      Layout.fillWidth: true
      spacing: 0
      Item {
        visible: Settings.data.location.showWeekNumberInCalendar
        Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
      }
      GridLayout {
        Layout.fillWidth: true
        columns: 7
        rows: 1
        columnSpacing: 0
        rowSpacing: 0
        Repeater {
          model: 7
          Item {
            Layout.fillWidth: true
            Layout.preferredHeight: Style.baseWidgetSize * 0.6
            NText {
              anchors.centerIn: parent
              text: {
                let dayIndex = (content.firstDayOfWeek + index) % 7
                const dayNames = ["S", "M", "T", "W", "T", "F", "S"]
                return dayNames[dayIndex]
              }
              color: Color.mPrimary
              pointSize: Style.fontSizeS
              font.weight: Style.fontWeightBold
              horizontalAlignment: Text.AlignHCenter
            }
          }
        }
      }
    }
    RowLayout {
      Layout.fillWidth: true
      Layout.preferredHeight: 240 * Style.uiScaleRatio
      Layout.maximumHeight: 240 * Style.uiScaleRatio
      spacing: 0

      // Helper function to check if a date has events
      function hasEventsOnDate(year, month, day) {
        if (!CalendarService.available || CalendarService.events.length === 0)
          return false

        const targetDate = new Date(year, month, day)
        const targetStart = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate()).getTime() / 1000
        const targetEnd = targetStart + 86400 // +24 hours

        return CalendarService.events.some(event => {
                                             // Check if event starts or overlaps with this day
                                             return (event.start >= targetStart && event.start < targetEnd) || (event.end > targetStart && event.end <= targetEnd) || (event.start < targetStart && event.end > targetEnd)
                                           })
      }

      // Helper function to get events for a specific date
      function getEventsForDate(year, month, day) {
        if (!CalendarService.available || CalendarService.events.length === 0)
          return []

        const targetDate = new Date(year, month, day)
        const targetStart = Math.floor(new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate()).getTime() / 1000)
        const targetEnd = targetStart + 86400 // +24 hours

        return CalendarService.events.filter(event => {
                                               return (event.start >= targetStart && event.start < targetEnd) || (event.end > targetStart && event.end <= targetEnd) || (event.start < targetStart && event.end > targetEnd)
                                             })
      }

      // Helper function to check if an event is all-day
      function isAllDayEvent(event) {
        const duration = event.end - event.start
        const startDate = new Date(event.start * 1000)
        const isAtMidnight = startDate.getHours() === 0 && startDate.getMinutes() === 0
        return duration === 86400 && isAtMidnight
      }

      // Helper function to check if an event is multi-day
      function isMultiDayEvent(event) {
        if (isAllDayEvent(event)) {
          return false
        }

        const startDate = new Date(event.start * 1000)
        const endDate = new Date(event.end * 1000)

        const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate())
        const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate())

        return startDateOnly.getTime() !== endDateOnly.getTime()
      }

      // Helper function to get color for a specific event
      function getEventColor(event, isToday) {
        if (isMultiDayEvent(event)) {
          return isToday ? Color.mOnSecondary : Color.mTertiary
        } else if (isAllDayEvent(event)) {
          return isToday ? Color.mOnSecondary : Color.mSecondary
        } else {
          return isToday ? Color.mOnSecondary : Color.mPrimary
        }
      }

      // Column of week numbers
      ColumnLayout {
        visible: Settings.data.location.showWeekNumberInCalendar
        Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
        Layout.fillHeight: true
        spacing: 0
        Repeater {
          model: 6
          Item {
            Layout.fillWidth: true
            Layout.fillHeight: true
            NText {
              anchors.centerIn: parent
              color: Color.mOutline
              pointSize: Style.fontSizeXXS
              font.weight: Style.fontWeightMedium
              text: {
                let firstOfMonth = new Date(grid.year, grid.month, 1)
                let firstDayOfWeek = content.firstDayOfWeek
                let firstOfMonthDayOfWeek = firstOfMonth.getDay()
                let daysBeforeFirst = (firstOfMonthDayOfWeek - firstDayOfWeek + 7) % 7
                if (daysBeforeFirst === 0) {
                  daysBeforeFirst = 7
                }
                let gridStartDate = new Date(grid.year, grid.month, 1 - daysBeforeFirst)
                let rowStartDate = new Date(gridStartDate)
                rowStartDate.setDate(gridStartDate.getDate() + (index * 7))
                let thursday = new Date(rowStartDate)
                if (firstDayOfWeek === 0) {
                  thursday.setDate(rowStartDate.getDate() + 4)
                } else if (firstDayOfWeek === 1) {
                  thursday.setDate(rowStartDate.getDate() + 3)
                } else {
                  let daysToThursday = (4 - firstDayOfWeek + 7) % 7
                  thursday.setDate(rowStartDate.getDate() + daysToThursday)
                }
                return `${root.getISOWeekNumber(thursday)}`
              }
            }
          }
        }
      }
      MonthGrid {
        id: grid
        Layout.fillWidth: true
        Layout.fillHeight: true
        spacing: Style.marginXXS
        month: Time.date.getMonth()
        year: Time.date.getFullYear()
        locale: Qt.locale()
        delegate: Item {
          Rectangle {
            width: Style.baseWidgetSize * 0.9
            height: Style.baseWidgetSize * 0.9
            anchors.centerIn: parent
            radius: Style.radiusM
            color: model.today ? Color.mSecondary : Color.transparent
            NText {
              anchors.centerIn: parent
              text: model.day
              color: {
                if (model.today)
                  return Color.mOnSecondary
                if (model.month === grid.month)
                  return Color.mOnSurface
                return Color.mOnSurfaceVariant
              }
              opacity: model.month === grid.month ? 1.0 : 0.4
              pointSize: Style.fontSizeM
              font.weight: model.today ? Style.fontWeightBold : Style.fontWeightMedium
            }

            // Event indicator dots
            Row {
              visible: Settings.data.location.showCalendarEvents && parent.parent.parent.parent.parent.hasEventsOnDate(model.year, model.month, model.day)
              spacing: 2
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.bottom: parent.bottom
              anchors.bottomMargin: Style.marginXS

              readonly property int currentYear: model.year
              readonly property int currentMonth: model.month
              readonly property int currentDay: model.day
              readonly property bool isToday: model.today

              Repeater {
                model: parent.parent.parent.parent.parent.parent.getEventsForDate(parent.currentYear, parent.currentMonth, parent.currentDay)

                Rectangle {
                  width: 4
                  height: width
                  radius: width / 2
                  color: parent.parent.parent.parent.parent.parent.getEventColor(modelData, model.today)
                }
              }
            }

            MouseArea {
              anchors.fill: parent
              hoverEnabled: true
              enabled: Settings.data.location.showCalendarEvents

              onEntered: {
                const events = parent.parent.parent.parent.parent.getEventsForDate(model.year, model.month, model.day)
                if (events.length > 0) {
                  const summaries = events.map(e => e.summary).join('\n')
                  TooltipService.show(Screen, parent, summaries)
                  TooltipService.updateText(summaries)
                }
              }

              onClicked: {
                const dateWithSlashes = `${model.month.toString().padStart(2, '0')}/${model.day.toString().padStart(2, '0')}/${model.year.toString().substring(2)}`
                Quickshell.execDetached(["gnome-calendar", "--date", dateWithSlashes])
                PanelService.getPanel("calendarPanel").toggle(null)
              }

              onExited: {
                TooltipService.hide()
              }
            }

            Behavior on color {
              ColorAnimation {
                duration: Style.animationFast
              }
            }
          }
        }
      }
    }

    Loader {
      active: Settings.data.location.weatherEnabled && Settings.data.location.showCalendarWeather
      Layout.fillWidth: true

      sourceComponent: WeatherCard {
        Layout.fillWidth: true
        Layout.preferredHeight: implicitHeight
        forecastDays: 6
      }
    }
  }
}