// App — top-level router. Owns route state + terminal history.

const { useState: useAppState, useCallback: useAppCb } = React;

function App() {
  const [route, setRoute] = useAppState({ world: "home" });
  const [fromHome, setFromHome] = useAppState(false);
  const [history, setHistory] = useAppState([
    { cmd: null, text: "portfolio.exe v1.0.0 — © Arihant Deva. type `help`.", kind: "out" },
  ]);

  const navigate = useAppCb((next) => {
    setRoute(prev => {
      // Only trigger fresh entry when going FROM home TO a non-home world.
      const fresh = prev.world === "home" && next.world !== "home";
      setFromHome(fresh);
      if (fresh) {
        // After the 4s entry animation completes, clear the flag so the mask
        // and other entry-only styles are removed — they break some interactions
        // (e.g. backfaceVisibility on Creative's 3D flip).
        setTimeout(() => setFromHome(false), 4200);
      }
      return next;
    });
  }, []);

  const pushHistory = useAppCb((entry) => {
    if (entry === "__clear") { setHistory([]); return; }
    setHistory((h) => [...h, entry]);
  }, []);

  let world = null;
  if (route.world === "home") {
    world = <Home
      onSelect={(id) => navigate({ world: id })}
      onNarrate={(line) => pushHistory({ cmd: null, text: line, kind: "out" })}
    />;
  } else if (route.world === "projects") {
    world = <Projects initialDetail={route.detail} onNavigate={navigate} fromHome={fromHome} />;
  } else if (route.world === "professional") {
    world = <Professional onNavigate={navigate} fromHome={fromHome} />;
  } else if (route.world === "creative") {
    world = <Creative initialDetail={route.detail} onNavigate={navigate} fromHome={fromHome} />;
  } else if (route.world === "personal") {
    world = <Personal initialDetail={route.detail} onNavigate={navigate} fromHome={fromHome} />;
  }

  return (
    <>
      {/* keyed by ONLY route.world so detail changes within a world don't replay entry */}
      <div key={route.world} style={{ position: "absolute", inset: 0 }}>
        {world}
      </div>

      {/* world-switch back chip (visible when not at home) */}
      {route.world !== "home" && (
        <button onClick={() => navigate({ world: "home" })} style={appStyles.homeChip} className="mono">
          ← HOME
        </button>
      )}

      <Terminal
        route={route}
        history={history}
        onNavigate={navigate}
        onPushHistory={pushHistory}
      />
    </>
  );
}

const appStyles = {
  homeChip: {
    position: "fixed",
    top: 22, right: 24,
    zIndex: 50,
    background: "oklch(11% 0.012 60 / 0.75)",
    border: "1px solid var(--line)",
    color: "var(--fg-2)",
    padding: "8px 14px",
    fontSize: 11,
    letterSpacing: ".22em",
    cursor: "pointer",
    backdropFilter: "blur(8px)",
    WebkitBackdropFilter: "blur(8px)",
  },
};

// Mobile detection — touch-coarse pointer OR small viewport OR mobile UA.
// MobileApp is defined in src/MobileApp.jsx (loaded earlier in index.html, exported on window).
const __mq = typeof window !== "undefined" && window.matchMedia
  ? window.matchMedia("(max-width: 820px), (pointer: coarse) and (max-width: 1024px)").matches
  : false;
const __ua = typeof navigator !== "undefined"
  ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
  : false;
const __isMobile = __mq || __ua;
const Mobile = window.MobileApp;
ReactDOM.createRoot(document.getElementById("root")).render(
  __isMobile && typeof Mobile === "function" ? <Mobile /> : <App />
);