// Yumla — App: routes between the 6 screens, owns time-of-day context

const { HomeScreen, SwipeScreen, ThinkingScreen, T: TT, fontUI: fUI } = window.YumlaScreens1;
const { PickScreen, ConfirmSheet, WhySheet, PostOrderScreen } = window.YumlaScreens2;

function YumlaApp({ timeKey = "lunch", homeVariant = "default", onRequestVariantChange }) {
  const ctx = window.YUMLA.TIME_CONTEXTS[timeKey];

  // Routes: home | swipe | thinking | pick | post
  const [route, setRoute] = React.useState("home");
  const [showConfirm, setShowConfirm] = React.useState(false);
  const [showWhy, setShowWhy] = React.useState(false);

  // Reset to home when timeKey changes (new context = fresh flow)
  React.useEffect(() => { setRoute("home"); setShowConfirm(false); setShowWhy(false); }, [timeKey]);

  const goThinking = () => setRoute("thinking");
  const goSwipe = () => setRoute("swipe");
  const goPick = () => setRoute("pick");
  const goHome = () => setRoute("home");
  const onConfirm = () => { setShowConfirm(false); setRoute("post"); };

  return (
    <div style={appStyles.frame}>
      {/* Base route layer */}
      <div style={{ ...appStyles.layer, opacity: route === "home" ? 1 : 0, pointerEvents: route === "home" ? "auto" : "none" }}>
        <HomeScreen
          ctx={ctx}
          variant={homeVariant}
          onPick={goThinking}
          onByMood={goSwipe}
          onPill={goThinking}
        />
      </div>
      <div style={{ ...appStyles.layer, opacity: route === "swipe" ? 1 : 0, pointerEvents: route === "swipe" ? "auto" : "none" }}>
        {route === "swipe" && <SwipeScreen ctx={ctx} onBack={goHome} onDecide={goThinking} onLove={() => {}} />}
      </div>
      <div style={{ ...appStyles.layer, opacity: route === "thinking" ? 1 : 0, pointerEvents: route === "thinking" ? "auto" : "none" }}>
        {route === "thinking" && <ThinkingScreen ctx={ctx} onDone={goPick} />}
      </div>
      <div style={{ ...appStyles.layer, opacity: route === "pick" ? 1 : 0, pointerEvents: route === "pick" ? "auto" : "none" }}>
        <PickScreen
          ctx={ctx}
          onBack={goHome}
          onOrder={() => setShowConfirm(true)}
          onAlt={() => setShowConfirm(true)}
          onWhy={() => setShowWhy(true)}
          onRefine={() => {}}
          onRegenerate={goThinking}
        />
      </div>
      <div style={{ ...appStyles.layer, opacity: route === "post" ? 1 : 0, pointerEvents: route === "post" ? "auto" : "none" }}>
        {route === "post" && <PostOrderScreen ctx={ctx} onTrack={() => {}} onReturnHome={goHome} />}
      </div>

      {/* Sheets */}
      {showConfirm && <ConfirmSheet ctx={ctx} onClose={() => setShowConfirm(false)} onConfirm={onConfirm} />}
      {showWhy && <WhySheet ctx={ctx} onClose={() => setShowWhy(false)} />}

      <style>{`
        @keyframes yumla-fade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes yumla-slide { from { transform: translateY(100%) } to { transform: translateY(0) } }
        ::-webkit-scrollbar { width: 0; height: 0; }
      `}</style>
    </div>
  );
}

const appStyles = {
  frame: { width: "100%", height: "100%", position: "relative", overflow: "hidden", background: TT.cream },
  layer: { position: "absolute", inset: 0, transition: "opacity .25s ease" },
};

window.YumlaApp = YumlaApp;