/* Main app — wires screens together, manages nav/cart/mode/tweaks */
/* globals React, ReactDOM, Header, Footer, Splash, TwoPaths, Landing, PLP, PDP, Cart, Checkout, Confirmation, Survey, AccessCode, ProgramStore, ERGStore, Executive, MobileFlow */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  region: "US",
  mode: "personal",
  startAt: "splash",
}; /*EDITMODE-END*/

const App = () => {
  const [route, setRoute] = React.useState(TWEAK_DEFAULTS.startAt || "splash");
  const [current, setCurrent] = React.useState("landing");
  const [product, setProduct] = React.useState(null);
  const [cart, setCart] = React.useState([]);
  const [mode, setMode] = React.useState(TWEAK_DEFAULTS.mode);
  const [region, setRegion] = React.useState(TWEAK_DEFAULTS.region);
  const [program, setProgram] = React.useState(null);
  const [order, setOrder] = React.useState(null);
  const [authed, setAuthed] = React.useState(false);
  const [pathChosen, setPathChosen] = React.useState(false);
  const [tweaksOpen, setTweaksOpen] = React.useState(false);
  const [tweaksAvail, setTweaksAvail] = React.useState(false);
  const [prevRoute, setPrevRoute] = React.useState("landing");

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === "__activate_edit_mode") {
        setTweaksAvail(true);
        setTweaksOpen(true);
      }
      if (e.data?.type === "__deactivate_edit_mode") {
        setTweaksOpen(false);
      }
    };
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);

  const onNav = (r) => {
    setCurrent(r);
    const map = {
      apparel: "plp",
      accessories: "plp",
      drinkware: "plp",
      tech: "plp",
      kits: "plp",
      browse: "plp",
    };
    setRoute(map[r] || r);
    setPlpFilter(r);
    window.scrollTo(0, 0);
  };
  const [plpFilter, setPlpFilter] = React.useState("browse");
  const openProduct = (p) => {
    setProduct(p);
    setRoute("pdp");
    window.scrollTo(0, 0);
  };
  const addToCart = (item) => setCart([...cart, item]);
  const cartCount = cart.reduce((s, i) => s + i.qty, 0);

  const showHeader = !["mobile", "splash", "two-paths"].includes(route);
  const showFooter = showHeader && !["checkout"].includes(route);

  const onPickPath = (m) => {
    setMode(m);
    setPathChosen(true);
    setRoute("landing");
    setCurrent("landing");
    window.scrollTo(0, 0);
  };

  const saveTweak = (k, v) => {
    if (k === "region") setRegion(v);
    if (k === "mode") setMode(v);
    window.parent.postMessage(
      { type: "__edit_mode_set_keys", edits: { [k]: v } },
      "*",
    );
  };

  return (
    <div>
      {route === "splash" && (
        <Splash
          onEnter={() => {
            setAuthed(true);
            setRoute("two-paths");
            window.scrollTo(0, 0);
          }}
        />
      )}
      {route === "two-paths" && (
        <TwoPaths
          onPick={onPickPath}
          user={{ name: "Jordan Chen", initials: "JC" }}
        />
      )}
      {showHeader && (
        <Header
          mode={mode}
          setMode={setMode}
          region={region}
          cartCount={cartCount}
          onNav={onNav}
          current={current}
          onHome={() => setRoute("two-paths")}
        />
      )}
      {route === "landing" && <Landing onNav={onNav} setMode={setMode} />}
      {route === "plp" && (
        <PLP filter={plpFilter} onOpen={openProduct} onNav={onNav} />
      )}
      {route === "pdp" && product && (
        <PDP product={product} onAdd={addToCart} onNav={onNav} />
      )}
      {route === "cart" && (
        <Cart items={cart} setItems={setCart} mode={mode} onNav={onNav} />
      )}
      {route === "checkout" && (
        <Checkout
          items={cart}
          mode={mode}
          region={region}
          onNav={onNav}
          setOrder={setOrder}
        />
      )}
      {route === "confirmation" && (
        <Confirmation order={order} mode={mode} onNav={onNav} />
      )}
      {route === "survey" && <Survey onNav={onNav} />}
      {route === "access-code" && (
        <AccessCode onNav={onNav} setProgram={setProgram} />
      )}
      {route === "program" && (
        <ProgramStore program={program} onOpen={openProduct} onNav={onNav} />
      )}
      {route === "erg" && <ERGStore onOpen={openProduct} onNav={onNav} />}
      {route === "executive" && (
        <Executive onOpen={openProduct} onNav={onNav} />
      )}
      {route === "mobile" && <MobileFlow />}
      {showFooter && <Footer />}

      {/* Secondary nav: jump to mobile preview */}
      {!["mobile", "splash", "two-paths"].includes(route) && (
        <button
          onClick={() => {
            setPrevRoute(route);
            setRoute("mobile");
            setCurrent("mobile");
            window.scrollTo(0, 0);
          }}
          style={{
            position: "fixed",
            bottom: 20,
            left: 20,
            zIndex: 30,
            background: "#000",
            color: "#fff",
            border: 0,
            padding: "10px 16px",
            borderRadius: 999,
            fontSize: 13,
            fontWeight: 500,
            cursor: "pointer",
            boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
            display: "flex",
            alignItems: "center",
            gap: 8,
          }}
        >
          View mobile flow →
        </button>
      )}

      {route === "mobile" && (
        <button
          onClick={() => {
            const target = ["mobile", "splash", "two-paths"].includes(prevRoute)
              ? "landing"
              : prevRoute;
            setRoute(target);
            setCurrent(target === "plp" ? plpFilter : target);
            window.scrollTo(0, 0);
          }}
          style={{
            position: "fixed",
            bottom: 20,
            left: 20,
            zIndex: 30,
            background: "#000",
            color: "#fff",
            border: 0,
            padding: "10px 16px",
            borderRadius: 999,
            fontSize: 13,
            fontWeight: 500,
            cursor: "pointer",
            boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
            display: "flex",
            alignItems: "center",
            gap: 8,
          }}
        >
          ← Back to desktop
        </button>
      )}

      {/* Tweaks panel */}
      {tweaksAvail && tweaksOpen && (
        <div
          style={{
            position: "fixed",
            right: 20,
            top: 80,
            zIndex: 50,
            width: 260,
            background: "#fff",
            border: "1px solid var(--u-line)",
            borderRadius: 12,
            boxShadow: "0 12px 40px rgba(0,0,0,0.18)",
            padding: 18,
            fontFamily: "var(--font)",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: 14,
            }}
          >
            <div style={{ fontSize: 13, fontWeight: 600 }}>Tweaks</div>
            <button
              onClick={() => {
                setTweaksOpen(false);
                window.parent.postMessage(
                  { type: "__edit_mode_dismissed" },
                  "*",
                );
              }}
              aria-label="Close tweaks"
              style={{
                background: "transparent",
                border: 0,
                padding: 0,
                cursor: "pointer",
                color: "var(--u-text-3)",
                fontSize: 16,
                lineHeight: 1,
                width: 20,
                height: 20,
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              ×
            </button>
          </div>
          <div
            style={{
              fontSize: 11,
              color: "var(--u-text-3)",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
              marginBottom: 8,
            }}
          >
            Start at
          </div>
          <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
            {[
              ["splash", "Splash"],
              ["two-paths", "Two paths"],
              ["landing", "Store"],
            ].map(([v, l]) => (
              <button
                key={v}
                onClick={() => {
                  setRoute(v);
                  window.scrollTo(0, 0);
                  saveTweak("startAt", v);
                }}
                style={{
                  flex: 1,
                  padding: "8px 0",
                  fontSize: 12,
                  background: route === v ? "#000" : "#F6F6F6",
                  color: route === v ? "#fff" : "#000",
                  border: 0,
                  borderRadius: 4,
                  cursor: "pointer",
                  fontWeight: 500,
                }}
              >
                {l}
              </button>
            ))}
          </div>
          <div
            style={{
              fontSize: 11,
              color: "var(--u-text-3)",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
              marginBottom: 8,
            }}
          >
            Order mode
          </div>
          <div style={{ display: "flex", gap: 6, marginBottom: 18 }}>
            {["personal", "corporate"].map((m) => (
              <button
                key={m}
                onClick={() => saveTweak("mode", m)}
                style={{
                  flex: 1,
                  padding: "8px 0",
                  fontSize: 12,
                  background: mode === m ? "#000" : "#F6F6F6",
                  color: mode === m ? "#fff" : "#000",
                  border: 0,
                  borderRadius: 4,
                  cursor: "pointer",
                  fontWeight: 500,
                  textTransform: "capitalize",
                }}
              >
                {m}
              </button>
            ))}
          </div>
          <div
            style={{
              fontSize: 11,
              color: "var(--u-text-3)",
              textTransform: "uppercase",
              letterSpacing: "0.06em",
              marginBottom: 8,
            }}
          >
            Region
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            {["US", "EMEA", "APAC"].map((r) => (
              <button
                key={r}
                onClick={() => saveTweak("region", r)}
                style={{
                  flex: 1,
                  padding: "8px 0",
                  fontSize: 12,
                  background: region === r ? "#000" : "#F6F6F6",
                  color: region === r ? "#fff" : "#000",
                  border: 0,
                  borderRadius: 4,
                  cursor: "pointer",
                  fontWeight: 500,
                }}
              >
                {r}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

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