// App shell — sidebar + top bar for logged-in pages

function AppShell({ go, current, children, pageTitle, pageBreadcrumbs }) {
  const [navOpen, setNavOpen] = React.useState(false);
  const { t } = window.useI18n ? window.useI18n() : { t: (key) => key };
  const { snapshot, user, authChecked } = window.useGGGSnapshot ? window.useGGGSnapshot() : { snapshot: null };
  const workspace = snapshot?.workspace;
  const wallet = snapshot?.credits?.wallet || {};
  const currentProject = window.GGGApi?.resolveActiveProject?.(snapshot) || snapshot?.projects?.[0] || null;
  const admin = isShellAdminUser(user);
  const mainNavItems = [
    { key: "dashboard", label: t("nav.dashboard"), icon: "home" },
    { key: "project", label: t("nav.projects"), icon: "folder", badge: snapshot?.projects?.length || 0 },
    { key: "document", label: t("nav.files"), icon: "database", badge: snapshot?.files?.filter?.((file) => !currentProject?.id || file.project_id === currentProject.id)?.length || 0 },
    { key: "report", label: t("nav.reports"), icon: "file-text" },
    { key: "special", label: t("nav.special"), icon: "spark" },
    { key: "tasks", label: "任务确认", icon: "check", badge: snapshot?.expertItems?.filter?.((item) => !currentProject?.id || item.project_id === currentProject.id)?.length || 0 },
    ...(!admin ? [{ key: "credits", label: "点数中心", icon: "credit-card", badge: wallet.available_credits ?? 0 }] : [])
  ];
  React.useEffect(() => {
    if (authChecked && !user) go("login");
    if (snapshot?.onboarding?.companyProfileRequired && current !== "company-profile") go("company-profile");
  }, [authChecked, user, snapshot?.onboarding?.companyProfileRequired]);
  return (
    <div className="app-shell">
      <div className={"mobile-nav-mask " + (navOpen ? "open" : "")} onClick={() => setNavOpen(false)} />
      <aside className={"sidebar " + (navOpen ? "open" : "")}>
        <div className="sidebar-brand"><Brand /></div>
        <div className="sidebar-section">{t("nav.main")}</div>
        <nav className="sidebar-nav">
          {mainNavItems.map(item => (
            <a key={item.key} className={"sidebar-link " + (current === item.key ? "active" : "")} onClick={() => { go(item.key); setNavOpen(false); }}>
              <Icon name={item.icon} />
              <span style={{ flex: 1 }}>{item.label}</span>
              {item.badge && <span className="badge badge-orange" style={{ padding: "1px 7px", fontSize: 11 }}>{item.badge}</span>}
            </a>
          ))}
          <div className="sidebar-section">{t("nav.resources")}</div>
          <a className={"sidebar-link " + (current === "document" ? "active" : "")} onClick={() => { go("document"); setNavOpen(false); }}><Icon name="database" /><span>{t("nav.dataRoom")}</span></a>
          {admin ? (
            <>
              <div className="sidebar-section">管理</div>
              <a className={"sidebar-link " + (current === "users" ? "active" : "")} onClick={() => { go("users"); setNavOpen(false); }}><Icon name="users" /><span>用户管理</span></a>
              <a className={"sidebar-link " + (current === "credits" ? "active" : "")} onClick={() => { go("credits-admin"); setNavOpen(false); }}><Icon name="credit-card" /><span>点数中心</span></a>
            </>
          ) : null}
          <a className={"sidebar-link " + (current === "settings" ? "active" : "")} onClick={() => { go("settings"); setNavOpen(false); }}><Icon name="settings" /><span>{t("nav.settings")}</span></a>
        </nav>
        <div className="sidebar-foot">
          <div className="avatar" style={{ overflow: "hidden" }}>
            {workspace?.avatar_url ? <img src={workspace.avatar_url} alt="avatar" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : (workspace?.initials || userInitials(user))}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{workspace?.display_name || "好出海用户"}</div>
            <div style={{ fontSize: 11.5, color: "var(--muted)" }}>{workspace?.company_name || "Good Go Global"} · {wallet.available_credits ?? 0} 点</div>
          </div>
          <button onClick={async () => { if (window.GGGApi) await window.GGGApi.logout(); go("landing"); }} title="Logout" style={{ color: "var(--muted)", padding: 4 }}><Icon name="logout" size={16} /></button>
        </div>
      </aside>

      <main className="main">
        <div className="appbar">
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <button className="mobile-menu-btn" onClick={() => setNavOpen(true)}><Icon name="menu" size={18} /></button>
            <img className="appbar-logo-square" src="assets/logo.png" alt="好出海 Good Go Global" />
            <div className="appbar-title">
              {pageBreadcrumbs ? (
                <span>
                  {pageBreadcrumbs.map((b, i) => (
                    <span key={i}>
                      <span style={{ color: i === pageBreadcrumbs.length - 1 ? "var(--ink)" : "var(--muted)", cursor: b.go ? "pointer" : "default" }} onClick={b.go}>{b.label}</span>
                      {i < pageBreadcrumbs.length - 1 && <span style={{ color: "var(--muted-2)", margin: "0 8px" }}>/</span>}
                    </span>
                  ))}
                </span>
              ) : pageTitle}
            </div>
          </div>
          <div className="appbar-right">
            <div className="appbar-search">
              <Icon name="search" size={14} /> <input placeholder={t("nav.search")} />
            </div>
            <LanguageToggle compact />
            <button className="btn btn-ghost btn-sm" style={{ padding: "7px 10px", position: "relative" }}>
              <Icon name="bell" size={15} />
              <span style={{ position: "absolute", top: 4, right: 6, width: 7, height: 7, borderRadius: 99, background: "var(--orange)" }} />
            </button>
            {current === "project" || !currentProject ? (
              <button className="btn btn-primary btn-sm" onClick={() => go("project-new")}><Icon name="plus" size={14} /> {t("nav.newProject")}</button>
            ) : (
              <button className="btn btn-primary btn-sm current-project-button" onClick={() => go("project", currentProject.id)} title="当前项目">
                <Icon name="folder" size={14} />
                <span>{currentProject.name || "当前项目"}</span>
              </button>
            )}
          </div>
        </div>
        {children}
      </main>
    </div>
  );
}

function isShellAdminUser(user) {
  return ["admin", "super_admin"].includes(String(user?.role || "").toLowerCase());
}

function userInitials(user) {
  const source = user?.name || user?.email || "GG";
  const compact = String(source).trim();
  if (!compact) return "GG";
  if (/[\u4e00-\u9fa5]/.test(compact)) return compact.slice(0, 2);
  return compact.split(/[\s@._-]+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("") || "GG";
}

window.AppShell = AppShell;