// menu.tsx
const MenuPage: React.FC = () => {
  const data = window.useMenu();
  const [active, setActive] = React.useState<string>('all');

  if (!data) {
    return (
      <div className="page">
        <div style={{ padding: 96, textAlign: 'center', color: 'var(--cream-dim)' }}>Loading menu…</div>
      </div>
    );
  }

  const symbol = data.currencySymbol;
  const grouped =
    active === 'all'
      ? data.categories
          .filter((c) => c.id !== 'all')
          .map((c) => ({ ...c, items: data.items.filter((m) => m.cat === c.id) }))
      : [
          {
            id: active,
            label: data.categories.find((c) => c.id === active)!.label,
            items: data.items.filter((m) => m.cat === active),
          },
        ];

  return (
    <div className="page">
      <div className="menu-head">
        <h1>The <em>menu.</em></h1>
        <p className="lede">Japanese and Korean classics, made to order. Prices in AUD. Call us to book a table or order ahead for takeaway.</p>
      </div>
      <div className="menu-filter">
        {data.categories.map((c) => {
          const count = c.id === 'all' ? data.items.length : data.items.filter((m) => m.cat === c.id).length;
          return (
            <button key={c.id} className={active === c.id ? 'active' : ''} onClick={() => setActive(c.id)}>
              {c.label}
              <span className="count">·{String(count).padStart(2, '0')}</span>
            </button>
          );
        })}
      </div>

      {grouped.map((group) => (
        <React.Fragment key={group.id}>
          {active === 'all' && (
            <div style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 64px 8px', display: 'flex', alignItems: 'baseline', gap: 16 }}>
              <h3 style={{ fontFamily: "'DM Serif Display', serif", fontSize: 32, color: 'var(--red)', fontStyle: 'italic' }}>{group.label}</h3>
              <span style={{ flex: 1, height: 1, background: 'var(--line)' }}></span>
              <span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'var(--cream-dim)' }}>{String(group.items.length).padStart(2, '0')} dishes</span>
            </div>
          )}
          <div className="menu-grid">
            {group.items.map((item) => (
              <article className="menu-item" key={item.id}>
                {item.image ? (
                  <div className="menu-item-img">
                    <img src={item.image} alt={item.name} loading="lazy" />
                  </div>
                ) : (
                  <div className="menu-item-img empty">{item.jp.slice(0, 1)}</div>
                )}
                <div>
                  <div className="menu-item-name">
                    <h4>{item.name}</h4>
                    <span className="jp">{item.jp}</span>
                    {item.badge && <span className="badge">{item.badge}</span>}
                  </div>
                  <p className="menu-item-desc">{item.desc}</p>
                </div>
                <div className="menu-item-price">{symbol}{item.price}</div>
              </article>
            ))}
          </div>
        </React.Fragment>
      ))}
    </div>
  );
};

window.MenuPage = MenuPage;