import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    id: root
    visible: true
    width: 800
    height: 600
    title: qsTr("LocalSend")
    
    StackView {
        id: stackView
        anchors.fill: parent
        
        Component.onCompleted: {
            push(homePageComponent)
        }
    }
    
    Component {
        id: homePageComponent
        Page {
            id: homePage
            
            signal openSettings()
            
            header: ToolBar {
                RowLayout {
                    anchors.fill: parent
                    Label {
                        text: qsTr("LocalSend")
                        font.bold: true
                        font.pixelSize: 20
                        Layout.leftMargin: 16
                    }
                    Item { Layout.fillWidth: true }
                    ToolButton {
                        text: qsTr("Settings")
                        onClicked: homePage.openSettings()
                    }
                }
            }
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 16
                spacing: 16
                
                Label {
                    text: qsTr("Nearby Devices")
                    font.bold: true
                    font.pixelSize: 16
                }
                
                ListView {
                    id: deviceListView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    
                    property var devices: appController.devices
                    model: devices
                    spacing: 8
                    
                    delegate: Pane {
                        width: ListView.view.width
                        padding: 12
                        
                        background: Rectangle {
                            color: Qt.lighter("gray", 1.8)
                            radius: 8
                        }
                        
                        RowLayout {
                            anchors.fill: parent
                            
                            Column {
                                Layout.fillWidth: true
                                Label {
                                    text: modelData.alias || modelData.ip
                                    font.bold: true
                                }
                                Label {
                                    text: "%1:%2".arg(modelData.ip).arg(modelData.port)
                                    color: "gray"
                                    font.pixelSize: 12
                                }
                            }
                            
                            Button {
                                text: qsTr("Send")
                                onClicked: {
                                    // send to this device
                                }
                            }
                        }
                    }
                }
                
                RowLayout {
                    Layout.fillWidth: true
                    Button {
                        text: qsTr("Refresh")
                        onClicked: appController.refreshDevices()
                    }
                    Item { Layout.fillWidth: true }
                    Label {
                        text: qsTr("Alias: %1").arg(appController.alias)
                        color: "gray"
                    }
                }
            }
            
            onOpenSettings: stackView.push(settingsPageComponent)
        }
    }
    
    Component {
        id: settingsPageComponent
        Page {
            id: settingsPage
            signal back()
            
            header: ToolBar {
                RowLayout {
                    anchors.fill: parent
                    ToolButton {
                        text: qsTr("Back")
                        onClicked: settingsPage.back()
                    }
                    Label {
                        text: qsTr("Settings")
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.leftMargin: 16
                    }
                }
            }
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 16
                spacing: 16
                
                GridLayout {
                    columns: 2
                    Layout.fillWidth: true
                    
                    Label { text: qsTr("Device Alias:") }
                    TextField {
                        id: aliasField
                        text: appController.alias
                        onEditingFinished: appController.alias = text
                        Layout.fillWidth: true
                    }
                    
                    Label { text: qsTr("Port:") }
                    SpinBox {
                        id: portField
                        value: appController.port
                        from: 1
                        to: 65535
                        onValueChanged: appController.port = value
                    }
                }
                
                Item { Layout.fillHeight: true }
                
                Label {
                    text: qsTr("Server Status: %1").arg(appController.serverRunning ? qsTr("Running") : qsTr("Stopped"))
                    color: appController.serverRunning ? "green" : "red"
                }
            }
            
            onBack: stackView.pop()
        }
    }
}