import json
import os
import re
from collections import OrderedDict
from html import escape
from pathlib import Path

import gradio as gr
import uvicorn
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel, Field

from meltmind_engine import MeltMindEngine
from space_runtime import backend_status, start_space_backend


ROOT = Path(__file__).parent
MENU = json.loads((ROOT / "data" / "menu.json").read_text())
ADD_ONS = json.loads((ROOT / "data" / "meltmind" / "add_ons.json").read_text())["add_ons"]
INGREDIENTS = json.loads((ROOT / "data" / "meltmind" / "ingredients.json").read_text())["ingredients"]
BUSINESS = json.loads((ROOT / "data" / "meltmind" / "business_profile.json").read_text())
POLICIES = json.loads((ROOT / "data" / "meltmind" / "operations_and_policies.json").read_text())
CSS = (ROOT / "styles.css").read_text()
ENGINE = MeltMindEngine()
SPACE_BACKEND = start_space_backend()

LOGO_PATH = "assets/brand/Meltroom.jpeg"
HERO_PATH = "assets/hero/meltroom_special1.jpg"
WHATSAPP_NUMBER = "917780534935"


class ChatRequest(BaseModel):
    message: str = Field(min_length=1, max_length=2000)
    history: list = Field(default_factory=list)


class DesignerRequest(BaseModel):
    budget_inr: int = Field(default=500, ge=99, le=50000)
    group_size: int = Field(default=1, ge=1, le=50)
    flavours: list[str] = Field(default_factory=list)
    textures: list[str] = Field(default_factory=list)
    premium: bool = False
    variety: bool = False
    less_sweet: bool = False
    allergen_ids: list[str] = Field(default_factory=list)
    severe_allergy: bool = False
    request: str = ""


def asset_url(path: str) -> str:
    return f"/{path}"


def numeric_price(value) -> int:
    match = re.search(r"\d+", str(value))
    return int(match.group()) if match else 0


def slug(value: str) -> str:
    return re.sub(r"[^a-z0-9]+", "-", value.lower()).strip("-")


def add_on_matches_product(add_on: dict, product: dict) -> bool:
    product_id = slug(product["name"])
    explicit_ids = {slug(value) for value in add_on.get("compatible_product_ids", [])}
    if product_id in explicit_ids:
        return True
    if product["category"] in add_on.get("compatible_categories", []):
        return True

    aliases = {
        "choco_chips": ("chocolate chips", "extra chocolate chips"),
        "chocolate_sauce": ("chocolate sauce", "extra chocolate drizzle"),
        "white_chocolate_sauce": ("white chocolate sauce", "extra white chocolate drizzle"),
        "pista": ("extra pistachio filling", "extra pistachio cream", "pistachio"),
        "kunafa": ("kunafa",),
        "banana_slices": ("extra banana", "banana slices"),
        "mango": ("extra mango", "fresh mango"),
        "dark_chocolate_filling": ("extra dark chocolate", "dark chocolate filling"),
        "brownie_crumbs": ("brownie chunks", "brownie crumbs"),
        "whipped_cream": ("extra cream filling", "whipped cream"),
    }
    listed = {value.strip().lower() for value in product["ordering_information"].get("available_add_ons", [])}
    return any(alias in listed for alias in aliases.get(add_on["add_on_id"], (add_on["name"].lower(),)))


def js_data() -> str:
    products = []
    for item in MENU:
        compatible_add_ons = [
            add_on["add_on_id"]
            for add_on in ADD_ONS
            if add_on["availability"] == "available" and add_on_matches_product(add_on, item)
        ]
        products.append(
            {
                "id": slug(item["name"]),
                "name": item["name"],
                "category": item["category"],
                "price": numeric_price(item["price"]),
                "image": asset_url(item["image"]) if item.get("image") else "",
                "tagline": item.get("tagline", ""),
                "description": item.get("detailed_description") or item.get("description", ""),
                "short": item.get("one_line_description") or item.get("description", ""),
                "serves": item.get("can_be_served_for", ""),
                "sweetness": item["taste_profile"].get("sweetness", ""),
                "chocolate": item["taste_profile"].get("chocolate_intensity", ""),
                "textures": item["taste_profile"].get("textures", []),
                "flavours": item["taste_profile"].get("flavours", []),
                "bestFor": [value for value in item["taste_profile"].get("best_for", []) if value],
                "tags": item.get("tags", []),
                "availableAddOns": compatible_add_ons,
            }
        )
    add_ons = [
        {
            "id": item["add_on_id"],
            "name": item["name"],
            "price": item["price_inr"],
            "description": item["description"],
            "flavours": item["flavour_contribution"],
            "textures": item["texture_contribution"],
            "allergens": item["allergen_ids"],
            "premium": item["premium_add_on"],
            "compatibleProductIds": [slug(value) for value in item.get("compatible_product_ids", [])],
            "compatibleCategories": item.get("compatible_categories", []),
            "message": item.get("upsell_message", ""),
        }
        for item in ADD_ONS
        if item["availability"] == "available"
    ]
    return json.dumps({"products": products, "addOns": add_ons}, ensure_ascii=False).replace("</", "<\\/")


CATEGORY_DETAILS = {
    "Brownie": ("01", "The originals", "Fudgy, focused, and made for the first perfect bite."),
    "Melt Creation": ("02", "Playful by design", "Unexpected formats made for sharing, snacking, and showing off."),
    "Dessert Sandwich": ("03", "Layered obsession", "Two brownie layers, rich fillings, and a gloriously substantial bite."),
    "Brownie Bowl": ("04", "The signature bowls", "Loaded, spoonable MeltRoom experiences for one or two."),
}


def product_card(item: dict) -> str:
    product_id = slug(item["name"])
    image = asset_url(item["image"]) if item.get("image") else ""
    flavours = " · ".join(item["taste_profile"].get("flavours", [])[:2])
    badges = [
        f'<span>{escape(item.get("can_be_served_for", ""))}</span>',
        "<span>Gluten-free</span>",
        "<span>Eggless</span>",
    ]
    if "tree_nuts" in item["dietary_information"].get("allergens", []):
        badges.append("<span>Contains nuts</span>")
    return f"""
    <article class="product-card reveal" data-category="{escape(item["category"])}"
      data-search="{escape((item["name"] + " " + " ".join(item.get("tags", [])) + " " + flavours).lower())}">
      <button class="product-visual open-product" data-product-id="{product_id}" type="button">
        <img src="{image}" alt="{escape(item["name"])}" loading="lazy">
        <span class="visual-category">{escape(item["category"])}</span>
        <span class="visual-arrow">↗</span>
      </button>
      <div class="product-copy">
        <div class="product-meta"><span>{escape(flavours)}</span><strong>₹{numeric_price(item["price"])}</strong></div>
        <button class="product-title open-product" data-product-id="{product_id}" type="button">{escape(item["name"])}</button>
        <p class="product-tagline">{escape(item.get("tagline", ""))}</p>
        <div class="product-badges">{"".join(badges)}</div>
        <button class="add-product" data-item-type="product" data-item-id="{product_id}" type="button">
          <span class="add-copy">Add to MeltBasket</span>
          <span class="card-quantity"><i data-action="minus">−</i><b>0</b><i data-action="plus">+</i></span>
          <em>+</em>
        </button>
      </div>
    </article>
    """


def menu_markup() -> str:
    grouped = OrderedDict()
    for item in MENU:
        grouped.setdefault(item["category"], []).append(item)
    navigation = "".join(
        f'<a class="chapter-gateway reveal" href="#chapter-{slug(category)}">'
        f'<span>{CATEGORY_DETAILS[category][0]}</span><div><strong>{escape(category)}</strong><small>{escape(CATEGORY_DETAILS[category][1])}</small></div><b>Explore ↘</b></a>'
        for category in grouped
    )
    sections = []
    for category, items in grouped.items():
        number, title, copy = CATEGORY_DETAILS[category]
        sections.append(
            f"""
            <section id="chapter-{slug(category)}" class="menu-chapter" data-menu-section="{escape(category)}">
              <div class="chapter-heading reveal">
                <span>{number}</span>
                <div><p>{escape(category)}</p><h3>{escape(title)}</h3></div>
                <p>{escape(copy)}</p>
              </div>
              <div class="product-grid">{"".join(product_card(item) for item in items)}</div>
            </section>
            """
        )
    return f"""
    <section id="menu" class="menu-intro">
      <div class="editorial-heading reveal">
        <div><p class="eyebrow">The MeltRoom collection</p><h2>Find your kind<br>of indulgence.</h2></div>
        <p>Explore all four chapters, compare textures and flavours, then build a MeltBasket that feels entirely yours.</p>
      </div>
      <div class="chapter-gateways">{navigation}</div>
    </section>
    <div class="menu-collection">{"".join(sections)}</div>
    """


