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

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

    onOpened: licenseModel.refresh()

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

    FileDialog {
        id: licenseFileDialog
        title: "Load License"
        nameFilters: ["License files (*.bin)"]
        onAccepted: loadFailedLabel.visible = !licenseModel.loadLicenseFile(selectedFile.toString())
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.margins: 28
        spacing: 20

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

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

            Label {
                text: "ISenseCloud"
                font.pixelSize: Theme.fontXl
                font.bold: true
                color: Theme.headingColor
            }

            Label {
                text: "Version " + appVersion
                font.pixelSize: Theme.fontMd
                color: Theme.bodyColor
            }
        }

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

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

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

                RowLayout {
                    Layout.fillWidth: true

                    Label {
                        text: "LICENSE"
                        color: Theme.panelTitleText
                        font.pixelSize: Theme.fontSm
                        font.bold: true
                        font.letterSpacing: 0.5
                        Layout.fillWidth: true
                    }

                    Label {
                        id: loadFailedLabel
                        visible: false
                        text: "Invalid license file"
                        color: Theme.statusWarningColor
                        font.pixelSize: Theme.fontSm
                    }
                }

                // Grid header
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 8
                    Label { text: "Wafer SN"; font.pixelSize: Theme.fontSm; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 150 }
                    Label { text: "Mfg Date"; font.pixelSize: Theme.fontSm; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 120 }
                    Label { text: "Level"; font.pixelSize: Theme.fontSm; font.bold: true; color: Theme.subheadingColor; Layout.preferredWidth: 80 }
                    Label { text: "License Date"; font.pixelSize: Theme.fontSm; font.bold: true; color: Theme.subheadingColor; Layout.fillWidth: true }
                }

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

                ListView {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    visible: licenseModel.licenses.length > 0
                    model: licenseModel.licenses
                    delegate: RowLayout {
                        width: ListView.view.width
                        spacing: 8
                        Label { text: modelData.serial; font.pixelSize: Theme.fontMd; color: Theme.bodyColor; Layout.preferredWidth: 150 }
                        Label { text: modelData.mfgDate; font.pixelSize: Theme.fontMd; color: Theme.bodyColor; Layout.preferredWidth: 120 }
                        Label { text: modelData.level; font.pixelSize: Theme.fontMd; color: Theme.bodyColor; Layout.preferredWidth: 80 }
                        Label { text: modelData.licDate; font.pixelSize: Theme.fontMd; color: Theme.bodyColor; Layout.fillWidth: true }
                    }
                }

                Label {
                    visible: licenseModel.licenses.length === 0
                    text: "No license loaded"
                    color: Theme.bodyColor
                    font.pixelSize: Theme.fontMd
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                }
            }
        }

        // ── Buttons ──
        RowLayout {
            Layout.fillWidth: true
            spacing: 12

            Button {
                text: "Load License"
                Layout.preferredWidth: 140
                Layout.preferredHeight: 36
                onClicked: licenseFileDialog.open()

                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
                    font.pixelSize: Theme.fontMd
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }

            Item { Layout.fillWidth: true }

            Button {
                text: "Close"
                Layout.preferredWidth: 100
                Layout.preferredHeight: 36
                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
                    font.pixelSize: Theme.fontMd
                    font.bold: true
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }
}