// Admin shell — sidebar + topbar + routing
function AdminPage({ onNav, adminRoute, setAdminRoute, session, onLogout }) {
  const state = window.useStore();
  const currentUser = (session && session.username) || "admin";
  const role = (session && session.role) || "super";
  const [who, setWho] = React.useState(currentUser);
  React.useEffect(() => { setWho(currentUser); }, [currentUser]);

  const canAll = role === "super";
  const canEdit = role === "super" || role === "admin";
  // volunteer can only see review + sightings (read)

  const sections = [
    { group: "核心 · Core", items: [
      { k: "dashboard", zh: "控制台", en: "Dashboard" },
      { k: "sightings", zh: "观察记录", en: "Sightings" },
      { k: "deer", zh: "动物档案", en: "Wildlife profiles", gate: canEdit },
      { k: "photos", zh: "照片库", en: "Photos", gate: canEdit },
    ]},
    { group: "流程 · Workflow", items: [
      { k: "import", zh: "批量导入", en: "Batch import", gate: canEdit },
      { k: "review", zh: "审核台", en: "Review queue" },
    ]},
    { group: "内容 · Content", items: [
      { k: "hero", zh: "首页 Hero 轮播", en: "Hero slides", gate: canEdit },
      { k: "featured", zh: "首页推荐", en: "Featured", gate: canEdit },
      { k: "hotspots", zh: "热点地点", en: "Hotspots", gate: canEdit },
    ]},
    { group: "治理 · Governance", items: [
      { k: "volunteers", zh: "志愿审核员", en: "Volunteers", gate: canEdit },
      { k: "contributors", zh: "贡献者", en: "Contributors", gate: canEdit },
      { k: "accounts", zh: "账号管理", en: "Accounts", gate: canAll },
    ]},
    { group: "系统 · System", items: [
      { k: "export", zh: "数据导出", en: "Export", gate: canEdit },
      { k: "logs", zh: "操作日志", en: "Activity log" },
      { k: "settings", zh: "项目设置", en: "Settings", gate: canAll },
    ]},
  ].map(sec => ({ ...sec, items: sec.items.filter(it => it.gate === undefined || it.gate) }));

  // auto-redirect if current route not accessible
  const allKeys = sections.flatMap(s => s.items.map(i => i.k));
  React.useEffect(() => {
    if (!allKeys.includes(adminRoute)) setAdminRoute("dashboard");
  }, [role]);

  const pending = state.sightings.filter(s => s.status === "AI 初审" || s.status === "志愿者审核中").length;
  const badges = { sightings: pending, review: pending };

  return (
    <div className="admin" data-screen-label="Admin · 后台">
      <aside className="admin-sidebar">
        <div className="admin-brand" onClick={() => onNav("home")}>
          <div className="admin-brand-mark">达里尼 · ADMIN</div>
          <div className="admin-brand-sub">野生动物档案 / 管理后台</div>
        </div>
        {sections.map(sec => (
          <div key={sec.group} className="admin-nav-group">
            <div className="admin-nav-label">{sec.group}</div>
            {sec.items.map(it => (
              <a key={it.k} onClick={() => setAdminRoute(it.k)}
                className={"admin-nav-item" + (adminRoute === it.k ? " active" : "")}>
                <span>{it.zh}</span>
                <span className="en">{it.en}</span>
                {badges[it.k] ? <span className="admin-badge">{badges[it.k]}</span> : null}
              </a>
            ))}
          </div>
        ))}
        <div className="admin-sidebar-foot">
          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", letterSpacing: ".14em" }}>SIGNED IN AS</div>
          <div style={{ marginTop: 6, padding: "8px 10px", background: "var(--paper-2)", border: "1px solid var(--rule)" }}>
            <div className="mono" style={{ fontSize: 12, fontWeight: 600, color: "var(--ink)" }}>{currentUser}</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: ".1em", marginTop: 2 }}>
              {role === "super" ? "超级管理员 · SUPER" : role === "admin" ? "管理员 · ADMIN" : "志愿审核员 · VOLUNTEER"}
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" style={{ marginTop: 8, width: "100%" }} onClick={onLogout}>退出登录</button>
          {canAll && <button className="btn btn-ghost btn-sm" style={{ marginTop: 6, width: "100%", fontSize: 11 }}
            onClick={() => { if (confirm("重置所有数据？")) window.dzStore.reset(); }}>
            重置 Demo 数据
          </button>}
        </div>
      </aside>

      <main className="admin-main">
        <div className="admin-topbar">
          <div>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".16em" }}>ADMIN · V1.0</div>
            <h1 className="serif" style={{ fontSize: 24, lineHeight: 1.1, marginTop: 4 }}>
              {sections.flatMap(s => s.items).find(i => i.k === adminRoute)?.zh || "控制台"}
            </h1>
          </div>
          <div className="admin-topbar-right">
            <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".12em" }}>
              {state.deer.length} 个档案 · {state.sightings.length} 条观察 · {state.photos.length} 张照片
            </div>
            <button className="btn btn-sm btn-ghost" onClick={() => onNav("home")}>← 返回主站</button>
          </div>
        </div>

        <div className="admin-body">
          {adminRoute === "dashboard" && <AdminDashboard who={who} setRoute={setAdminRoute} />}
          {adminRoute === "sightings" && <AdminSightings who={who} />}
          {adminRoute === "deer" && <AdminDeer who={who} />}
          {adminRoute === "photos" && <AdminPhotos who={who} />}
          {adminRoute === "import" && <AdminImport who={who} />}
          {adminRoute === "review" && <AdminReview who={who} />}
          {adminRoute === "volunteers" && <AdminVolunteers who={who} />}
          {adminRoute === "contributors" && <AdminContributors who={who} />}
          {adminRoute === "hotspots" && <AdminHotspots who={who} />}
          {adminRoute === "featured" && <AdminFeatured who={who} />}
          {adminRoute === "hero" && <AdminHero who={who} />}
          {adminRoute === "accounts" && <AdminAccounts who={who} />}
          {adminRoute === "export" && <AdminExport who={who} />}
          {adminRoute === "logs" && <AdminLogs />}
          {adminRoute === "settings" && <AdminSettings who={who} />}
        </div>
      </main>
    </div>
  );
}

