/**
 * feature `gov-tool` —— 工具箱:**系统能对世界做什么**,一屏四段。
 *
 *   功能工具 · 已注册的调用契约(读类自由调,写类登记意向)
 *   LLM 工具 · 大模型驱动的系统内通用工具(**不是模型**;模型在系统区绑)
 *   人类工具 · 工单两模式 + 对话卡三族(调人也是调工具,只是被调的是人)
 *   接入     · 导入自定义工具(与第一方同门两审)/ 连接 MCP
 *
 * 三类工具并列不是编排:它是「一件事能交给谁办」的全集 ——
 * 交给系统(功能工具)、交给模型(LLM 工具)、交给人(人类工具)。少列一类,活动就以为自己没得选。
 *
 * 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
 * 类名(`g-*` + 色调 `t-*`)与文案沿用;设计台以**卡片**为基调(运营台才以列表为主)。
 */
import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { registerToolRoute } from '@contracts';
import { call } from '@web-shared/typed-fetch.ts';
import { Ico } from '@web-shared/Ico.tsx';
import {
  Acts,
  Card,
  Chip,
  Clear,
  Field,
  ListEdit,
  Note,
  PageHead,
  Prop,
  QueryGate,
  Sec,
  Seg,
  St,
} from '@web-shared/gov/primitives.tsx';
import type { Nav } from '@web-shared/gov/gov-route.ts';
import { useGovLlm, useGovTools } from '@web-shared/gov/gov-api.ts';

export type HomeProps = { tab: string; nav: Nav };

/**
 * 人类工具目录 —— 系统内置的五种形态(语义出处 `packages/contracts/src/card.ts`)。
 * 它们不在工具目录里注册:调人的能力是基座给的,不是谁装上来的。
 */
const HUMAN_TOOLS = [
  {
    name: '执行工单',
    mode: 'work-order · execution',
    ico: 'clipboard-check',
    desc: '作业指导书 + 空表单,请人把一步做完;落地失败卡是它的系统预置形态,不算第五种卡',
  },
  {
    name: '验收工单',
    mode: 'work-order · acceptance',
    ico: 'shield-check',
    desc: '请人验收产出:通过 / 驳回重做 / 驳回迭代 —— 终局唯放行',
  },
  {
    name: '决策卡',
    mode: 'chat-card · decision',
    ico: 'git-branch',
    desc: '分支条件选择表,含自定义收尾项 —— 决策是对话区的选择题,不进视图区',
  },
  {
    name: '补全卡',
    mode: 'chat-card · elicitation',
    ico: 'pen-line',
    desc: '就地要几个小信息;「没法填」旁路与提交两条路必走其一,不许静默挂着',
  },
  {
    name: '评价卡',
    mode: 'chat-card · rating',
    ico: 'star',
    desc: '任务评价:评分 1–5 + 改进建议,回流度量与蒸馏',
  },
] as const;

/**
 * LLM 工具目录 —— 系统内**由大模型驱动**的通用工具(不是模型本身)。
 *
 * 模型是发动机,这些是装在发动机上的件:每一件都有明确的入、出与算账口径。
 * 它们不在工具目录里注册 —— 与人类工具一样,是基座给的能力,不是谁装上来的。
 * 跑在哪个模型上由系统区的四元绑定决定(活动只见逻辑名,不触厂商与密钥)。
 */
const LLM_TOOLS = [
  {
    name: '案例决断',
    mode: 'loop-turn',
    ico: 'rotate-ccw',
    desc: '案例活动每一拍:读「当下可为 ∩ 目标所需」,从 调工具 / 调人 / 立监听 里选一个行动',
    cost: '活动预算',
  },
  {
    name: '步内生成',
    mode: 'flow-step',
    ico: 'list-checks',
    desc: '标准活动的 llm 步:模板 + 出参 schema → 结构化产出;出参必过 schema 校验,不合即不算数',
    cost: '活动预算',
  },
  {
    name: '叙述性小结',
    mode: 'system-use',
    ico: 'file-text',
    desc: '任务日志 → 200 字阶段小结,只陈述日志里有的事实、不推测',
    cost: '系统账',
  },
  {
    name: '蒸馏归纳',
    mode: 'system-use',
    ico: 'layers',
    desc: '终态封卷时从任务记忆归纳活动记忆条目:四层归位 + 证据链必挂',
    cost: '系统账',
  },
  {
    name: '连通探针',
    mode: 'probe',
    ico: 'plug',
    desc: '试一次端点与鉴权,回延迟 —— 绑完模型先探一下,别等活动跑起来才发现调不通',
    cost: '系统账',
  },
] as const;

