import pandas as pd
import gradio as gr


# Load menu data from the Excel file
def load_menu(file_path="menu.xlsx"):
    menu_data = pd.read_excel(file_path)
    grouped_menu = menu_data.groupby("Category")
    menu = {category: items.to_dict(orient="records") for category, items in grouped_menu}
    return menu


# Generate HTML content for the menu
def generate_menu_html(menu):
    html_content = ""
    for category, items in menu.items():
        html_content += f"<h2>{category}</h2><div style='margin-bottom: 20px;'>"
        for item in items:
            html_content += f"""
            <div style="border: 1px solid #ddd; margin: 10px; padding: 10px; border-radius: 8px; display: inline-block; width: 200px; vertical-align: top; text-align: center;">
                <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 150px; height: 100px; object-fit: cover; margin-bottom: 10px;">
                <h4>{item['Dish Name']}</h4>
                <p>Price: ${item['Price']}</p>
                <button onclick="showDetails('{item['Dish Name']}')">Add</button>
            </div>
            """
        html_content += "</div>"
    return html_content


# Fetch dish details for the pop-up card
def fetch_dish_details(dish_name, menu_data_path="menu.xlsx"):
    menu_data = pd.read_excel(menu_data_path)
    item = menu_data[menu_data["Dish Name"] == dish_name].to_dict(orient="records")
    if item:
        details = item[0]
        html = f"""
        <h2>{details['Dish Name']}</h2>
        <img src="{details['Image URL']}" alt="{details['Dish Name']}" style="width: 200px; margin-bottom: 20px;">
        <p><strong>Description:</strong> {details['Description']}</p>
        <p><strong>Ingredients:</strong> {details['Ingredients']}</p>
        <p><strong>Allergen Info:</strong> {details['Allergen Info']}</p>
        <p><strong>Recommended Items:</strong> {details['Recommended Items']}</p>
        <p><strong>Spice Levels:</strong> {details['Spice Levels']}</p>
        """
        return html
    else:
        return "<p style='color: red;'>Dish not found.</p>"


# Gradio interface for the main menu and dish details
def main_interface():
    menu = load_menu()
    menu_html = generate_menu_html(menu)
    return menu_html


def detail_interface(dish_name):
    details_html = fetch_dish_details(dish_name)
    return details_html


# Gradio App
with gr.Blocks() as app:
    with gr.Row():
        gr.Markdown("# Dynamic Menu Display")
    with gr.Row():
        menu_output = gr.HTML()
        detail_output = gr.HTML()
    with gr.Row():
        dish_name_input = gr.Textbox(label="Dish Name", placeholder="Enter dish name to view details.")
        fetch_button = gr.Button("Fetch Details")
        fetch_button.click(fn=detail_interface, inputs=[dish_name_input], outputs=[detail_output])
    menu_output.value = main_interface()

# Launch the app
if __name__ == "__main__":
    app.launch()