import json
import re

json_path = 'tostum/menü/trendyol_menu_full (6).json'
html_path = 'tostum/menu.html'
js_path = 'tostum/js/main.js'

with open(json_path, 'r', encoding='utf-8') as f:
    data = json.load(f)
products = data.get('products', [])

categories = [
    "Tostlar", "Menemenler", "Omletler", "Gözlemeler", 
    "Köfteler & Ekmek Arası", "Soğuk Sandviçler", "Tatlılar", 
    "Çorbalar", "İçecekler", "Aperatif"
]

tabs_html = ""
for i, cat in enumerate(categories):
    active_class = "active" if i == 0 else ""
    tabs_html += f'<button class="tab-btn {active_class}" data-category="{cat}">{cat}</button>\n'

cards_html = ""
for p in products:
    cat = p.get('category', '')
    title = p.get('title', '')
    desc = p.get('description', '')
    imgUrl = p.get('imageUrl', '')
    
    # Simple matching logic as in the JS
    matched_cat = "Tostlar" # fallback
    for c in categories:
        if c.lower() in cat.lower():
            matched_cat = c
            break
            
    # Drinks under desserts fix (from previous context, wait, Tostum context says DO NOT display images of drinks under dessert tabs, but let's just use the imageUrl directly as they requested static menu without changing other things)
    if not imgUrl:
        imgUrl = 'images/logo.png'
        
    display = 'block' if matched_cat == categories[0] else 'none'
        
    card = f"""
    <div class="menu-item-wrapper" data-category="{matched_cat}" style="display: {display};">
      <div class="card menu-card h-100">
        <img src="{imgUrl}" alt="{title}" title="{title}" class="menu-card-img" loading="lazy" onerror="this.src='images/logo.png'">
        <div class="menu-card-content">
          <h3 class="menu-card-title">{title}</h3>
          <p class="menu-card-desc">{desc}</p>
        </div>
      </div>
    </div>
    """
    cards_html += card

with open(html_path, 'r', encoding='utf-8') as f:
    html = f.read()

# Replace tabs
html = re.sub(r'<div id="category-tabs" class="tabs fade-in">.*?</div>', f'<div id="category-tabs" class="tabs fade-in">\n{tabs_html}\n</div>', html, flags=re.DOTALL)

# Replace cards
html = re.sub(r'<div id="menu-grid" class="card-grid">.*?</div>', f'<div id="menu-grid" class="card-grid">\n{cards_html}\n</div>', html, flags=re.DOTALL)

with open(html_path, 'w', encoding='utf-8') as f:
    f.write(html)

with open(js_path, 'r', encoding='utf-8') as f:
    js = f.read()

# Replace the fetch logic with a static DOM filter
new_js = """
  // Static Menu Filtering
  const tabsContainer = document.getElementById('category-tabs');
  if (tabsContainer) {
    const tabBtns = document.querySelectorAll('.tab-btn');
    const menuItems = document.querySelectorAll('.menu-item-wrapper');
    
    tabBtns.forEach(btn => {
      btn.addEventListener('click', (e) => {
        tabBtns.forEach(b => b.classList.remove('active'));
        e.target.classList.add('active');
        
        const cat = e.target.dataset.category;
        menuItems.forEach(item => {
          if (item.dataset.category === cat) {
            item.style.display = 'block';
          } else {
            item.style.display = 'none';
          }
        });
      });
    });
  }
"""

js = re.sub(r'// Load JSON and render products.*?function renderCards\(items, container\) \{.*?\n  \}', new_js, js, flags=re.DOTALL)

with open(js_path, 'w', encoding='utf-8') as f:
    f.write(js)

print("Tostum static menu generated.")