export function ToolsHome({ nav }: HomeProps) {
  const tools = useGovTools();
  const llm = useGovLlm();
  const rows = tools.data?.tools ?? [];

  return (
    <QueryGate query={tools}>
      <>
        <Note>
          一件事能交给谁办,全集在这里:交给<b>系统</b>(功能工具)、交给<b>模型</b>(LLM)、交给
          <b>人</b>(人类工具)。工具承载权力,约束严于活动 —— 契约对活动、实现对系统、凭证只存治理台。
        </Note>

        <Sec ico="wrench" title="功能工具" extra={`${rows.length} 件 · 读类自由调用,写类登记意向、放行后落地`}>
          {rows.length === 0 ? (
            <Clear>目录里还没有工具 —— 从下面「接入」导入一件,或由第一方随系统装入。</Clear>
          ) : (
            <div className="g-shelf">
              {rows.map((t) => {
                const write = t.effect === 'write';
                return (
                  <button
                    key={t.name}
                    className={'g-tile t-' + (write ? 'warn' : 'ok')}
                    onClick={() => nav.push({ k: 'tool', id: t.name })}
                  >
                    <span className="g-tile-h">
                      <span className="g-tile-i">
                        <Ico name="wrench" s={16} />
                      </span>
                      <span className="g-tile-t">
                        <b>{t.name}</b>
                        <em>v{t.version}</em>
                      </span>
                      <St tone={write ? 'warn' : 'ok'} ico={write ? 'pen-line' : 'search'}>
                        {write ? '写' : '读'}
                      </St>
                    </span>
                    <span className="g-tile-m">
                      <span className="g-tile-d">{t.description}</span>
                    </span>
                    <span className="g-tile-f">
                      {t.pure ? (
                        <Chip tone="ok" ico="lock">
                          纯工具 · 活动私有
                        </Chip>
                      ) : (
                        <Chip ico="key">{t.connectionKeys.length === 0 ? '无需连接' : `连接 ${t.connectionKeys.join('/')}`}</Chip>
                      )}
                    </span>
                  </button>
                );
              })}
            </div>
          )}
        </Sec>

        <Sec ico="cpu" title="LLM 工具" extra="大模型驱动的系统内通用工具 · 调模型经模型网关一缝">
          <div className="g-shelf">
            {LLM_TOOLS.map((t) => (
              <div key={t.name} className="g-tile t-auto">
                <span className="g-tile-h">
                  <span className="g-tile-i">
                    <Ico name={t.ico} s={16} />
                  </span>
                  <span className="g-tile-t">
                    <b>{t.name}</b>
                    <em>{t.mode}</em>
                  </span>
                  <St tone="ok" ico="circle-check">
                    内置
                  </St>
                </span>
                <span className="g-tile-m">
                  <span className="g-tile-d">{t.desc}</span>
                </span>
                <span className="g-tile-f">
                  <Chip tone={t.cost === '系统账' ? 'mute' : 'auto'} ico="coins">
                    计量入{t.cost}
                  </Chip>
                </span>
              </div>
            ))}
          </div>
          <Note>
            这些是<b>工具</b>,不是模型 —— 模型是它们跑在上面的发动机。
            当前绑了 {(llm.data?.instances ?? []).length} 个模型实例(
            {(llm.data?.instances ?? []).map((m) => m.name).join(' · ') || '尚未绑定'});
            换厂商、换型号只改<button className="g-link" onClick={() => nav.jump('system', 'llm')}>系统区的四元绑定</button>,
            这些工具与活动一行都不动。
          </Note>
        </Sec>

        <Sec ico="hand" title="人类工具" extra="调人也是调工具 · 打扰上限在契约授权边界,由 Harness 强制">
          <div className="g-shelf">
            {HUMAN_TOOLS.map((h) => (
              <div key={h.name} className="g-tile t-collab">
                <span className="g-tile-h">
                  <span className="g-tile-i">
                    <Ico name={h.ico} s={16} />
                  </span>
                  <span className="g-tile-t">
                    <b>{h.name}</b>
                    <em>{h.mode}</em>
                  </span>
                  <St tone="ok" ico="circle-check">
                    内置
                  </St>
                </span>
                <span className="g-tile-m">
                  <span className="g-tile-d">{h.desc}</span>
                </span>
              </div>
            ))}
          </div>
        </Sec>

        <Sec ico="plus" title="接入" extra="自定义工具与第一方同门两审 · MCP 经工具调用一缝接入">
          <ImportToolCard />
          <McpCard />
        </Sec>
      </>
    </QueryGate>
  );
}

