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 = {}

# Function to add an item to the cart
def add_to_cart(item_name):
    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 update_menu_display(), update_cart_summary_bar()

# Function to remove an item from the cart
def remove_from_cart(item_name):
    if item_name in cart:
        cart[item_name]["quantity"] -= 1
        if cart[item_name]["quantity"] == 0:
            del cart[item_name]
    return update_menu_display(), update_cart_summary_bar()

# Function to update the menu display dynamically
def update_menu_display():
    menu_html = ""
    for item in menu_data:
        if item["name"] in cart:
            # Show quantity controls if the item is 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 style="flex-grow: 1;">
                    <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="remove_from_cart('{item['name']}')" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px; cursor: pointer;">-</button>
                    <span style="margin: 0 10px;">{cart[item['name']]['quantity']}</span>
                    <button onclick="add_to_cart('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px; cursor: pointer;">+</button>
                </div>
            </div>
            """
        else:
            # Show 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 style="flex-grow: 1;">
                    <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                    <p style="font-size: 12px; color: gray;">{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']}')">Add</button>
            </div>
            """
    return menu_html

# Function to update the cart summary bar
def update_cart_summary_bar():
    num_items = sum(item["quantity"] for item in cart.values())
    total_price = sum(item["price"] * item["quantity"] for item in cart.values())
    return f"""
    <div style="background-color: #28a745; color: white; padding: 10px; border-radius: 5px; text-align: center; position: fixed; bottom: 0; width: 100%; left: 0;">
        <span>{num_items} items added</span>
        <button style="background-color: #ffffff; color: #28a745; border: none; padding: 5px 10px; margin-left: 20px; border-radius: 5px; cursor: pointer;">View Cart</button>
        <span style="margin-left: 20px;">Total: ${total_price:.2f}</span>
    </div>
    """

# Gradio Interface
with gr.Blocks() as demo:
    gr.Markdown("# Dynamic Food Menu")

    # Menu display
    menu_html = gr.HTML(value=update_menu_display())
    cart_summary_bar = gr.HTML(value=update_cart_summary_bar())

    # Display Menu
    gr.Row([menu_html])

    # Cart Summary Bar
    gr.Row([cart_summary_bar])

demo.launch()