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

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

    ColumnLayout {
        id: wifiCol
        anchors.fill: parent
        anchors.margins: 12
        spacing: 8

        RowLayout {
            Layout.fillWidth: true
            Text {
                text: "Wi-Fi"
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeNormal
                font.weight: Font.DemiBold
                color: Theme.textPrimary
                Layout.fillWidth: true
            }
            Text {
                text: GlobalState.wifiConnected ? "On" : "Off"
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                color: GlobalState.wifiConnected ? Theme.accentGreen : Theme.textTertiary
            }
        }

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

        // Active network info
        ColumnLayout {
            Layout.fillWidth: true
            spacing: 3

            Text {
                text: GlobalState.wifiConnected ? `Connected to: ${GlobalState.wifiSsid}` : "No Network Connected"
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                font.weight: Font.Medium
                color: Theme.textPrimary
                elide: Text.ElideRight
                Layout.fillWidth: true
            }

            Text {
                visible: GlobalState.ipAddress !== "" && GlobalState.ipAddress !== "Offline"
                text: `IP: ${GlobalState.ipAddress}`
                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)
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 24
            radius: Theme.radiusSmall
            color: netMouse.containsMouse ? Qt.rgba(1.0, 1.0, 1.0, 0.15) : Qt.rgba(1.0, 1.0, 1.0, 0.08)

            Text {
                anchors.centerIn: parent
                text: "Network Preferences..."
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeSmall
                color: Theme.textPrimary
            }

            MouseArea {
                id: netMouse
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    GlobalState.wifiPopupVisible = false;
                    GlobalState.launchApp("nm-connection-editor || foot -e nmtui");
                }
            }
        }
    }
}