def add_on_markup() -> str:
    cards = []
    for item in ADD_ONS:
        if item["availability"] != "available":
            continue
        labels = item["texture_contribution"][:1] + item["flavour_contribution"][:1]
        allergen = " · Contains " + ", ".join(item["allergen_ids"]) if item["allergen_ids"] else ""
        cards.append(
            f"""
            <article class="addon-card reveal">
              <div class="addon-top"><span>{"Premium finish" if item["premium_add_on"] else "Finishing touch"}</span><strong>+₹{item["price_inr"]}</strong></div>
              <h3>{escape(item["name"])}</h3>
              <p>{escape(item["description"])}</p>
              <div class="addon-tags">{"".join(f"<span>{escape(value)}</span>" for value in labels)}{f"<small>{escape(allergen)}</small>" if allergen else ""}</div>
              <button class="add-addon" data-addon-id="{item["add_on_id"]}" type="button"><span>Choose a melt</span><b>+</b></button>
            </article>
            """
        )
    return f"""
    <section id="addons" class="addon-section">
      <div class="editorial-heading editorial-heading-dark reveal">
        <div><p class="eyebrow">Finish it your way</p><h2>The final<br>little obsession.</h2></div>
        <p>Add extra chocolate, cream, fruit, pistachio, or crunch. MeltBasket keeps every finishing touch clear and separate.</p>
      </div>
      <div class="addon-rail">{"".join(cards)}</div>
    </section>
    """


def ingredient_markup() -> str:
    wanted = ["brownie_base", "premium_dark_chocolate", "chocolate_chips", "pista_cream", "kunafa", "honey"]
    by_id = {item["ingredient_id"]: item for item in INGREDIENTS}
    cards = []
    for index, ingredient_id in enumerate(wanted, start=1):
        item = by_id[ingredient_id]
        flavours = item.get("flavour_contribution", [])[:2]
        textures = item.get("texture_contribution", [])[:2]
        labels = item.get("dietary_labels", [])[:3]
        cards.append(
            f"""
            <article class="quality-card ingredient-story reveal">
              <div class="ingredient-card-top"><span>{index:02}</span><small>{escape(item["ingredient_type"].replace("_", " "))}</small></div>
              <h3>{escape(item["name"])}</h3>
              <p>{escape(item["plain_explanation"])}</p>
              <div class="ingredient-contributions">
                <div><small>Flavour</small><strong>{escape(" · ".join(flavours) or "Complements the dessert")}</strong></div>
                <div><small>Texture</small><strong>{escape(" · ".join(textures) or "Supports the final finish")}</strong></div>
              </div>
              <div class="ingredient-labels">{"".join(f"<span>{escape(value.replace('_', ' '))}</span>" for value in labels)}</div>
              <div class="ingredient-purpose"><small>Why it belongs</small><strong>{escape(item["why_meltroom_uses_it"])}</strong></div>
            </article>
            """
        )
    return f"""
    <section id="ingredients" class="quality-section">
      <div class="quality-lead reveal">
        <p class="eyebrow">Inside every MeltRoom creation</p>
        <h2>Every layer<br><em>has a purpose.</em></h2>
        <p>Explore the ingredients that shape MeltRoom's flavour, texture, and character. Our brownie base is gluten-free and eggless, made without maida or refined sugar, then finished with premium chocolate, fruits, creams, and thoughtful contrasts.</p>
        <div class="quality-pills"><span>Gluten-free brownies</span><span>Eggless</span><span>No maida</span><span>No refined sugar</span></div>
        <div class="ingredient-note"><b>Substitutions, thoughtfully handled</b><span>Oat or almond milk may replace milk where compatible. Almond milk contains tree nuts, and complete allergy requirements must always be confirmed with MeltRoom.</span></div>
      </div>
      <div class="ingredient-library">
        <div class="ingredient-library-head reveal"><span>Ingredient library</span><strong>Flavour. Texture. Purpose.</strong><small>Hover or scroll through the building blocks behind the MeltRoom experience.</small></div>
        <div class="quality-grid">{"".join(cards)}</div>
      </div>
    </section>
    """


def meltmind_markup() -> str:
    return """
    <section id="meltmind" class="mind-section">
      <div class="mind-gateway reveal">
        <p class="eyebrow">MeltMind AI · Choose your experience</p>
        <h2>How would you like<br>to find your melt?</h2>
        <div class="mind-choice-grid">
          <article class="mind-choice mind-choice-chat">
            <button data-mind-mode="chat" type="button"><span>01</span><strong>Chat with MeltMind</strong><b>→</b></button>
            <div><h3>Your informed dessert concierge.</h3><p>Ask anything about MeltRoom, compare products, understand flavours and textures, explore ingredients, or get thoughtful guidance in natural conversation.</p><small>Best when you want to explore, ask questions, or compare before deciding.</small></div>
          </article>
          <article class="mind-choice mind-choice-designer">
            <button data-mind-mode="designer" type="button"><span>02</span><strong>Design Your Perfect Melt</strong><b>→</b></button>
            <div><h3>A complete order shaped around you.</h3><p>Choose your flavour, texture, people, budget, and moment. MeltMind creates multiple valid plans with clear prices and serving guidance.</p><small>Best when you want a complete recommendation or group order.</small></div>
          </article>
        </div>
      </div>

      <div class="mind-workspace" aria-hidden="true">
        <div class="mind-workspace-bar">
          <a class="mind-workspace-brand" href="#meltmind"><span>M</span><div><strong>MeltMind AI</strong><small>Powered by verified MeltRoom knowledge</small></div></a>
          <div class="mind-workspace-switch"><button data-mind-mode="chat" type="button"><b>01</b><span>Chat</span></button><button data-mind-mode="designer" type="button"><b>02</b><span>Perfect Melt</span></button></div>
          <button class="mind-workspace-basket" type="button"><span>M</span><strong>MeltBasket</strong><b class="basket-count">0</b></button>
          <button class="mind-workspace-close" type="button"><span>Close experience</span><b>×</b></button>
        </div>
        <div class="mind-workspace-body">
          <div class="mind-panel" data-mind-panel="chat">
            <aside class="chat-discovery">
              <p>Conversation starters</p><h3>Begin wherever your craving begins.</h3>
              <div class="mind-suggestions"><button class="mind-suggestion" type="button">I want something chocolaty but balanced.</button><button class="mind-suggestion" type="button">Compare the signature bowls for me.</button><button class="mind-suggestion" type="button">What should two friends order under ₹500?</button><button class="mind-suggestion" type="button">Explain MeltRoom's gluten-free brownies.</button></div>
              <div class="chat-capabilities"><span>Menu expert</span><span>Honest comparisons</span><span>Budget guidance</span><span>Ingredient answers</span></div>
            </aside>
            <div class="chat-stage">
              <div class="chat-stage-head"><div class="mind-monogram">M</div><div><strong>Chat with MeltMind</strong><span>Ask naturally. Get grounded MeltRoom answers.</span></div></div>
              <div class="mind-conversation"><div class="mind-message assistant welcome-answer"><span>M</span><div><em>MeltMind concierge</em><p>Welcome. Tell me what you are craving, who you are ordering for, or what you want to understand.</p><small>I can compare products, explain textures, help with budgets, and move complex plans into Designer.</small></div></div><div class="mind-handoff"><span><small>Got enough information?</small><strong>Design your Perfect Melt using the preferences and constraints we have gathered.</strong></span><button class="chat-to-designer" type="button">Design Perfect Melt <b>→</b></button></div></div>
              <div class="mind-composer"><textarea id="mind-chat-input" rows="1" placeholder="Ask MeltMind..."></textarea><button class="mind-send" type="button"><span>Ask MeltMind</span><b>↑</b></button></div>
            </div>
          </div>

          <div class="mind-panel" data-mind-panel="designer">
            <aside class="designer-rail">
              <p>Your live melt profile</p><h3>A direction that becomes entirely yours.</h3>
              <div class="designer-progress"><span class="active"><b>01</b> Flavour</span><span><b>02</b> Texture</span><span><b>03</b> People & budget</span><span><b>04</b> Complete plans</span></div>
              <div class="designer-profile"><small>What MeltMind understands</small><strong>Waiting for your first choice</strong><p>Your preferences remain connected with Chat and MeltBasket.</p></div>
            </aside>
            <div class="designer-stage">
              <button class="designer-chat-bridge" data-mind-mode="chat" type="button"><span><small>Have a question before designing?</small><strong>Ask MeltMind about items, ingredients, flavours, textures, or anything else about MeltRoom.</strong></span><b>Ask MeltMind →</b></button>
              <div class="designer-head"><div><p class="eyebrow">Design Your Perfect Melt</p><h3>Build the feeling.<br>We will build the order.</h3></div></div>
              <div class="designer-group"><small><b>01</b> Choose a flavour direction</small><div class="designer-options"><button data-designer-value="Deep chocolate" type="button"><i>Dark & rich</i>Deep chocolate</button><button data-designer-value="Pistachio & nutty" type="button"><i>Roasted & premium</i>Pistachio & nutty</button><button data-designer-value="Fruity contrast" type="button"><i>Bright & fresh</i>Fruity contrast</button><button data-designer-value="Creamy & gentle" type="button"><i>Soft & balanced</i>Creamy & gentle</button></div></div>
              <div class="designer-group"><small><b>02</b> Choose the textures you want</small><div class="designer-options"><button data-designer-value="Fudgy" type="button"><i>Dense</i>Fudgy</button><button data-designer-value="Gooey" type="button"><i>Molten</i>Gooey</button><button data-designer-value="Crunchy" type="button"><i>Textured</i>Crunchy</button><button data-designer-value="Creamy" type="button"><i>Smooth</i>Creamy</button></div></div>
              <div class="designer-split"><div class="designer-group"><small><b>03</b> Who is this for?</small><div class="designer-options compact"><button data-designer-value="Just me" type="button"><i>One craving</i>Just me</button><button data-designer-value="Two people" type="button"><i>Share together</i>Two people</button><button data-designer-value="A group" type="button"><i>Build variety</i>A group</button></div></div><div class="designer-budget"><small><b>04</b> Maximum budget</small><div><span>₹</span><input id="designer-budget" type="number" value="500" min="99" max="5000" step="50"></div><p>MeltMind will never exceed this amount.</p></div></div>
              <div class="designer-note"><label for="designer-note">Tell us about the moment</label><textarea id="designer-note" rows="2" placeholder="A celebration, movie night, comfort craving, less-sweet preference, or anything else that matters..."></textarea></div>
              <div class="designer-action"><div><span>Ready to create your directions</span><small>You will receive closest-match, variety, and premium plans.</small></div><button class="designer-build" type="button">Design my perfect melt <b>→</b></button></div>
              <div class="designer-results"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    """


