/* mSamex Card — canvas shell: top tab strip, 21 phones side-by-side, nav wiring, i18n, tweaks */
const { Icon, MeshMark } = window.CardKit;
const META = window.CARD_SCREENS_META;
const STR = window.CARD_STRINGS;
const NAVSTR = window.CARD_NAV;

const SCREENS = {
  splash: ScrSplash, onboarding: ScrOnboarding, home: ScrHome, accounts: ScrAccounts,
  account: ScrAccount, cards: ScrCards, carddetail: ScrCardDetail, designs: ScrDesigns,
  order: ScrOrder, send: ScrSend, sentok: ScrSentOk, addmoney: ScrAddMoney, swap: ScrSwap,
  activity: ScrActivity, tx: ScrTx, earn: ScrEarn, analytics: ScrAnalytics,
  notifs: ScrNotifs, profile: ScrProfile, security: ScrSecurity, business: ScrBusiness,
};
const NAV_HOME = { home: "home", cards: "cards", send: "send", activity: "activity", profile: "profile" };

/* ---- status bar ---- */
function StatusBar() {
  return (
    <div className="p-status" dir="ltr">
      <span>9:41</span>
      <span className="st-r">
        <svg width="17" height="11" viewBox="0 0 17 11" aria-hidden="true">
          {[0, 1, 2, 3].map((i) => (
            <rect key={i} x={i * 4.4} y={8 - i * 2.4} width="3" height={3 + i * 2.4} rx="1" fill="#fff" opacity={i < 3 ? 1 : 0.35} />
          ))}
        </svg>
        <svg width="16" height="11" viewBox="0 0 16 11" aria-hidden="true">
          <path d="M8 9.5 L2.5 4.5 A8 8 0 0 1 13.5 4.5 Z" fill="#fff" />
        </svg>
        <svg width="25" height="12" viewBox="0 0 25 12" aria-hidden="true">
          <rect x="0.5" y="0.5" width="21" height="11" rx="3.5" fill="none" stroke="#fff" opacity="0.4" />
          <rect x="2" y="2" width="14" height="8" rx="2" fill="#fff" />
          <rect x="22.7" y="4" width="1.8" height="4" rx="0.9" fill="#fff" opacity="0.4" />
        </svg>
      </span>
    </div>
  );
}

/* ---- bottom nav ---- */
function BNav({ own, go, lang }) {
  const N = NAVSTR[lang];
  const item = (id, ic) => (
    <button className={"bn-item" + (own === id ? " on" : "")} onClick={() => go(NAV_HOME[id])}>
      <Icon name={ic} size={21} w={own === id ? 1.9 : 1.6} />{N[id]}
    </button>
  );
  return (
    <nav className="bnav">
      {item("home", "home")}
      {item("cards", "card")}
      <button className="bn-send" onClick={() => go("send")}>
        <span className="bn-orb"><Icon name="up" size={21} w={2} /></span>{N.send}
      </button>
      {item("activity", "pulse")}
      {item("profile", "user")}
    </nav>
  );
}

/* ---- one phone ---- */
function Phone({ meta, lang, active, go, toggleLang, sheen }) {
  const [toast, setToast] = React.useState(null);
  const timer = React.useRef(null);
  const showToast = (node) => {
    setToast(node);
    clearTimeout(timer.current);
    timer.current = setTimeout(() => setToast(null), 2400);
  };
  const t = (k) => STR[lang][k] !== undefined ? STR[lang][k] : STR.en[k];
  const app = { t, lang, go, toast: showToast, toggleLang, sheen };
  const Scr = SCREENS[meta.id];
  return (
    <div className={"phone" + (active ? " active" : "")}>
      <div className="p-island"></div>
      <StatusBar />
      <div className={"p-body" + (meta.nav === null ? " no-nav" : "")} dir={lang === "ar" ? "rtl" : "ltr"}>
        <Scr app={app} />
      </div>
      {meta.nav !== null && <BNav own={meta.nav} go={go} lang={lang} />}
      {toast && <div className="p-toast" dir={lang === "ar" ? "rtl" : "ltr"}>{toast}</div>}
      <div className="p-homebar"></div>
    </div>
  );
}

