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

ApplicationWindow {
    id: window
    visible: true
    width: 1200
    height: 800
    title: "Sistema de Gestión Médica"
    
    Material.theme: Material.Light
    Material.accent: Material.Teal
    Material.primary: Material.Blue
    
    property var patientsData: []
    property var medicsData: []
    property var citationsData: []
    
    // Conexiones con el backend
    Connections {
        target: apiManager
        
        function onDataLoaded(dataType, jsonData) {
            var data = JSON.parse(jsonData)
            
            if (dataType === "patients") {
                patientsData = data
            } else if (dataType === "medics") {
                medicsData = data
            } else if (dataType === "citations") {
                citationsData = data
            }
        }
        
        function onOperationComplete(operation, success, message) {
            messageDialog.title = success ? "Éxito" : "Error"
            messageDialog.text = message
            messageDialog.open()
        }
    }
    
    Component.onCompleted: {
        apiManager.loadData("patients")
        apiManager.loadData("medics")
        apiManager.loadData("citations")
    }
    
    // Dialog para mensajes
    Dialog {
        id: messageDialog
        anchors.centerIn: parent
        modal: true
        standardButtons: Dialog.Ok
        
        property alias text: messageLabel.text
        
        Label {
            id: messageLabel
        }
    }
    
    // Header
    header: ToolBar {
        Material.background: Material.Blue
        
        RowLayout {
            anchors.fill: parent
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            
            Label {
                text: "🏥 Sistema de Gestión Médica"
                font.pixelSize: 20
                font.bold: true
                color: "white"
                Layout.fillWidth: true
            }
            
            Button {
                text: "🔄 Actualizar"
                flat: true
                Material.foreground: "white"
                onClicked: {
                    apiManager.loadData("patients")
                    apiManager.loadData("medics")
                    apiManager.loadData("citations")
                }
            }
        }
    }
    
    // Main content
    TabBar {
        id: tabBar
        width: parent.width
        
        TabButton {
            text: "👥 Pacientes"
            width: implicitWidth
        }
        
        TabButton {
            text: "👨‍⚕️ Médicos"
            width: implicitWidth
        }
        
        TabButton {
            text: "📅 Citas"
            width: implicitWidth
        }
    }
    
    StackLayout {
        width: parent.width
        anchors.top: tabBar.bottom
        anchors.bottom: parent.bottom
        currentIndex: tabBar.currentIndex
        
        // TAB 1: Pacientes
        Item {
            PatientsView {
                anchors.fill: parent
            }
        }
        
        // TAB 2: Médicos
        Item {
            MedicsView {
                anchors.fill: parent
            }
        }
        
        // TAB 3: Citas
        Item {
            CitationsView {
                anchors.fill: parent
            }
        }
    }
}