import gradio as gr

# HTML to inject Monaco Editor with Typst syntax (fallback to LaTeX for now)
monaco_html = """
<div id="monaco-container" style="width:100%; height: 500px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.js"></script>
<script>
  require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs' }});
  require(['vs/editor/editor.main'], function() {
    var editor = monaco.editor.create(document.getElementById('monaco-container'), {
      value: '',
      language: 'latex',  # Use 'latex' here, you can configure a custom Typst language mode if available
      theme: 'vs-dark',
      automaticLayout: true
    });
    editor.onDidChangeModelContent(function() {
      var value = editor.getValue();
      document.getElementById("monaco-input").value = value;  # Push content to hidden textbox
    });
  });
</script>
"""

# Gradio Blocks setup
with gr.Blocks() as demo:
    # Hidden Textbox to store content from Monaco editor
    code_input = gr.Textbox(visible=False, label="Typst Source")

    # Inject HTML for Monaco Editor
    gr.HTML(monaco_html)

    # Optional: Trigger AI, prompt generation, etc., based on the input
    output = gr.Textbox(label="Output")  # For AI responses or LaTeX rendering

    # Function to process Typst input and generate response
    def process_input(typst_input):
        # Placeholder for processing input (could be LaTeX rendering or AI response)
        return f"Processed Typst Input:\n{typst_input}"

    # When Monaco Editor content changes, process the input
    code_input.change(process_input, inputs=code_input, outputs=output)

    # Optional: Additional output or behavior
    gr.HTML("<h3>Generate Typst or LaTeX output with AI or live preview</h3>")

# Launch the Gradio interface
demo.launch()