/* ---------------- 接入 · 导入自定义工具 ---------------- */

/**
 * 导入 = 交一份**调用契约** + 一个能调通的端点 + 至少一条样例。
 * 两审当场跑:静态审读契约,试运行审真调那个端点 —— 调不通就不入目录。
 */
function ImportToolCard() {
  const queryClient = useQueryClient();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
  const [version, setVersion] = useState('1.0.0');
  const [description, setDescription] = useState('');
  const [effect, setEffect] = useState<'read' | 'write'>('read');
  const [endpoint, setEndpoint] = useState('');
  const [inputFields, setInputFields] = useState<string[]>([]);
  const [sample, setSample] = useState('{}');

  const importTool = useMutation({
    mutationFn: () =>
      call<{ accepted: boolean; findings: Array<{ message: string }>; trialRun: { failures: string[] } }>(
        registerToolRoute,
        {
          body: {
            contract: {
              name: name.trim(),
              version: version.trim(),
              description: description.trim(),
              effect,
              input: {
                type: 'object',
                required: inputFields.map((f) => f.trim()).filter((f) => f !== ''),
                properties: Object.fromEntries(
                  inputFields.map((f) => f.trim()).filter((f) => f !== '').map((f) => [f, { type: 'string' }]),
                ),
              },
              output: { type: 'object' },
              errors: [],
              idempotent: true,
              timeoutMs: 10_000,
              retries: 1,
              connectionKeys: ['endpoint'],
            },
            connectionValues: { endpoint: endpoint.trim() },
            samples: [{ input: parseSample(sample) }],
          },
        },
      ),
    onSuccess: (out) => {
      if (out.accepted) {
        void queryClient.invalidateQueries({ queryKey: ['gov', 'tools'] });
        setOpen(false);
      }
    },
  });

  const verdict = importTool.data;

  if (!open) {
    return (
      <Card
        ico="plus"
        title="导入自定义工具"
        extra={
          <button className="g-btn primary" onClick={() => setOpen(true)}>
            开始导入
          </button>
        }
      >
        <Note>
          交一份调用契约 + 一个能调通的端点,两审当场跑:静态审读契约,试运行审<b>真调那个端点</b>。
          调不通就不入目录 —— 一件调不通的工具进了目录,活动用它时才失败,那才是真的坏。
        </Note>
      </Card>
    );
  }

  return (
    <Card ico="plus" title="导入自定义工具">
      <Prop ico="tag" title="身份与说明">
        <Field k="工具名" hint="小写点分标识,如 erp.stock-read">
          <input className="g-input" value={name} onChange={(e) => setName(e.target.value)} placeholder="erp.stock-read" />
        </Field>
        <Field k="版本">
          <input className="g-input" value={version} onChange={(e) => setVersion(e.target.value)} />
        </Field>
        <Field k="适用说明" hint="面向 AI 写:何时用、语义边界 —— 这段话决定模型会不会用错它">
          <input
            className="g-input"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="读取 ERP 现货库存:PN → 库存量与库龄,寻源前先看自有呆滞"
          />
        </Field>
      </Prop>

      <Prop ico="shield-check" title="效应与连接">
        <Field k="效应等级" hint="读类过程中自由调用;写类只登记动作意向,放行后才触达世界">
          <Seg
            value={effect}
            options={[
              { k: 'read', label: '读' },
              { k: 'write', label: '写' },
            ]}
            onPick={(k) => setEffect(k === 'write' ? 'write' : 'read')}
          />
        </Field>
        <Field k="端点" hint="值只写不读:落库即密封,此后治理台也只回「是否已绑定」">
          <input
            className="g-input"
            value={endpoint}
            onChange={(e) => setEndpoint(e.target.value)}
            placeholder="https://erp.internal/api/stock"
          />
        </Field>
      </Prop>

      <Prop ico="arrow-left-right" title="入参与样例">
        <Field k="必填入参" hint="一行一个字段名;类型按字符串收,细的形状由端点自己校">
          <ListEdit items={inputFields} placeholder="pn" onChange={setInputFields} />
        </Field>
        <Field k="样例入参" hint="JSON —— 试运行拿它真调一次端点,没有样例就没有门">
          <input className="g-input" value={sample} onChange={(e) => setSample(e.target.value)} />
        </Field>
      </Prop>

      {verdict !== undefined && !verdict.accepted && (
        <Note tone="warn">
          两审未过,没有入目录:
          {[...verdict.findings.map((f) => f.message), ...verdict.trialRun.failures].join(';') || '未知原因'}
        </Note>
      )}

      <Acts
        align="end"
        items={[
          { label: '取消', ico: 'x', onClick: () => setOpen(false) },
          {
            label: importTool.isPending ? '两审中…' : '导入并送审',
            ico: 'circle-check',
            primary: true,
            disabled: importTool.isPending || name.trim() === '' || endpoint.trim() === '',
            ask: {
              title: `导入工具:${name.trim()}`,
              note: <Note>与第一方同一条门:静态审 + 试运行审。过了才入目录;入目录还不等于能用,要再给活动授白名单。</Note>,
              impact: {
                who: '仅工具目录;没进白名单的活动仍然调不到它',
                undo: '可停用;契约演进只增不破坏,破坏性变更要换新工具名',
                when: '确认后当场跑两审',
              },
              okLabel: '确认导入',
              onOk: () => importTool.mutate(),
            },
          },
        ]}
      />
    </Card>
  );
}

