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 citas
        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 Citas"
                    font.pixelSize: 18
                    font.bold: true
                }
                
                ListView {
                    id: citationsListView
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    clip: true
                    spacing: 5
                    
                    model: window.citationsData
                    
                    delegate: Rectangle {
                        width: citationsListView.width
                        height: 110
                        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: "Cita #" + modelData.cita_id
                                    font.pixelSize: 16
                                    font.bold: true
                                }
                                
                                Label {
                                    text: "Detalles: " + (modelData.detalles || "Sin detalles")
                                    font.pixelSize: 13
                                    wrapMode: Text.WordWrap
                                    Layout.fillWidth: true
                                }
                                
                                Label {
                                    text: "Médico ID: " + modelData.medico_id
                                    font.pixelSize: 12
                                    color: Material.color(Material.Blue)
                                }
                                
                                Label {
                                    text: "Paciente ID: " + modelData.paciente_id
                                    font.pixelSize: 12
                                    color: Material.color(Material.Teal)
                                }
                            }
                            
                            Button {
                                text: "✏️"
                                flat: true
                                onClicked: {
                                    citationForm.editMode = true
                                    citationForm.currentId = modelData.cita_id
                                    citationForm.detallesField.text = modelData.detalles
                                    citationForm.medicoIdField.text = modelData.medico_id.toString()
                                    citationForm.pacienteIdField.text = modelData.paciente_id.toString()
                                }
                            }
                            
                            Button {
                                text: "🗑️"
                                flat: true
                                Material.foreground: Material.Red
                                onClicked: {
                                    deleteDialog.citationId = modelData.cita_id
                                    deleteDialog.open()
                                }
                            }
                        }
                        
                        MouseArea {
                            id: mouseArea
                            anchors.fill: parent
                            hoverEnabled: true
                            acceptedButtons: Qt.NoButton
                        }
                    }
                    
                    ScrollBar.vertical: ScrollBar {}
                }
            }
        }
        
        // Formulario de citas
        Rectangle {
            id: citationForm
            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 detallesField: detallesInput
            property alias medicoIdField: medicoIdInput
            property alias pacienteIdField: pacienteIdInput
            
            ColumnLayout {
                anchors.fill: parent
                anchors.margins: 20
                spacing: 15
                
                Label {
                    text: citationForm.editMode ? "Editar Cita" : "Nueva Cita"
                    font.pixelSize: 18
                    font.bold: true
                }
                
                Label {
                    text: "Seleccionar Médico:"
                    font.pixelSize: 14
                }
                
                ComboBox {
                    id: medicoCombo
                    Layout.fillWidth: true
                    model: window.medicsData
                    textRole: "nombre"
                    displayText: currentIndex >= 0 ? window.medicsData[currentIndex].nombre + " " + window.medicsData[currentIndex].apellido : "Seleccione médico"
                    Material.accent: Material.Teal
                }
                
                Label {
                    text: "Seleccionar Paciente:"
                    font.pixelSize: 14
                }
                
                ComboBox {
                    id: pacienteCombo
                    Layout.fillWidth: true
                    model: window.patientsData
                    textRole: "nombre"
                    displayText: currentIndex >= 0 ? window.patientsData[currentIndex].nombre + " " + window.patientsData[currentIndex].apellido : "Seleccione paciente"
                    Material.accent: Material.Teal
                }
                
                TextField {
                    id: detallesInput
                    Layout.fillWidth: true
                    placeholderText: "Detalles de la cita"
                    Material.accent: Material.Teal
                }
                
                // Campos ocultos para modo edición
                TextField {
                    id: medicoIdInput
                    visible: false
                }
                
                TextField {
                    id: pacienteIdInput
                    visible: false
                }
                
                RowLayout {
                    Layout.fillWidth: true
                    spacing: 10
                    
                    Button {
                        Layout.fillWidth: true
                        text: citationForm.editMode ? "Actualizar" : "Agregar"
                        Material.background: Material.Teal
                        Material.foreground: "white"
                        
                        onClicked: {
                            var medicoId = citationForm.editMode ? 
                                parseInt(medicoIdInput.text) : 
                                (medicoCombo.currentIndex >= 0 ? window.medicsData[medicoCombo.currentIndex].medico_id : -1)
                            
                            var pacienteId = citationForm.editMode ? 
                                parseInt(pacienteIdInput.text) : 
                                (pacienteCombo.currentIndex >= 0 ? window.patientsData[pacienteCombo.currentIndex].paciente_id : -1)
                            
                            if (detallesInput.text && medicoId > 0 && pacienteId > 0) {
                                if (citationForm.editMode) {
                                    apiManager.updateCitation(
                                        citationForm.currentId,
                                        detallesInput.text,
                                        medicoId,
                                        pacienteId
                                    )
                                } else {
                                    apiManager.addCitation(
                                        detallesInput.text,
                                        medicoId,
                                        pacienteId
                                    )
                                }
                                detallesInput.text = ""
                                medicoCombo.currentIndex = -1
                                pacienteCombo.currentIndex = -1
                                citationForm.editMode = false
                            }
                        }
                    }
                    
                    Button {
                        text: "Cancelar"
                        visible: citationForm.editMode
                        onClicked: {
                            detallesInput.text = ""
                            medicoCombo.currentIndex = -1
                            pacienteCombo.currentIndex = -1
                            citationForm.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 citationId: -1
        
        Label {
            text: "¿Está seguro que desea eliminar esta cita?"
        }
        
        onAccepted: {
            apiManager.deleteCitation(deleteDialog.citationId)
        }
    }
}