import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import "../theme"
import ".."

Rectangle {
    id: root
    width: 250
    implicitHeight: calCol.implicitHeight + 24
    radius: Theme.radiusMedium
    color: Theme.menuDropdownBg
    border.color: Theme.menuDropdownBorder
    border.width: 1

    ColumnLayout {
        id: calCol
        anchors.fill: parent
        anchors.margins: 12
        spacing: 10

        Text {
            text: GlobalState.fullDateString
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeNormal
            font.weight: Font.DemiBold
            color: Theme.textPrimary
            Layout.alignment: Qt.AlignHCenter
        }

        Text {
            text: GlobalState.timeString
            font.family: Theme.fontFamily
            font.pixelSize: 22
            font.weight: Font.Light
            color: Theme.accentBlue
            Layout.alignment: Qt.AlignHCenter
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: Qt.rgba(1.0, 1.0, 1.0, 0.12)
        }

        // Days grid header
        RowLayout {
            Layout.fillWidth: true
            Repeater {
                model: ["S", "M", "T", "W", "T", "F", "S"]
                delegate: Text {
                    text: modelData
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.DemiBold
                    color: Theme.textTertiary
                    horizontalAlignment: Text.AlignHCenter
                    Layout.fillWidth: true
                }
            }
        }

        // Quick mini-calendar representation
        GridLayout {
            id: gridDays
            columns: 7
            Layout.fillWidth: true
            rowSpacing: 4
            columnSpacing: 4

            readonly property var todayDate: new Date()
            readonly property int currentDay: todayDate.getDate()

            Repeater {
                model: 31
                delegate: Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 22
                    radius: 11
                    color: (index + 1) === gridDays.currentDay ? Theme.accentBlue : "transparent"

                    Text {
                        anchors.centerIn: parent
                        text: `${index + 1}`
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        font.weight: (index + 1) === gridDays.currentDay ? Font.Bold : Font.Normal
                        color: (index + 1) === gridDays.currentDay ? "#FFFFFF" : Theme.textSecondary
                    }
                }
            }
        }
    }
}