/** 样例入参解析:写坏了就当空对象送审 —— 让试运行去报错,别在这里拦 */
function parseSample(text: string): Record<string, unknown> {
  try {
    const parsed: unknown = JSON.parse(text);
    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)
      ? (parsed as Record<string, unknown>)
      : {};
  } catch {
    return {};
  }
}

/* ---------------- 接入 · MCP ---------------- */

function McpCard() {
  return (
    <Card
      ico="link"
      title="连接 MCP 服务器"
      extra={
        <St tone="mute" ico="unplug">
          未连接
        </St>
      }
    >
      <Note>
        MCP 服务器上的工具,接进来之后与自定义工具同等待遇:经<b>工具调用一缝</b>去调、过两审入目录、
        按白名单授给活动。当前系统还没有 MCP 客户端 —— 这里如实标着未连接,不摆一个点不动的按钮。
      </Note>
    </Card>
  );
}

/* ---------------- 工具详情 ---------------- */

export function ToolPage({ id }: { id: string }) {
  const q = useGovTools();
  const t = (q.data?.tools ?? []).find((x) => x.name === id);
  if (t === undefined) return <Note>工具不存在。</Note>;
  const write = t.effect === 'write';
  return (
    <>
      <PageHead
        ico="wrench"
        tone={write ? 'danger' : 'brand'}
        kicker={`工具 · ${t.name}`}
        title={t.name}
        chips={
          <>
            <Chip tone={write ? 'danger' : 'brand'}>{write ? '写类' : '读类'}</Chip>
            {t.pure && <Chip tone="ok">纯工具</Chip>}
            <Chip ico="hash">v{t.version}</Chip>
          </>
        }
        desc={
          write
            ? '写类工具在过程中只登记动作意向,不改世界;放行通过后由落地收敛统一执行。'
            : '读类工具过程中自由调用 —— 读不改世界,故不需放行。'
        }
      />
      <Card ico="info" title="说明">
        <p className="g-desc">{t.description}</p>
      </Card>
      <Card ico="shield-check" title="连接配置">
        <Note>凭证隔离:治理台只回<b>配置键</b>,永不回值;密钥不入包、不入活动、不入留痕明文。</Note>
        <div className="g-rows">
          {t.connectionKeys.map((k) => (
            <div key={k}>
              <em>{k}</em>
              <b className="mono">已在治理台绑定</b>
            </div>
          ))}
          {t.connectionKeys.length === 0 && <Clear>此工具无需外部连接。</Clear>}
        </div>
      </Card>
    </>
  );
}