import gradio as gr
import pandas as pd

# Simulated menu data
menu_data = [
    {"name": "Samosa", "price": 10, "description": "Crispy fried pastry filled with spiced potatoes and peas. Serves 1. [Energy: 200 kcal, Protein: 5g, Carbohydrates: 25g, Fiber: 3g, Fat: 10g, Sugar: 1g]", "image": "images/samosa.jpg"},
    {"name": "Onion Pakoda", "price": 14, "description": "Deep-fried onion fritters seasoned with herbs and spices. Serves 2. [Energy: 250 kcal, Protein: 6g, Carbohydrates: 30g, Fiber: 4g, Fat: 12g, Sugar: 2g]", "image": "images/onion-pakoda.jpg"},
    {"name": "Paneer Tikka", "price": 15, "description": "Grilled paneer cubes marinated in spices. Serves 1. [Energy: 300 kcal, Protein: 15g, Carbohydrates: 10g, Fiber: 2g, Fat: 20g, Sugar: 1g]", "image": "images/paneer-tikka.jpg"},
    {"name": "Veg Biryani", "price": 12, "description": "Aromatic rice cooked with vegetables and spices. Serves 1. [Energy: 350 kcal, Protein: 8g, Carbohydrates: 50g, Fiber: 5g, Fat: 12g, Sugar: 2g]", "image": "images/veg-biryani.jpg"},
    {"name": "Chicken Curry", "price": 16, "description": "Tender chicken pieces cooked in a spicy curry. Serves 1. [Energy: 400 kcal, Protein: 25g, Carbohydrates: 10g, Fiber: 2g, Fat: 25g, Sugar: 3g]", "image": "images/chicken-curry.jpg"},
    {"name": "Masala Dosa", "price": 10, "description": "Thin rice crepe stuffed with spiced potato filling. Serves 1. [Energy: 300 kcal, Protein: 6g, Carbohydrates: 45g, Fiber: 4g, Fat: 8g, Sugar: 1g]", "image": "images/masala-dosa.jpg"}
]

cart = []

def display_menu():
    """
    Function to display the menu in a formatted style with an 'Add' button for each item.
    """
    menu_html = ""
    for item in menu_data:
        menu_html += f"""
        <div style="display: flex; margin-bottom: 15px; align-items: center; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
            <img src="{item['image']}" alt="{item['name']}" style="width: 100px; height: 100px; margin-right: 15px; border-radius: 5px;">
            <div style="flex-grow: 1;">
                <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                <p style="margin: 5px 0; font-size: 12px;">{item['description']}</p>
            </div>
            <button style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer;" onclick="add_to_cart('{item['name']}', {item['price']})">Add</button>
        </div>
        """
    return menu_html

def add_to_cart(item_name, item_price):
    """
    Add an item to the cart with its price.
    """
    cart.append({"item": item_name, "price": item_price})
    return f"Added {item_name} to the cart!"

def view_cart():
    """
    View the cart items and calculate the total price.
    """
    if not cart:
        return "Your cart is empty."
    
    cart_summary = "<h3>Cart Summary:</h3><ul>"
    total_price = 0
    for item in cart:
        cart_summary += f"<li>{item['item']} - ${item['price']}</li>"
        total_price += item["price"]
    cart_summary += f"</ul><h4>Total Price: ${total_price}</h4>"
    return cart_summary

with gr.Blocks() as demo:
    gr.Markdown("# Dynamic Food Menu")
    
    # Display menu
    menu_display = gr.HTML(value=display_menu())
    
    # Cart interactions
    with gr.Row():
        cart_button = gr.Button("View Cart")
        cart_output = gr.HTML()
    
    cart_button.click(view_cart, outputs=cart_output)

demo.launch()