import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls.Material 2.15

Item {
    RowLayout {
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20
        
        // Lista de pacientes
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            border.color: Material.color(Material.Grey)
            border.width: 1
            radius: 5
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 10
                spacing: 10
                
                Label {
                    text: "Lista de Pacientes"
                    font.pixelSize: 18
                    font.bold: true
                }
                
                ListView {
                    id: patientsListView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    spacing: 5
                    
                    model: window.patientsData
                    
                    delegate: Rectangle {
                        width: patientsListView.width
                        height: 80
                        color: mouseArea.containsMouse ? Material.color(Material.Grey, Material.Shade100) : "white"
                        border.color: Material.color(Material.Grey, Material.Shade300)
                        radius: 5
                        
                        RowLayout {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 10
                            
                            ColumnLayout {
                                Layout.fillWidth: true
                                spacing: 5
                                
                                Label {
                                    text: modelData.nombre + " " + modelData.apellido
                                    font.pixelSize: 16
                                    font.bold: true
                                }
                                
                                Label {
                                    text: "ID: " + modelData.paciente_id
                                    font.pixelSize: 12
                                    color: Material.color(Material.Grey)
                                }
                                
                                Label {
                                    text: "Registro: " + (modelData.registro || "N/A")
                                    font.pixelSize: 12
                                    color: Material.color(Material.Grey)
                                }
                            }
                            
                            Button {
                                text: "✏️"
                                flat: true
                                onClicked: {
                                    patientForm.editMode = true
                                    patientForm.currentId = modelData.paciente_id
                                    patientForm.nombreField.text = modelData.nombre
                                    patientForm.apellidoField.text = modelData.apellido
                                }
                            }
                            
                            Button {
                                text: "🗑️"
                                flat: true
                                Material.foreground: Material.Red
                                onClicked: {
                                    deleteDialog.patientId = modelData.paciente_id
                                    deleteDialog.patientName = modelData.nombre + " " + modelData.apellido
                                    deleteDialog.open()
                                }
                            }
                        }
                        
                        MouseArea {
                            id: mouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            acceptedButtons: Qt.NoButton
                        }
                    }
                    
                    ScrollBar.vertical: ScrollBar {}
                }
            }
        }
        
        // Formulario de pacientes
        Rectangle {
            id: patientForm
            Layout.preferredWidth: 350
            Layout.fillHeight: true
            border.color: Material.color(Material.Grey)
            border.width: 1
            radius: 5
            
            property bool editMode: false
            property int currentId: -1
            property alias nombreField: nombreInput
            property alias apellidoField: apellidoInput
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 15
                
                Label {
                    text: patientForm.editMode ? "Editar Paciente" : "Nuevo Paciente"
                    font.pixelSize: 18
                    font.bold: true
                }
                
                TextField {
                    id: nombreInput
                    Layout.fillWidth: true
                    placeholderText: "Nombre"
                    Material.accent: Material.Teal
                }
                
                TextField {
                    id: apellidoInput
                    Layout.fillWidth: true
                    placeholderText: "Apellido"
                    Material.accent: Material.Teal
                }
                
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 10
                    
                    Button {
                        Layout.fillWidth: true
                        text: patientForm.editMode ? "Actualizar" : "Agregar"
                        Material.background: Material.Teal
                        Material.foreground: "white"
                        
                        onClicked: {
                            if (nombreInput.text && apellidoInput.text) {
                                if (patientForm.editMode) {
                                    apiManager.updatePatient(
                                        patientForm.currentId,
                                        nombreInput.text,
                                        apellidoInput.text
                                    )
                                } else {
                                    apiManager.addPatient(
                                        nombreInput.text,
                                        apellidoInput.text
                                    )
                                }
                                nombreInput.text = ""
                                apellidoInput.text = ""
                                patientForm.editMode = false
                            }
                        }
                    }
                    
                    Button {
                        text: "Cancelar"
                        visible: patientForm.editMode
                        onClicked: {
                            nombreInput.text = ""
                            apellidoInput.text = ""
                            patientForm.editMode = false
                        }
                    }
                }
                
                Item {
                    Layout.fillHeight: true
                }
            }
        }
    }
    
    // Dialog de confirmación de eliminación
    Dialog {
        id: deleteDialog
        anchors.centerIn: parent
        title: "Confirmar eliminación"
        modal: true
        standardButtons: Dialog.Yes | Dialog.No
        
        property int patientId: -1
        property string patientName: ""
        
        Label {
            text: "¿Está seguro que desea eliminar al paciente " + deleteDialog.patientName + "?"
        }
        
        onAccepted: {
            apiManager.deletePatient(deleteDialog.patientId)
        }
    }
}