/* ---- app ---- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "glow": 6,
  "motion": true,
  "zoom": 70
}/*EDITMODE-END*/;

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState(localStorage.getItem("msx-card-lang") || "en");
  const [active, setActive] = React.useState("home");
  const stageRef = React.useRef(null);
  const slotRefs = React.useRef({});
  const scrollLock = React.useRef(0);

  const toggleLang = () => {
    const l = lang === "en" ? "ar" : "en";
    setLang(l); localStorage.setItem("msx-card-lang", l);
  };

  const go = (id) => {
    setActive(id);
    const stage = stageRef.current, slot = slotRefs.current[id];
    if (!stage || !slot) return;
    const sr = stage.getBoundingClientRect(), r = slot.getBoundingClientRect();
    scrollLock.current = Date.now() + 900;
    stage.scrollTo({ left: stage.scrollLeft + (r.left - sr.left) - (sr.width - r.width) / 2, behavior: "smooth" });
  };

  /* highlight nearest screen while the user pans manually */
  const onScroll = () => {
    if (Date.now() < scrollLock.current) return;
    const stage = stageRef.current;
    if (!stage) return;
    const cx = stage.getBoundingClientRect().left + stage.clientWidth / 2;
    let best = null, bd = Infinity;
    for (const m of META) {
      const el = slotRefs.current[m.id];
      if (!el) continue;
      const r = el.getBoundingClientRect();
      const d = Math.abs(r.left + r.width / 2 - cx);
      if (d < bd) { bd = d; best = m.id; }
    }
    if (best && best !== active) setActive(best);
  };

  React.useEffect(() => {
    const tab = document.querySelector(".ts-tab.on");
    if (tab) {
      const bar = tab.parentElement;
      const r = tab.getBoundingClientRect(), br = bar.getBoundingClientRect();
      if (r.left < br.left || r.right > br.right)
        bar.scrollTo({ left: bar.scrollLeft + r.left - br.left - br.width / 2 + r.width / 2, behavior: "smooth" });
    }
  }, [active]);

  const glowVar = { "--glow": tw.glow / 5 };
  return (
    <div className={tw.motion ? "" : "no-motion"} style={{ height: "100%", ...glowVar }}>
      <header className="topstrip">
        <div className="ts-brand">
          <MeshMark size={24} />
          <b>m<span className="s">S</span>amex</b>
          <span className="ts-app">CARD</span>
        </div>
        <div className="ts-tabs">
          {META.map((m) => (
            <button key={m.id} className={"ts-tab" + (active === m.id ? " on" : "")} onClick={() => go(m.id)}>
              <b>{m.n}</b>{lang === "ar" ? m.ar : m.en}
            </button>
          ))}
        </div>
        <div className="ts-right">
          <button className="lang-btn" onClick={toggleLang}>
            <Icon name="globe" size={14} />{lang === "en" ? "عربي" : "EN"}
          </button>
        </div>
      </header>

      <main className="stage" ref={stageRef} onScroll={onScroll}>
        <div style={{ display: "flex", gap: 56, zoom: tw.zoom / 100, alignItems: "flex-start" }}>
          {META.map((m) => (
            <section key={m.id} className="slot" data-screen-label={m.n + " · " + m.en}
              ref={(el) => (slotRefs.current[m.id] = el)}>
              <div className="slot-label" dir={lang === "ar" ? "rtl" : "ltr"}>
                <span className="n">{m.n}</span>
                <span className="t">{lang === "ar" ? m.ar : m.en}</span>
              </div>
              <Phone meta={m} lang={lang} active={active === m.id} go={go}
                toggleLang={toggleLang} sheen={tw.motion} />
            </section>
          ))}
        </div>
      </main>

      <TweaksPanel>
        <TweakSection label="Canvas" />
        <TweakSlider label="Zoom" value={tw.zoom} min={40} max={110} step={5} unit="%"
          onChange={(v) => setTweak("zoom", v)} />
        <TweakSection label="Look" />
        <TweakSlider label="Mint glow" value={tw.glow} min={0} max={10}
          onChange={(v) => setTweak("glow", v)} />
        <TweakToggle label="Motion (sheen, scan, sheets)" value={tw.motion}
          onChange={(v) => setTweak("motion", v)} />
      </TweaksPanel>
    </div>
  );
}

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