/**
 * 工作台外壳 —— 自原型 `(proto)/page.tsx` 平移(README《前端 UI · 原型 1:1 平移》)。
 *
 * 左轨 = 品牌 → **工作台五要素**(任务 / 审批 / 消息 / 纪要 / 汇报)→ 轨底身份菜单;
 * 任务四区 = 左栏列表区 / 中上标题区 / 中下工作区 / 右栏对话区。
 *
 * **前端零过程状态**:数据全部来自服务端投影,刷新即从投影重建(§9.2)。
 */
import { useRef, useState } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import type { Principal, TaskCard, TaskDetail, WorkOrderReply } from '@contracts';
import {
  listApprovalsForMeRoute,
  listMessagesRoute,
  listTasksRoute,
  meRoute,
  replyWorkOrderRoute,
  taskDetailRoute,
} from '@contracts';
import { TaskChat, TaskList, ViewRegion } from '@features/desk-task';
import type { TaskFilter } from '@features/desk-task';
import { ApprovalDesk } from '@features/desk-approval';
import { MessageDesk } from '@features/desk-message';
import { MinuteDesk } from '@features/desk-minute';
import { ReportDesk } from '@features/desk-report';
import { Ico } from '@web-shared/Ico.tsx';
import { call } from '@web-shared/typed-fetch.ts';
import { logout as kcLogout } from '@web-shared/auth.ts';
import { useChatWidth } from '@web-shared/useChatWidth.ts';
import { EmptyState } from '@web-shared/desk/module-kit.tsx';
import { queryKeys } from './query.ts';

type ModuleKey = 'tasks' | 'approvals' | 'messages' | 'minutes' | 'report';

const NAV_MODULES: ReadonlyArray<{ key: ModuleKey; label: string; icon: string }> = [
  { key: 'tasks', label: '任务', icon: 'list-checks' },
  { key: 'approvals', label: '审批', icon: 'file-check' },
  { key: 'messages', label: '消息', icon: 'messages-square' },
  { key: 'minutes', label: '纪要', icon: 'notebook-pen' },
  { key: 'report', label: '汇报', icon: 'bar-chart' },
];

