/* eslint-disable */
const { useState, useMemo, useEffect } = React;

const CATEGORIES = [
  { id: 'all',     label: 'すべて',     en: 'ALL' },
  { id: 'limited', label: '期間限定',   en: 'LIMITED' },
  { id: 'ramen',   label: 'ラーメン',   en: 'RAMEN' },
  { id: 'don',     label: 'ご飯もの',   en: 'DON ／ RICE' },
  { id: 'topping', label: 'トッピング', en: 'TOPPING' },
];

const GROUP_DEF = {
  limited: { num: '其の零', kanji: '期間限定',   en: 'LIMITED'      },
  ramen:   { num: '其の一', kanji: 'らーめん',   en: 'RAMEN'        },
  don:     { num: '其の二', kanji: 'ご飯もの',   en: 'DON ／ RICE'  },
  topping: { num: '其の三', kanji: 'トッピング', en: 'TOPPING'      },
};

const itemCat = (m) => m.cat || 'ramen';

// Resolve image path. menuData.jsx may use 'images/exterior.jpg' relative to root —
// from /menu/index.html, prefix with '../' for relative paths only.
const resolvePhoto = (src) => {
  if (!src) return '';
  if (/^https?:|^\//.test(src)) return src;
  return '../' + src;
};

/* Item with photo — card layout */
const ItemFull = ({ m }) => (
  <article className="mp-item">
    <div className="mp-item__img" style={{ backgroundImage: `url(${resolvePhoto(m.photo)})` }} />
    <div className="mp-item__body">
      <div className="mp-item__head">
        <span className="mp-item__no">No.{m.no}</span>
        <span className="mp-item__price">
          {m.priceSet && <small className="mp-item__priceSet">セット ¥{m.priceSet} ／ </small>}
          ¥<strong>{m.price}</strong>
        </span>
      </div>
      <h3 className="mp-item__name">{m.name}</h3>
      {m.en && <div className="mp-item__en">{m.en}</div>}
      {m.desc && <p className="mp-item__desc">{m.desc}</p>}
    </div>
  </article>
);

/* Item without photo — slim row (name + price) */
const ItemLite = ({ m }) => (
  <div className="mp-lite">
    <div className="mp-lite__name">
      <span>{m.name}</span>
      {m.desc && <small className="mp-lite__note">{m.desc}</small>}
    </div>
    <div className="mp-lite__dots" aria-hidden="true" />
    <div className="mp-lite__price">
      {m.priceSet && <small>セット ¥{m.priceSet} ／ </small>}
      ¥<strong>{m.price}</strong>
    </div>
  </div>
);

const App = () => {
  const [cat, setCat] = useState('all');

  const all = window.MENU_ITEMS || [];
  const filtered = useMemo(
    () => cat === 'all' ? all : all.filter(m => itemCat(m) === cat),
    [cat, all]
  );

  // Group items by category for "all" view
  const groups = useMemo(() => {
    if (cat !== 'all') return [{ id: cat, items: filtered }];
    const g = {};
    for (const m of all) {
      const c = itemCat(m);
      (g[c] = g[c] || []).push(m);
    }
    return ['limited', 'ramen', 'don', 'topping']
      .filter(id => g[id])
      .map(id => ({ id, items: g[id] }));
  }, [cat, all, filtered]);

  return (
    <div className="menu-page">
      <div className="mp-bar">
        <a className="mp-bar__brand" href="../index.html">麺や福々三座</a>
        <a className="mp-bar__back" href="../index.html">← トップへ戻る</a>
      </div>

      <header className="mp-head">
        <div className="mp-head__brush">お品書き</div>
        <h1 className="mp-head__title">FULL MENU</h1>
        <div className="mp-head__sub">MEN-YA FUKUFUKU SANZA ／ ALL ITEMS</div>
      </header>

      <div className="mp-tabs">
        {CATEGORIES.map(c => (
          <button
            key={c.id}
            className={cat === c.id ? 'active' : ''}
            onClick={() => setCat(c.id)}
          >
            {c.label}
            <small>{c.en}</small>
          </button>
        ))}
      </div>

      {groups.map(grp => {
        const def = GROUP_DEF[grp.id] || { kanji: grp.id, en: '', num: '' };
        const withPhoto = grp.items.filter(m => m.photo);
        const noPhoto   = grp.items.filter(m => !m.photo);

        return (
          <section className="mp-group" key={grp.id}>
            <div className="mp-group__label">
              <div className="mp-group__num">{def.num}</div>
              <h2 className="mp-group__kanji">{def.kanji}</h2>
              <div className="mp-group__en">{def.en}</div>
            </div>
            <div className="mp-group__body">
              {withPhoto.length > 0 && (
                <div className="mp-list">
                  {withPhoto.map(m => <ItemFull key={m.no} m={m} />)}
                </div>
              )}
              {noPhoto.length > 0 && (
                <div className="mp-list-lite">
                  {noPhoto.map(m => <ItemLite key={m.no} m={m} />)}
                </div>
              )}
            </div>
          </section>
        );
      })}

      <footer className="mp-foot">
        <p className="mp-foot__note">
          価格はすべて税込です。<br/>
          仕込み数に限りあり。売切れの際はご容赦ください。
        </p>
        <a className="btn btn--accent" href="../index.html#limited">
          <span>期間限定メニューを見る</span>
          <span className="btn__arrow">→</span>
        </a>
      </footer>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);