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

PanelWindow {
    id: systemInfoDialog
    
    WlrLayershell.layer: WlrLayer.Overlay
    WlrLayershell.keyboardFocus: visible ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
    
    anchors {
        top: true
        bottom: true
        left: true
        right: true
    }
    
    visible: GlobalState.aboutMacVisible
    color: Qt.rgba(0, 0, 0, 0.35)
    
    // Close on click outside or Escape
    MouseArea {
        anchors.fill: parent
        onClicked: GlobalState.aboutMacVisible = false
    }
    Item {
        anchors.fill: parent
        focus: true
        Keys.onEscapePressed: GlobalState.aboutMacVisible = false
    }
    
    property string cpuName: ""
    property string gpuName: ""

    // Process to get CPU info
    Process {
        id: cpuProcess
        command: ["sh", "-c", "grep 'model name' /proc/cpuinfo | head -n1 | cut -d':' -f2 | xargs"]
        running: true
        stdout: StdioCollector {
            onDataChanged: {
                const val = String(data).trim();
                if (val.length > 0) systemInfoDialog.cpuName = val;
            }
        }
    }

    // Process to get GPU info
    Process {
        id: gpuProcess
        command: ["sh", "-c", "nvidia-smi --query-gpu=name --format=csv,noheader | head -n1"]
        running: true
        stdout: StdioCollector {
            onDataChanged: {
                const val = String(data).trim();
                if (val.length > 0) systemInfoDialog.gpuName = val;
            }
        }
    }
    
    Rectangle {
        id: dialogBox
        width: 480
        height: 320
        anchors.centerIn: parent
        color: Theme.glassBg
        border.color: Theme.glassBorder
        border.width: 1
        radius: 0
        
        MouseArea {
            anchors.fill: parent
            // Eat clicks so they don't close the dialog
        }
        
        ColumnLayout {
            anchors.fill: parent
            spacing: 0
            
            // Header bar
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 40
                
                Rectangle {
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 1
                    color: Theme.glassBorder
                }
                
                Rectangle {
                    id: closeBtn
                    width: 40
                    height: 40
                    anchors.left: parent.left
                    color: closeMouseArea.containsMouse ? Theme.accentCoral : "transparent"
                    
                    Text {
                        anchors.centerIn: parent
                        text: "✕"
                        color: closeMouseArea.containsMouse ? Theme.textPrimary : Theme.textSecondary
                        font.pixelSize: 14
                    }
                    
                    MouseArea {
                        id: closeMouseArea
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: GlobalState.aboutMacVisible = false
                    }
                }
                
                Text {
                    anchors.centerIn: parent
                    text: "System Info"
                    font.family: Theme.fontSerif
                    font.italic: true
                    font.pixelSize: 15
                    color: Theme.textPrimary
                }
            }
            
            // Body
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
                
                Column {
                    anchors.centerIn: parent
                    spacing: 8
                    
                    Text {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Silicon Volt"
                        font.family: Theme.fontSerif
                        font.italic: true
                        font.pixelSize: 24
                        color: Theme.accentVolt
                    }
                    
                    Text {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "NixOS // Hyprland"
                        font.family: Theme.fontMono
                        font.pixelSize: 12
                        color: Theme.textMuted
                        bottomPadding: 16
                    }
                    
                    Grid {
                        anchors.horizontalCenter: parent.horizontalCenter
                        columns: 2
                        spacing: 12
                        rowSpacing: 8
                        
                        // HOST
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "HOST"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { text: "hades"; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // CPU
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "CPU"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { id: cpuText; text: systemInfoDialog.cpuName || "Loading..."; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // MEMORY
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "MEMORY"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { text: GlobalState.memUsedGb + " / " + GlobalState.memTotalGb + " GB"; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // GPU
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "GPU"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { id: gpuText; text: systemInfoDialog.gpuName || "Loading..."; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // VRAM
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "VRAM"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { text: GlobalState.gpuVramUsed + " / " + GlobalState.gpuVramTotal + " GB"; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // WM
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "WM"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { text: "Hyprland"; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                        
                        // OS
                        Text { width: 100; horizontalAlignment: Text.AlignRight; text: "OS"; font.family: Theme.fontMono; font.pixelSize: 11; color: Theme.textMuted }
                        Text { text: "NixOS"; font.family: Theme.fontSans; font.pixelSize: 13; color: Theme.textSecondary }
                    }
                }
            }
            
            // Footer bar
            Item {
                Layout.fillWidth: true
                Layout.preferredHeight: 44
                
                Rectangle {
                    anchors.top: parent.top
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 1
                    color: Theme.glassBorder
                }
                
                component FooterButton: Rectangle {
                    id: btn
                    property string text: ""
                    property alias command: proc.command
                    
                    width: btnText.width + 24
                    height: 28
                    anchors.verticalCenter: parent.verticalCenter
                    color: btnMouse.containsMouse ? Qt.rgba(Theme.accentVolt.r, Theme.accentVolt.g, Theme.accentVolt.b, 0.1) : "transparent"
                    border.color: Theme.glassBorder
                    border.width: 1
                    radius: 0
                    
                    Text {
                        id: btnText
                        anchors.centerIn: parent
                        text: btn.text
                        font.family: Theme.fontSans
                        font.pixelSize: 12
                        color: btnMouse.containsMouse ? Theme.accentVolt : Theme.textMuted
                    }
                    
                    MouseArea {
                        id: btnMouse
                        anchors.fill: parent
                        hoverEnabled: true
                        onClicked: proc.running = true
                    }
                    
                    Process {
                        id: proc
                    }
                }
                
                FooterButton {
                    anchors.left: parent.left
                    anchors.leftMargin: 16
                    text: "System Report..."
                    command: ["foot", "-e", "btop"]
                }
                
                FooterButton {
                    anchors.right: parent.right
                    anchors.rightMargin: 16
                    text: "Software Update..."
                    command: ["foot", "-e", "sudo", "nixos-rebuild", "dry-activate"]
                }
            }
        }
    }
}