// Menu page components for Yong Hao

const { Seal, Divider, BambooLeft, BlossomRight, OrchidLeft, ReedRight, CornerFrame } =
  window.YongHaoOrnaments;

// ============ Dish row (classic 2-col with leader) ============
function DishRow({ item, showChinese, size }) {
  const hasAllergens = item.a;
  return (
    <div className="dish-row">
      <div className="dish-left">
        <span className="dish-num">{item.n}</span>
        <div className="dish-text">
          <div className="dish-de">
            {item.de}
            {hasAllergens && <span className="allergen"> ({item.a})</span>}
          </div>
          {item.en && <div className="dish-en">{item.en}</div>}
          {item.note && (
            <div className="dish-note">
              {item.note}
              {item.noteEn && <span className="dish-note-en"> · {item.noteEn}</span>}
            </div>
          )}
        </div>
      </div>
      <span className="leader" aria-hidden="true" />
      <span className="dish-price">€ {item.price}</span>
    </div>
  );
}

// ============ Section (category) ============
function Section({ section, showChinese }) {
  return (
    <section className="menu-section">
      <div className="section-head">
        <h3 className="section-title-de">{section.nameDe}</h3>
        {section.nameEn && <div className="section-title-en">{section.nameEn}</div>}
        {showChinese && section.nameZh && (
          <div className="section-title-zh">{section.nameZh}</div>
        )}
      </div>
      <div className="section-items">
        {section.items && section.items.map((item) => (
          <DishRow key={item.n} item={item} showChinese={showChinese} />
        ))}
      </div>
    </section>
  );
}

