import gradio as gr

# Extended menu data with dish details
menu_data = [
    {"name": "Veg Burger", "category": "VEGAN",
     "image": "https://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
     "spice_level": "Medium", "portion_size": "Regular"},
    {"name": "Chicken Biryani", "category": "HALAL",
     "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
     "spice_level": "High", "portion_size": "Large"},
    {"name": "Paneer Butter Masala", "category": "VEGAN",
     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
     "spice_level": "Mild", "portion_size": "Medium"},
    {"name": "Beef Steak", "category": "HALAL",
     "image": "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg",
     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
     "spice_level": "Medium", "portion_size": "Large"},
    {"name": "Mushroom Soup", "category": "VEGAN",
     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg",
     "description": "Creamy mushroom soup with fresh herbs.",
     "spice_level": "Mild", "portion_size": "Small"}
]

# Define available dishes and their portion sizes with image paths
dish_data = {
    "Veg Burger": {
        "main": "pizza_main.jpg",
        "small": "pizza_small.jpg",
        "medium": "pizza_medium.jpg",
        "large": "pizza_large.jpg",
    },
    "Chicken Biryani": {
        "main": "pizza_main.jpg",
        "small": "pizza_small.jpg",
        "medium": "pizza_medium.jpg",
        "large": "pizza_large.jpg",
    },
    "Paneer Butter Masala": {
        "main": "pizza_main.jpg",
        "small": "pizza_small.jpg",
        "medium": "pizza_medium.jpg",
        "large": "pizza_large.jpg",
    },
}

spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]

# Function to filter dishes based on category
def filter_dishes(category):
    if category == "ALL":
        return menu_data
    return [dish for dish in menu_data if dish["category"] == category]

# Function to display dishes with images
def display_dishes(category):
    filtered_dishes = filter_dishes(category)
    html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
    for dish in filtered_dishes:
        html_content += f"""
        <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
                    padding: 10px; border-radius: 10px; width: 200px; background-color: #f9f9f9;'
             onclick='selectDish(\"{dish['name']}\")'>
            <img src='{dish['image']}' alt='{dish['name']}' 
                 style='width: 180px; height: 120px; object-fit: cover; border-radius: 10px;'>
            <h4 style='margin-top: 10px; font-size: 16px; color: #444;'>{dish['name']}</h4>
        </div>
        """
    html_content += "</div>"
    return html_content

# Function to fetch details of the selected dish
def get_dish_details(dish_name):
    if dish_name in dish_data:
        main_image = dish_data[dish_name]["main"]
        return main_image, dish_name, "Select a portion size below:"
    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available."

# Function to display the portion size image
def display_portion(dish_name, portion):
    if dish_name in dish_data:
        return dish_data[dish_name].get(portion, None)
    return None

# Function to simulate placing an order
def place_order(dish_name, spice_level, portion_size):
    return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."

# Main Gradio App
with gr.Blocks() as demo:
    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")

    # Buttons for category selection
    gr.Markdown("### Select a Category")
    with gr.Row():
        btn_all = gr.Button("ALL")
        btn_vegan = gr.Button("VEGAN")
        btn_halal = gr.Button("HALAL")

    # Dish display section
    gr.Markdown("### Available Dishes")
    dish_display = gr.HTML(value=display_dishes("ALL"))

    # Dish Details Section
    gr.Markdown("### Dish Details")
    with gr.Row():
        dish_image = gr.Image(label="Dish Image", height=200, width=200)
        with gr.Column():
            dish_name = gr.Textbox(label="Dish Name", interactive=False)
            dish_description = gr.Textbox(label="Description", interactive=False)
            spice_dropdown = gr.Radio(label="Select Spice Level", choices=spice_options, value="🌶 Medium")
            portion_dropdown = gr.Radio(label="Select Portion Size", choices=["small", "medium", "large"], value="medium")
            portion_image = gr.Image(label="Portion Size Image")

    # Place Order Button
    place_order_btn = gr.Button("Place Order")
    order_status = gr.Textbox(label="Order Status", interactive=False)

    # Event: Update dish display for selected category
    def update_dishes(category):
        return gr.update(value=display_dishes(category))

    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=dish_display)
    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)

    # Event: Show dish details when a dish is selected
    def show_dish_details(dish_name):
        image, name, description = get_dish_details(dish_name)
        return image, name, description

    # Hidden input to receive dish name from JavaScript
    selected_dish_name = gr.Textbox(visible=False)
    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name,
                              outputs=[dish_image, dish_name, dish_description])

    # Event: Display portion size image
    portion_dropdown.change(fn=display_portion, inputs=[selected_dish_name, portion_dropdown], outputs=portion_image)

    # Event: Place order button
    place_order_btn.click(fn=place_order, 
                          inputs=[dish_name, spice_dropdown, portion_dropdown], 
                          outputs=order_status)

    # Inject JavaScript to handle clicks and pass dish names
    gr.HTML("""
    <script>
    function selectDish(dishName) {
        let input = document.querySelector('input[aria-label="selected_dish_name"]');
        input.value = dishName;
        input.dispatchEvent(new Event('input', { bubbles: true }));
    }
    </script>
    """)

demo.launch()