import gradio as gr

# Global variables for cart and menu data
cart = []

menu_data = [
    {"name": "Veg Burger", "category": "VEGAN",
     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/veg_burger.jpg",
     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
     "price": "$8.99"},
    {"name": "Chicken Biryani", "category": "HALAL",
     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/chicken_biryani.jpg",
     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
     "price": "$12.99"},
    {"name": "Paneer Butter Masala", "category": "VEGAN",
     "image": "https://huggingface.co/spaces/Rammohan0504/dynamic_menu/resolve/main/images/paneer_butter_masala.jpg",
     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
     "price": "$10.99"}
]

# Function to add an item to the cart
def add_to_cart(item_name):
    cart.append({"item_name": item_name})
    return {"data": f"{item_name} added to cart!"}

# Function to display the current cart
def display_cart():
    if not cart:
        return "Your cart is empty."
    cart_content = "<h3>Your Cart:</h3><ul>"
    for item in cart:
        cart_content += f"<li>{item['item_name']}</li>"
    cart_content += "</ul>"
    return cart_content

# Function to generate dish cards
def display_dishes(category):
    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;'>"
    for dish in menu_data:
        if category == "ALL" or dish["category"] == category:
            html_content += f"""
            <div style='flex: 1 1 calc(30% - 20px); display: flex; flex-direction: column; align-items: center; 
                        justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; 
                        background-color: #f9f9f9; box-shadow: 0 4px 8px rgba(0,0,0,0.1);'>
                <img src='{dish['image']}' alt='{dish['name']}' style='width: 100%; height: 150px; object-fit: cover; border-radius: 10px;'>
                <h3 style='margin: 10px 0; font-size: 18px;'>{dish['name']}</h3>
                <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
                <p style='margin: 10px 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
                <button style='padding: 10px 20px; background-color: #28a745; color: white; border: none; 
                               border-radius: 5px; cursor: pointer;'
                        onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')">
                    Add to Cart
                </button>
            </div>
            """
    html_content += "</div>"
    return html_content

# Popup JavaScript for handling the modal
popup_js = """
<script>
    function showPopup(name, description, price, image) {
        const popup = document.getElementById("custom-popup");
        const overlay = document.getElementById("overlay");
        popup.innerHTML = `
            <button onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
            <img src="${image}" alt="${name}" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 10px;">
            <h3>${name}</h3>
            <p>${description}</p>
            <p style="font-weight: bold;">Price: ${price}</p>
            <button id="add-to-cart-button" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">
                Add to Cart
            </button>
        `;
        popup.style.display = "block";
        overlay.style.display = "block";
        
        document.getElementById("add-to-cart-button").onclick = async function() {
            const response = await fetch("/run/add_to_cart", {
                method: "POST",
                body: JSON.stringify({ name }),
                headers: { "Content-Type": "application/json" }
            });
            const result = await response.json();
            alert(result.data);  // Show success message
            closePopup();  // Automatically close popup
        };
    }

    function closePopup() {
        document.getElementById("custom-popup").style.display = "none";
        document.getElementById("overlay").style.display = "none";
    }
</script>
"""

# Popup HTML structure
popup_html = """
<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 999;"></div>
<div id="custom-popup" 
     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; max-width: 90%; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; position: relative;">
</div>
"""

# Main Gradio App
with gr.Blocks() as demo:
    gr.HTML(popup_html)  # Add popup container
    gr.HTML(popup_js)    # Add popup JavaScript

    gr.HTML("<h1 style='text-align: center;'>🍛 Welcome to the Biryani Hub 🍛</h1>")

    with gr.Tabs():
        # Menu Tab
        with gr.Tab("Menu"):
            with gr.Row():
                btn_all = gr.Button("ALL")
                btn_vegan = gr.Button("VEGAN")
                btn_halal = gr.Button("HALAL")

            dish_display = gr.HTML(value=display_dishes("ALL"))

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

        # Cart Tab
        with gr.Tab("Cart"):
            cart_display = gr.HTML(value=display_cart())
            refresh_cart_btn = gr.Button("Refresh Cart")
            refresh_cart_btn.click(
                lambda: display_cart(),
                outputs=cart_display
            )

# Register the add_to_cart function
demo.add_to_cart = add_to_cart

demo.launch()