meal-order-manager/src/server/generate_form.py

"""
Generates a self-contained HTML order form from the latest scraped menu.

The form shows this week's meals with quantity selectors, a running total,
and submits orders to the backend (local Flask or cloud API Gateway).

Usage:
  python3 generate_form.py                                    # local mode
  python3 generate_form.py --api-url URL --api-key KEY        # cloud mode
"""

import argparse
import json
import sys
from datetime import datetime
from pathlib import Path

PROJECT_ROOT = Path(__file__).resolve().parents[2]
OUTPUT_DIR = PROJECT_ROOT / "output"
CONFIG_PATH = PROJECT_ROOT / "config.json"


def load_config():
    with open(CONFIG_PATH) as f:
        return json.load(f)


def latest_menu() -> dict:
    files = sorted(OUTPUT_DIR.glob("menu-*.json"), reverse=True)
    if not files:
        print("Error: No menu JSON found. Run scrape_menu.py first.", file=sys.stderr)
        sys.exit(1)
    with open(files[0]) as f:
        return json.load(f)


def generate_form(
    menu: dict,
    config: dict,
    api_url: str = "",
    api_key: str = "",
    bulk_discount: float = 0,
    company_subsidy: float = 0,
    google_client_id: str = "",
) -> str:
    meals_json = json.dumps(menu["meals"]).replace("</", "<\\/")
    roster_json = json.dumps(config.get("roster", [])).replace("</", "<\\/")
    deadline = config.get("order_deadline", "Thursday 11:59 PM")
    week = datetime.now().strftime("%Y-W%U")
    scraped_at = menu.get("scraped_at", "unknown")
    submit_url = (
        f"{api_url}/api/submit-order" if api_url else "/api/submit-order"
    ).replace("</", "<\\/")
    status_url = (
        f"{api_url}/api/form-status/{week}" if api_url else f"/api/form-status/{week}"
    ).replace("</", "<\\/")
    roster_url = (f"{api_url}/api/roster" if api_url else "/api/roster").replace(
        "</", "<\\/"
    )
    admin_url = (
        f"{api_url}/api/admin/orders" if api_url else "/api/admin/orders"
    ).replace("</", "<\\/")
    api_key_json = json.dumps(api_key).replace("</", "<\\/")
    has_discount = bulk_discount > 0 or company_subsidy > 0
    use_google_auth = bool(google_client_id)
    google_client_id_json = json.dumps(google_client_id).replace("</", "<\\/")

    if use_google_auth:
        auth_section_html = """  <div class="employee-info">
    <div id="user-info">
      <div style="display:flex;align-items:center;gap:12px;">
        <img id="user-avatar" style="width:40px;height:40px;border-radius:50%;object-fit:cover;display:none;" alt="">
        <div style="flex:1;">
          <div id="user-name" style="font-weight:600;font-size:0.95rem;"></div>
          <div id="user-email" style="font-size:0.85rem;color:#6b7280;"></div>
        </div>
        <button id="admin-btn" onclick="showAdmin()" style="display:none;background:#1a1a2e;color:#fff;border:none;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:0.8rem;font-weight:600;">Admin</button>
        <button onclick="signOut()" style="background:none;border:1px solid #d1d5db;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:0.8rem;color:#6b7280;">Sign out</button>
      </div>
    </div>
  </div>"""
    else:
        auth_section_html = """  <div class="employee-info">
    <label for="emp-name">Your Name</label>
    <select id="emp-name"><option value="">Loading...</option></select>
    <input type="hidden" id="emp-email">
  </div>"""

    if use_google_auth:
        google_auth_js = """
function waitForGoogleAuth() {
  if (typeof google !== 'undefined' && google.accounts && google.accounts.id) {
    initGoogleAuth();
  } else {
    setTimeout(waitForGoogleAuth, 50);
  }
}

function initGoogleAuth() {
  google.accounts.id.initialize({
    client_id: GOOGLE_CLIENT_ID,
    callback: handleCredentialResponse,
    auto_select: true,
  });
  google.accounts.id.renderButton(
    document.getElementById('g-signin-btn'),
    { theme: 'outline', size: 'large', text: 'signin_with', width: 300 }
  );
}

function handleCredentialResponse(response) {
  googleCredential = response.credential;
  const b64 = response.credential.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
  const payloadBytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
  const payload = JSON.parse(new TextDecoder().decode(payloadBytes));
  googleUser = { name: payload.name, email: payload.email };

  document.getElementById('auth-overlay').style.display = 'none';
  document.getElementById('app').style.display = 'block';
  var footer = document.getElementById('sticky-footer');
  if (footer) footer.style.display = 'block';
  document.getElementById('user-name').textContent = payload.name;
  document.getElementById('user-email').textContent = payload.email;
  if (payload.picture) {
    const avatar = document.getElementById('user-avatar');
    avatar.src = payload.picture;
    avatar.style.display = 'block';
  }

  updateTotal();
  checkDuplicateOrder();
  checkAdmin();
}

function signOut() {
  isAdmin = false;
  var ab = document.getElementById('admin-btn');
  if (ab) ab.style.display = 'none';
  googleCredential = null;
  googleUser = null;
  google.accounts.id.disableAutoSelect();
  document.getElementById('auth-overlay').style.display = 'flex';
  document.getElementById('app').style.display = 'none';
  var footer = document.getElementById('sticky-footer');
  if (footer) footer.style.display = 'none';
}
"""
    else:
        google_auth_js = ""

    if use_google_auth:
        submit_order_js = """
async function submitOrder() {
  if (formClosed && !isAdmin) { alert('Orders are closed.'); return; }
  if (!googleCredential || !googleUser) { alert('Please sign in with Google first.'); return; }

  const items = Object.entries(quantities).map(([i, qty]) => ({
    name: MEALS[i].name,
    retail_price: MEALS[i].price,
    quantity: qty,
  }));

  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.textContent = 'Submitting...';

  try {
    const headers = { 'Content-Type': 'application/json' };
    if (API_KEY) headers['x-api-key'] = API_KEY;
    const res = await fetch(SUBMIT_URL, {
      method: 'POST',
      headers,
      body: JSON.stringify({ google_id_token: googleCredential, items }),
    });
    const data = await res.json();
    if (res.ok) {
      for (const el of document.getElementById('app').children) { if (el.id !== 'success') el.style.display = 'none'; }
      document.getElementById('success').style.display = 'block';
      document.getElementById('success-detail').textContent = `${googleUser.name} — $${(data.total || 0).toFixed(2)} total. You're all set!`;
      document.querySelector('.sticky-footer').style.display = 'none';
      try { localStorage.setItem('lastOrderWeek', WEEK); } catch (e) {}
    } else {
      alert(data.error || 'Something went wrong.');
      btn.disabled = false;
      btn.textContent = 'Submit Order';
    }
  } catch (e) {
    alert('Failed to submit. Check your connection and try again.');
    btn.disabled = false;
    btn.textContent = 'Submit Order';
  }
}
"""
    else:
        submit_order_js = """
async function submitOrder() {
  if (formClosed && !isAdmin) { alert('Orders are closed.'); return; }
  const name = document.getElementById('emp-name').value.trim();
  const email = document.getElementById('emp-email').value.trim();
  if (!name) { alert('Please enter your name.'); return; }
  if (!email) { alert('Please enter your email.'); return; }

  const items = Object.entries(quantities).map(([i, qty]) => ({
    name: MEALS[i].name,
    retail_price: MEALS[i].price,
    quantity: qty,
  }));

  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.textContent = 'Submitting...';

  try {
    const headers = { 'Content-Type': 'application/json' };
    if (API_KEY) headers['x-api-key'] = API_KEY;
    const res = await fetch(SUBMIT_URL, {
      method: 'POST',
      headers,
      body: JSON.stringify({ employee_name: name, employee_email: email, items }),
    });
    const data = await res.json();
    if (res.ok) {
      for (const el of document.getElementById('app').children) { if (el.id !== 'success') el.style.display = 'none'; }
      document.getElementById('success').style.display = 'block';
      document.getElementById('success-detail').textContent = `${name} — $${(data.total || 0).toFixed(2)} total. You're all set!`;
      document.querySelector('.sticky-footer').style.display = 'none';
      try { localStorage.setItem('lastOrderWeek', WEEK); } catch (e) {}
    } else {
      alert(data.error || 'Something went wrong.');
      btn.disabled = false;
      btn.textContent = 'Submit Order';
    }
  } catch (e) {
    alert('Failed to submit. Check your connection and try again.');
    btn.disabled = false;
    btn.textContent = 'Submit Order';
  }
}
"""

    return f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sea Haven — Meal Order ({week})</title>
