/* SiliconPop - App Shell */

const api = async (url, options = {}) => {
  const headers = { ...(options.headers || {}) };
  if (options.body && !headers["Content-Type"]) {
    headers["Content-Type"] = "application/json";
  }
  const res = await fetch(url, { ...options, headers });
  const data = await res.json();
  if (!res.ok) {
    throw new Error(data.error || "REQUEST_FAILED");
  }
  return data;
};

const readSession = () => localStorage.getItem("sp_session_token") || "";
const writeSession = (token) => {
  if (token) {
    localStorage.setItem("sp_session_token", token);
  } else {
    localStorage.removeItem("sp_session_token");
  }
};

const App = () => {
  const { BottomNav, DesktopSidebar, HomePage, MarketPage, CreatePage, CommunityPage, ProfilePage } = window;
  const [page, setPage] = React.useState("home");
  const [sessionToken, setSessionTokenState] = React.useState(readSession);
  const [appData, setAppData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [toast, setToast] = React.useState("");

  const setSessionToken = (token) => {
    writeSession(token);
    setSessionTokenState(token || "");
  };

  const refreshAppData = React.useCallback(async () => {
    setLoading(true);
    try {
      const payload = await api("/v1/siliconpop/app", {
        headers: sessionToken ? { Authorization: `Bearer ${sessionToken}` } : {}
      });
      setAppData(payload.data);
    } catch (err) {
      setToast(`数据加载失败：${err.message}`);
    } finally {
      setLoading(false);
    }
  }, [sessionToken]);

  React.useEffect(() => {
    refreshAppData();
  }, [refreshAppData]);

  React.useEffect(() => {
    if (!toast) return undefined;
    const timer = setTimeout(() => setToast(""), 2200);
    return () => clearTimeout(timer);
  }, [toast]);

  const pages = {
    home: HomePage,
    market: MarketPage,
    create: CreatePage,
    community: CommunityPage,
    profile: ProfilePage
  };
  const CurrentPage = pages[page];
  const pageProps = {
    appData,
    loading,
    sessionToken,
    setSessionToken,
    refreshAppData,
    setToast,
    onNav: setPage
  };

  return (
    <div className="sp-app">
      <DesktopSidebar active={page} onNav={setPage} user={appData?.profile?.user} />
      <main className="sp-main">
        <CurrentPage {...pageProps} />
      </main>
      {toast && <div className="sp-toast">{toast}</div>}
      <BottomNav active={page} onNav={setPage} />
    </div>
  );
};

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