// ============ DASHBOARD ============
function AdminDashboard({ who, setRoute }) {
  const s = window.useStore();
  const pendingCount = s.sightings.filter(x => x.status === "AI 初审" || x.status === "志愿者审核中").length;
  const candidateCount = s.deer.filter(d => d.candidate).length;
  const tiles = [
    { label: "待审核观察", n: pendingCount, sub: "AI / 人工审核队列", k: "review", tone: "warn" },
    { label: "候选个体", n: candidateCount, sub: "待多次确认后开放命名", k: "deer", tone: "candidate" },
    { label: "动物档案", n: s.deer.filter(d => d.verified).length, sub: "已归档个体与物种线索", k: "deer", tone: "ok" },
    { label: "全部观察", n: s.sightings.length, sub: "历史累积", k: "sightings" },
    { label: "照片库", n: s.photos.length, sub: "主图 + 画廊", k: "photos" },
    { label: "志愿审核员", n: s.volunteers.filter(v => v.active).length, sub: "活跃成员", k: "volunteers" },
    { label: "贡献者", n: s.contributors.length, sub: "上传过至少一次", k: "contributors" },
    { label: "操作日志", n: s.logs.length, sub: "本次 session 可追溯", k: "logs" },
  ];

  const recentLogs = s.logs.slice(0, 6);
  const recentObs = s.sightings.slice(0, 6);

  return (
    <div style={{ display: "grid", gap: 24 }}>
      <div className="admin-tiles">
        {tiles.map(t => (
          <div key={t.label} className="admin-tile" onClick={() => setRoute(t.k)}>
            <div className="admin-tile-n">{t.n}</div>
            <div className="admin-tile-l">{t.label}</div>
            <div className="admin-tile-s">{t.sub}</div>
            {t.tone && <div className={"status-dot " + t.tone} style={{ position: "absolute", top: 14, right: 14 }}></div>}
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 20 }}>
        <div className="admin-card">
          <div className="admin-card-head">
            <h3>最近观察上传</h3>
            <a onClick={() => setRoute("sightings")} className="admin-link">管理全部 →</a>
          </div>
          <div>
            {recentObs.map(o => (
              <div key={o.id} className="admin-row">
                <div style={{ minWidth: 92 }}>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink)", fontWeight: 600 }}>{o.id}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>{o.time.slice(0, 10)}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13 }}>{o.deerName} · <span style={{ color: "var(--ink-soft)" }}>{o.loc}</span></div>
                  <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", marginTop: 2 }}>by {o.contributor}</div>
                </div>
                <span className={"chip " + (o.status === "已归档" ? "ok" : "warn")} style={{ fontSize: 10 }}>{o.status}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="admin-card">
          <div className="admin-card-head">
            <h3>最近操作日志</h3>
            <a onClick={() => setRoute("logs")} className="admin-link">查看全部 →</a>
          </div>
          <div>
            {recentLogs.map((l, i) => (
              <div key={i} className="admin-row">
                <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", width: 112 }}>{l.t}</div>
                <div style={{ flex: 1, fontSize: 12.5 }}>
                  <span className={"admin-tag " + l.action}>{l.action}</span>
                  <strong style={{ margin: "0 6px", color: "var(--ink)" }}>{l.target}</strong>
                  <span style={{ color: "var(--ink-soft)" }}>{l.detail}</span>
                </div>
                <div className="mono" style={{ fontSize: 10, color: "var(--muted)" }}>{l.who}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AdminPage, AdminDashboard });