import gradio as gr
from utils import generate_lesson
import html

# Beginner coding topics
TOPICS = [
    "Introduction to HTML", "CSS Basics", "JavaScript Fundamentals",
    "Python Variables", "Python Loops", "Python Functions",
    "Classes and Objects in Python", "Dictionaries and Lists",
    "SQL Databases", "Parsing Data in Python", "Using Libraries in Python",
    "Building a Button in HTML/CSS", "Making a Webpage Layout",
]

css_styles = """
body {
    background: #111;
    color: #fa29bc;
    font-family: monospace;
    padding: 20px;
}
footer { display:none; }
button {
    background:#fa29bc;
    color:white;
    border:none;
    padding:10px 16px;
    border-radius:8px;
    cursor:pointer;
}
"""

with gr.Blocks(title="Beginner Coding Lessons", css=css_styles) as demo:

    with gr.Column():
        topic_dropdown = gr.Dropdown(choices=TOPICS, label="Choose Topic", value=TOPICS[0])
        generate_btn = gr.Button("Generate Lesson")
        
        # Standard Markdown output for lessons
        lesson_output = gr.Markdown()
        
        # Status message for "please wait"
        status_label = gr.Label(value="")  

    def generate(topic):
        # Show "please wait" message
        status_label.value = "✨ Your lesson is being generated... please wait!"
        
        # Generate the lesson
        file_path, lesson_text = generate_lesson(topic)
        
        # Clear the status message
        status_label.value = ""
        
        return lesson_text, status_label.value

    generate_btn.click(fn=generate, inputs=topic_dropdown, outputs=[lesson_output, status_label])

if __name__ == "__main__":
    demo.launch()