import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import ISC

Popup {
    id: root
    modal: true
    dim: true
    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
    width: 420
    height: 340
    anchors.centerIn: Overlay.overlay

    background: Rectangle {
        radius: Theme.radiusMd
        color: Theme.cardBackground
        border.color: Theme.cardBorder
        border.width: 1
    }

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

        // ── Title ──
        Label {
            text: "About"
            font.pixelSize: Theme.font2xl
            font.bold: true
            color: Theme.headingColor
        }

        // ── App info ──
        ColumnLayout {
            spacing: 4

            Label {
                text: "ISenseCloud (ISC)"
                font.pixelSize: Theme.fontLg
                color: Theme.headingColor
            }

            Label {
                text: "Version 0.1.0"
                font.pixelSize: Theme.fontSm
                color: Theme.bodyColor
            }

            Label {
                text: "Temperature-sensing wafer monitoring"
                font.pixelSize: Theme.fontSm
                color: Theme.bodyColor
                wrapMode: Text.WordWrap
                Layout.fillWidth: true
            }
        }

        // ── Separator ──
        Rectangle {
            Layout.fillWidth: true
            height: 1
            color: Theme.cardBorder
        }

        // ── License grid ──
        Rectangle {
            Layout.fillWidth: true
            Layout.preferredHeight: 100
            radius: Theme.radiusSm
            color: Theme.panelBackground
            border.color: Theme.cardBorder
            border.width: 1

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

                Label {
                    text: "LICENSE"
                    color: Theme.panelTitleText
                    font.pixelSize: Theme.fontXs
                    font.letterSpacing: 0.5
                }

                // Grid header
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 4
                    Label { text: "Wafer SN"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 100 }
                    Label { text: "Mfg Date"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 80 }
                    Label { text: "Level"; font.pixelSize: Theme.fontXs; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 60 }
                }

                Rectangle {
                    Layout.fillWidth: true
                    height: 1
                    color: Theme.softBorder
                }

                Label {
                    text: "No license loaded"
                    color: Theme.bodyColor
                    font.pixelSize: Theme.fontSm
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

        // ── Close ──
        Button {
            text: "Close"
            Layout.alignment: Qt.AlignRight
            Layout.preferredWidth: 100
            Layout.preferredHeight: 32
            onClicked: root.close()

            background: Rectangle {
                radius: Theme.radiusSm
                color: parent.hovered ? Theme.buttonNeutralHover : Theme.buttonNeutralBackground
                border.color: Theme.fieldBorder
                border.width: 1
            }
            contentItem: Label {
                text: parent.text
                color: Theme.buttonNeutralText
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }
    }
}