<link rel="icon" type="image/png" sizes="32x32" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABX0lEQVRYhe3TPWsUURjF8d+dnSxhoxA1xEJnQQsJGbBTrIIIvoEDNqkNiJ9BrPwI4jeY2kmVoKWkSVALK6MgwWLsJIWIBBFZLGaLTTLrJrX3X96X5znnPPcSiUQikf+dcHAhr+qLuIrT2MV77Owv9ycWy6u6i3tnOu5maTg/FUzjOz5gHe/KImsXkFf1ZTzH9ZbaNdbwElvby/0fwzsJFnANN3uJO/00zJ5MxmrcwqOyyD7uE5BX9Q08xh5O4BL+ZXkXvzQp9RKcS4OzaUukh9nDg7LIVkcFGI04r2pDZw+xgrlx1U516KdB93DnGhvYxBd8w08M0MXnssgmCx7O9RZuYzEw30sszATpXCeY2R/3AC/wTMu420gnHbgyHeY1sb3FH9wfc28DT8oiezOx63EE4DeeYqllb4BXGsevj+L4IEd4M6ysf6X5HUu4oEniE9bKIts5dtdIJBKJREb4C8ngTD+C9DtvAAAAAElFTkSuQmCC">
<style>
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f7; color: #1d1d1f; }}
.container {{ max-width: 800px; margin: 0 auto; padding: 16px; }}
header {{ background: #1a1a2e; color: #fff; padding: 24px 16px; text-align: center; margin-bottom: 24px; border-radius: 12px; }}
header h1 {{ font-size: 1.5rem; margin-bottom: 4px; }}
header p {{ font-size: 0.85rem; opacity: 0.8; }}
.deadline {{ background: #fef3c7; color: #92400e; padding: 10px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; text-align: center; font-weight: 500; }}
.employee-info {{ background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }}
.employee-info label {{ display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.85rem; }}
.employee-info input, .employee-info select {{ width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; margin-bottom: 12px; }}
.filters {{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }}
.filters button {{ padding: 6px 14px; border: 1px solid #d1d5db; border-radius: 20px; background: #fff; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; }}
.filters button.active {{ background: #1a1a2e; color: #fff; border-color: #1a1a2e; }}
.meal-card {{ background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; gap: 12px; align-items: center; }}
.meal-img {{ width: 80px; height: 80px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }}
.meal-info {{ flex: 1; min-width: 0; }}
.meal-name {{ font-weight: 600; font-size: 0.95rem; margin-bottom: 2px; }}
.meal-meta {{ font-size: 0.8rem; color: #6b7280; margin-bottom: 4px; }}
.meal-tags {{ display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }}
.meal-tags span {{ font-size: 0.7rem; padding: 2px 8px; border-radius: 10px; background: #e0f2fe; color: #0369a1; font-weight: 500; }}
.meal-tags span.new {{ background: #dcfce7; color: #15803d; }}
.qty-control {{ display: flex; align-items: center; gap: 0; flex-shrink: 0; }}
.qty-control button {{ width: 32px; height: 32px; border: 1px solid #d1d5db; background: #f9fafb; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }}
.qty-control button:first-child {{ border-radius: 8px 0 0 8px; }}
.qty-control button:last-child {{ border-radius: 0 8px 8px 0; }}
.qty-control .qty {{ width: 36px; height: 32px; text-align: center; border: 1px solid #d1d5db; border-left: 0; border-right: 0; font-size: 0.95rem; font-weight: 600; }}
.meal-card.selected {{ border: 2px solid #1a1a2e; }}
.sticky-footer {{ position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #e5e7eb; padding: 12px 16px; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); z-index: 100; }}
.sticky-footer .inner {{ max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }}
.total {{ font-size: 1.1rem; font-weight: 700; }}
.submit-btn {{ background: #1a1a2e; color: #fff; border: none; padding: 12px 32px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s; }}
.submit-btn:disabled {{ opacity: 0.4; cursor: not-allowed; }}
.submit-btn:hover:not(:disabled) {{ opacity: 0.85; }}
.success-msg {{ text-align: center; padding: 60px 20px; }}
.success-msg h2 {{ color: #15803d; margin-bottom: 8px; }}
.back-btn {{ background: transparent; color: #1a1a2e; border: 2px solid #1a1a2e; padding: 12px 32px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; margin-top: 20px; }}
.back-btn:hover {{ background: #1a1a2e; color: #fff; }}
.duplicate-warning {{ background: #fef3c7; color: #92400e; padding: 10px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; text-align: center; font-weight: 500; border: 1px solid #fcd34d; }}
.meal-desc {{ font-size: 0.8rem; color: #6b7280; margin-bottom: 4px; }}
.search-bar {{ width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; margin-bottom: 16px; }}
body {{ padding-bottom: 80px; }}
.closed-banner {{ background: #fee2e2; color: #991b1b; padding: 16px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-weight: 600; font-size: 1rem; }}
@media (min-width: 768px) {{
  .container {{ max-width: 1100px; }}
  #meals-list {{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }}
  #meals-list .meal-card {{ margin-bottom: 0; }}
}}
@media (min-width: 1200px) {{
  .container {{ max-width: 1400px; }}
  #meals-list {{ grid-template-columns: repeat(3, 1fr); }}
}}
.discount-banner {{ background: #dcfce7; color: #15803d; padding: 10px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.85rem; text-align: center; font-weight: 500; }}
.price-retail {{ text-decoration: line-through; color: #9ca3af; font-size: 0.75rem; margin-right: 4px; }}
.price-employee {{ color: #15803d; font-weight: 600; }}
.auth-overlay {{ position: fixed; inset: 0; background: #1a1a2e; display: flex; align-items: center; justify-content: center; z-index: 1000; }}
.auth-card {{ background: #fff; border-radius: 16px; padding: 48px 40px; text-align: center; max-width: 400px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }}
.auth-card h1 {{ font-size: 1.5rem; margin-bottom: 4px; color: #1d1d1f; }}
.auth-card p {{ font-size: 0.9rem; color: #6b7280; margin-bottom: 32px; }}
.auth-card .logo {{ font-size: 2rem; margin-bottom: 16px; }}
.closed-overlay {{ position: fixed; inset: 0; background: #1a1a2e; display: none; align-items: center; justify-content: center; z-index: 2000; }}
.closed-card {{ background: #fff; border-radius: 16px; padding: 48px 40px; text-align: center; max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.3); }}
.closed-card h1 {{ font-size: 1.5rem; margin-bottom: 8px; color: #1d1d1f; }}
.closed-card p {{ font-size: 0.9rem; color: #6b7280; margin-bottom: 24px; }}
.closed-card .logo {{ font-size: 2.5rem; margin-bottom: 16px; }}
.countdown {{ font-size: 2rem; font-weight: 700; color: #1a1a2e; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }}
.countdown-label {{ font-size: 0.75rem; color: #9ca3af; margin-top: 4px; }}
.admin-panel {{ background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }}
.admin-header {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }}
.admin-header h2 {{ font-size: 1.2rem; font-weight: 700; margin: 0; }}
.admin-stats {{ font-size: 0.9rem; color: #6b7280; margin-bottom: 16px; }}
.admin-stats strong {{ color: #1d1d1f; }}
.admin-table-wrap {{ overflow-x: auto; }}
.admin-table {{ width: 100%; border-collapse: collapse; font-size: 0.9rem; }}
.admin-table th {{ text-align: left; padding: 10px 12px; border-bottom: 2px solid #e5e7eb; font-weight: 600; color: #6b7280; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }}
.admin-table td {{ padding: 10px 12px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }}
.admin-table tr:last-child td {{ border-bottom: none; }}
.admin-table .items-cell {{ font-size: 0.82rem; color: #4b5563; }}
.admin-table .total-cell {{ font-weight: 600; white-space: nowrap; }}
.admin-table .time-cell {{ font-size: 0.8rem; color: #9ca3af; white-space: nowrap; }}
.admin-total-row {{ background: #f9fafb; font-weight: 700; }}
.admin-total-row td {{ border-top: 2px solid #e5e7eb; padding: 12px; }}
.admin-empty {{ text-align: center; padding: 40px 20px; color: #9ca3af; }}
.admin-actions {{ display: flex; gap: 6px; white-space: nowrap; }}
.admin-actions button {{ padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; cursor: pointer; font-weight: 500; border: 1px solid; }}
.btn-edit {{ background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }}
.btn-edit:hover {{ background: #dbeafe; }}
.btn-delete {{ background: #fef2f2; color: #dc2626; border-color: #fecaca; }}
.btn-delete:hover {{ background: #fee2e2; }}
.btn-save {{ background: #dcfce7; color: #15803d; border-color: #bbf7d0; }}
.btn-save:hover {{ background: #bbf7d0; }}
.btn-cancel {{ background: #f9fafb; color: #6b7280; border-color: #d1d5db; }}
.btn-cancel:hover {{ background: #f3f4f6; }}
.edit-qty {{ display: inline-flex; align-items: center; gap: 0; margin: 2px 0; }}
.edit-qty button {{ width: 24px; height: 24px; border: 1px solid #d1d5db; background: #f9fafb; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }}
.edit-qty button:first-child {{ border-radius: 4px 0 0 4px; }}
.edit-qty button:last-child {{ border-radius: 0 4px 4px 0; }}
.edit-qty span {{ width: 28px; height: 24px; text-align: center; line-height: 24px; border: 1px solid #d1d5db; border-left: 0; border-right: 0; font-size: 0.82rem; font-weight: 600; }}
.edit-qty.removed {{ opacity: 0.4; text-decoration: line-through; }}
.admin-add-item {{ margin-top: 8px; }}
.admin-add-item select {{ padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.8rem; max-width: 220px; }}
</style>
{
        '<script src="https://accounts.google.com/gsi/client" async defer></script>'
        if use_google_auth
        else ""
    }
</head>
<body>
<div class="closed-overlay" id="closed-overlay">
  <div class="closed-card">
    <div class="logo">&#127869;</div>
    <h1>Orders Are Closed</h1>
    <p>Orders open again Monday at 8:00 AM ET</p>
    <div class="countdown" id="countdown"></div>
    <div class="countdown-label">until orders open</div>
  </div>
</div>
{
        '<div class="auth-overlay" id="auth-overlay"><div class="auth-card"><div class="logo">&#127869;</div><h1>Sea Haven Meal Order</h1><p>Sign in with your company Google account to place your order.</p><div id="g-signin-btn" style="display:flex;justify-content:center;"></div></div></div>'
        if use_google_auth
        else ""
    }
<div class="container" id="app" {'style="display:none;"' if use_google_auth else ""}>
  <header>
    <h1>Sea Haven Meal Order</h1>
    <p>Week of {week} &middot; Menu scraped {scraped_at[:10]}</p>
  </header>

  <div class="deadline">Order deadline: {deadline}</div>
  <div class="duplicate-warning" id="duplicate-warning" style="display:none;">You've already submitted an order this week. Submitting again will replace your previous order.</div>
  {
        '<div class="discount-banner">Prices reflect employee cost after '
        + (f"{bulk_discount:g}% bulk discount" if bulk_discount > 0 else "")
        + (" + " if bulk_discount > 0 and company_subsidy > 0 else "")
        + (f"{company_subsidy:g}% company subsidy" if company_subsidy > 0 else "")
        + "</div>"
        if has_discount
        else ""
    }

{auth_section_html}

  <input type="text" class="search-bar" id="search" placeholder="Search meals...">

  <div class="filters" id="filters"></div>

  <div id="meals-list"></div>

  <div class="sticky-footer" {
        'style="display:none;" id="sticky-footer"' if use_google_auth else ""
    }>
    <div class="inner">
      <div>
        <span class="total" id="total-display">$0.00</span>
        <span style="font-size:0.8rem;color:#6b7280;margin-left:8px;" id="count-display">0 meals</span>
      </div>
      <button class="submit-btn" id="submit-btn" disabled>Submit Order</button>
    </div>
  </div>

  <div id="admin-panel" style="display:none;">
    <div class="admin-panel">
      <div class="admin-header">
        <h2>Order Admin</h2>
        <div style="display:flex;gap:8px;align-items:center;">
          <select id="admin-week" onchange="loadWeekOrders(this.value)" style="padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:0.9rem;"></select>
          <button onclick="hideAdmin()" class="back-btn" style="margin:0;padding:8px 16px;font-size:0.85rem;">Back to Menu</button>
        </div>
      </div>
      <div id="admin-stats" class="admin-stats"></div>
      <div class="admin-table-wrap">
        <table class="admin-table">
          <thead>
            <tr>
              <th>Employee</th>
              <th>Items</th>
              <th>Total</th>
              <th>Submitted</th>
              <th></th>
            </tr>
          </thead>
          <tbody id="admin-tbody"></tbody>
        </table>
      </div>
      <div id="admin-empty" class="admin-empty" style="display:none;">No orders for this week.</div>
    </div>
  </div>

  <div id="success" class="success-msg" style="display:none;">
    <h2>Order submitted!</h2>
    <p id="success-detail"></p>
    <button class="back-btn" onclick="location.reload()">Back to Menu</button>
  </div>
</div>

<script>
const MEALS = {meals_json};
const ROSTER = {roster_json};
const SUBMIT_URL = '{submit_url}';
const STATUS_URL = '{status_url}';
const ROSTER_URL = '{roster_url}';
const ADMIN_URL = '{admin_url}';
const API_KEY = {api_key_json};
const WEEK = '{week}';
const BULK_DISCOUNT = {bulk_discount};
const COMPANY_SUBSIDY = {company_subsidy};
const quantities = {{}};
let formClosed = false;
let isAdmin = false;
let adminWeeks = [];
{
        "const GOOGLE_CLIENT_ID = "
        + google_client_id_json
        + ";\nlet googleCredential = null;\nlet googleUser = null;"
        if use_google_auth
        else ""
    }

function escapeHtml(str) {{
  if (!str) return '';
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}}

function employeePrice(retail) {{
  if (!retail) return 0;
  const bulkPrice = Math.round(retail * (1 - BULK_DISCOUNT / 100) * 100 + 1e-8) / 100;
  const empPrice = Math.round(bulkPrice * (1 - COMPANY_SUBSIDY / 100) * 100 + 1e-8) / 100;
  return empPrice;
}}
{google_auth_js}
function checkDuplicateOrder() {{
  try {{
    if (localStorage.getItem('lastOrderWeek') === WEEK) {{
      document.getElementById('duplicate-warning').style.display = 'block';
    }}
  }} catch (e) {{}}
}}

function init() {{
  checkFormStatus();
  {
        "waitForGoogleAuth();"
        if use_google_auth
        else "loadRoster(); checkDuplicateOrder();"
    }
  // Build filter buttons
  const tags = new Set();
  MEALS.forEach(m => (m.dietary_tags || []).forEach(t => tags.add(t)));
  const cats = ['All Meals', ...Array.from(tags).sort()];
  const filtersEl = document.getElementById('filters');
  cats.forEach(cat => {{
    const btn = document.createElement('button');
    btn.textContent = cat;
    if (cat === 'All Meals') btn.classList.add('active');
    btn.onclick = () => {{
      filtersEl.querySelectorAll('button').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      renderMeals();
    }};
    filtersEl.appendChild(btn);
  }});

  document.getElementById('search').addEventListener('input', renderMeals);
  document.getElementById('submit-btn').addEventListener('click', submitOrder);

  renderMeals();
}}

function renderMeals() {{
  const activeFilter = document.querySelector('.filters button.active')?.textContent || 'All Meals';
  const search = document.getElementById('search').value.toLowerCase();
  const list = document.getElementById('meals-list');
  list.innerHTML = '';

  MEALS.forEach((meal, i) => {{
    if (activeFilter !== 'All Meals' && !(meal.dietary_tags || []).includes(activeFilter)) return;
    if (search && !meal.name.toLowerCase().includes(search)) return;

    const qty = quantities[i] || 0;
    const card = document.createElement('div');
    card.className = 'meal-card' + (qty > 0 ? ' selected' : '');

    let tagsHtml = '';
    if (meal.is_new) tagsHtml += '<span class="new">NEW</span>';
    (meal.dietary_tags || []).forEach(t => {{ tagsHtml += `<span>${{escapeHtml(t)}}</span>`; }});

    const descHtml = meal.description ? `<div class="meal-desc">${{escapeHtml(meal.description)}}</div>` : '';
    const hasDiscount = (BULK_DISCOUNT > 0 || COMPANY_SUBSIDY > 0) && meal.price;
    const empPrice = employeePrice(meal.price);
    const priceHtml = hasDiscount
      ? `<span class="price-retail">$${{meal.price.toFixed(2)}}</span><span class="price-employee">$${{empPrice.toFixed(2)}}</span>`
      : (meal.price ? `$${{meal.price.toFixed(2)}}` : '—');

    const safeName = escapeHtml(meal.name);
    const safeImageUrl = escapeHtml(meal.image_url);
    card.innerHTML = `
      ${{meal.image_url ? `<img class="meal-img" src="${{safeImageUrl}}" alt="${{safeName}}" loading="lazy">` : ''}}
      <div class="meal-info">
        <div class="meal-name">${{safeName}}</div>
        ${{descHtml}}
        <div class="meal-meta">${{priceHtml}} &middot; ${{escapeHtml(meal.calories || '?')}} cal &middot; ${{escapeHtml(meal.protein || '?')}} protein</div>
        <div class="meal-tags">${{tagsHtml}}</div>
      </div>
      <div class="qty-control">
        <button onclick="changeQty(${{i}}, -1)" ${{formClosed && !isAdmin ? 'disabled' : ''}}>&minus;</button>
        <input class="qty" type="text" value="${{qty}}" readonly>
        <button onclick="changeQty(${{i}}, 1)" ${{formClosed && !isAdmin ? 'disabled' : ''}}>+</button>
      </div>
    `;
    list.appendChild(card);
  }});

  updateTotal();
}}

function changeQty(index, delta) {{
  const current = quantities[index] || 0;
  const next = Math.max(0, current + delta);
  if (next === 0) delete quantities[index]; else quantities[index] = next;
  renderMeals();
}}

function updateTotal() {{
  let total = 0, count = 0;
  Object.entries(quantities).forEach(([i, qty]) => {{
    total += employeePrice(MEALS[i].price || 0) * qty;
    count += qty;
  }});
  document.getElementById('total-display').textContent = `$${{total.toFixed(2)}}`;
  document.getElementById('count-display').textContent = `${{count}} meal${{count !== 1 ? 's' : ''}}`;
  document.getElementById('submit-btn').disabled = count === 0{
        " || !googleCredential" if use_google_auth else ""
    };
}}

{submit_order_js}

{
        ""
        if use_google_auth
        else '''async function loadRoster() {
  try {
    const res = await fetch(ROSTER_URL);
    const data = await res.json();
    const select = document.getElementById('emp-name');
    select.innerHTML = '<option value="">Select your name</option>';
    (data.employees || ROSTER).forEach(emp => {
      const opt = document.createElement('option');
      opt.value = emp.name;
      opt.dataset.email = emp.email;
      opt.textContent = emp.name;
      select.appendChild(opt);
    });
    select.addEventListener('change', () => {
      const selected = select.options[select.selectedIndex];
      document.getElementById('emp-email').value = selected?.dataset?.email || '';
    });
  } catch (e) {
    const select = document.getElementById('emp-name');
    select.innerHTML = '<option value="">Select your name</option>';
    ROSTER.forEach(emp => {
      const opt = document.createElement('option');
      opt.value = emp.name;
      opt.dataset.email = emp.email;
      opt.textContent = emp.name;
      select.appendChild(opt);
    });
  }
}
'''
    }
function adminBypassClosed() {{
  document.getElementById('closed-overlay').style.display = 'none';
  document.querySelectorAll('.qty-control button').forEach(b => b.disabled = false);
  var submitBtn = document.getElementById('submit-btn');
  if (submitBtn) submitBtn.disabled = Object.keys(quantities).length === 0;
  var existing = document.getElementById('admin-closed-banner');
  if (!existing) {{
    var banner = document.createElement('div');
    banner.id = 'admin-closed-banner';
    banner.className = 'closed-banner';
    banner.textContent = 'Form is closed — admin override active';
    var deadline = document.querySelector('.deadline');
    if (deadline) deadline.parentNode.insertBefore(banner, deadline.nextSibling);
  }}
  renderMeals();
}}

function checkAdmin() {{
  if (!ADMIN_URL) return;
  const headers = {{}};
  if (typeof googleCredential !== 'undefined' && googleCredential) {{
    headers['Authorization'] = 'Bearer ' + googleCredential;
  }}
  fetch(ADMIN_URL, {{ headers }})
    .then(r => r.ok ? r.json() : null)
    .then(data => {{
      if (data && data.weeks) {{
        isAdmin = true;
        adminWeeks = data.weeks;
        var ab = document.getElementById('admin-btn');
        if (ab) ab.style.display = 'inline-block';
        if (formClosed) adminBypassClosed();
      }}
    }})
    .catch(() => {{}});
}}

function showAdmin() {{
  document.querySelectorAll('#app > :not(#admin-panel)').forEach(el => {{
    if (el.id !== 'admin-panel') el.dataset.prevDisplay = el.style.display || '';
    el.style.display = 'none';
  }});
  const panel = document.getElementById('admin-panel');
  panel.style.display = 'block';
  var footer = document.querySelector('.sticky-footer');
  if (footer) footer.style.display = 'none';

  const select = document.getElementById('admin-week');
  select.innerHTML = '';
  adminWeeks.forEach(w => {{
    const opt = document.createElement('option');
    opt.value = w.week;
    opt.textContent = w.week + (w.form_status === 'open' ? ' (open)' : '');
    select.appendChild(opt);
  }});
  if (adminWeeks.length > 0) loadWeekOrders(adminWeeks[0].week);
}}

function hideAdmin() {{
  document.getElementById('admin-panel').style.display = 'none';
  document.querySelectorAll('#app > :not(#admin-panel)').forEach(el => {{
    el.style.display = el.dataset.prevDisplay || '';
    delete el.dataset.prevDisplay;
  }});
  var footer = document.querySelector('.sticky-footer');
  if (footer) footer.style.display = '';
}}

let currentAdminWeek = '';
let editingOrder = null;
let editQuantities = {{}};

function adminHeaders() {{
  const h = {{}};
  if (typeof googleCredential !== 'undefined' && googleCredential) h['Authorization'] = 'Bearer ' + googleCredential;
  return h;
}}

function loadWeekOrders(week) {{
  if (!week) return;
  currentAdminWeek = week;
  editingOrder = null;
  const tbody = document.getElementById('admin-tbody');
  tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;color:#9ca3af;">Loading...</td></tr>';
  document.getElementById('admin-empty').style.display = 'none';
  document.getElementById('admin-stats').textContent = '';

  fetch(ADMIN_URL + '?week=' + encodeURIComponent(week), {{ headers: adminHeaders() }})
    .then(r => r.json())
    .then(data => renderAdminTable(data))
    .catch(() => {{
      tbody.innerHTML = '<tr><td colspan="5" style="text-align:center;padding:20px;color:#991b1b;">Failed to load orders.</td></tr>';
    }});
}}

function renderAdminTable(data) {{
  const tbody = document.getElementById('admin-tbody');
  tbody.innerHTML = '';
  if (!data.orders || data.orders.length === 0) {{
    document.getElementById('admin-empty').style.display = 'block';
    document.getElementById('admin-stats').textContent = '';
    return;
  }}
  document.getElementById('admin-empty').style.display = 'none';
  document.getElementById('admin-stats').innerHTML =
    '<strong>' + data.total_employees + '</strong> employee' + (data.total_employees !== 1 ? 's' : '') +
    ' ordered &middot; <strong>$' + data.grand_total.toFixed(2) + '</strong> total payroll deductions';

  data.orders.forEach((order, idx) => {{
    const tr = document.createElement('tr');
    tr.id = 'admin-row-' + idx;
    const isEditing = editingOrder === order.employee_email;

    let itemsHtml, actionsHtml, totalHtml;
    if (isEditing) {{
      const editNames = Object.keys(editQuantities);
      itemsHtml = editNames.map(name => {{
        const q = editQuantities[name] || 0;
        const eName = escapeHtml(name).replace(/'/g, "\\\\'");
        const cls = q === 0 ? 'edit-qty removed' : 'edit-qty';
        return '<div class="' + cls + '">' +
          '<button onclick="adminEditQty(\\'' + eName + '\\',-1)">&minus;</button>' +
          '<span>' + q + '</span>' +
          '<button onclick="adminEditQty(\\'' + eName + '\\',1)">+</button>' +
          '</div> ' + escapeHtml(name);
      }}).join('<br>');
      const availableMeals = MEALS.filter(m => !editQuantities.hasOwnProperty(m.name));
      if (availableMeals.length > 0) {{
        itemsHtml += '<div class="admin-add-item"><select onchange="adminAddItem(this.value); this.selectedIndex=0;">' +
          '<option value="">+ Add item...</option>' +
          availableMeals.map(m => '<option value="' + escapeHtml(m.name).replace(/"/g, '&quot;') + '">' + escapeHtml(m.name) + ' ($' + m.price.toFixed(2) + ')</option>').join('') +
          '</select></div>';
      }}
      const menuPrices = {{}};
      MEALS.forEach(m => {{ menuPrices[m.name] = m.price; }});
      const newTotal = editNames.reduce((sum, name) => {{
        const price = menuPrices[name] || 0;
        return sum + price * (editQuantities[name] || 0);
      }}, 0);
      totalHtml = '$' + newTotal.toFixed(2);
      actionsHtml = '<div class="admin-actions"><button class="btn-save" onclick="adminSaveEdit(\\'' + escapeHtml(order.employee_email) + '\\')">Save</button><button class="btn-cancel" onclick="adminCancelEdit()">Cancel</button></div>';
    }} else {{
      itemsHtml = order.items.map(i =>
        escapeHtml(i.name) + ' &times;' + i.quantity + ' <span style="color:#9ca3af;">($' + i.subtotal.toFixed(2) + ')</span>'
      ).join('<br>');
      totalHtml = '$' + order.total.toFixed(2);
      actionsHtml = '<div class="admin-actions"><button class="btn-edit" onclick="adminStartEdit(' + idx + ',\\'' + escapeHtml(order.employee_email) + '\\')">Edit</button><button class="btn-delete" onclick="adminDeleteOrder(\\'' + escapeHtml(order.employee_email) + '\\',\\'' + escapeHtml(order.employee_name) + '\\')">Delete</button></div>';
    }}

    const submitted = order.submitted_at ? new Date(order.submitted_at).toLocaleString('en-US', {{
      timeZone: 'America/New_York', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'
    }}) : '';
    tr.innerHTML =
      '<td><strong>' + escapeHtml(order.employee_name) + '</strong><br><span style="font-size:0.8rem;color:#9ca3af;">' + escapeHtml(order.employee_email) + '</span></td>' +
      '<td class="items-cell">' + itemsHtml + '</td>' +
      '<td class="total-cell">' + totalHtml + '</td>' +
      '<td class="time-cell">' + submitted + '</td>' +
      '<td>' + actionsHtml + '</td>';
    tbody.appendChild(tr);
  }});
  const totalRow = document.createElement('tr');
  totalRow.className = 'admin-total-row';
  totalRow.innerHTML = '<td>Total</td><td>' + data.orders.reduce((s,o) => s + o.items.reduce((a,i) => a + i.quantity, 0), 0) + ' meals</td><td class="total-cell">$' + data.grand_total.toFixed(2) + '</td><td></td><td></td>';
  tbody.appendChild(totalRow);
}}

let lastAdminData = null;
const origLoadWeekOrders = loadWeekOrders;

function adminStartEdit(idx, email) {{
  fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek), {{ headers: adminHeaders() }})
    .then(r => r.json())
    .then(data => {{
      lastAdminData = data;
      const order = data.orders.find(o => o.employee_email === email);
      if (!order) return;
      editingOrder = email;
      editQuantities = {{}};
      order.items.forEach(i => {{ editQuantities[i.name] = i.quantity; }});
      renderAdminTable(data);
    }});
}}

function adminCancelEdit() {{
  editingOrder = null;
  editQuantities = {{}};
  if (lastAdminData) renderAdminTable(lastAdminData);
}}

function adminEditQty(name, delta) {{
  const current = editQuantities[name] || 0;
  editQuantities[name] = Math.max(0, current + delta);
  if (lastAdminData) renderAdminTable(lastAdminData);
}}

function adminAddItem(name) {{
  if (!name) return;
  editQuantities[name] = 1;
  if (lastAdminData) renderAdminTable(lastAdminData);
}}

function adminSaveEdit(email) {{
  const items = Object.entries(editQuantities)
    .filter(([, q]) => q > 0)
    .map(([name, quantity]) => ({{ name, quantity }}));
  if (items.length === 0) {{
    if (confirm('All quantities are zero. Delete this order instead?')) {{
      adminDeleteOrder(email, '');
    }}
    return;
  }}
  fetch(ADMIN_URL, {{
    method: 'PUT',
    headers: {{ ...adminHeaders(), 'Content-Type': 'application/json' }},
    body: JSON.stringify({{ week: currentAdminWeek, email, items }}),
  }})
    .then(r => {{ if (!r.ok) return r.json().then(d => {{ throw new Error(d.error); }}); return r.json(); }})
    .then(() => {{ editingOrder = null; editQuantities = {{}}; loadWeekOrders(currentAdminWeek); }})
    .catch(e => alert('Failed to update: ' + e.message));
}}

function adminDeleteOrder(email, name) {{
  const label = name ? name + ' (' + email + ')' : email;
  if (!confirm('Delete order for ' + label + '?')) return;
  fetch(ADMIN_URL + '?week=' + encodeURIComponent(currentAdminWeek) + '&email=' + encodeURIComponent(email), {{
    method: 'DELETE',
    headers: adminHeaders(),
  }})
    .then(r => {{ if (!r.ok) return r.json().then(d => {{ throw new Error(d.error); }}); return r.json(); }})
    .then(() => loadWeekOrders(currentAdminWeek))
    .catch(e => alert('Failed to delete: ' + e.message));
}}

async function checkFormStatus() {{
  if (!STATUS_URL) return;
  try {{
    const res = await fetch(STATUS_URL);
    const data = await res.json();
    if (data.status === 'closed') {{
      formClosed = true;
      if (isAdmin) {{
        adminBypassClosed();
      }} else {{
        document.getElementById('closed-overlay').style.display = 'flex';
        document.querySelectorAll('.qty-control button').forEach(b => b.disabled = true);
        const submitBtn = document.getElementById('submit-btn');
        if (submitBtn) submitBtn.disabled = true;
        startCountdown(data);
      }}
    }}
  }} catch (e) {{}}
}}

let reopenAtMs = null;

const easternFormatter = new Intl.DateTimeFormat('en-US', {{
  timeZone: 'America/New_York',
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hourCycle: 'h23',
}});

function getEasternParts(date) {{
  const values = {{}};
  easternFormatter.formatToParts(date).forEach(part => {{
    if (part.type !== 'literal') values[part.type] = Number(part.value);
  }});
  return values;
}}

function getEasternOffsetMs(date) {{
  const parts = getEasternParts(date);
  return Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second) - date.getTime();
}}

function startCountdown(data) {{
  if (data && data.reopen_at) {{
    reopenAtMs = data.reopen_at * 1000;
  }}
  updateCountdown();
  setInterval(updateCountdown, 1000);
}}

function updateCountdown() {{
  const now = new Date();
  let target;

  if (reopenAtMs) {{
    target = new Date(reopenAtMs);
  }} else {{
    const etNow = getEasternParts(now);
    const day = new Date(Date.UTC(etNow.year, etNow.month - 1, etNow.day)).getUTCDay();
    const hour = etNow.hour;

    let daysUntil = (1 - day + 7) % 7;
    if (daysUntil === 0 && hour >= 8) daysUntil = 7;

    const targetEtMs = Date.UTC(etNow.year, etNow.month - 1, etNow.day + daysUntil, 8, 0, 0);
    target = new Date(targetEtMs - getEasternOffsetMs(new Date(targetEtMs)));
  }}

  let diff = Math.max(0, Math.floor((target - now) / 1000));
  const d = Math.floor(diff / 86400); diff %= 86400;
  const h = Math.floor(diff / 3600); diff %= 3600;
  const m = Math.floor(diff / 60);
  const s = diff % 60;

  const pad = n => String(n).padStart(2, '0');
  document.getElementById('countdown').textContent =
    `${{d}}d ${{pad(h)}}h ${{pad(m)}}m ${{pad(s)}}s`;
}}

init();
</script>
</body>
</html>"""


def main():
    parser = argparse.ArgumentParser(description="Generate meal order form HTML")
    parser.add_argument(
        "--api-url", default="", help="API Gateway base URL (cloud mode)"
    )
    parser.add_argument(
        "--api-key", default="", help="API key for order submission (cloud mode)"
    )
    parser.add_argument(
        "--bulk-discount",
        type=float,
        default=None,
        help="Bulk discount percentage (e.g., 10 for 10%% off)",
    )
    parser.add_argument(
        "--company-subsidy",
        type=float,
        default=None,
        help="Company subsidy percentage (e.g., 50 for 50%% off after bulk discount)",
    )
    parser.add_argument(
        "--google-client-id",
        default=None,
        help="Google OAuth Client ID for Sign-In authentication",
    )
    args = parser.parse_args()

    config = load_config()
    menu = latest_menu()

    bulk_discount = (
        args.bulk_discount
        if args.bulk_discount is not None
        else config.get("bulk_discount_percent", 0)
    )
    company_subsidy = (
        args.company_subsidy
        if args.company_subsidy is not None
        else config.get("company_subsidy_percent", 0)
    )
    google_client_id = args.google_client_id or config.get("google_client_id", "")
    if not google_client_id:
        try:
            import boto3

            ssm = boto3.client("ssm")
            resp = ssm.get_parameter(Name="/meal-order-manager/google-client-id")
            google_client_id = resp["Parameter"]["Value"]
        except Exception:
            pass

    html = generate_form(
        menu,
        config,
        api_url=args.api_url,
        api_key=args.api_key,
        bulk_discount=bulk_discount,
        company_subsidy=company_subsidy,
        google_client_id=google_client_id,
    )

    week = datetime.now().strftime("%Y-W%U")
    output_file = OUTPUT_DIR / f"order-form-{week}.html"
    with open(output_file, "w") as f:
        f.write(html)

    mode = "cloud" if args.api_url else "local"
    print(f"Generated order form ({mode} mode): {output_file}")
    print(f"  {menu['meal_count']} meals from menu scraped {menu['scraped_at'][:10]}")
    if mode == "local":
        print("  Start the server with: python3 src/server/app.py")
    else:
        print(f"  API endpoint: {args.api_url}")


if __name__ == "__main__":
    main()