import gradio as gr
from utils_gdmk import (
    inicializar_grafo, cargar_normativas, cargar_estudiantes, mostrar_detalles,
    visualizar_grafo, agregar_aporte
)

# Initialize graph before launching UI
inicializar_grafo()
normativas = cargar_normativas()
estudiantes = cargar_estudiantes()

coleccion = "normativa_peruana_gestion_riesgos"
coleccion = "propuestas_gestion_incertidumbre"

norm_options = [norm['nombre'] for norm in normativas[coleccion]
student_names = estudiantes["estudiantes"]

# Gradio Interface
iface = gr.Blocks()

with iface:
    gr.Markdown("# Foro Dinámico con Visualización de Red")

    with gr.Row():
        gr.Markdown('## Selección del Documento')   
    
    normativa_dropdown = gr.Dropdown(choices=norm_options, label="Documentos a Explorar")
    normativa_html = gr.HTML()

    # 📌 Update HTML when a norm is selected
    normativa_dropdown.change(fn=mostrar_detalles, inputs=normativa_dropdown, outputs=normativa_html)

    # 📌 Graph Display
    with gr.Row():
        gr.Markdown("## Red de Aportes:")
    graph_output = gr.Image(visualizar_grafo(), label="Red de Aportes")

    # 📌 Input Fields
    with gr.Row():
        nombre = gr.Dropdown(choices=student_names, label="Nombre del Estudiante")
        enfoque = gr.Radio(["Determinista", "Sistémico", "Evolutivo", "Cognitivo"], label="Enfoque")

    with gr.Row():
        texto = gr.Textbox(label="Tu aporte")

    # 📌 Submit Button (Now Uses `normativa_dropdown` Directly)
    submit_button = gr.Button("Agregar Aporte")
    submit_button.click(
        fn=agregar_aporte,
        inputs=[nombre, enfoque, normativa_dropdown, texto],  
        outputs=graph_output
    )

iface.launch(share=True)