HEAD = f"""
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet">
<script>
window.MELTROOM_DATA = {js_data()};
(() => {{
  if (window.__meltroomStorefront) return;
  window.__meltroomStorefront = true;
  const catalog = window.MELTROOM_DATA;
  const products = new Map(catalog.products.map(item => [item.id, item]));
  const addOns = new Map(catalog.addOns.map(item => [item.id, item]));
  const basket = new Map();
  const money = value => `₹${{value}}`;
  const query = selector => document.querySelector(selector);
  const queryAll = selector => [...document.querySelectorAll(selector)];
  const mindState = {{ preferences: new Set(), budget: 500, note: "", chatContextProductId: "", lastChatText: "", history: [] }};
  const safeText = value => String(value ?? "").replace(/[&<>"']/g, character => ({{"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;"}})[character]);
  const formatMindAnswer = value => {{
    const normalized = String(value ?? "")
      .replace(/\\r/g, "")
      .replace(/[^\\S\\n]+/g, " ")
      .trim();
    if (!normalized) return "";
    const blocks = [];
    let ordered = [];
    let bullets = [];
    const flushLists = () => {{
      if (ordered.length) {{ blocks.push(`<ol>${{ordered.join("")}}</ol>`); ordered = []; }}
      if (bullets.length) {{ blocks.push(`<ul>${{bullets.join("")}}</ul>`); bullets = []; }}
    }};
    normalized.split(/\\n+/).map(line => line.trim()).filter(Boolean).forEach(line => {{
      const numbered = line.match(/^\\d+\\.\\s+(.+)$/);
      const bullet = line.match(/^[-•]\\s+(.+)$/);
      if (numbered) {{ if (bullets.length) flushLists(); ordered.push(`<li>${{safeText(numbered[1])}}</li>`); return; }}
      if (bullet) {{ if (ordered.length) flushLists(); bullets.push(`<li>${{safeText(bullet[1])}}</li>`); return; }}
      flushLists();
      blocks.push(`<p>${{safeText(line)}}</p>`);
    }});
    flushLists();
    return blocks.join("");
  }};
  let toastTimer;

  const openBasket = () => {{
    query(".melt-basket")?.classList.add("open");
    query(".basket-backdrop")?.classList.add("open");
    document.body.classList.add("basket-open");
  }};
  const showToast = message => {{
    const toast = query(".melt-toast");
    if (!toast) return;
    toast.textContent = message;
    toast.classList.add("visible");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toast.classList.remove("visible"), 3200);
  }};
  const animateWorkspaceBasket = () => {{
    const button = query(".mind-workspace-basket");
    if (!button) return;
    button.classList.remove("basket-bump");
    void button.offsetWidth;
    button.classList.add("basket-bump");
    setTimeout(() => button.classList.remove("basket-bump"), 700);
  }};
  const closeOverlays = () => {{
    query(".melt-basket")?.classList.remove("open");
    query(".basket-backdrop")?.classList.remove("open");
    query(".product-modal")?.classList.remove("open");
    query(".addon-picker")?.classList.remove("open");
    document.body.classList.remove("basket-open");
  }};
  const closeTopOverlay = () => {{
    const picker = query(".addon-picker");
    const modal = query(".product-modal");
    if (picker?.classList.contains("open")) {{
      picker.classList.remove("open");
      if (!query(".melt-basket")?.classList.contains("open")) {{
        query(".basket-backdrop")?.classList.remove("open");
        document.body.classList.remove("basket-open");
      }}
      return;
    }}
    if (modal?.classList.contains("open")) {{
      modal.classList.remove("open");
      if (!query(".melt-basket")?.classList.contains("open")) {{
        query(".basket-backdrop")?.classList.remove("open");
        document.body.classList.remove("basket-open");
      }}
      return;
    }}
    closeOverlays();
  }};
  const updateJumpButton = () => {{
    const button = query(".context-jump");
    const menu = query("#menu");
    const collection = query(".menu-collection");
    const addOnsSection = query("#addons");
    if (!button || !menu || !collection || !addOnsSection) return;
    const pageTop = element => element.getBoundingClientRect().top + window.scrollY;
    const menuTop = pageTop(menu);
    const menuExperienceEnd = pageTop(addOnsSection) + addOnsSection.offsetHeight;
    const firstChapter = query(".menu-chapter");
    const visible = window.scrollY > (firstChapter ? pageTop(firstChapter) + Math.min(260, firstChapter.offsetHeight * .35) : menuTop + 260);
    const belowMenu = window.scrollY > menuExperienceEnd - window.innerHeight * .35;
    button.classList.toggle("visible", visible);
    button.dataset.target = belowMenu ? "home" : "menu";
    button.querySelector("strong").textContent = belowMenu ? "Back to home" : "Back to menu";
    button.querySelector("small").textContent = belowMenu ? "Return to the beginning" : "Choose another chapter";
  }};

  const changeProduct = (id, delta, suggest = false) => {{
    const source = products.get(id);
    if (!source) return;
    const current = basket.get(id) || {{ ...source, quantity: 0, addOns: {{}} }};
    const wasEmpty = current.quantity === 0;
    current.quantity += delta;
    if (current.quantity <= 0) basket.delete(id); else basket.set(id, current);
    renderBasket();
    if (suggest && wasEmpty && current.quantity > 0) setTimeout(() => openAddonPicker(id), 180);
  }};

  const changeAddon = (productId, addOnId, delta) => {{
    const item = basket.get(productId);
    const addOn = addOns.get(addOnId);
    if (!item || !addOn || !item.availableAddOns.includes(addOnId)) return;
    const quantity = Math.max(0, (item.addOns[addOnId] || 0) + delta);
    if (quantity) item.addOns[addOnId] = quantity; else delete item.addOns[addOnId];
    renderBasket();
  }};

  const renderBasket = () => {{
    const entries = [...basket.values()];
    const count = entries.reduce((sum, item) => sum + item.quantity, 0);
    const subtotal = entries.reduce((sum, item) => sum + item.price * item.quantity +
      Object.entries(item.addOns).reduce((extra, [id, quantity]) => extra + (addOns.get(id)?.price || 0) * quantity, 0), 0);
    queryAll(".basket-count, .floating-basket-count").forEach(el => el.textContent = count);
    queryAll(".basket-total, .basket-subtotal strong").forEach(el => el.textContent = money(subtotal));
    query(".floating-basket")?.classList.toggle("visible", count > 0);
    query(".basket-empty")?.classList.toggle("hidden", count > 0);
    query(".place-order")?.toggleAttribute("disabled", count === 0);
    queryAll(".add-product[data-item-id]").forEach(button => {{
      const quantity = basket.get(button.dataset.itemId)?.quantity || 0;
      button.classList.toggle("selected", quantity > 0);
      const countLabel = button.querySelector(".card-quantity b");
      if (countLabel) countLabel.textContent = quantity;
    }});
    queryAll(".chat-card-add[data-chat-add]").forEach(button => {{
      const quantity = basket.get(button.dataset.chatAdd)?.quantity || 0;
      button.classList.toggle("selected", quantity > 0);
      button.closest(".chat-product-card")?.classList.toggle("added", quantity > 0);
      const quantityLabel = button.querySelector(".chat-add-state strong");
      if (quantityLabel) quantityLabel.textContent = quantity;
    }});
    queryAll("[data-result-add]").forEach(button => {{
      const quantity = basket.get(button.dataset.resultAdd)?.quantity || 0;
      button.classList.toggle("selected", quantity > 0);
      button.textContent = quantity ? `Added · ${{quantity}} in MeltBasket +` : "Add to MeltBasket +";
    }});
    const items = query(".basket-items");
    if (items) items.innerHTML = entries.map(item => `
      <article class="basket-line">
        <div class="basket-line-visual">${{item.image ? `<img src="${{item.image}}" alt="">` : `<span>+</span>`}}</div>
        <div class="basket-line-copy"><span>${{item.category}}</span><strong>${{item.name}}</strong><small>${{money(item.price)}} each</small>
          <div class="basket-line-controls"><button data-product-action="minus" data-id="${{item.id}}">−</button><b>${{item.quantity}}</b><button data-product-action="plus" data-id="${{item.id}}">+</button><button data-product-action="remove" data-id="${{item.id}}">Remove</button></div>
        </div>
        <strong>${{money(item.price * item.quantity)}}</strong>
        <div class="basket-customize">
          <div class="basket-addon-list">${{Object.entries(item.addOns).map(([id, quantity]) => {{
            const addOn = addOns.get(id); return `<span>${{addOn.name}} <b>×${{quantity}}</b><button data-basket-addon-remove data-product-id="${{item.id}}" data-addon-id="${{id}}">×</button></span>`;
          }}).join("")}}</div>
          <button class="customize-line" data-customize-product="${{item.id}}" type="button"><i>+</i>${{Object.keys(item.addOns).length ? "Edit finishing touches" : "Add finishing touches"}}</button>
        </div>
      </article>`).join("");
  }};

  const openAddonPicker = (productId, focusAddonId = "") => {{
    const product = basket.get(productId);
    if (!product) return showToast("Add this dessert to your MeltBasket before customizing it.");
    const compatible = product.availableAddOns.map(id => addOns.get(id)).filter(Boolean);
    const picker = query(".addon-picker");
    picker.innerHTML = `<button class="picker-close" type="button">×</button>
      <div class="picker-head"><p>Made for this melt</p><h2>Finish your ${{product.name}}</h2><span>Only compatible additions are shown. Each choice stays attached to this dessert.</span></div>
      <div class="picker-grid">${{compatible.length ? compatible.map(addOn => `
        <article class="${{focusAddonId === addOn.id ? "focused" : ""}}">
          <div><span>${{addOn.premium ? "Premium finish" : "Finishing touch"}}</span><strong>+${{money(addOn.price)}}</strong></div>
          <h3>${{addOn.name}}</h3><p>${{addOn.message || addOn.description}}</p>
          <button data-picker-addon="${{addOn.id}}" data-product-id="${{product.id}}" type="button">
            <span>${{product.addOns[addOn.id] ? `Add another · ${{product.addOns[addOn.id]}} selected` : "Add to this melt"}}</span><b>+</b>
          </button>
        </article>`).join("") : `<div class="picker-empty">This creation is complete as designed. No verified add-ons are currently listed for it.</div>`}}</div>
      <button class="picker-done" type="button">Done customizing</button>`;
    picker.classList.add("open");
    query(".basket-backdrop")?.classList.add("open");
    document.body.classList.add("basket-open");
  }};

  const chooseAddonTarget = addOnId => {{
    const addOn = addOns.get(addOnId);
    const eligible = [...basket.values()].filter(product => product.availableAddOns.includes(addOnId));
    if (!basket.size) return showToast("Add a MeltRoom creation first, then choose which dessert gets this finishing touch.");
    if (!eligible.length) return showToast(`${{addOn.name}} is not compatible with the desserts currently in your MeltBasket.`);
    const picker = query(".addon-picker");
    picker.innerHTML = `<button class="picker-close" type="button">×</button>
      <div class="picker-head"><p>Choose its perfect match</p><h2>Add ${{addOn.name}} to which melt?</h2><span>We only show desserts where this addition works beautifully.</span></div>
      <div class="target-grid">${{eligible.map(product => `<button data-addon-target="${{product.id}}" data-addon-id="${{addOnId}}" type="button"><img src="${{product.image}}" alt=""><span><small>${{product.category}}</small><strong>${{product.name}}</strong></span><b>Choose ↗</b></button>`).join("")}}</div>`;
    picker.classList.add("open");
    query(".basket-backdrop")?.classList.add("open");
    document.body.classList.add("basket-open");
  }};

  const openProduct = id => {{
    const item = products.get(id);
    if (!item) return;
    const modal = query(".product-modal");
    modal.innerHTML = `<button class="modal-close" type="button">×</button>
      <div class="modal-image"><img src="${{item.image}}" alt="${{item.name}}"><span>${{item.category}}</span></div>
      <div class="modal-copy"><p class="eyebrow">${{item.flavours.slice(0, 3).join(" · ")}}</p><h2>${{item.name}}</h2><p class="modal-tagline">${{item.tagline}}</p><p>${{item.description}}</p>
      <div class="modal-facts"><span><small>Serves</small>${{item.serves}}</span><span><small>Sweetness</small>${{item.sweetness}}</span><span><small>Chocolate</small>${{item.chocolate}}</span></div>
      <div class="modal-lists"><div><small>Texture</small><p>${{item.textures.join(", ")}}</p></div><div><small>Best for</small><p>${{item.bestFor.slice(0, 5).join(", ")}}</p></div></div>
      <button class="modal-add add-product" data-item-type="product" data-item-id="${{item.id}}" type="button"><span class="add-copy">Add to MeltBasket · ${{money(item.price)}}</span><em>+</em><span class="card-quantity"><i data-action="minus">−</i><b>${{basket.get(item.id)?.quantity || 0}}</b><i data-action="plus">+</i></span></button></div>`;
    modal.classList.add("open"); query(".basket-backdrop")?.classList.add("open"); document.body.classList.add("basket-open");
    renderBasket();
  }};

  const placeOrder = () => {{
    if (!basket.size) return;
    const entries = [...basket.values()];
    const subtotal = entries.reduce((sum, item) => sum + item.price * item.quantity +
      Object.entries(item.addOns).reduce((extra, [id, quantity]) => extra + addOns.get(id).price * quantity, 0), 0);
    const fulfilment = query('input[name="fulfilment"]:checked')?.value || "Delivery through Rapido";
    const lines = ["Hello MeltRoom! I would like to place this order:", ""];
    entries.forEach(item => {{
      lines.push(`• ${{item.quantity}} × ${{item.name}} — ${{money(item.price * item.quantity)}}`);
      Object.entries(item.addOns).forEach(([id, quantity]) => lines.push(`   + ${{quantity}} × ${{addOns.get(id).name}} — ${{money(addOns.get(id).price * quantity)}}`));
    }});
    lines.push("", `Menu subtotal: ${{money(subtotal)}}`, `Fulfilment: ${{fulfilment}}`, "", "Please confirm availability, final total, delivery/pickup details, and share the payment QR.");
    window.open(`https://wa.me/{WHATSAPP_NUMBER}?text=${{encodeURIComponent(lines.join("\\n"))}}`, "_blank", "noopener");
  }};

  const updateDesignerProfile = () => {{
    const selected = queryAll("[data-designer-value].selected").map(button => button.dataset.designerValue);
    mindState.preferences = new Set(selected);
    mindState.budget = Number(query("#designer-budget")?.value || 500);
    mindState.note = query("#designer-note")?.value.trim() || "";
    const profile = query(".designer-profile");
    if (!profile) return;
    profile.querySelector("strong").textContent = selected.length ? selected.slice(0, 3).join(" · ") : "Waiting for your first choice";
    profile.querySelector("p").textContent = selected.length
      ? `${{selected.length}} preference${{selected.length === 1 ? "" : "s"}} selected. MeltMind will balance these with your budget and notes.`
      : "Your selected preferences will appear here before recommendation generation.";
    const progress = queryAll(".designer-progress span");
    const hasFlavour = selected.some(value => ["Deep chocolate", "Pistachio & nutty", "Fruity contrast", "Creamy & gentle"].includes(value));
    const hasTexture = selected.some(value => ["Fudgy", "Gooey", "Crunchy", "Creamy"].includes(value));
    const hasPeople = selected.some(value => ["Just me", "Two people", "A group"].includes(value));
    [hasFlavour, hasTexture, hasPeople, query(".designer-results")?.classList.contains("visible")].forEach((complete, index) => progress[index]?.classList.toggle("active", Boolean(complete)));
  }};

  const switchMindMode = mode => {{
    queryAll("[data-mind-mode]").forEach(button => button.classList.toggle("active", button.dataset.mindMode === mode));
    queryAll("[data-mind-panel]").forEach(panel => panel.classList.toggle("active", panel.dataset.mindPanel === mode));
    const workspace = query(".mind-workspace");
    workspace?.classList.add("open");
    workspace?.setAttribute("aria-hidden", "false");
    document.body.classList.add("mind-workspace-open");
  }};

  const closeMindWorkspace = () => {{
    const workspace = query(".mind-workspace");
    workspace?.classList.remove("open");
    workspace?.setAttribute("aria-hidden", "true");
    document.body.classList.remove("mind-workspace-open");
    query("#meltmind")?.scrollIntoView({{ behavior: "smooth", block: "center" }});
  }};

  const extractChatPreferences = text => {{
    const normalized = text.toLowerCase();
    const mappings = [
      ["Deep chocolate", ["chocolate", "chocolaty", "chocolately", "fudge", "rich"]],
      ["Pistachio & nutty", ["pista", "pistachio", "nutty", "kunafa"]],
      ["Fruity contrast", ["fruit", "mango", "banana"]],
      ["Creamy & gentle", ["cream", "creamy", "gentle", "light"]],
      ["Fudgy", ["fudgy", "fudge"]],
      ["Gooey", ["gooey", "goey", "melty"]],
      ["Crunchy", ["crunch", "crispy", "kunafa"]],
      ["Creamy", ["creamy", "cream"]],
      ["Two people", ["two people", "two friends", "couple", "for 2"]],
      ["A group", ["group", "friends", "party", "people", "sharing"]],
      ["Just me", ["just me", "myself", "one person"]]
    ];
    mappings.forEach(([value, words]) => {{ if (words.some(word => normalized.includes(word))) mindState.preferences.add(value); }});
    if (mindState.preferences.has("Just me")) {{ mindState.preferences.delete("Two people"); mindState.preferences.delete("A group"); }}
    else if (mindState.preferences.has("Two people")) mindState.preferences.delete("A group");
    const budgetMatch = normalized.match(/(?:₹|rs\\.?|inr|under|budget(?: of)?)\\s*(\\d{{2,5}})/i) || normalized.match(/(\\d{{2,5}})\\s*(?:rupees|rs|inr)/i);
    if (budgetMatch) mindState.budget = Number(budgetMatch[1]);
    queryAll("[data-designer-value]").forEach(button => button.classList.toggle("selected", mindState.preferences.has(button.dataset.designerValue)));
    if (query("#designer-budget")) query("#designer-budget").value = mindState.budget;
    if (query("#designer-note")) query("#designer-note").value = text;
    updateDesignerProfile();
  }};

  const recommendProducts = () => {{
    const selected = [...mindState.preferences].map(value => value.toLowerCase());
    const score = product => {{
      const searchable = [product.name, product.category, ...product.flavours, ...product.textures, ...product.bestFor, ...product.tags].join(" ").toLowerCase();
      let value = 0;
      selected.forEach(preference => {{
        preference.split(/\\s+|&/).filter(word => word.length > 3).forEach(word => {{ if (searchable.includes(word)) value += 3; }});
      }});
      if (selected.includes("a group") && (product.serves.includes("2") || product.category === "Brownie Bowl")) value += 5;
      if (selected.includes("just me") && product.serves.includes("1 person")) value += 4;
      if (product.price <= mindState.budget) value += 3; else value -= 20;
      return value;
    }};
    return [...products.values()].filter(product => product.price <= mindState.budget).sort((a, b) => score(b) - score(a)).slice(0, 3);
  }};

  const renderDesignerResults = () => {{
    updateDesignerProfile();
    const results = query(".designer-results");
    const recommendations = recommendProducts();
    if (!results) return;
    results.innerHTML = `<div class="designer-results-head"><div><small>Your current directions</small><h3>Three melts worth exploring</h3></div></div>
      <div class="designer-result-grid">${{recommendations.map((product, index) => `<article>
        <div class="result-image"><img src="${{product.image}}" alt="${{product.name}}"><span>0${{index + 1}}</span></div>
        <div class="result-copy"><small>${{product.category}} · ${{money(product.price)}}</small><h4>${{product.name}}</h4><p>${{product.short}}</p>
          <div><button data-result-chat="${{product.id}}" type="button">Ask MeltMind about it</button><button data-result-add="${{product.id}}" type="button">Add to MeltBasket +</button></div>
        </div></article>`).join("")}}</div>`;
    results.classList.add("visible");
  }};

  const openChatWithProduct = productId => {{
    const product = products.get(productId);
    if (!product) return;
    mindState.chatContextProductId = productId;
    switchMindMode("chat");
    const input = query("#mind-chat-input");
    if (input) {{ input.value = `Tell me more about ${{product.name}}. Explain its taste, texture, serving fit, and how it compares with similar MeltRoom items.`; input.focus(); }}
    showToast(`${{product.name}} is now the active context in Chat with MeltMind.`);
  }};

  const appendMindAnswer = payload => {{
    const conversation = query(".mind-conversation");
    if (!conversation) return;
    const productCards = (payload.products || []).map(product => {{
      const id = product.id.replaceAll("_", "-");
      const catalogProduct = products.get(id);
      const image = catalogProduct?.image || "";
      const tagline = catalogProduct?.tagline || catalogProduct?.short || "Explore this MeltRoom direction.";
      return `<article class="chat-product-card">
        <button class="chat-product-visual" data-mind-product="${{id}}" type="button"><img src="${{image}}" alt="${{product.name}}"><span class="chat-card-category" style="color:#32140f!important;-webkit-text-fill-color:#32140f!important">${{product.category}}</span><strong class="chat-card-price">${{money(product.price)}}</strong></button>
        <div class="chat-product-copy"><small>Suggested for your craving</small><button class="chat-card-details" data-open-product="${{id}}" type="button"><strong>${{product.name}}</strong><span>${{tagline}}</span><em>View taste, texture and serving details →</em></button><button class="chat-card-add" data-chat-add="${{id}}" type="button"><span class="chat-add-copy">Add to MeltBasket</span><span class="chat-add-state"><strong>0</strong><i>added to MeltBasket</i></span><b>+</b></button></div>
      </article>`;
    }}).join("");
    query(".mind-thinking")?.remove();
    const handoff = query(".mind-handoff");
    handoff?.insertAdjacentHTML("beforebegin", `<div class="mind-message assistant live-answer"><span>M</span><div><em>${{productCards ? "MeltMind recommendation" : "MeltMind answer"}}</em><div class="mind-answer-copy">${{formatMindAnswer(payload.answer)}}</div>${{productCards ? `<div class="answer-directions">${{productCards}}</div>` : ""}}<small>${{safeText(payload.source || "Verified MeltRoom knowledge")}}${{payload.handoff ? " · Human confirmation required" : ""}}</small></div></div>`);
    renderBasket();
    const answer = handoff?.previousElementSibling;
    if (answer) requestAnimationFrame(() => conversation.scrollTo({{ top: Math.max(0, answer.offsetTop - conversation.offsetTop - 8), behavior: "auto" }}));
  }};

  const askMeltMind = async () => {{
    const input = query("#mind-chat-input");
    const text = input?.value.trim() || "";
    if (!text) return showToast("Tell MeltMind what you are craving or what you want to understand.");
    mindState.lastChatText = text;
    extractChatPreferences(text);
    const conversation = query(".mind-conversation");
    const handoff = query(".mind-handoff");
    handoff?.insertAdjacentHTML("beforebegin", `<div class="mind-message user live-answer"><div><p>${{text}}</p></div></div><div class="mind-message assistant mind-thinking"><span>M</span><div><em>MeltMind is considering your craving</em><div class="thinking-dots"><i></i><i></i><i></i></div></div></div>`);
    if (conversation) conversation.scrollTop = conversation.scrollHeight;
    if (input) input.value = "";
    try {{
      const response = await fetch("/api/meltmind/chat", {{ method: "POST", headers: {{ "Content-Type": "application/json" }}, body: JSON.stringify({{ message: text, history: mindState.history.slice(-8) }}) }});
      if (!response.ok) throw new Error("Chat request failed");
      const payload = await response.json();
      mindState.history.push({{ role: "user", content: text }}, {{ role: "assistant", content: payload.answer }});
      appendMindAnswer(payload);
      if (payload.route_to_designer) {{
        showToast("Your craving and budget are ready in Perfect Melt.");
        setTimeout(() => switchMindMode("designer"), 850);
      }}
    }} catch (error) {{
      appendMindAnswer({{ answer: "I could not reach the MeltMind service just now. Your preferences are still saved, and you can continue in Designer.", products: [], source: "Local fallback" }});
    }}
  }};

  const apiDesignerPreferences = () => {{
    const selected = [...mindState.preferences];
    const groupValue = selected.includes("A group") ? 4 : selected.includes("Two people") ? 2 : 1;
    const flavourMap = {{ "Deep chocolate": "chocolate", "Pistachio & nutty": "pistachio", "Fruity contrast": "fruity", "Creamy & gentle": "cream" }};
    return {{
      budget_inr: mindState.budget,
      group_size: groupValue,
      flavours: selected.filter(value => flavourMap[value]).map(value => flavourMap[value]),
      textures: selected.filter(value => ["Fudgy", "Gooey", "Crunchy", "Creamy"].includes(value)).map(value => value.toLowerCase()),
      premium: selected.includes("Pistachio & nutty") || /premium/i.test(mindState.note),
      variety: selected.includes("A group") || /variety|different/i.test(mindState.note),
      less_sweet: /less sweet|not too sweet|balanced sweetness/i.test(mindState.note),
      request: mindState.note
    }};
  }};

  const renderApiDesignerResults = payload => {{
    const results = query(".designer-results");
    if (!results) return;
    results.classList.remove("loading");
    if (!payload.plans?.length) {{
      results.innerHTML = `<div class="designer-results-head"><div><small>We need one careful check</small><h3>No verified plan can be finalized yet</h3></div></div><article class="designer-plan designer-plan-notice"><p>${{safeText(payload.notice || "No current menu plan fits these constraints.")}}</p><div class="plan-foot"><span>Nothing unverified was suggested</span><button data-mind-mode="chat" type="button">Ask MeltMind →</button></div></article>`;
      results.dataset.plans = "[]";
      results.classList.add("visible");
      results.scrollIntoView({{ behavior: "smooth", block: "start" }});
      return;
    }}
    results.innerHTML = `<div class="designer-results-head"><div><small>Your complete MeltRoom directions</small><h3>Choose the plan that feels right</h3></div></div>
      <div class="designer-plan-grid">${{payload.plans.map((plan, index) => `<article class="designer-plan">
        <div class="plan-top"><span>0${{index + 1}}</span><div><small>${{plan.title}}</small><h4>${{money(plan.total)}} total</h4><strong class="plan-featured">${{plan.items.map(item => item.quantity > 1 ? `${{item.quantity}} × ${{item.name}}` : item.name).join(" · ")}}</strong><em>Approximately ${{plan.servings}} guided servings</em></div></div>
        <p>${{safeText(plan.summary)}}</p>
        <div class="plan-items">${{plan.items.map(item => `<div><img src="/${{item.image}}" alt=""><span><strong>${{item.name}}</strong><small>${{item.quantity}} × ${{money(item.price)}} · ${{item.serves_text}}</small></span><button data-open-product="${{item.id.replaceAll("_", "-")}}" type="button">Details</button></div>`).join("")}}</div>
        <div class="plan-foot"><span>₹${{plan.remaining_budget}} remaining · ${{safeText(plan.serving_note)}}</span><button data-add-plan="${{index}}" type="button">Add plan to MeltBasket +</button></div>
      </article>`).join("")}}</div>`;
    results.dataset.plans = JSON.stringify(payload.plans);
    results.classList.add("visible");
    updateDesignerProfile();
    results.scrollIntoView({{ behavior: "smooth", block: "start" }});
  }};

  const showDesignerLoading = () => {{
    const results = query(".designer-results");
    const button = query(".designer-build");
    query(".designer-stage")?.classList.add("is-building");
    if (button) {{
      button.disabled = true;
      button.classList.add("loading");
      button.innerHTML = `Designing your melt <b>···</b>`;
    }}
    if (!results) return;
    results.innerHTML = `<div class="designer-loading">
      <div class="designer-loading-mark"><span></span><span></span><span></span><b>M</b></div>
      <small>MeltMind is composing your directions</small>
      <h3>Balancing the craving,<br>the moment, and your budget.</h3>
      <div class="designer-loading-steps"><span>Reading your preferences</span><span>Building valid combinations</span><span>Writing three distinct directions</span></div>
    </div>`;
    results.classList.add("visible", "loading");
    results.scrollIntoView({{ behavior: "smooth", block: "start" }});
  }};

  const finishDesignerLoading = () => {{
    const button = query(".designer-build");
    query(".designer-stage")?.classList.remove("is-building");
    query(".designer-results")?.classList.remove("loading");
    if (button) {{
      button.disabled = false;
      button.classList.remove("loading");
      button.innerHTML = `Design my perfect melt <b>→</b>`;
    }}
  }};

  const buildPerfectMelt = async () => {{
    updateDesignerProfile();
    showDesignerLoading();
    try {{
      const response = await fetch("/api/meltmind/design", {{ method: "POST", headers: {{ "Content-Type": "application/json" }}, body: JSON.stringify(apiDesignerPreferences()) }});
      if (!response.ok) throw new Error("Designer request failed");
      renderApiDesignerResults(await response.json());
    }} catch (error) {{
      renderDesignerResults();
      showToast("Using the local recommendation fallback while the MeltMind service reconnects.");
    }} finally {{
      finishDesignerLoading();
    }}
  }};

  document.addEventListener("click", event => {{
    if (event.target.closest(".mind-workspace-close")) {{ closeMindWorkspace(); return; }}
    const mindMode = event.target.closest("[data-mind-mode]");
    if (mindMode) {{ switchMindMode(mindMode.dataset.mindMode); return; }}
    const suggestion = event.target.closest(".mind-suggestion");
    if (suggestion) {{ const input = query("#mind-chat-input"); if (input) {{ input.value = suggestion.textContent.trim(); input.focus(); }} return; }}
    const designerOption = event.target.closest("[data-designer-value]");
    if (designerOption) {{
      if (["Just me", "Two people", "A group"].includes(designerOption.dataset.designerValue)) {{
        queryAll('[data-designer-value="Just me"], [data-designer-value="Two people"], [data-designer-value="A group"]').forEach(button => button.classList.remove("selected"));
        designerOption.classList.add("selected");
      }} else designerOption.classList.toggle("selected");
      updateDesignerProfile(); return;
    }}
    const chatProduct = event.target.closest("[data-mind-product]"); if (chatProduct) return openChatWithProduct(chatProduct.dataset.mindProduct);
    const openMindProduct = event.target.closest("[data-open-product]"); if (openMindProduct) return openProduct(openMindProduct.dataset.openProduct);
    const chatAdd = event.target.closest("[data-chat-add]");
    if (chatAdd) {{ changeProduct(chatAdd.dataset.chatAdd, 1, false); animateWorkspaceBasket(); showToast(`${{products.get(chatAdd.dataset.chatAdd).name}} added to the shared MeltBasket.`); return; }}
    const resultChat = event.target.closest("[data-result-chat]"); if (resultChat) return openChatWithProduct(resultChat.dataset.resultChat);
    const resultAdd = event.target.closest("[data-result-add]");
    if (resultAdd) {{ changeProduct(resultAdd.dataset.resultAdd, 1, false); animateWorkspaceBasket(); showToast(`${{products.get(resultAdd.dataset.resultAdd).name}} added to the shared MeltBasket.`); return; }}
    const chatToDesigner = event.target.closest(".chat-to-designer");
    if (chatToDesigner) {{ const text = query("#mind-chat-input")?.value.trim() || mindState.lastChatText; extractChatPreferences(text); switchMindMode("designer"); return; }}
    const addPlan = event.target.closest("[data-add-plan]");
    if (addPlan) {{
      const plans = JSON.parse(query(".designer-results")?.dataset.plans || "[]");
      const plan = plans[Number(addPlan.dataset.addPlan)];
      plan?.items.forEach(item => {{ for (let index = 0; index < item.quantity; index += 1) changeProduct(item.id.replaceAll("_", "-"), 1, false); }});
      animateWorkspaceBasket();
      showToast(`${{plan.title}} added to the shared MeltBasket.`);
      return;
    }}
    if (event.target.closest(".mind-send")) {{ askMeltMind(); return; }}
    if (event.target.closest(".designer-build")) {{ buildPerfectMelt(); return; }}
    const open = event.target.closest(".open-product"); if (open) return openProduct(open.dataset.productId);
    const add = event.target.closest(".add-product");
    if (add) {{ const action = event.target.closest("[data-action]")?.dataset.action; changeProduct(add.dataset.itemId, action === "minus" ? -1 : 1, !action); return; }}
    const productAction = event.target.closest("[data-product-action]");
    if (productAction) {{ const item = basket.get(productAction.dataset.id); const action = productAction.dataset.productAction; changeProduct(productAction.dataset.id, action === "plus" ? 1 : action === "minus" ? -1 : -(item?.quantity || 1)); return; }}
    const addon = event.target.closest(".add-addon"); if (addon) return chooseAddonTarget(addon.dataset.addonId);
    const customize = event.target.closest("[data-customize-product]"); if (customize) return openAddonPicker(customize.dataset.customizeProduct);
    const pickerAddon = event.target.closest("[data-picker-addon]");
    if (pickerAddon) {{ changeAddon(pickerAddon.dataset.productId, pickerAddon.dataset.pickerAddon, 1); openAddonPicker(pickerAddon.dataset.productId, pickerAddon.dataset.pickerAddon); return; }}
    const target = event.target.closest("[data-addon-target]");
    if (target) {{
      const product = basket.get(target.dataset.addonTarget);
      const addOn = addOns.get(target.dataset.addonId);
      changeAddon(target.dataset.addonTarget, target.dataset.addonId, 1);
      closeOverlays();
      showToast(`${{addOn.name}} added to ${{product.name}}.`);
      return;
    }}
    const removeAddon = event.target.closest("[data-basket-addon-remove]");
    if (removeAddon) {{ changeAddon(removeAddon.dataset.productId, removeAddon.dataset.addonId, -(basket.get(removeAddon.dataset.productId)?.addOns[removeAddon.dataset.addonId] || 1)); return; }}
    if (event.target.closest(".basket-toggle, .floating-basket, .mind-workspace-basket")) return openBasket();
    const jump = event.target.closest(".context-jump");
    if (jump) {{ query(`#${{jump.dataset.target || "menu"}}`)?.scrollIntoView({{ behavior: "smooth" }}); return; }}
    if (event.target.closest(".basket-close, .basket-backdrop")) return closeOverlays();
    if (event.target.closest(".modal-close, .picker-close, .picker-done")) return closeTopOverlay();
    if (event.target.closest(".place-order")) return placeOrder();
    const nav = event.target.closest(".mobile-nav-toggle");
    if (nav) {{ query(".melt-nav")?.classList.toggle("mobile-open"); return; }}
    if (event.target.closest(".mobile-nav-panel a")) query(".melt-nav")?.classList.remove("mobile-open");
  }});
  document.addEventListener("input", event => {{
    if (event.target.matches("#designer-budget, #designer-note")) updateDesignerProfile();
  }});
  document.addEventListener("keydown", event => {{
    if (event.target.matches("#mind-chat-input") && event.key === "Enter" && !event.shiftKey) {{
      event.preventDefault();
      askMeltMind();
    }}
  }});
  setTimeout(() => {{
    renderBasket();
    const observer = new IntersectionObserver(entries => entries.forEach(entry => {{
      if (entry.isIntersecting) {{
        entry.target.classList.add("in-view");
        observer.unobserve(entry.target);
      }}
    }}), {{ threshold: .12, rootMargin: "0px 0px -5% 0px" }});
    queryAll(".reveal, .menu-chapter").forEach(element => observer.observe(element));
    updateJumpButton();
  }}, 500);
  window.addEventListener("scroll", updateJumpButton, {{ passive: true }});
  window.addEventListener("resize", updateJumpButton);
}})();
</script>
"""


