// Arcaid Guild — router, state, mount

function GuildApp() {
  const [stack, setStack] = React.useState([{ name: "home", params: { category: "new" } }]);
  const route = stack[stack.length - 1];

  // per-entity user state: liked / bookmarked
  const [state, setState] = React.useState({});
  const [follow, setFollow] = React.useState({});

  const go = (name, params) => {
    if (name === -1) { setStack((s) => (s.length > 1 ? s.slice(0, -1) : s)); return; }
    // tab roots reset the stack; sub-screens push
    const roots = ["home", "search", "columns", "notifications", "more"];
    if (roots.includes(name)) {
      setStack([{ name, params: params || {} }]);
    } else {
      setStack((s) => [...s, { name, params: params || {} }]);
    }
    const sc = document.querySelector(".g-scroll");
  };

  const toggle = (key, field) => setState((s) => {
    const cur = s[key] || {};
    return { ...s, [key]: { ...cur, [field]: !cur[field] } };
  });
  const onLike = (id) => toggle(id, "liked");
  const onBookmark = (id) => toggle(id, "bookmarked");
  const onLikeComment = (tid, cid) => toggle("c_" + tid + "_" + cid, "liked");
  const onLikeCol = (id) => toggle("col_" + id, "liked");
  const onBookmarkCol = (id) => toggle("col_" + id, "bookmarked");
  const onFollow = (handle) => setFollow((f) => ({ ...f, [handle]: !f[handle] }));

  // scroll the inner area to top on route change
  React.useEffect(() => {
    const sc = document.querySelector(".g-scroll");
    if (sc) sc.scrollTop = 0;
  }, [route.name, route.params.id, route.params.handle, route.params.category, route.params.tag]);

  let screen;
  switch (route.name) {
    case "home": screen = <GHome route={route} go={go} state={state} onLike={onLike} onBookmark={onBookmark} />; break;
    case "topic": screen = <GTopic route={route} go={go} state={state} onLike={onLike} onBookmark={onBookmark} onLikeComment={onLikeComment} />; break;
    case "create": screen = <GCreate go={go} />; break;
    case "search": screen = <GSearch route={route} go={go} state={state} onLike={onLike} onBookmark={onBookmark} />; break;
    case "columns": screen = <GColumns go={go} />; break;
    case "column": screen = <GColumn route={route} go={go} state={state} onLikeCol={onLikeCol} onBookmarkCol={onBookmarkCol} />; break;
    case "notifications": screen = <GNotifications go={go} />; break;
    case "bookmarks": screen = <GBookmarks go={go} state={state} onLike={onLike} onBookmark={onBookmark} />; break;
    case "profile": screen = <GProfile route={route} go={go} state={state} follow={follow} onFollow={onFollow} onLike={onLike} onBookmark={onBookmark} />; break;
    case "contact": screen = <GContact go={go} />; break;
    case "more": screen = <GMore go={go} follow={follow} />; break;
    default: screen = <GHome route={route} go={go} state={state} onLike={onLike} onBookmark={onBookmark} />;
  }

  return (
    <div className="g-app">
      <GSidebar route={route} go={go} onCreate={() => go("create", {})} />
      <main className="g-main">
        <div className="g-screen">{screen}</div>
      </main>
      <GRightRail go={go} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("guild-root")).render(<GuildApp />);