// ============ Set-menu card (for Menüs page) ============
function SetMenuCard({ section, showChinese }) {
  return (
    <section className="setmenu-card">
      <div className="setmenu-head">
        <div className="setmenu-title">
          <h3>{section.nameDe}</h3>
          <div className="setmenu-title-en">{section.nameEn}</div>
          {showChinese && section.nameZh && <div className="setmenu-title-zh">{section.nameZh}</div>}
        </div>
        {section.code && <span className="setmenu-code">Nr. {section.code}</span>}
      </div>

      {section.note && (
        <div className="setmenu-note">
          {section.note}
          {section.noteEn && <div className="setmenu-note-en">{section.noteEn}</div>}
        </div>
      )}

      {section.courses && (
        <ol className="setmenu-courses">
          {section.courses.map((c, i) => (
            <li key={i}>
              <span className="course-num">{i + 1}</span>
              <div>
                <div className="course-de">
                  {c.de}
                  {c.a && <span className="allergen"> ({c.a})</span>}
                </div>
                {c.en && <div className="course-en">{c.en}</div>}
              </div>
            </li>
          ))}
        </ol>
      )}

      {section.choices && (
        <>
          <div className="setmenu-subhead">
            Hauptspeise zur Auswahl <span className="setmenu-subhead-en">· Choice of main course</span>
          </div>
          <div className="setmenu-choices">
            {section.choices.map((c) => (
              <div key={c.n} className="choice-row">
                <span className="dish-num">{c.n}</span>
                <div className="dish-text">
                  <div className="dish-de">
                    {c.de}
                    {c.a && <span className="allergen"> ({c.a})</span>}
                  </div>
                  {c.en && <div className="dish-en">{c.en}</div>}
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      <div className="setmenu-price-row">
        <span className="setmenu-price">€ {section.price}</span>
        <span className="setmenu-price-label">
          {section.priceLabel}
          {section.priceLabelEn && <em> · {section.priceLabelEn}</em>}
        </span>
      </div>
    </section>
  );
}

// ============ Lunch menu ============
function LunchMenuCard({ section, showChinese }) {
  return (
    <section className="setmenu-card">
      <div className="setmenu-head">
        <div className="setmenu-title">
          <h3>{section.nameDe}</h3>
          <div className="setmenu-title-en">{section.nameEn}</div>
          {showChinese && section.nameZh && <div className="setmenu-title-zh">{section.nameZh}</div>}
        </div>
      </div>
      <div className="setmenu-hours">
        {section.hoursDe}
        <div className="setmenu-hours-en">{section.hoursEn}</div>
      </div>
      <div className="setmenu-intro">
        {section.intro}
        <div className="setmenu-intro-en">{section.introEn}</div>
      </div>
      <div className="lunch-starters">
        {section.starters.map((s, i) => (
          <span key={i} className="lunch-starter">
            {s.de}
            {s.a && <span className="allergen"> ({s.a})</span>}
            <em> · {s.en}</em>
          </span>
        )).reduce((prev, curr, i) => [prev, <span key={"oder" + i} className="lunch-or">oder</span>, curr])}
      </div>
      <div className="section-items lunch-items">
        {section.items.map((item) => (
          <DishRow key={item.n} item={item} showChinese={showChinese} />
        ))}
      </div>
    </section>
  );
}

// ============ Buffet ============
function BuffetCard({ section, showChinese }) {
  return (
    <section className="buffet-card">
      <div className="buffet-eyebrow">{section.hoursDe}</div>
      <div className="buffet-eyebrow-en">{section.hoursEn}</div>
      <h2 className="buffet-headline">{section.headline}</h2>
      <Divider />
      <p className="buffet-description">
        {section.description}
        <span className="buffet-description-en">{section.descriptionEn}</span>
      </p>
      <div className="buffet-prices">
        {section.prices.map((p, i) => (
          <div key={i} className="buffet-price-row">
            <div className="buffet-price-label">
              {p.de}
              <div className="buffet-price-label-en">{p.en}</div>
            </div>
            <span className="leader" aria-hidden="true" />
            <span className="buffet-price">€ {p.price}</span>
          </div>
        ))}
      </div>
      <div className="buffet-footnote">
        {section.note}
        <div className="buffet-footnote-en">{section.noteEn}</div>
      </div>
    </section>
  );
}

// ============ Allergen legend ============
function AllergenLegend({ codes }) {
  const used = window.YONG_HAO_ALLERGENS.filter((a) => codes.has(a.code));
  const list = used.length ? used : window.YONG_HAO_ALLERGENS.slice(0, 8);
  return (
    <div className="allergen-legend">
      <div className="allergen-legend-title">
        Allergenkennzeichnung <em>· Allergen information</em>
      </div>
      <div className="allergen-legend-grid">
        {list.map((a) => (
          <div key={a.code} className="allergen-entry">
            <span className="allergen-code">{a.code}</span>
            <div>
              <div className="allergen-de">{a.de}</div>
              <div className="allergen-en">{a.en}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="allergen-legend-foot">
        Gemäß österreichischer Allergeninformationsverordnung. Bitte sprechen Sie uns bei Unverträglichkeiten gerne an.
        <em> · Per Austrian allergen-information regulation. Please ask our staff about any intolerances.</em>
      </div>
    </div>
  );
}

// ============ Collect allergen codes in use on a menu ============
function collectAllergens(menu) {
  const set = new Set();
  const scan = (item) => { if (item && item.a) item.a.split(",").forEach((c) => set.add(c.trim())); };
  menu.sections.forEach((s) => {
    (s.items || []).forEach(scan);
    (s.choices || []).forEach(scan);
    (s.courses || []).forEach(scan);
    (s.starters || []).forEach(scan);
  });
  return set;
}

// ============ Cover header ============
function MenuHeader({ menu, showChinese, ornamentVariant }) {
  return (
    <header className="menu-header">
      <div className="menu-header-seal">
        <Seal size={56} />
      </div>
      <div className="menu-header-text">
        <div className="brand-name">Yong Hao Restaurant</div>
        {showChinese && <div className="brand-zh">永豪阁</div>}
      </div>
      <div className="menu-header-corner">
        <CornerFrame size={42} />
      </div>
      <div className="menu-title-block">
        <h1 className="menu-title">{menu.titleDe}</h1>
        <div className="menu-title-en">{menu.titleEn}</div>
        {showChinese && <div className="menu-title-zh">{menu.titleZh}</div>}
      </div>
      <Divider />
    </header>
  );
}

// ============ Full page ============
function MenuPage({ menu, showChinese, ornamentVariant }) {
  const usedCodes = collectAllergens(menu);

  const Left = ornamentVariant === "orchid" ? OrchidLeft : BambooLeft;
  const Right = ornamentVariant === "reed" ? ReedRight : BlossomRight;
  const showOrnaments = ornamentVariant !== "none";

  return (
    <article className="menu-page">
      {showOrnaments && (
        <>
          <div className="ornament-left"><Left /></div>
          <div className="ornament-right"><Right /></div>
        </>
      )}

      <div className="menu-inner">
        <MenuHeader menu={menu} showChinese={showChinese} ornamentVariant={ornamentVariant} />

        <div className="menu-body">
          {menu.id === "buffet" && (
            <BuffetCard section={menu.sections[0]} showChinese={showChinese} />
          )}

          {menu.id === "menues" && (
            <div className="setmenu-grid">
              {menu.sections.map((s, i) =>
                s.kind === "lunch" ? (
                  <LunchMenuCard key={i} section={s} showChinese={showChinese} />
                ) : (
                  <SetMenuCard key={i} section={s} showChinese={showChinese} />
                )
              )}
            </div>
          )}

          {menu.id !== "buffet" && menu.id !== "menues" && (
            <>
              {menu.sections.map((s, i) => (
                <Section key={i} section={s} showChinese={showChinese} />
              ))}
              {menu.footnote && <div className="menu-footnote">{menu.footnote}</div>}
            </>
          )}
        </div>

        <footer className="menu-footer">
          <AllergenLegend codes={usedCodes} />
          <div className="menu-signoff">
            <Divider />
            <div className="signoff-brand">
              {showChinese && <span className="signoff-zh">永豪阁 · </span>}
              Yong Hao Restaurant · Innsbruck
            </div>
          </div>
        </footer>
      </div>
    </article>
  );
}

Object.assign(window, {
  MenuPage, MenuHeader, Section, DishRow, SetMenuCard, LunchMenuCard, BuffetCard, AllergenLegend,
});