/**
 * 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 { Principal } from '@contracts';
import { meRoute } from '@contracts';
import { AppShell } from './app-shell.tsx';
import { MePage } from '@features/desk-me';
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 { initAuth, logout } from '@web-shared/auth.ts';
import { Ico } from '@web-shared/Ico.tsx';
import { Btn } from '@web-shared/Btn.tsx';
import { queryClient, queryKeys } from './query.ts';
import { applyTabIdentity } from './tab-identity.ts';
import type { TabSurface } from './tab-identity.ts';
import { SURFACE_META, legacyGovTarget } from '@web-shared/gov/surfaces.ts';
import type { Surface } from '@web-shared/gov/surfaces.ts';

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

/*
 * 旧 `/gov` 链接一条不死:带着深链原样改写到新台面(replace —— 不在历史里留一个回不去的地址)。
 * 治理中心一分为二后,`/gov` 只剩这一个职责。
 */
const legacy = window.location.pathname.startsWith('/gov')
  ? (legacyGovTarget(window.location.hash) ?? `${SURFACE_META.ops.path}#/ops/cockpit/dash`)
  : undefined;
if (legacy !== undefined) window.location.replace(legacy);

/** 路径决定进哪一面 —— 路由状态即应用状态,可深链(§9.2) */
const meSurface = window.location.pathname.startsWith('/me');
const surface: TabSurface = window.location.pathname.startsWith(SURFACE_META.design.path)
  ? 'design'
  : window.location.pathname.startsWith(SURFACE_META.ops.path)
    ? 'ops'
    : 'desk';
const govSurface: Surface | undefined = surface === 'desk' ? undefined : surface;

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

/*
 * 样式先装、再渲染:CSS 落地后才挂 DOM,避免无样式闪烁。
 * 台面切换靠整页导航(工作台与治理面的 body 基座互斥,不做客户端软切换)。
 * 登录页三面共用,故恒装 —— 它通篇作用域在 `.jc-login`,不与任一基座相争。
 */
await import('./styles/login.css');
if (govSurface !== undefined) {
  await import('./styles/theme.css');
  await import('./styles/console.css');
} else {
  await import('./styles/proto.vendor.css');
  await import('./styles/app.css');
}
/*
 * 键感与「在办」那一层三面共用,**装在最后** —— 同名规则以它为准。
 * (2026-08-24 用户:「点击了都不知道点没点上」;见 styles/press.css 头注)
 */
await import('./styles/press.css');

/**
 * 鉴权壳(ADR-012)—— 统一鉴权中心后,身份分两层:
 *
 *   ① **登录态**:浏览器与 Keycloak 之间的事,模块加载时 `initAuth()` 静默探测一次
 *      (隐藏 iframe,用户无感);没有就摆登录页,一键跳统一登录。
 *   ② **准入**:`GET /api/me` 回答「我是谁、能进哪几个端(`ends`)」。
 *      入口亮灯与深链保护都只看 `ends`;`ends` 为空也 200 —— 摆「未授权」页,不落登录页。
 *
 * token 只活在 keycloak-js 的内存里,刷新页面靠 SSO 会话静默恢复(手册 §16,不"优化")。
 */
const auth = await initAuth().catch(() => undefined);

/** 未授权提示页(角色不够 / ends 为空共用)—— 与登录页同一套 jc-login 皮肤 */
function Denied({ title, desc }: { title: string; desc: string }) {
  return (
    <div className="jc-login">
      <div className="jc-login-card">
        <span className="jc-login-mark">
          <Ico name="shield-check" s={24} />
        </span>
        <h1 className="jc-login-title">{title}</h1>
        <p className="jc-login-sub">{desc}</p>
        {/* 角色不够时跳登录页没用(还是同一个人)—— 给的是登出,换账号再来(手册 §4.3) */}
        <Btn className="jc-login-go" onClick={() => void logout()}>
          退出登录
        </Btn>
      </div>
    </div>
  );
}

function Gate() {
  const client = useQueryClient();
  const me = useQuery({
    queryKey: queryKeys.me,
    queryFn: () => call<Principal>(meRoute),
    // 只有登录了才问 /api/me;401 是正常状态(会话没了),不重试
    enabled: auth?.authenticated === true && auth.authorized,
    retry: (_count, error) => !(error instanceof ApiCallError && error.status === 401),
  });

  const ends = me.data?.ends;
  /*
   * 深链保护:进 /design /ops 而 ends 不含该端 → 落到能进的第一个端;
   * 工作台 / 个人中心同理要看 'workbench'。一个都进不了时 Denied 已接住,到不了这里。
   */
  const need: Surface | 'workbench' | undefined =
    govSurface ?? (meSurface || surface === 'desk' ? 'workbench' : undefined);
  const blocked = ends !== undefined && ends.length > 0 && need !== undefined && !ends.includes(need);
  // 落到能进的第一个端:工作台优先,否则第一个治理端
  const firstGovEnd = ends?.find((e): e is Surface => e === 'design' || e === 'ops');
  const fallback =
    ends?.includes('workbench') === true ? '/' : firstGovEnd !== undefined ? SURFACE_META[firstGovEnd].path : undefined;

  useEffect(() => {
    if (blocked && fallback !== undefined) window.location.replace(fallback);
  }, [blocked, fallback]);

  // SSE 只在登录后连:未登录时那条连接会被中间件 401 挡下
  const streaming = me.data !== undefined && !blocked;
  useEffect(() => (streaming ? connectStream(client) : undefined), [streaming, client]);

  // 鉴权中心本身没应答(网络 / 配置)—— 摆实话,不落登录页打转
  if (auth === undefined)
    return <Denied title="鉴权中心暂时连不上" desc="请检查网络后刷新重试;反复出现请联系管理员。" />;
  if (!auth.authenticated) return <LoginPage />;
  if (!auth.authorized)
    return <Denied title="你没有本系统的访问权限" desc="当前账号缺少本端要求的角色,请退出后换账号登录。" />;

  if (me.isPending) return null;
  // 401(token 救不回来)落登录页;别的错误如实摆出来,不装没发生
  if (me.data === undefined) {
    if (me.error instanceof ApiCallError && me.error.status === 401) return <LoginPage />;
    return <Denied title="身份确认失败" desc={me.error instanceof Error ? me.error.message : '请刷新重试'} />;
  }
  if (me.data.ends.length === 0)
    return (
      <Denied
        title="还没有可进的端"
        desc={`你的角色(${me.data.roles.join('、') || '无'})还没有被授权进入任何一端,请联系运营中心。`}
      />
    );
  if (blocked) return null; // 重定向进行中(effect 已发)

  return govSurface !== undefined ? (
    <GovShell surface={govSurface} />
  ) : meSurface ? (
    // 个人中心与工作台同皮肤,整页导航进出(2026-08-25)
    <div className="proto-root">
      <MePage />
    </div>
  ) : (
    // .proto-root 是工作台补充样式的作用域(原型 app.css 通篇以它起头);
    // 治理台不裹它 —— 裹了工作台的补充样式就会漏进治理台的树里
    <div className="proto-root">
      <AppShell />
    </div>
  );
}

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

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