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

PanelWindow {
    id: ccWindow
    visible: GlobalState.controlCenterVisible

    anchors {
        top: true
        right: true
        bottom: true
    }

    margins {
        top: Theme.menuBarHeight
    }

    implicitWidth: 360
    color: "transparent"
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.namespace: "quickshell-controlcenter"
    WlrLayershell.keyboardFocus: WlrKeyboardFocus.None

    property int activeTab: 0 // 0 = Today, 1 = Notifications

    // Sidebar Container
    Rectangle {
        id: sidebarPanel
        anchors.fill: parent
        color: Theme.windowBg
        border.color: Theme.windowBorder
        border.width: 1

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 14
            spacing: 12

            // =================================================================
            // TAB SWITCHER (Today | Notifications)
            // =================================================================
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 30
                radius: Theme.radiusMedium
                color: Qt.rgba(0.0, 0.0, 0.0, 0.3)

                RowLayout {
                    anchors.fill: parent
                    spacing: 0

                    // Today Tab Button
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        radius: Theme.radiusMedium
                        color: ccWindow.activeTab === 0 ? Qt.rgba(1.0, 1.0, 1.0, 0.18) : "transparent"

                        Text {
                            anchors.centerIn: parent
                            text: "Today"
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeNormal
                            font.weight: ccWindow.activeTab === 0 ? Font.DemiBold : Font.Normal
                            color: ccWindow.activeTab === 0 ? "#FFFFFF" : Theme.textTertiary
                        }

                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: ccWindow.activeTab = 0
                        }
                    }

                    // Notifications Tab Button
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        radius: Theme.radiusMedium
                        color: ccWindow.activeTab === 1 ? Qt.rgba(1.0, 1.0, 1.0, 0.18) : "transparent"

                        Text {
                            anchors.centerIn: parent
                            text: "Notifications"
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeNormal
                            font.weight: ccWindow.activeTab === 1 ? Font.DemiBold : Font.Normal
                            color: ccWindow.activeTab === 1 ? "#FFFFFF" : Theme.textTertiary
                        }

                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: ccWindow.activeTab = 1
                        }
                    }
                }
            }

            // =================================================================
            // TAB 1: TODAY VIEW
            // =================================================================
            ScrollView {
                visible: ccWindow.activeTab === 0
                Layout.fillWidth: true
                Layout.fillHeight: true
                clip: true

                ColumnLayout {
                    width: parent.width
                    spacing: 12

                    // 1. Large Date & Time Widget
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 70
                        radius: Theme.radiusLarge
                        color: Theme.cardBg
                        border.color: Theme.cardBorder
                        border.width: 1

                        ColumnLayout {
                            anchors.fill: parent
                            anchors.margins: 12
                            spacing: 2

                            Text {
                                text: GlobalState.fullDateString
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSizeSmall
                                font.weight: Font.DemiBold
                                color: Theme.accentBlue
                            }

                            Text {
                                text: GlobalState.timeString
                                font.family: Theme.fontFamily
                                font.pixelSize: 26
                                font.weight: Font.Light
                                color: "#FFFFFF"
                            }
                        }
                    }

                    // 2. Control Toggles (Wi-Fi, Bluetooth, DND, Night Shift)
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 120
                        radius: Theme.radiusLarge
                        color: Theme.cardBg
                        border.color: Theme.cardBorder
                        border.width: 1

                        GridLayout {
                            anchors.fill: parent
                            anchors.margins: 10
                            columns: 2
                            rowSpacing: 8
                            columnSpacing: 8

                            // Wi-Fi Toggle
                            ToggleCard {
                                iconSource: "../assets/wifi.svg"
                                title: "Wi-Fi"
                                subtitle: GlobalState.wifiSsid
                                isActive: GlobalState.wifiConnected
                                onClicked: GlobalState.launchApp("nm-connection-editor || foot -e nmtui")
                            }

                            // Bluetooth Toggle
                            ToggleCard {
                                iconSource: "../assets/bluetooth.svg"
                                title: "Bluetooth"
                                subtitle: "Active"
                                isActive: true
                                onClicked: GlobalState.launchApp("foot -e bluetoothctl")
                            }

                            // Do Not Disturb Toggle
                            ToggleCard {
                                iconSource: "../assets/preferences.svg"
                                title: "Do Not Disturb"
                                subtitle: "Off"
                                isActive: false
                                onClicked: {}
                            }

                            // Sound Mute Toggle
                            ToggleCard {
                                iconSource: "../assets/volume.svg"
                                title: "Sound"
                                subtitle: GlobalState.volumeMuted ? "Muted" : `${GlobalState.volume}%`
                                isActive: !GlobalState.volumeMuted
                                onClicked: GlobalState.toggleVolumeMute()
                            }
                        }
                    }

                    // 3. Brightness & Volume Sliders
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 110
                        radius: Theme.radiusLarge
                        color: Theme.cardBg
                        border.color: Theme.cardBorder
                        border.width: 1

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

                            // Display Brightness Slider
                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 8

                                Image {
                                    width: 16
                                    height: 16
                                    source: "../assets/brightness.svg"
                                    sourceSize: Qt.size(16, 16)
                                }

                                Item {
                                    Layout.fillWidth: true
                                    height: 18

                                    Rectangle {
                                        anchors.fill: parent
                                        radius: 9
                                        color: Qt.rgba(1,1,1,0.18)

                                        Rectangle {
                                            anchors.left: parent.left
                                            anchors.top: parent.top
                                            anchors.bottom: parent.bottom
                                            width: parent.width * (GlobalState.brightness / 100.0)
                                            radius: 9
                                            color: "#FFFFFF"
                                        }
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        cursorShape: Qt.PointingHandCursor
                                        function update(m) {
                                            const frac = Math.max(0.01, Math.min(1.0, m.x / width));
                                            GlobalState.setBrightness(Math.round(frac * 100));
                                        }
                                        onPressed: (m) => update(m)
                                        onPositionChanged: (m) => { if (pressed) update(m); }
                                    }
                                }
                            }

                            // Sound Volume Slider
                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 8

                                Image {
                                    width: 16
                                    height: 16
                                    source: "../assets/volume.svg"
                                    sourceSize: Qt.size(16, 16)
                                }

                                Item {
                                    Layout.fillWidth: true
                                    height: 18

                                    Rectangle {
                                        anchors.fill: parent
                                        radius: 9
                                        color: Qt.rgba(1,1,1,0.18)

                                        Rectangle {
                                            anchors.left: parent.left
                                            anchors.top: parent.top
                                            anchors.bottom: parent.bottom
                                            width: parent.width * (GlobalState.volume / 100.0)
                                            radius: 9
                                            color: Theme.accentBlue
                                        }
                                    }

                                    MouseArea {
                                        anchors.fill: parent
                                        cursorShape: Qt.PointingHandCursor
                                        function update(m) {
                                            const frac = Math.max(0.0, Math.min(1.0, m.x / width));
                                            GlobalState.setVolume(Math.round(frac * 100));
                                        }
                                        onPressed: (m) => update(m)
                                        onPositionChanged: (m) => { if (pressed) update(m); }
                                    }
                                }
                            }
                        }
                    }

                    // 4. System Resources Monitor Widget
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 90
                        radius: Theme.radiusLarge
                        color: Theme.cardBg
                        border.color: Theme.cardBorder
                        border.width: 1

                        ColumnLayout {
                            anchors.fill: parent
                            anchors.margins: 12
                            spacing: 6

                            Text {
                                text: "System Performance"
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSizeSmall
                                font.weight: Font.DemiBold
                                color: Theme.textSecondary
                            }

                            // CPU Bar
                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 8
                                Text {
                                    text: "CPU"
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeSmall
                                    color: Theme.textPrimary
                                    Layout.preferredWidth: 32
                                }
                                Rectangle {
                                    Layout.fillWidth: true
                                    height: 6
                                    radius: 3
                                    color: Qt.rgba(1,1,1,0.15)
                                    Rectangle {
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.bottom: parent.bottom
                                        width: parent.width * (GlobalState.cpuPercent / 100.0)
                                        radius: 3
                                        color: GlobalState.cpuPercent > 80 ? Theme.accentRed : Theme.accentGreen
                                    }
                                }
                                Text {
                                    text: `${GlobalState.cpuPercent}%`
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeSmall
                                    color: Theme.textSecondary
                                    Layout.preferredWidth: 36
                                    horizontalAlignment: Text.AlignRight
                                }
                            }

                            // Memory Bar
                            RowLayout {
                                Layout.fillWidth: true
                                spacing: 8
                                Text {
                                    text: "RAM"
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeSmall
                                    color: Theme.textPrimary
                                    Layout.preferredWidth: 32
                                }
                                Rectangle {
                                    Layout.fillWidth: true
                                    height: 6
                                    radius: 3
                                    color: Qt.rgba(1,1,1,0.15)
                                    Rectangle {
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.bottom: parent.bottom
                                        width: parent.width * (GlobalState.memPercent / 100.0)
                                        radius: 3
                                        color: Theme.accentBlue
                                    }
                                }
                                Text {
                                    text: `${GlobalState.memUsedGb}G`
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeSmall
                                    color: Theme.textSecondary
                                    Layout.preferredWidth: 36
                                    horizontalAlignment: Text.AlignRight
                                }
                            }
                        }
                    }

                    // 5. Now Playing Media Widget
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 80
                        radius: Theme.radiusLarge
                        color: Theme.cardBg
                        border.color: Theme.cardBorder
                        border.width: 1

                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 12
                            spacing: 10

                            Image {
                                width: 36
                                height: 36
                                source: "../assets/music.svg"
                                sourceSize: Qt.size(36, 36)
                            }

                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 2

                                Text {
                                    text: GlobalState.mediaTitle || "No Media Playing"
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeNormal
                                    font.weight: Font.Medium
                                    color: "#FFFFFF"
                                    elide: Text.ElideRight
                                    Layout.fillWidth: true
                                }

                                Text {
                                    text: GlobalState.mediaArtist || "Apple Music"
                                    font.family: Theme.fontFamily
                                    font.pixelSize: Theme.fontSizeSmall
                                    color: Theme.textTertiary
                                    elide: Text.ElideRight
                                    Layout.fillWidth: true
                                }
                            }

                            // Playback controls
                            RowLayout {
                                spacing: 4

                                Rectangle {
                                    width: 24
                                    height: 24
                                    radius: 12
                                    color: Qt.rgba(1,1,1,0.1)
                                    Text { anchors.centerIn: parent; text: "⏮"; color: "#FFFFFF"; font.pixelSize: 10 }
                                    MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaPrevious() }
                                }

                                Rectangle {
                                    width: 28
                                    height: 28
                                    radius: 14
                                    color: Theme.accentBlue
                                    Text { anchors.centerIn: parent; text: GlobalState.mediaPlaying ? "⏸" : "▶"; color: "#FFFFFF"; font.pixelSize: 11 }
                                    MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaPlayPause() }
                                }

                                Rectangle {
                                    width: 24
                                    height: 24
                                    radius: 12
                                    color: Qt.rgba(1,1,1,0.1)
                                    Text { anchors.centerIn: parent; text: "⏭"; color: "#FFFFFF"; font.pixelSize: 10 }
                                    MouseArea { anchors.fill: parent; cursorShape: Qt.PointingHandCursor; onClicked: GlobalState.mediaNext() }
                                }
                            }
                        }
                    }
                }
            }

            // =================================================================
            // TAB 2: NOTIFICATIONS VIEW
            // =================================================================
            ColumnLayout {
                visible: ccWindow.activeTab === 1
                Layout.fillWidth: true
                Layout.fillHeight: true
                spacing: 12

                RowLayout {
                    Layout.fillWidth: true
                    Text {
                        text: "Notifications"
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeLarge
                        font.weight: Font.DemiBold
                        color: "#FFFFFF"
                        Layout.fillWidth: true
                    }
                    Rectangle {
                        implicitWidth: clearText.implicitWidth + 12
                        height: 22
                        radius: Theme.radiusSmall
                        color: Qt.rgba(1,1,1,0.12)
                        Text {
                            id: clearText
                            anchors.centerIn: parent
                            text: "Clear All"
                            font.family: Theme.fontFamily
                            font.pixelSize: Theme.fontSizeSmall
                            color: Theme.textSecondary
                        }
                        MouseArea {
                            anchors.fill: parent
                            cursorShape: Qt.PointingHandCursor
                            onClicked: {}
                        }
                    }
                }

                // Placeholder / Active notifications card
                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 70
                    radius: Theme.radiusLarge
                    color: Theme.cardBg
                    border.color: Theme.cardBorder
                    border.width: 1

                    RowLayout {
                        anchors.fill: parent
                        anchors.margins: 12
                        spacing: 10

                        Image {
                            width: 28
                            height: 28
                            source: "../assets/apple.svg"
                            sourceSize: Qt.size(28, 28)
                        }

                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: 2

                            Text {
                                text: "macOS Catalina on Hyprland"
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSizeNormal
                                font.weight: Font.Medium
                                color: "#FFFFFF"
                            }

                            Text {
                                text: "Quickshell desktop loaded successfully."
                                font.family: Theme.fontFamily
                                font.pixelSize: Theme.fontSizeSmall
                                color: Theme.textSecondary
                            }
                        }
                    }
                }

                Item {
                    Layout.fillHeight: true
                }
            }
        }
    }

    // Toggle Card Component
    component ToggleCard: Rectangle {
        id: cardRoot
        property string iconSource: ""
        property string title: ""
        property string subtitle: ""
        property bool isActive: false
        signal clicked()

        Layout.fillWidth: true
        Layout.preferredHeight: 46
        radius: Theme.radiusMedium
        color: cardMouse.containsMouse ? Qt.rgba(1.0, 1.0, 1.0, 0.22) : Qt.rgba(1.0, 1.0, 1.0, 0.12)

        RowLayout {
            anchors.fill: parent
            anchors.margins: 8
            spacing: 8

            Rectangle {
                width: 28
                height: 28
                radius: 14
                color: cardRoot.isActive ? Theme.accentBlue : Qt.rgba(1,1,1,0.2)

                Image {
                    anchors.centerIn: parent
                    width: 14
                    height: 14
                    source: cardRoot.iconSource
                    sourceSize: Qt.size(14, 14)
                }
            }

            ColumnLayout {
                Layout.fillWidth: true
                spacing: 1

                Text {
                    text: cardRoot.title
                    font.family: Theme.fontFamily
                    font.pixelSize: Theme.fontSizeSmall
                    font.weight: Font.Medium
                    color: "#FFFFFF"
                    elide: Text.ElideRight
                }

                Text {
                    text: cardRoot.subtitle
                    font.family: Theme.fontFamily
                    font.pixelSize: 10
                    color: Theme.textTertiary
                    elide: Text.ElideRight
                }
            }
        }

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