// Source: index.html script block (extracted). Loaded via <script type="text/babel"> in index.html.
function AppShell({ route, setRoute, activeTask, user, onLogout, children, onOpenSettings, taskStats }) {
  const { t, lang, setLang } = useLang();
  const cfg = getLlmConfig();
  const hasKey = !!cfg.apiKey;
  const tasks = window.TASKS || [];
  // Prefer the D1-backed counts from /api/tasks/stats; fall back to an
  // in-memory reduce when the stats endpoint hasn't resolved (or is offline).
  const localCounts = tasks.reduce((a, t) => { a[t.status] = (a[t.status]||0)+1; return a; }, {});
  const counts = (taskStats && taskStats.by_status) || localCounts;
  const totalCount = (taskStats && typeof taskStats.total === "number") ? taskStats.total : tasks.length;
  // Domain distribution for the Cohorts sidebar section. All tasks currently
  // resolve to "Internal Medicine" — no point showing a fake multi-domain list.
  const localDomainCounts = tasks.reduce((a, t) => {
    const d = t.domain || "Unspecified";
    a[d] = (a[d]||0) + 1;
    return a;
  }, {});
  const domainCounts = (taskStats && taskStats.by_domain) || localDomainCounts;
  const domainList = Object.entries(domainCounts)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 12);
  const nav = [
    { k: "queue", label: t("nav_queue"), icon: "inbox", count: counts["needs-review"] || 0 },
    { k: "editor", label: t("nav_editor"), icon: "edit" },
    { k: "simulate", label: t("nav_simulate"), icon: "play" },
    { k: "review", label: t("nav_review"), icon: "chart" },
    ...(user.kind === "manager" ? [
      { k: "cohorts", label: t("nav_cohorts_page"), icon: "upload" },
      { k: "users",   label: t("nav_users") || "Users", icon: "users" },
    ] : []),
    { k: "docs", label: t("nav_docs"), icon: "file" },
  ];
  const mine = [
    { k: "assignments", label: t("mine_assignments"), count: counts["needs-review"] || 0, status: "needs-review" },
    { k: "drafts",      label: t("mine_drafts"),      count: counts["in-progress"] || 0, status: "in-progress" },
    { k: "submitted",   label: t("mine_submitted"),   count: counts["approved"] || 0,    status: "approved" },
  ];
  return (
    <div className="app">
      <div className="topbar">
        <div className="brand">
          <div className="brand-mark">CA</div>
          <div className="brand-name">{t("brand_name")}</div>
          <div className="brand-tag">{t("brand_tag")}</div>
        </div>
        <div className="topbar-crumbs">
          {activeTask ? (<>
            <span>{t("topbar_cohort")}</span><span className="sep">/</span>
            <span>{activeTask.domain}</span><span className="sep">/</span>
            <b>{activeTask.id}</b>
          </>) : (<>
            <span>{t("topbar_cohort")}</span><span className="sep">/</span>
            <b>primekg — {totalCount.toLocaleString()} {lang === "zh" ? "条任务" : "tasks"}</b>
          </>)}
        </div>
        <div className="topbar-right">
          <div className="lang-toggle" role="group" title={t("lang_toggle_title")}>
            <button data-active={lang==="en"} onClick={()=>setLang("en")}>EN</button>
            <button data-active={lang==="zh"} onClick={()=>setLang("zh")}>中文</button>
          </div>
          <button
            onClick={onOpenSettings}
            title={hasKey ? `LLM endpoint: ${cfg.baseUrl}` : "Set LLM API key"}
            style={{
              display:"flex", alignItems:"center", gap:6,
              background:"none", border:"1px solid var(--line)", borderRadius:4,
              padding:"3px 10px", fontSize:11.5, fontFamily:"var(--font-mono)",
              color: hasKey ? "var(--ink)" : "var(--ink-mute)",
              cursor:"pointer",
            }}
          >
            <span style={{display:"inline-block", width:6, height:6, borderRadius:"50%",
              background: hasKey ? "var(--green, #2e8a53)" : "var(--ink-mute)"}}/>
            ⚙ {hasKey ? "API" : "API key"}
          </button>
          <span className="chip-kbd">⌘K</span>
          <span
            className={"tag " + (user.kind === "manager" ? "green" : "")}
            style={{fontFamily:"var(--font-mono)", fontSize:10.5, letterSpacing:"0.03em", textTransform:"uppercase"}}
            title={user.kind === "manager" ? "Manager — full access to all tasks" : "Clinician — limited to assigned tasks"}
          >
            {user.kind === "manager" ? "manager" : "clinician"}
          </span>
          <div className="avatar" title={`${user.name} (${user.email})`}>{user.initials}</div>
        </div>
      </div>
      <div className="sidebar">
        <div className="nav-section">{t("nav_workspace")}</div>
        {nav.map(n => (
          <button key={n.k} className="nav-item" data-active={route===n.k} onClick={()=>setRoute(n.k)}>
            {Ico[n.icon]?.()}
            <span>{n.label}</span>
            {n.count != null && <span className="nav-count">{n.count}</span>}
          </button>
        ))}
        <div className="nav-section">{t("nav_mine")}</div>
        {mine.map(n => (
          <button key={n.k} className="nav-item" data-active={route==='queue'}
            onClick={() => {
              const pf = { status: n.status };
              window.__caaQueuePrefilter = pf;
              window.dispatchEvent(new CustomEvent("caa-queue-prefilter", { detail: pf }));
              setRoute("queue");
            }}
            title={`Open queue filtered by "${n.status}"`}>
            <span style={{width:14,height:14,display:"inline-block"}} />
            <span>{n.label}</span>
            <span className="nav-count">{n.count.toLocaleString()}</span>
          </button>
        ))}
        <div className="nav-section" style={{display:"flex", alignItems:"center", gap:6}}>
          {t("nav_cohorts")}
          {user.kind === "manager" && (
            <button className="nav-section-action" onClick={()=>setRoute("cohorts")} title={t("new_cohort_title")}>+</button>
          )}
        </div>
        <button className="nav-item"
          onClick={() => {
            window.__caaQueuePrefilter = null;
            window.dispatchEvent(new CustomEvent("caa-queue-prefilter", { detail: null }));
            setRoute("queue");
          }}
          title="Show all primekg tasks">
          <span style={{width:14}}/>primekg
          <span className="nav-count">{totalCount.toLocaleString()}</span>
        </button>
        {/* Show per-domain rows only when the cohort actually spans more
            than one specialty — otherwise it duplicates the primekg row. */}
        {domainList.length > 1 && domainList.map(([domain, n]) => (
          <button key={domain} className="nav-item"
            onClick={() => {
              const pf = { domain };
              window.__caaQueuePrefilter = pf;
              window.dispatchEvent(new CustomEvent("caa-queue-prefilter", { detail: pf }));
              setRoute("queue");
            }}
            title={`Filter queue by ${domain}`}>
            <span style={{width:14}}/>{domain.toLowerCase()}
            <span className="nav-count">{n.toLocaleString()}</span>
          </button>
        ))}
        <div style={{flex:1}} />
        <div className="nav-section">{t("nav_account")}</div>
        <button className="nav-item" title={user.email}>
          {Ico.users()}
          <span>{user.name}</span>
          <span className={"nav-count " + (user.kind === "manager" ? "" : "")}
            style={{fontFamily:"var(--font-mono)", textTransform:"uppercase", fontSize:10}}>
            {user.kind === "manager" ? "mgr" : "clin"}
          </span>
        </button>
        <button className="nav-item" onClick={onLogout}><span style={{width:14}}/><span>{t("sign_out")}</span></button>
      </div>
      <div className="main">{children}</div>
    </div>
  );
}

window.AppShell = AppShell;