/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

function SectionTitle({ kicker, title, sub }) {
  return (
    <div className="menu-sectitle">
      <div className="kicker">{kicker}</div>
      <h2 className="display menu-sectitle-h">{title}</h2>
      {sub ? <div className="menu-sectitle-sub">{sub}</div> : null}
    </div>
  );
}

function ChiliIcon() {
  return (
    <svg className="chili-icon" viewBox="0 0 24 24" width="20" height="20" aria-label="Piccante">
      {/* stem */}
      <path d="M11 3 Q 11.5 6, 13 7" fill="none" stroke="#3a6b2a" strokeWidth="2" strokeLinecap="round" />
      <path d="M9 4 Q 11 4.5, 13 7" fill="#4d8a3a" stroke="#2d5520" strokeWidth="0.8" strokeLinejoin="round" />
      {/* pepper body */}
      <path d="M13 7
               Q 18 7.5, 18.5 13
               Q 19 18, 14 21
               Q 9.5 22.5, 8 18
               Q 7 14, 9 11
               Q 11 8, 13 7 Z"
            fill="#e3331b" stroke="#8a1a0a" strokeWidth="0.8" strokeLinejoin="round" />
      {/* highlight */}
      <path d="M10.5 10 Q 9.5 13, 10.5 17" fill="none" stroke="#ff8a76" strokeWidth="1.2" strokeLinecap="round" opacity="0.8" />
    </svg>
  );
}

function MenuItem({ item, twoPrice, single }) {
  return (
    <div className="menu-item">
      <div className="menu-item-main">
        <div className="menu-item-name display">
          {item.n}
          {item.spicy ? <ChiliIcon /> : null}
        </div>
        {item.d ? <div className="menu-item-desc">{item.d}</div> : null}
        {item.a ? (
          <div className="menu-item-allergens mono">
            {item.a.split(",").map((x, i) => (
              <span key={i} className="alg-pill">{x.trim()}</span>
            ))}
          </div>
        ) : null}
      </div>
      <div className="menu-item-prices mono">
        {twoPrice ? (
          <>
            <span>{item.p1}</span>
            <span>{item.p2}</span>
          </>
        ) : (
          <span>€ {item.p}</span>
        )}
      </div>
    </div>
  );
}

function MenuSection({ section }) {
  const twoPrice = !!section.twoPrice || !!section.headers;
  return (
    <section className="menu-block" id={section.id}>
      <SectionTitle kicker={section.kicker} title={section.title} sub={section.sub} />
      {section.headers && (
        <div className="menu-block-headrow mono">
          <span style={{ flex: 1 }} />
          <span>{section.headers[0]}</span>
          <span>{section.headers[1]}</span>
        </div>
      )}
      <div className="menu-items">
        {section.items.map((it, i) => (
          <MenuItem key={i} item={it} twoPrice={twoPrice} />
        ))}
      </div>
    </section>
  );
}

function MenuTabBar({ tabs, activeId, onSelect }) {
  const ref = useRef(null);
  useEffect(() => {
    // Scroll active tab into view horizontally
    const el = ref.current?.querySelector(`[data-tab="${activeId}"]`);
    if (el) el.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
  }, [activeId]);
  return (
    <nav className="menu-tabbar" ref={ref}>
      <div className="menu-tabbar-track">
        {tabs.map(t => (
          <button
            key={t.id}
            data-tab={t.id}
            className={"menu-tab mono" + (t.id === activeId ? " is-active" : "")}
            onClick={() => onSelect(t.id)}
          >
            {t.title}
          </button>
        ))}
      </div>
    </nav>
  );
}

function MenuPage() {
  const data = window.MENU_DATA;
  const [mode, setMode] = useState("food"); // "food" | "drinks"
  const sections = mode === "food" ? data.food : data.drinks;
  const [activeId, setActiveId] = useState(sections[0].id);

  // observe sections for tab highlight
  useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
        if (visible.length) setActiveId(visible[0].target.id);
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 }
    );
    sections.forEach(s => {
      const el = document.getElementById(s.id);
      if (el) observer.observe(el);
    });
    return () => observer.disconnect();
  }, [mode, sections]);

  const onSelectTab = id => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 160;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };

  const onModeSwitch = next => {
    setMode(next);
    setActiveId((next === "food" ? data.food : data.drinks)[0].id);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <div className="drops-page" data-variant="B" data-screen-label="Menu IT">
      <window.SiteHeader />
      <window.JungleBackdrop />

      <header className="section menu-hero">
        <div className="kicker" style={{ marginBottom: 24 }}>Drop's Fregene · Menu</div>
        <h1 className="display menu-hero-title">
          Tutto il<br/>
          <span style={{ color: "var(--blue)" }}>menu.</span>
          <span className="script menu-hero-script">in italiano</span>
        </h1>
        <p className="menu-hero-sub">
          Cucina aperta tutto il giorno. Ingredienti freschi, preparazioni
          artigianali, ricette che ci piace mangiare per primi.
        </p>

        <div className="menu-mode-switch mono" role="tablist" aria-label="Cambia menu">
          <button
            role="tab"
            aria-selected={mode === "food"}
            className={"menu-mode-btn" + (mode === "food" ? " is-active" : "")}
            onClick={() => onModeSwitch("food")}
          >🍽 Food</button>
          <button
            role="tab"
            aria-selected={mode === "drinks"}
            className={"menu-mode-btn" + (mode === "drinks" ? " is-active" : "")}
            onClick={() => onModeSwitch("drinks")}
          >🍸 Drinks</button>
        </div>
      </header>

      <MenuTabBar tabs={sections} activeId={activeId} onSelect={onSelectTab} />

      <main className="section menu-body">
        {sections.map(s => <MenuSection key={s.id} section={s} />)}

        {/* Allergens / footnotes */}
        <aside className="menu-footnotes">
          <div className="kicker" style={{ marginBottom: 16 }}>Allergeni & avvertenze</div>
          <p style={{ marginTop: 0 }}>
            I numeri accanto a ogni piatto indicano gli allergeni potenzialmente
            presenti. Per ulteriori informazioni o intolleranze rivolgersi al
            personale per la lista completa degli ingredienti.
          </p>
          <div className="alg-grid">
            {data.allergens.map(a => (
              <div className="alg-row mono" key={a.n}>
                <span className="alg-pill">{a.n}</span>
                <span>{a.l}</span>
              </div>
            ))}
            <div className="alg-row mono">
              <span className="alg-pill alg-pill-chili" aria-label="Piccante">
                <svg viewBox="0 0 24 24" width="14" height="14">
                  <path d="M11 3 Q 11.5 6, 13 7" fill="none" stroke="#3a6b2a" strokeWidth="2" strokeLinecap="round" />
                  <path d="M13 7 Q 18 7.5, 18.5 13 Q 19 18, 14 21 Q 9.5 22.5, 8 18 Q 7 14, 9 11 Q 11 8, 13 7 Z"
                    fill="#e3331b" stroke="#8a1a0a" strokeWidth="0.8" />
                </svg>
              </span>
              <span>Piccante</span>
            </div>
          </div>
          <p style={{ opacity: 0.7, fontSize: 13, marginBottom: 0 }}>
            <span className="mono" style={{ marginRight: 6 }}>*</span>
            I prodotti contrassegnati possono essere surgelati all'origine o trattati
            termicamente al fine di esaltare la freschezza, i sapori e la salubrità
            dell'alimento.
          </p>
        </aside>
      </main>

      <window.FooterSection variant="B" />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<MenuPage />);