import gradio as gr
import pandas as pd

# Load menu data from Excel file
def load_menu(file_path="menu.xlsx"):
    menu_df = pd.read_excel(file_path)
    menu_df.columns = menu_df.columns.str.strip().str.lower()
    
    column_mapping = {
        "name": next((col for col in menu_df.columns if "name" in col), None),
        "price": next((col for col in menu_df.columns if "price" in col), None),
        "description": next((col for col in menu_df.columns if "description" in col), None),
        "image": next((col for col in menu_df.columns if "image" in col), None),
    }
    
    missing_columns = [key for key, col in column_mapping.items() if col is None]
    if missing_columns:
        raise ValueError(f"Excel file is missing one or more required columns: {missing_columns}")
    
    menu = []
    for _, row in menu_df.iterrows():
        menu.append({
            "name": row[column_mapping["name"]],
            "price": row[column_mapping["price"]],
            "description": row[column_mapping["description"]],
            "image": row[column_mapping["image"]],
        })
    return menu

# Initialize menu and cart
menu_data = load_menu("menu.xlsx")
cart = {}

def display_menu():
    """
    Render the menu dynamically as HTML.
    """
    menu_html = ""
    for item in menu_data:
        if item["name"] in cart:
            # Quantity selector if the item is already in the cart
            menu_html += f"""
            <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                <img src="{item['image']}" alt="{item['name']}" style="width: 80px; height: 80px; border-radius: 5px; margin-right: 15px;">
                <div>
                    <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                    <p style="font-size: 12px; color: gray;">{item['description']}</p>
                </div>
                <div style="margin-left: auto; display: flex; align-items: center;">
                    <button onclick="decrease_quantity('{item['name']}')" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
                    <span style="margin: 0 10px;">{cart[item['name']]['quantity']}</span>
                    <button onclick="increase_quantity('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
                </div>
            </div>
            """
        else:
            # Add button if the item is not in the cart
            menu_html += f"""
            <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
                <img src="{item['image']}" alt="{item['name']}" style="width: 80px; height: 80px; border-radius: 5px; margin-right: 15px;">
                <div>
                    <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                    <p style="font-size: 12px; color: gray;">{item['description']}</p>
                </div>
                <button id="add-{item['name']}" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; margin-left: auto;">Add</button>
            </div>
            """
    return menu_html

def add_to_cart(item_name):
    """
    Add an item to the cart.
    """
    if item_name in cart:
        cart[item_name]["quantity"] += 1
    else:
        for item in menu_data:
            if item["name"] == item_name:
                cart[item_name] = {
                    "name": item["name"],
                    "price": item["price"],
                    "quantity": 1
                }
                break
    return display_menu()

def update_quantity(item_name, operation):
    """
    Update the quantity of an item in the cart.
    """
    if item_name in cart:
        if operation == "increase":
            cart[item_name]["quantity"] += 1
        elif operation == "decrease":
            cart[item_name]["quantity"] -= 1
            if cart[item_name]["quantity"] <= 0:
                del cart[item_name]
    return display_menu()

# Gradio Interface
with gr.Blocks() as demo:
    gr.Markdown("# Dynamic Food Menu")
    
    menu_html = gr.HTML(value=display_menu())

    # Hidden input fields for Gradio's event handling
    item_name_input = gr.Textbox(visible=False)
    operation_input = gr.Textbox(visible=False)

    # Simulate "Add to Cart" and "Update Quantity"
    add_button = gr.Button("Add to Cart", visible=False)
    update_button = gr.Button("Update Quantity", visible=False)

    # Update menu after adding or updating quantity
    add_button.click(fn=add_to_cart, inputs=item_name_input, outputs=menu_html)
    update_button.click(fn=update_quantity, inputs=[item_name_input, operation_input], outputs=menu_html)

    # Include menu_html in Blocks context
    menu_html.render()

demo.launch()