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 médicos
        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 Médicos"
                    font.pixelSize: 18
                    font.bold: true
                }
                
                ListView {
                    id: medicsListView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    spacing: 5
                    
                    model: window.medicsData
                    
                    delegate: Rectangle {
                        width: medicsListView.width
                        height: 90
                        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: "Especialidad: " + (modelData.especialidad || "N/A")
                                    font.pixelSize: 14
                                    color: Material.color(Material.Teal)
                                }
                                
                                Label {
                                    text: "ID: " + modelData.medico_id
                                    font.pixelSize: 12
                                    color: Material.color(Material.Grey)
                                }
                            }
                            
                            Button {
                                text: "✏️"
                                flat: true
                                onClicked: {
                                    medicForm.editMode = true
                                    medicForm.currentId = modelData.medico_id
                                    medicForm.nombreField.text = modelData.nombre
                                    medicForm.apellidoField.text = modelData.apellido
                                    medicForm.especialidadField.text = modelData.especialidad
                                }
                            }
                            
                            Button {
                                text: "🗑️"
                                flat: true
                                Material.foreground: Material.Red
                                onClicked: {
                                    deleteDialog.medicId = modelData.medico_id
                                    deleteDialog.medicName = modelData.nombre + " " + modelData.apellido
                                    deleteDialog.open()
                                }
                            }
                        }
                        
                        MouseArea {
                            id: mouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            acceptedButtons: Qt.NoButton
                        }
                    }
                    
                    ScrollBar.vertical: ScrollBar {}
                }
            }
        }
        
        // Formulario de médicos
        Rectangle {
            id: medicForm
            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
            property alias especialidadField: especialidadInput
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 15
                
                Label {
                    text: medicForm.editMode ? "Editar Médico" : "Nuevo Médico"
                    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
                }
                
                TextField {
                    id: especialidadInput
                    Layout.fillWidth: true
                    placeholderText: "Especialidad"
                    Material.accent: Material.Teal
                }
                
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 10
                    
                    Button {
                        Layout.fillWidth: true
                        text: medicForm.editMode ? "Actualizar" : "Agregar"
                        Material.background: Material.Teal
                        Material.foreground: "white"
                        
                        onClicked: {
                            if (nombreInput.text && apellidoInput.text && especialidadInput.text) {
                                if (medicForm.editMode) {
                                    apiManager.updateMedic(
                                        medicForm.currentId,
                                        nombreInput.text,
                                        apellidoInput.text,
                                        especialidadInput.text
                                    )
                                } else {
                                    apiManager.addMedic(
                                        nombreInput.text,
                                        apellidoInput.text,
                                        especialidadInput.text
                                    )
                                }
                                nombreInput.text = ""
                                apellidoInput.text = ""
                                especialidadInput.text = ""
                                medicForm.editMode = false
                            }
                        }
                    }
                    
                    Button {
                        text: "Cancelar"
                        visible: medicForm.editMode
                        onClicked: {
                            nombreInput.text = ""
                            apellidoInput.text = ""
                            especialidadInput.text = ""
                            medicForm.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 medicId: -1
        property string medicName: ""
        
        Label {
            text: "¿Está seguro que desea eliminar al médico " + deleteDialog.medicName + "?"
        }
        
        onAccepted: {
            apiManager.deleteMedic(deleteDialog.medicId)
        }
    }
}