logo = f'<img src="{asset_url(LOGO_PATH)}" alt="MeltRoom logo">' if (ROOT / LOGO_PATH).exists() else "<span>M</span>"
hero = f'<img src="{asset_url(HERO_PATH)}" alt="MeltRoom signature dessert">' if (ROOT / HERO_PATH).exists() else ""


def app_markup() -> str:
    return f"""
        <nav class="melt-nav">
          <a class="brand" href="#home">{logo}<strong>MeltRoom</strong><small>Dessert studio</small></a>
          <div class="nav-links">
            <a href="#menu"><small>Discover</small><strong>Menu & add-ons</strong></a>
            <a href="#meltmind"><small>Personalize</small><strong>Ask MeltMind</strong></a>
            <a href="#ingredients"><small>Our craft</small><strong>Ingredients</strong></a>
            <a href="#ordering"><small>Your journey</small><strong>How to order</strong></a>
            <a href="#contact"><small>Stay close</small><strong>Social & support</strong></a>
          </div>
          <div class="nav-actions"><button class="basket-toggle" type="button">MeltBasket <span class="basket-count">0</span></button><button class="mobile-nav-toggle" type="button"><i></i><i></i></button></div>
          <div class="mobile-nav-panel">
            <a href="#menu"><small>Discover</small><strong>Menu & add-ons</strong></a>
            <a href="#meltmind"><small>Personalize</small><strong>Ask MeltMind</strong></a>
            <a href="#ingredients"><small>Our craft</small><strong>Ingredients</strong></a>
            <a href="#ordering"><small>Your journey</small><strong>How to order</strong></a>
            <a href="#contact"><small>Stay close</small><strong>Social & support</strong></a>
          </div>
        </nav>
        <div class="basket-backdrop"></div>
        <aside class="melt-basket">
          <div class="basket-head"><div><p>Your order</p><h2>MeltBasket</h2></div><button class="basket-close" type="button">×</button></div>
          <div class="basket-empty"><span>Start with a craving.</span><p>Your selected melts and finishing touches will live here.</p></div>
          <div class="basket-items"></div>
          <div class="basket-checkout">
            <div class="fulfilment"><label><input type="radio" name="fulfilment" value="Delivery through Rapido" checked><span>Rapido delivery<small>Charge confirmed in chat</small></span></label><label><input type="radio" name="fulfilment" value="Pickup from KLN Reddy Colony"><span>Cloud-kitchen pickup<small>Avoid delivery charges</small></span></label></div>
            <div class="basket-subtotal"><span>Menu subtotal<small>Delivery is calculated separately</small></span><strong class="basket-total">₹0</strong></div>
            <button class="place-order" type="button" disabled>Place order on WhatsApp <b>↗</b></button>
            <p>Mobile-number authentication will be added at this final step. Until then, WhatsApp confirms customer identity.</p>
          </div>
        </aside>
        <button class="context-jump" data-target="menu" type="button"><span><i>↑</i></span><strong>Back to menu</strong><small>Choose another chapter</small></button>
        <button class="floating-basket" type="button"><span>M</span><strong>MeltBasket<small class="basket-total">₹0</small></strong><b class="floating-basket-count">0</b></button>
        <div class="product-modal"></div>
        <aside class="addon-picker"></aside>
        <div class="melt-toast"></div>

        <section id="home" class="hero">
          <div class="hero-copy">
            <p class="eyebrow">MeltRoom · Signature dessert studio</p>
            <h1>Not just dessert.<br><em>Your kind of melt.</em></h1>
            <p>Gluten-free, eggless brownie experiences built around rich chocolate, playful formats, and the mood you arrived with.</p>
            <div class="hero-actions"><a href="#menu">Explore the collection <b>↓</b></a><a href="#meltmind">Meet MeltMind <b>↗</b></a></div>
            <div class="hero-signals"><span><b>18</b> signature creations</span><span><b>4</b> dessert chapters</span><span><b>100%</b> gluten-free brownies</span></div>
          </div>
          <div class="hero-art">
            <div class="hero-image-wrap"><div class="hero-image">{hero}</div></div>
          </div>
        </section>
        <section class="ticker"><div><span>Made for cravings worth remembering</span><b>✦</b><span>Signature brownie bowls</span><b>✦</b><span>Playful melts, serious chocolate</span><b>✦</b><span>Premium ingredients, beautifully layered</span><b>✦</b><span>Your moment, your perfect melt</span><b>✦</b><span>Made for cravings worth remembering</span><b>✦</b><span>Signature brownie bowls</span><b>✦</b><span>Playful melts, serious chocolate</span><b>✦</b><span>Premium ingredients, beautifully layered</span><b>✦</b><span>Your moment, your perfect melt</span><b>✦</b></div></section>
        {menu_markup()}
        {add_on_markup()}
        {meltmind_markup()}
        {ingredient_markup()}
        <section id="ordering" class="ordering-section order-journey">
          <div class="ordering-head reveal"><p class="eyebrow">Your journey through this experience</p><h2>From first craving<br>to final melt.</h2><p>Everything happens in one clear flow: discover, understand, customize, confirm, and receive.</p></div>
          <div class="ordering-grid journey-grid">
            <article class="reveal"><span>01</span><small>Discover</small><h3>Explore the four menu chapters</h3><p>Open product cards to understand flavour, texture, serving guidance, and price before choosing.</p><a href="#menu">Explore menu ↗</a></article>
            <article class="reveal"><span>02</span><small>Get guidance</small><h3>Ask MeltMind or design your melt</h3><p>Ask questions naturally, compare options, or create a complete plan around your craving, people, and budget.</p><a href="#meltmind">Meet MeltMind ↗</a></article>
            <article class="reveal"><span>03</span><small>Customize</small><h3>Build your MeltBasket</h3><p>Add products, adjust quantities, and attach compatible finishing touches to the exact dessert you want.</p><button class="basket-toggle" type="button">Open MeltBasket ↗</button></article>
            <article class="reveal"><span>04</span><small>Confirm</small><h3>Send the prepared order on WhatsApp</h3><p>Place Order creates a clean WhatsApp message. MeltRoom reviews availability and shares the owner's payment QR.</p></article>
            <article class="reveal"><span>05</span><small>Receive</small><h3>Payment confirms your order</h3><p>After payment, MeltRoom updates the order and delivery status. Choose Rapido delivery or pickup near KLN Reddy Colony.</p></article>
          </div>
          <div class="policy-strip reveal"><span><b>Regular orders</b>Generally targeted within 45 minutes after confirmation.</span><span><b>Delivery charges</b>Rapido charge is extra. Above ₹100, MeltRoom contributes 40%.</span><span><b>Large orders</b>Discuss approximately 5–6 hours ahead.</span><span><b>Best taste</b>Enjoy within 60 minutes or refrigerate and gently reheat.</span></div>
        </section>

        <section id="contact" class="contact-section social-section">
          <div class="social-lead reveal"><p class="eyebrow">Stay close to MeltRoom</p><h2>See the melts.<br>Share the love.</h2><p>Follow new creations and behind-the-scenes moments, leave a Google review after your order, or speak directly with MeltRoom for support and custom requests.</p><div class="social-proof"><span><b>Warangal</b>Handcrafted locally</span><span><b>Direct support</b>A real person confirms every order</span></div></div>
          <div class="contact-links social-links">
            <a class="social-card instagram-card reveal" href="https://www.instagram.com/meltroom.warangal/" target="_blank"><span><i>IG</i> Follow the studio</span><strong>@meltroom.warangal</strong><p>Discover new drops, signature melts, customer moments, and custom creations.</p><b>Open Instagram ↗</b></a>
            <a class="social-card review-card reveal" href="https://g.page/r/CW-GZTL2bFinEBM/review" target="_blank"><span><i>★</i> Share your experience</span><strong>Review MeltRoom on Google</strong><p>Your honest review helps a local dessert studio grow and helps new customers discover us.</p><b>Write a review ↗</b></a>
            <a class="social-card whatsapp-card reveal" href="https://wa.me/{WHATSAPP_NUMBER}" target="_blank"><span><i>WA</i> Orders & support</span><strong>WhatsApp MeltRoom</strong><p>Confirm orders, discuss custom cakes, allergies, payments, delivery, or any issue.</p><b>Start a conversation ↗</b></a>
            <a class="social-card call-card reveal" href="tel:+917780534935"><span><i>☎</i> Speak directly</span><strong>+91 77805 34935</strong><p>Reach MeltRoom directly when a conversation is easier than a message.</p><b>Call MeltRoom ↗</b></a>
          </div>
        </section>
        <footer><strong>MeltRoom × MeltMind AI</strong><span>Gluten-free brownies. Guilt-free indulgence. Thoughtfully yours.</span></footer>
        """


