/**
 * apps/web 唯一组装层(编码规范 §9):样式装载、Provider、鉴权壳、SSE 连接。
 *
 * **两台面各自装自己的皮肤。**
 * 两份原型本是两个独立应用,各自只加载自己那两份 CSS:
 *   工作台 = `proto.vendor.css`(原型皮肤)+ `app.css`(补充,作用域 `.proto-root`)
 *   治理台 = `theme.css`(令牌 + 页面基座)+ `console.css`(gov-* 组件)
 * 两份基座都写了 `body { min-width / background }` 这类**全局**规则,谁后加载谁赢 ——
 * 四份一起塞进同一个文档,后加载的治理台基座会把工作台的壳整个盖掉(实测:布局全崩)。
 * 所以按台面**分别装载**,这也正是 1:1 平移该有的样子:每台面拿到的样式集与它的原型一致。
 */
import { StrictMode, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
import type { Session } from '@contracts';
import { sessionRoute } from '@contracts';
import { AppShell } from './app-shell.tsx';
import { connectStream } from './subscribe.ts';
import { GovShell } from './gov-shell.tsx';
import { LoginPage } from '@features/auth';
import { ApiCallError, call } from '@web-shared/typed-fetch.ts';
import { queryClient, queryKeys } from './query.ts';
import { applyTabIdentity } from './tab-identity.ts';

const container = document.getElementById('root');
if (!container) throw new Error('#root 缺失');

/** 路径或 hash 决定进哪台 —— 路由状态即应用状态,可深链(§9.2) */
const isGovernance =
  window.location.pathname.startsWith('/gov') || window.location.hash.startsWith('#/gov');

// 网页标签的名与章 —— 样式装载前就挂上,标签从第一帧起就叫对名字
applyTabIdentity(isGovernance);

/*
 * 样式先装、再渲染:CSS 落地后才挂 DOM,避免无样式闪烁。
 * 台面切换靠整页导航(两台面的 body 基座互斥,不做客户端软切换)。
 * 登录页两台面共用,故恒装 —— 它通篇作用域在 `.jc-login`,不与任一基座相争。
 */
await import('./styles/login.css');
if (isGovernance) {
  await import('./styles/theme.css');
  await import('./styles/console.css');
} else {
  await import('./styles/proto.vendor.css');
  await import('./styles/app.css');
}

/**
 * 鉴权壳(ADR-010)—— 会话是**服务端**的事:401 即落登录页。
 * 前端不自存身份,刷新照样问一次 `/api/session`;登出后缓存整体清空,
 * 免得上一个人的任务、审批、消息留在下一个人眼前。
 */
function Gate() {
  const client = useQueryClient();
  const session = useQuery({
    queryKey: queryKeys.session,
    queryFn: () => call<Session>(sessionRoute),
    // 未登录是正常状态,不是故障 —— 不重试,直接落登录页
    retry: (_count, error) => !(error instanceof ApiCallError && error.status === 401),
  });

  /*
   * 判据要看 error,不能只看 data。
   * TanStack Query 在**重取失败时保留上一次成功的 data** —— 会话过期或登出后重取拿到 401,
   * `session.data` 依旧是旧身份;只认 data 就会停在一个空壳里,退不出去(实测如此)。
   */
  const expired = session.error instanceof ApiCallError && session.error.status === 401;
  const authed = session.data !== undefined && !expired;

  // SSE 只在登录后连:未登录时那条连接会被中间件 401 挡下
  useEffect(() => (authed ? connectStream(client) : undefined), [authed, client]);

  if (session.isPending) return null;
  if (!authed) {
    // 只落身份,**不要 clear()**:clear 会连同已挂载的观察者一起移除,
    // 随后 setQueryData 建的是新条目,老观察者接不上 —— 界面会卡在「登录中…」(实测)。
    // 缓存的清空由登出那侧的整页跳转保证,这里到达时本就是空的。
    return <LoginPage onLogin={(s) => client.setQueryData(queryKeys.session, s)} />;
  }

  return isGovernance ? (
    <GovShell />
  ) : (
    // .proto-root 是工作台补充样式的作用域(原型 app.css 通篇以它起头);
    // 治理台不裹它 —— 裹了工作台的补充样式就会漏进治理台的树里
    <div className="proto-root">
      <AppShell />
    </div>
  );
}

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <Gate />
    </QueryClientProvider>
  );
}

createRoot(container).render(
  <StrictMode>
    <Root />
  </StrictMode>,
);