/* NutriDMS — Public QR Customer Experience (screens/customer-qr.jsx)
   Standalone scan flow: Welcome → (guest/account) → Today's Menu → Meal → order
   → Thank You. Reads window.CustomerEngagement. Exports window.CustomerQR.
   Rendered full-screen (mobile frame) when page === "customer-qr". */
(function () {
  const { useState: qS } = React;
  const CE = () => window.CustomerEngagement;
  const CP = () => window.CustomerPortal;
  const I = (n, s, st) => <Icon name={n} size={s || 16} stroke={st || 2} />;
  const money = (n, code) => (window.NutriMoney ? window.NutriMoney.money(n, code) : "$" + (Math.round((n || 0) * 100) / 100).toFixed(2));

  function CustomerQR() {
    const ce = CE();
    const [screen, setScreen] = qS("welcome");
    const [identity, setIdentity] = qS(null);       // null | 'guest' | 'account'
    const [consent, setConsent] = qS([]);
    const [sel, setSel] = qS(null);                 // selected meal
    const [order, setOrder] = qS(null);             // placed order
    const [entered, setEntered] = qS(false);        // passed the entry method
    const [rcode, setRcode] = qS("");
    const [codeErr, setCodeErr] = qS("");           // INVALID | INACTIVE | EXPIRED | NOT_STARTED
    const [locs, setLocs] = qS(null);               // multi-location selection needed
    if (!ce) return <div className="qr-wrap"><div className="qr-phone"><div className="qr-empty">Engagement engine not loaded.</div></div></div>;

    const CODE_MSG = {
      INVALID: "We couldn't find that code. Check it and try again.",
      INACTIVE: "This experience is currently unavailable. Please contact the restaurant.",
      EXPIRED: "This restaurant code is no longer active. Please ask for a current code.",
      NOT_STARTED: "This experience hasn't started yet. Please try again later.",
    };
    const enterCode = () => {
      setCodeErr("");
      const res = ce.acResolve(rcode);
      if (res.status === "RESOLVED") { try { CP().startSession && CP().startSession({ code: res.code, org: res.orgName, location: res.location }, "RESTAURANT_CODE"); } catch (e) {} setEntered(true); return; }
      if (res.status === "LOCATION_SELECTION_REQUIRED") { setLocs(ce.acLocations); return; }
      setCodeErr(res.status);
    };
    const chooseLoc = (loc) => { try { CP().startSession && CP().startSession({ code: rcode.trim(), location: loc.name }, "RESTAURANT_CODE"); } catch (e) {} setLocs(null); setEntered(true); };

    const s = ce.settings();
    const menu = ce.menu();
    const slot = ce.currentSlot();
    const ty = s.thankYou || {};

    const placeOrder = (meal) => {
      const cid = (identity === "account") ? (ce.customers().find((c) => c.type === "registered") || {}).id : null;
      const o = ce.addOrder({ customerId: cid, meal: meal.name, price: meal.price, calories: meal.calories, protein: meal.protein, points: Math.round(meal.price), channel: "QR" });
      setOrder(o); setScreen("thankyou");
    };

    return (
      <div className="qr-wrap">
        <div className="qr-phone">
          <div className="qr-notch" />
          <div className="qr-screen">

            {!entered && (
              <div className="qr-welcome qr-entry">
                <div className="qr-logo">🍃</div>
                <h1>Open a restaurant</h1>
                <p>Scan its QR with your camera, or enter its NutriDMS code.</p>
                <button className="qr-btn primary" onClick={() => { try { CP().startSession && CP().startSession({}, "PHONE_CAMERA_QR"); } catch (e) {} setEntered(true); }}>{I("qr-code", 16)} Scan QR code</button>
                <div className="qr-entry-or"><span>or</span></div>
                <div className="qr-entry-code">
                  <input value={rcode} onChange={(e) => { setRcode(e.target.value.toUpperCase()); setCodeErr(""); }} placeholder="Restaurant code · e.g. FKTOR01" maxLength={12} />
                  <button className="qr-btn" disabled={rcode.trim().length < 4} onClick={enterCode}>{I("arrow-right", 15)} Go</button>
                </div>
                {codeErr && <div className="qr-code-err">{I("alert-triangle", 13)} {CODE_MSG[codeErr] || "That code did not work."}</div>}
                {locs && (
                  <div className="qr-locsel">
                    <div className="qr-locsel-h">Choose a location</div>
                    {locs.map((l) => (
                      <button key={l.id} className="qr-loccard" onClick={() => chooseLoc(l)}>
                        <div className="qr-loc-nm">{l.name}</div>
                        <div className="qr-loc-meta">{l.distance} · {l.hours}</div>
                      </button>
                    ))}
                  </div>
                )}
                <div className="qr-entry-recent"><span className="qr-entry-lbl">Recent</span><button className="qr-entry-chip" onClick={() => { try { CP().startSession && CP().startSession({}, "RECENT"); } catch (e) {} setEntered(true); }}>🍃 Fresh Kitchen</button></div>
              </div>
            )}

            {entered && screen === "welcome" && (
              <div className="qr-welcome">
                <div className="qr-logo">🍃</div>
                <h1>Welcome to Fresh Kitchen</h1>
                <p>Scan-to-view nutrition facts, ingredients, allergens & dietary info for every dish.</p>
                <button className="qr-btn primary" onClick={() => setScreen(s.registration && s.registration.mode !== "off" ? "identity" : "menu")}>{I("arrow-right", 16)} View the menu</button>
              </div>
            )}

            {screen === "identity" && (
              <div className="qr-identity">
                <h2>Before you start</h2>
                <button className="qr-idcard" onClick={() => { setIdentity("guest"); setScreen("menu"); }}>
                  <div className="qr-idc-h">{I("user", 18)} Continue as guest</div>
                  <span>Browse and order without an account.</span>
                </button>
                <button className="qr-idcard feat" onClick={() => { setIdentity("account"); setScreen("register"); }}>
                  <div className="qr-idc-h">{I("user-plus", 18)} Create a free account</div>
                  {s.registration.benefits && <ul className="qr-benefits"><li>✔ Nutrition history & points</li><li>✔ Faster reorder</li><li>✔ Offers & rewards</li></ul>}
                </button>
                {s.registration.mode !== "required" && <button className="qr-skip" onClick={() => { setIdentity("guest"); setScreen("menu"); }}>Skip for now</button>}
              </div>
            )}

            {screen === "register" && (
              <div className="qr-register">
                <button className="qr-back" onClick={() => setScreen("identity")}>{I("arrow-left", 15)} Back</button>
                <h2>Create your account</h2>
                {(s.registration.fields || []).map((f) => (
                  <div key={f} className="qr-fld"><label>{f.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase())}</label><input className="qr-input" placeholder={f} /></div>
                ))}
                <div className="qr-consent">
                  <div className="qr-consent-h">Keep me posted about:</div>
                  {(s.consentOptions || []).map((c) => {
                    const on = consent.includes(c);
                    return <label key={c} className="qr-consent-row"><input type="checkbox" checked={on} onChange={() => setConsent(on ? consent.filter((x) => x !== c) : consent.concat([c]))} /> {c}</label>;
                  })}
                  <p className="qr-consent-note">{I("shield-check", 11)} You can unsubscribe anytime. We only message the channels you pick.</p>
                </div>
                <button className="qr-btn primary" onClick={() => setScreen("menu")}>Create account & continue</button>
              </div>
            )}

            {screen === "menu" && (
              <div className="qr-menu">
                <div className="qr-menu-head"><h2>Today's Menu</h2><span className="qr-slot">{I("clock", 12)} {slot}</span></div>
                {menu.filter((m) => !(s.menu.hideSoldOut && m.status === "Sold Out")).map((m) => (
                  <button key={m.id} className="qr-mealcard" onClick={() => { setSel(m); setScreen("meal"); }}>
                    <span className="qr-meal-emoji">{m.emoji}</span>
                    <div className="qr-meal-body">
                      <div className="qr-meal-top"><b>{m.name}</b>{s.menu.showPrices && <span className="qr-price">{money(m.price)}</span>}</div>
                      <div className="qr-meal-meta">{m.calories} kcal · {m.protein}g protein{m.cuisine ? " · " + m.cuisine : ""}</div>
                      <div className="qr-meal-tags">
                        {(m.dietary || []).slice(0, 2).map((t) => <span key={t} className="qr-tag">{t}</span>)}
                        {(m.allergens || []).length > 0 && <span className="qr-tag warn">{I("alert-triangle", 10)} allergens</span>}
                        {m.status !== "Available" && <span className={"qr-tag " + (m.status === "Sold Out" ? "out" : "lim")}>{m.status}</span>}
                      </div>
                    </div>
                  </button>
                ))}
              </div>
            )}

            {screen === "meal" && sel && (
              <div className="qr-meal-detail">
                <button className="qr-back" onClick={() => setScreen("menu")}>{I("arrow-left", 15)} Menu</button>
                {(() => {
                  const CP = window.CustomerPortal;
                  if (CP && window.CpPublicPage) {
                    const pubId = CP.pubId("recipe", sel.id);
                    const settings = CP.itemSettings(pubId);
                    const item = (window.RECIPES || []).find((r) => r.id === sel.id) || sel;
                    const resolved = CP.resolve(item, "recipe");
                    return React.createElement(window.CpPublicPage, { resolved: resolved, settings: settings, org: CP.org(), state: "published" });
                  }
                  return <div className="qr-nutr">{[["Calories", sel.calories], ["Protein", sel.protein + "g"]].map(([l, v]) => <div key={l} className="qr-nutr-c"><b>{v}</b><span>{l}</span></div>)}</div>;
                })()}
                {s.menu.ordering && sel.status !== "Sold Out"
                  ? <button className="qr-btn primary" style={{ marginTop: 12 }} onClick={() => placeOrder(sel)}>{I("shopping-bag", 16)} Order this meal</button>
                  : <button className="qr-btn" style={{ marginTop: 12 }} disabled>{sel.status === "Sold Out" ? "Sold out" : "View only"}</button>}
              </div>
            )}

            {screen === "thankyou" && (
              <div className="qr-thankyou">
                <div className="qr-ty-check">{I("check", 30, 3)}</div>
                <h1>{ty.header || "Thank You"}</h1>
                <p>{ty.message}</p>
                {ty.showRating && <div className="qr-ty-stars">{[1, 2, 3, 4, 5].map((i) => <span key={i}>★</span>)}</div>}
                {order && <div className="qr-receipt"><div className="qr-rc-row"><span>{order.meal}</span><b>{money(order.price)}</b></div><div className="qr-rc-row muted"><span>{order.calories} kcal · +{order.points} pts</span><span>{order.channel}</span></div></div>}
                {ty.coupon && <div className="qr-coupon">{I("ticket", 14)} {ty.coupon}</div>}
                <div className="qr-ty-btns">
                  {(ty.buttons || []).map((b) => <button key={b} className="qr-btn ghost" onClick={() => { if (/order/i.test(b)) { setOrder(null); setScreen("menu"); } else if (/review/i.test(b) && ce) { ce.addReview({ customerId: null, guest: identity !== "account", meal: order && order.meal, overall: 5, food: 5, again: true, text: "Great!" }); } }}>{b}</button>)}
                </div>
              </div>
            )}

          </div>
        </div>
        <div className="qr-exit"><button onClick={() => { try { (window.__setPage || (() => {}))("dashboard"); } catch (e) {} }}>{I("x", 16)} Exit preview</button></div>
      </div>
    );
  }
  window.CustomerQR = CustomerQR;
})();