def html_page() -> str:
    return f"""<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MeltRoom · MeltMind AI</title>
    {HEAD}
    <style>{CSS}</style>
  </head>
  <body class="meltmind-app">
    {app_markup()}
  </body>
</html>"""


with gr.Blocks(title="MeltRoom · MeltMind AI", css=CSS, head=HEAD, theme=gr.themes.Base(), elem_classes="meltmind-app") as demo:
    gr.HTML(app_markup(), container=False)


web_app = FastAPI(title="MeltMind AI")
web_app.mount("/assets", StaticFiles(directory=ROOT / "assets"), name="assets")


@web_app.get("/", response_class=HTMLResponse)
def meltmind_home():
    return HTMLResponse(html_page())


@web_app.post("/api/meltmind/chat")
def meltmind_chat(request: ChatRequest):
    return ENGINE.chat(request.message, request.history)


@web_app.post("/api/meltmind/design")
def design_perfect_melt(request: DesignerRequest):
    return ENGINE.design(request.model_dump())


@web_app.get("/api/meltmind/model")
def meltmind_model_status():
    return {**ENGINE.runtime_status(check_connection=True), "backend": backend_status()}


web_app = gr.mount_gradio_app(web_app, demo, path="/gradio", allowed_paths=[str(ROOT / "assets")])


if __name__ == "__main__":
    uvicorn.run(web_app, host="0.0.0.0", port=int(os.getenv("GRADIO_SERVER_PORT", "7860")))