export function AppShell() {
  const queryClient = useQueryClient();
  const [module, setModule] = useState<ModuleKey>('tasks');
  /** 清单状态页签(进行中/已完成)—— TaskList 上报,中间区与对话区跟着它走(2026-08-25 用户定) */
  const [listFilter, setListFilter] = useState<TaskFilter>('active');
  /** 「建设中」弹窗:点未开放模块(审批/消息/纪要/汇报)或个人中心时弹出,不跳页(2026-08-25 用户定) */
  const [wip, setWip] = useState<string | null>(null);
  const [taskId, setTaskId] = useState('');
  const [collapsed, setCollapsed] = useState(false);
  /*
   * 工单填报值 —— **壳层持有**,工作区与对话区共用同一份。
   *
   * 验收工单是「AI 已填好、可编辑」,而**裁决在对话区的验收单上**(PRD 口径):
   * 编辑与裁决是同一件事的两半,却分在两个区里做。缓冲只活在工作区里,
   * 人在报告上改的值就到不了裁决那一刻 —— 验收回传的 `values` 恒空,修订永远落不下来。
   *
   * 换任务即清空:填报值是**过程状态**,不跨单。
   */
  const [orderValues, setOrderValues] = useState<Record<string, string>>({});
  /*
   * 对话区点「打开工单」→ 视图区跳转定位(PRD:locate)。
   * `seq` 每点递增:同一张卡点两次也要再跳一次 —— 人就是想回到它。
   */
  const [locate, setLocate] = useState<{ seq: number; orderId?: string; tab?: 'comms' } | null>(null);
  const locateSeq = useRef(0);
  const split = useChatWidth();


  const me$ = useQuery({
    queryKey: queryKeys.me,
    queryFn: () => call<Principal>(meRoute),
  });

  const tasks = useQuery({
    queryKey: queryKeys.tasks,
    queryFn: () => call<{ tasks: TaskCard[] }>(listTasksRoute),
  });

  // 角标常驻:责任面要一眼看见「什么在等我」,不能等切过去才知道
  const messages = useQuery({
    queryKey: queryKeys.messages,
    queryFn: () => call<{ messages: Array<{ id: string; read: boolean }> }>(listMessagesRoute),
  });
  const approvals = useQuery({
    queryKey: queryKeys.approvals,
    queryFn: () => call<{ approvals: Array<{ state: string }> }>(listApprovalsForMeRoute),
  });

  const list = tasks.data?.tasks ?? [];
  const active = list.filter((t) => t.terminal === undefined);
  /*
   * 中间区/对话区跟着清单页签走:当前选中落在本页签内才保留,
   * 否则落到本页签第一单;页签内一单都没有就是空态 —— 不能隔着页签
   * 还摆着另一页签的单(2026-08-25 用户报:切「进行中」仍显示已完成任务)。
   */
  const tabTasks = list.filter((t) => (listFilter === 'active' ? t.terminal === undefined : t.terminal !== undefined));
  const current = taskId !== '' && tabTasks.some((t) => t.id === taskId) ? taskId : (tabTasks[0]?.id ?? '');

  const detail = useQuery({
    queryKey: queryKeys.task(current),
    queryFn: () => call<TaskDetail>(taskDetailRoute, { params: { taskId: current } }),
    enabled: current !== '',
  });
  /*
   * 详情在拉取途中(远程库往返要几百毫秒)—— 这一刻三区不能摆空态,
   * 否则人刚点完页签就看到「手上没有任务」,以为这一下没点上(2026-08-25 用户报)。
   */
  const detailPending = current !== '' && detail.isPending;




  /**
   * 登出(ADR-012):先整体清空缓存(上一个人的任务、审批、消息不能留给下一个人),
   * 再走 Keycloak end-session 终结 SSO 会话跳回首页 —— 只清本地会「登不出去」(手册 §11)。
   * 后端 `/api/logout` 已退役(410),这里不再调它。
   */
  const logout = () => {
    queryClient.clear();
    void kcLogout();
  };

  const me = me$.data?.staff.name ?? '—';

  /**
   * 工单回传 —— 视图区与对话区同一条口。
   * 回传后按键失效、画面由服务端重投影:前端不自行推演卡与工单的状态(§9.2)。
   */
  const replyOrder = useMutation({
    mutationFn: (reply: WorkOrderReply) => call(replyWorkOrderRoute, { body: { reply } }),
    onSuccess: () => {
      void queryClient.invalidateQueries({ queryKey: ['desk'] });
    },
  });

  return (
    <div className="app-shell">
      <div className="app-body">
        <nav className="app-nav">
          <div className="app-nav-mark" title="JCAI 智能协同工作台">
            <Ico name="bot" s={20} />
          </div>
          <span className="jc-rail-brand">JCAI</span>
          {NAV_MODULES.map((m) => {
            const badge =
              m.key === 'tasks'
                ? active.length
                : m.key === 'approvals'
                  ? (approvals.data?.approvals ?? []).filter((a) => a.state === 'pending').length
                  : m.key === 'messages'
                    ? (messages.data?.messages ?? []).filter((x) => !x.read).length
                    : undefined;
            return (
              <button
                key={m.key}
                className={module === m.key ? 'active' : ''}
                onClick={() => (m.key === 'tasks' ? setModule('tasks') : setWip(m.label))}
                aria-current={module === m.key ? 'page' : undefined}
              >
                <span className="app-nav-icon-wrap">
                  <Ico name={m.icon} s={20} />
                  {badge !== undefined && badge > 0 ? <span className="app-nav-badge">{badge}</span> : null}
                </span>
                <span>{m.label}</span>
              </button>
            );
          })}
          {/* 身份菜单收在轨底(2026-08-26 用户定:顶栏撤掉,内容挪到左轨底部)——
              轨宽 78px,头像上姓名下竖排;悬停/聚焦从轨右侧弹出,登出仍是全站唯一入口 */}
          <div className="jc-usermenu jc-usermenu-rail">
            <span className="jc-nav-ava">{me.slice(0, 1)}</span>
            <span className="jc-topbar-name">{me}</span>
            <div className="jc-usermenu-pop">
              {/* 个人中心独立成页(/me 台面),整页导航过去(2026-08-25 用户定) */}
              <a href="/me">
                <Ico name="user" s={14} />
                个人中心
              </a>
              {/* 设计中心直链数据域页,整页导航过去(2026-08-25 用户定) */}
              <a href="/design#/design/data/domains">
                <Ico name="pen-line" s={14} />
                设计中心
              </a>
              <button type="button" className="danger" onClick={logout}>
                <Ico name="log-out" s={14} />
                退出登录
              </button>
            </div>
          </div>
        </nav>

        <div className="app-main">
          <div className="app-main-body">
          {module === 'tasks' ? (
          <div className={'workspace' + (collapsed ? ' jc-side-collapsed' : '')} style={split.style}>
            {collapsed && (
              <button
                type="button"
                className="jc-wl-expand"
                title="展开列表区"
                aria-label="展开列表区"
                onClick={() => setCollapsed(false)}
              >
                <Ico name="chevron-right" s={12} />
              </button>
            )}
            <TaskList
              tasks={list}
              selectedId={current}
              collapsed={collapsed}
              onPick={(id) => {
                // 换任务即清空填报缓冲与定位:它们是**过程状态**,不跨单
                setOrderValues({});
                setLocate(null);
                setTaskId(id);
              }}
              onCollapse={() => setCollapsed(true)}
              onFilterChange={(s) => {
                // 换页签=换一批单:填报缓冲与定位是**过程状态**,不跨单(与 onPick 同一口径)
                setOrderValues({});
                setLocate(null);
                setListFilter(s);
              }}
            />
            {/*
              手上没任务时,三栏也得**站得住**:中栏与对话区各给自己的空态。
              少一栏会让整个工位看着像坏了 —— 空态是常态,不是缺页。
            */}
            {detail.data !== undefined ? (
              <ViewRegion
                key={current}
                detail={detail.data}
                onReplyOrder={(reply) => replyOrder.mutate(reply)}
                values={orderValues}
                onField={(k, v) => setOrderValues((old) => ({ ...old, [k]: v }))}
                locate={locate}
              />
            ) : (
              /*
               * **手上没任务时,中栏也得是一张卡**。
               *
               * 其余四个模块(审批 / 消息 / 纪要 / 汇报)的空态都挂 `jc-panel-card`,
               * 只有任务这一栏是裸的 `execution-panel` —— 而那个类在工作区里被显式
               * 去边框去底色(视图区不再有外层卡)。于是同一套工作台上,四个模块的空态
               * 是白卡片,任务这一栏却是画布上飘着的一段文字,看着像没渲染出来。
               */
              <main className="execution-panel jc-panel-card">
                {tasks.isLoading || detailPending ? (
                  <div className="jc-list-empty">
                    <Ico name="list-checks" s={18} />
                    载入中…
                  </div>
                ) : (
                  <EmptyState
                    ico="list-checks"
                    tone="brand"
                    title="手上没有任务"
                    desc="流程走到你负责的活动时,任务会连同办这件事要用的全部上下文一起送到这里 —— 待处理的事、往来记录、产出的文件都在一屏之内。"
                    hint="有新任务时左侧列表会亮角标"
                  />
                )}
              </main>
            )}
            <i
              className="jc-vsplit"
              title="拖拽调整对话区宽度 · 双击复位"
              onPointerDown={split.onSplitDown}
              onDoubleClick={split.onSplitReset}
            />
            <section className="session-chat">
              {detail.data !== undefined ? (
                <TaskChat
                  key={current}
                  detail={detail.data}
                  onLocate={(orderId) => {
                    locateSeq.current += 1;
                    setLocate({ seq: locateSeq.current, orderId });
                  }}
                  onOpenComms={() => {
                    locateSeq.current += 1;
                    setLocate({ seq: locateSeq.current, tab: 'comms' });
                  }}
                  orderValues={orderValues}
                  onField={(k, v) => setOrderValues((old) => ({ ...old, [k]: v }))}
                />
              ) : (
                <div className="jc-tch">
                  <header className="jc-tch-head">
                    <span className="jc-tch-mark">
                      <Ico name="bot" s={15} />
                    </span>
                    <b className="jc-tch-name">任务助理</b>
                    <em className="jc-tch-tag">Agent</em>
                    <span className="jc-tch-desc">开一单即可对话</span>
                  </header>
                  <div className="jc-tch-scroll">
                    {detailPending ? (
                      <div className="jc-list-empty">
                        <Ico name="messages-square" s={18} />
                        载入中…
                      </div>
                    ) : (
                      <EmptyState
                        ico="messages-square"
                        tone="brand"
                        title="还没有可对话的任务"
                        desc="每一单任务都有自己的对话:AI 有结论、要派工、或者要你拿个主意,都在那一单里说 —— 所以得先有一单在手。"
                      />
                    )}
                  </div>
                  <div className="copilot-composer session-composer">
                    <div className="composer-row">
                      <textarea rows={2} disabled placeholder="选中一单任务后就能在这里交代" />
                      <button className="copilot-send" disabled>
                        <Ico name="send" s={14} /> 发送
                      </button>
                    </div>
                  </div>
                </div>
              )}
            </section>
          </div>
        ) : module === 'approvals' ? (
          <ApprovalDesk />
        ) : module === 'messages' ? (
          <MessageDesk />
        ) : module === 'minutes' ? (
          <MinuteDesk />
        ) : (
          <ReportDesk />
        )}
          </div>
        </div>
      </div>

      {/* 「建设中」提示:点遮罩或按钮关闭,不跳页 */}
      {wip !== null && (
        <div className="jc-wip-overlay" onClick={() => setWip(null)}>
          <div className="jc-wip-modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()}>
            <div className="jc-wip-ico">
              <Ico name="info" s={18} />
            </div>
            <h3>该区域正在建设中</h3>
            <p>「{wip}」暂未开放，敬请期待。</p>
            <button type="button" className="jc-wip-ok" onClick={() => setWip(null)}>
              我知道了
            </button>
          </div>
        </div>
      )}
    </div>
  );
}