import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 2.15
import QtQuick.Controls 2.15

Rectangle {
    visible: true

    SystemPalette { id: activeColors; colorGroup: SystemPalette.Active }
    SystemPalette { id: inactiveColors; colorGroup: SystemPalette.Inactive }
    SystemPalette { id: disabledColors; colorGroup: SystemPalette.Disabled }

    function getColors() {
        return root.active ? activeColors : inactiveColors;
    }

    property string authToken: ""
    property string searchText: "" // Property to hold the search text

    signal logout()

    Rectangle {
        id: s1
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        height: 50
        color: getColors().midlight

        RowLayout {
            anchors.fill: parent
            spacing: 10
            anchors.margins: 5

            TextField {
                id: searchField
                placeholderText: qsTr("Search")
                Layout.alignment: Qt.AlignVCenter
                Layout.fillWidth: true
                onTextChanged: {
                    searchText = text
                    filterModel() // Filter model based on search text
                }
            }

            Button {
                text: qsTr("Add License")
                Layout.alignment: Qt.AlignVCenter
                onClicked: {
                    // Create and show a new window
                    var newWindow = newWindowComponent.createObject(null, { authToken: authToken });
                    if (newWindow !== null) {
                        newWindow.show();
                    } else {
                        console.log("Failed to create new window");
                    }
                }
            }

            Button {
                id: loginB
                text: qsTr("Logout")
                Layout.alignment: Qt.AlignVCenter
                onClicked: {
                    logout();
                }
            }
        }
    }

    Rectangle {
        id: s2
        anchors {
            top: s1.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }
        color: getColors().window

        ColumnLayout {
            anchors.fill: parent
            spacing: 0

            Rectangle {
                id: header
                color: getColors().midlight
                height: 40
                Layout.fillWidth: true

                RowLayout {
                    anchors.fill: parent
                    spacing: 10
                    anchors.margins: 5

                    Text { text: qsTr("Name"); color: getColors().text; Layout.fillWidth: true }
                    Text { text: qsTr("Key"); color: getColors().text; Layout.fillWidth: true }
                    Text { text: qsTr("Amount"); color: getColors().text; Layout.fillWidth: true }
                    Text { text: qsTr("Start"); color: getColors().text; Layout.fillWidth: true }
                    Text { text: qsTr("End"); color: getColors().text; Layout.fillWidth: true }
                    Text { text: qsTr("Group"); color: getColors().text; Layout.fillWidth: true }
                }
            }

            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true

                ListView {
                    id: listView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    boundsBehavior: Flickable.StopAtBounds
                    model: filteredApiDataModel // Use the filtered model

                    delegate: Rectangle {
                        width: listView.width
                        height: 50
                        color: getColors().button

                        RowLayout {
                            anchors.fill: parent
                            spacing: 10
                            anchors.margins: 5

                            Text { text: model.name; color: getColors().text; Layout.fillWidth: true }
                            Text { text: model.key; color: getColors().text; Layout.fillWidth: true }
                            Text { text: model.amount; color: getColors().text; Layout.fillWidth: true }
                            Text { text: model.start; color: getColors().text; Layout.fillWidth: true }
                            Text { text: model.end; color: getColors().text; Layout.fillWidth: true }
                            Text { text: model.group; color: getColors().text; Layout.fillWidth: true }
                        }
                    }
                }
            }

            ListModel {
                id: apiDataModel
            }

            ListModel {
                id: filteredApiDataModel
            }
        }
    }

    Component {
        id: newWindowComponent
        AddData {
            id: dataWindow
            authToken: authToken
        }
    }

    Component.onCompleted: {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://api.clan-war.net/api/v1/licenses");
        xhr.setRequestHeader("Authorization", "Bearer " + authToken);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var jsonResponse = JSON.parse(xhr.responseText);

                    apiDataModel.clear();
                    for (var i = 0; i < jsonResponse.length; i++) {
                        for (var ii = 0; ii < jsonResponse[i].licenses.length; ii++) {
                            apiDataModel.append({
                                group: jsonResponse[i].name,
                                name: jsonResponse[i].licenses[ii].name,
                                start: jsonResponse[i].licenses[ii].start ?? "Indefinitely",
                                end: jsonResponse[i].licenses[ii].end ?? "Indefinitely",
                                amount: jsonResponse[i].licenses[ii].amount ? jsonResponse[i].licenses[ii].amount.toString() : "∞",
                                key: jsonResponse[i].licenses[ii].key
                            });

                        }
                    }
                    filterModel() // Filter the model after loading data
                } else {
                    console.log("Error: " + xhr.status);
                }
            }
        }
        xhr.send();
    }

    function filterModel() {
        filteredApiDataModel.clear()
        for (var i = 0; i < apiDataModel.count; ++i) {
            var item = apiDataModel.get(i)
            var name = item.name ? item.name.toString().toLowerCase() : ""
            var key = item.key ? item.key.toString().toLowerCase() : ""
            var amount = item.amount ? item.amount.toString().toLowerCase() : ""
            var start = item.start ? item.start.toString().toLowerCase() : ""
            var end = item.end ? item.end.toString().toLowerCase() : ""
            var group = item.group ? item.group.toString().toLowerCase() : ""

            if (name.indexOf(searchText.toLowerCase()) !== -1 ||
                key.indexOf(searchText.toLowerCase()) !== -1 ||
                amount.indexOf(searchText.toLowerCase()) !== -1 ||
                start.indexOf(searchText.toLowerCase()) !== -1 ||
                end.indexOf(searchText.toLowerCase()) !== -1 ||
                group.indexOf(searchText.toLowerCase()) !== -1) {
                filteredApiDataModel.append(item)
            }
        }
    }
}