/* ========================================
   App shell — 共享笔记本
   ======================================== */

const { useState, useEffect, useMemo, useRef, createContext, useContext } = React;

// ---------- App-wide context ----------
const AppCtx = createContext(null);
window.useApp = () => useContext(AppCtx);

function App() {
  const [route, setRoute] = useState({ name: "login", params: {} });
  const [loggedIn, setLoggedIn] = useState(false);
  const [me] = useState({ id: "u3", name: "黄柏丞", initial: "黄" });
  const [favs, setFavs] = useState(new Set(["r002", "r007"]));
  const [query, setQuery] = useState("");

  const data = window.NB_DATA;

  // helpers
  const go = (name, params = {}) => {
    setRoute({ name, params });
    window.scrollTo(0, 0);
  };
  const toggleFav = (id) => {
    setFavs(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  };

  const findReport = (id) => data.reports.find(r => r.id === id);
  const findMember = (id) => data.members.find(m => m.id === id);
  const findCategory = (id) => data.categories.find(c => c.id === id);

  const ctx = {
    route, go, data, me, loggedIn, setLoggedIn,
    favs, toggleFav, query, setQuery,
    findReport, findMember, findCategory,
  };

  // Page render — components are loaded in separate scripts, look up on window
  const W = window;
  let page = null;
  if (!loggedIn || route.name === "login") {
    page = <W.LoginPage />;
  } else if (route.name === "home")     page = <W.HomePage />;
  else if (route.name === "report")     page = <W.ReportPage id={route.params.id} />;
  else if (route.name === "category")   page = <W.CategoryPage id={route.params.id} />;
  else if (route.name === "search")     page = <W.SearchPage />;
  else if (route.name === "profile")    page = <W.ProfilePage id={route.params.id} />;
  else if (route.name === "upload")     page = <W.UploadPage />;
  else if (route.name === "admin")      page = <W.AdminPage />;
  else if (route.name === "favorites")  page = <W.FavoritesPage />;
  else if (route.name === "people")     page = <W.PeoplePage />;
  else if (route.name === "categories") page = <W.CategoriesIndexPage />;
  else page = <W.HomePage />;

  // Update screen label for comments
  useEffect(() => {
    document.documentElement.setAttribute("data-screen-label", route.name);
  }, [route.name]);

  return (
    <AppCtx.Provider value={ctx}>
      {page}
    </AppCtx.Provider>
  );
}

// ---------- Topbar (shared) ----------
function Topbar({ active }) {
  const { go, me, query, setQuery, setLoggedIn } = useApp();
  const [showSearch, setShowSearch] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const searchRef = useRef(null);

  useEffect(() => {
    if (showSearch) setTimeout(() => searchRef.current?.focus(), 30);
  }, [showSearch]);

  const submitSearch = (e) => {
    e.preventDefault();
    if (query.trim()) {
      go("search");
      setShowSearch(false);
    }
  };

  return (
    <div className="topbar" data-screen-label="topbar">
      <div className="topbar-inner">
        <div className="brand" onClick={() => go("home")}>
          <span className="mark">共享<span className="red-dot"></span>笔记本</span>
          <span className="sub">Shared Notebook</span>
        </div>

        <nav className="nav">
          <a className={active === "home" ? "active" : ""}        onClick={() => go("home")}>最新</a>
          <a className={active === "categories" ? "active" : ""}  onClick={() => go("categories")}>分类</a>
          <a className={active === "people" ? "active" : ""}      onClick={() => go("people")}>同仁</a>
          <a className={active === "favorites" ? "active" : ""}   onClick={() => go("favorites")}>收藏</a>
          <a className={active === "upload" ? "active" : ""}      onClick={() => go("upload")}>新增报告</a>
        </nav>

        <div className="top-actions">
          {showSearch ? (
            <form onSubmit={submitSearch} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <input
                ref={searchRef}
                className="input"
                style={{ width: 220, padding: "6px 0", fontSize: 14 }}
                placeholder="搜索报告、作者、标签…"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                onBlur={() => !query && setShowSearch(false)}
              />
            </form>
          ) : (
            <button className="icon-btn" onClick={() => setShowSearch(true)} aria-label="搜索">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
              </svg>
            </button>
          )}

          <div style={{ position: "relative" }}>
            <div className="avatar" onClick={() => setShowMenu(!showMenu)}>{me.initial}</div>
            {showMenu && (
              <div style={{
                position: "absolute", top: 40, right: 0,
                background: "var(--paper-2)", border: "1px solid var(--hairline-2)",
                width: 180, padding: "8px 0", fontFamily: "var(--sans)", fontSize: 13,
                boxShadow: "2px 4px 0 var(--paper-dark)", zIndex: 100
              }}>
                <MenuItem onClick={() => { go("profile", { id: me.id }); setShowMenu(false); }}>个人主页</MenuItem>
                <MenuItem onClick={() => { go("favorites"); setShowMenu(false); }}>我的收藏</MenuItem>
                <MenuItem onClick={() => { go("admin"); setShowMenu(false); }}>管理后台</MenuItem>
                <div style={{ height: 1, background: "var(--hairline)", margin: "6px 0" }} />
                <MenuItem onClick={() => { setLoggedIn(false); setShowMenu(false); }}>登出</MenuItem>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function MenuItem({ children, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{ padding: "8px 16px", cursor: "pointer", color: "var(--ink-2)" }}
      onMouseEnter={(e) => { e.currentTarget.style.background = "var(--paper-3)"; e.currentTarget.style.color = "var(--ink)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink-2)"; }}
    >
      {children}
    </div>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="foot">
      <div>共享笔记本 · Shared Notebook · 内部资料平台</div>
      <div>v 0.8 · {new Date().getFullYear()} · Printed on the web</div>
    </footer>
  );
}

// Export shared bits for other babel script files
Object.assign(window, { App, Topbar, Footer, MenuItem, AppCtx });