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

PanelWindow {
    id: aboutWindow
    visible: GlobalState.aboutMacVisible

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

    color: Qt.rgba(0, 0, 0, 0.35)
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.namespace: "quickshell-aboutmac"
    WlrLayershell.keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None

    // Dismiss when clicking outside modal
    MouseArea {
        anchors.fill: parent
        onClicked: GlobalState.aboutMacVisible = false
    }

    // Centered Dialog
    Rectangle {
        id: dialogBox
        anchors.centerIn: parent
        width: 540
        height: 330
        radius: Theme.radiusModal
        color: Theme.windowBg
        border.color: Theme.windowBorder
        border.width: 1

        // Prevent clicking inside from dismissing
        MouseArea {
            anchors.fill: parent
            onClicked: {}
        }

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

            // Top Traffic Lights Bar
            RowLayout {
                Layout.fillWidth: true
                spacing: 8

                // Red Close Dot
                Rectangle {
                    width: 12
                    height: 12
                    radius: 6
                    color: closeMouse.containsMouse ? "#E0443E" : "#FF5F56"
                    border.color: "#E0443E"
                    border.width: 0.5

                    Text {
                        anchors.centerIn: parent
                        visible: closeMouse.containsMouse
                        text: "×"
                        font.pixelSize: 10
                        color: "#4A0002"
                    }

                    MouseArea {
                        id: closeMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: GlobalState.aboutMacVisible = false
                    }
                }

                // Yellow Minimize Dot
                Rectangle {
                    width: 12
                    height: 12
                    radius: 6
                    color: "#FFBD2E"
                    border.color: "#DEA123"
                    border.width: 0.5
                }

                // Green Zoom Dot
                Rectangle {
                    width: 12
                    height: 12
                    radius: 6
                    color: "#27C93F"
                    border.color: "#1AAB29"
                    border.width: 0.5
                }

                Item { Layout.fillWidth: true }

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

                Item { Layout.fillWidth: true }
            }

            // Main Specs Content
            RowLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                spacing: 24

                // Left: Catalina Island Badge
                Image {
                    Layout.alignment: Qt.AlignVCenter
                    width: 130
                    height: 130
                    source: "../assets/catalina-badge.svg"
                    sourceSize: Qt.size(130, 130)
                }

                // Right: System Details
                ColumnLayout {
                    Layout.fillWidth: true
                    Layout.alignment: Qt.AlignVCenter
                    spacing: 6

                    Text {
                        text: "macOS Catalina"
                        font.family: Theme.fontFamily
                        font.pixelSize: 22
                        font.weight: Font.Bold
                        color: "#FFFFFF"
                    }

                    Text {
                        text: "Version 10.15.7 (NixOS Edition)"
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        color: Theme.textSecondary
                    }

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

                    // Specs Rows
                    SpecRow { label: "Host"; value: "Hades (AMD + NVIDIA RTX)" }
                    SpecRow { label: "Processor"; value: "AMD High-Performance Multi-Core" }
                    SpecRow { label: "Memory"; value: `${GlobalState.memTotalGb} GB RAM (${GlobalState.memUsedGb} GB in use)` }
                    SpecRow { label: "Graphics"; value: "NVIDIA GeForce RTX (Proprietary Driver)" }
                    SpecRow { label: "Compositor"; value: "Hyprland 0.55+ (Wayland)" }
                    SpecRow { label: "Operating System"; value: "NixOS 26.05 (x86_64-linux)" }
                }
            }

            // Bottom Action Buttons
            RowLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignRight
                spacing: 12

                Rectangle {
                    implicitWidth: sysRepText.implicitWidth + 20
                    height: 24
                    radius: Theme.radiusSmall
                    color: repMouse.containsMouse ? Qt.rgba(1,1,1,0.2) : Qt.rgba(1,1,1,0.1)
                    border.color: Qt.rgba(1,1,1,0.15)
                    border.width: 1

                    Text {
                        id: sysRepText
                        anchors.centerIn: parent
                        text: "System Report..."
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        color: Theme.textPrimary
                    }

                    MouseArea {
                        id: repMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            GlobalState.aboutMacVisible = false;
                            GlobalState.launchApp("foot -e btop");
                        }
                    }
                }

                Rectangle {
                    implicitWidth: updText.implicitWidth + 20
                    height: 24
                    radius: Theme.radiusSmall
                    color: updMouse.containsMouse ? Qt.rgba(1,1,1,0.2) : Qt.rgba(1,1,1,0.1)
                    border.color: Qt.rgba(1,1,1,0.15)
                    border.width: 1

                    Text {
                        id: updText
                        anchors.centerIn: parent
                        text: "Software Update..."
                        font.family: Theme.fontFamily
                        font.pixelSize: Theme.fontSizeSmall
                        color: Theme.textPrimary
                    }

                    MouseArea {
                        id: updMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        cursorShape: Qt.PointingHandCursor
                        onClicked: {
                            GlobalState.aboutMacVisible = false;
                            GlobalState.launchApp("foot -e zsh -c 'echo \"Checking NixOS system configuration...\"; sudo nixos-rebuild dry-activate --flake /home/anish/NixOS-Configs#hades; exec zsh'");
                        }
                    }
                }
            }
        }
    }

    component SpecRow: RowLayout {
        property string label: ""
        property string value: ""
        Layout.fillWidth: true
        spacing: 10

        Text {
            text: label
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            font.weight: Font.DemiBold
            color: Theme.textSecondary
            Layout.preferredWidth: 105
        }

        Text {
            text: value
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            color: Theme.textPrimary
            Layout.fillWidth: true
            elide: Text.ElideRight
        }
    }
}