import gradio as gr
from food_data import FOOD_ITEMS

def get_food_details(name, image, nutrition_details):
    """Generate clean HTML content with the image and structured nutrition values."""
    # Split the nutrition details into separate lines
    nutrition_list = nutrition_details.split(", ")
    formatted_nutrition = "<br>".join(nutrition_list)

    return f"""
    <div style="text-align: center; padding: 15px; border: 2px solid #ddd; 
                border-radius: 10px; box-shadow: 0px 4px 8px rgba(0,0,0,0.2); 
                background-color: #fff; width: 100%; max-width: 400px; margin: auto;">
        <img src='{image}' alt='{name}' 
             style='width: 100%; max-height: 200px; border-radius: 10px; margin-bottom: 15px;'>
        <h2 style="color: #FF6347; margin: 10px 0; font-size: 1.8em;">{name}</h2>
        <div style="text-align: left; margin-top: 10px;">
            <h3 style="color: #555; text-align: center;">Nutrition</h3>
            <p style="font-size: 1em; color: #333; line-height: 1.6; margin-left: 20px;">
                {formatted_nutrition}
            </p>
        </div>
    </div>
    """

# Gradio Interface
with gr.Blocks() as demo:
    gr.Markdown("<h1 style='text-align:center; color:#FF6347;'>🍽️ Restaurant Menu 🍽️</h1>")
    
    for category, items in FOOD_ITEMS.items():
        gr.Markdown(f"<h2 style='text-align:center; color:#FF6347;'>{category} Menu</h2>")
        with gr.Row():
            for item in items:
                with gr.Column():
                    # Button for each food item
                    btn = gr.Button(item["name"], elem_id=f"menu-item-{item['name'].lower()}")
                    output_html = gr.HTML()  # Output will be formatted HTML

                    # Display clean HTML content on button click
                    btn.click(
                        fn=get_food_details, 
                        inputs=[gr.Text(value=item["name"], visible=False),
                                gr.Text(value=item["image"], visible=False),
                                gr.Text(value=item["nutrition"], visible=False)],
                        outputs=output_html
                    )

    gr.Markdown("<p style='text-align:center; margin-top:20px; color: gray;'>© 2024 Delicious Restaurant | Designed with ❤️</p>")

demo.launch()