// omp-advisor Web client: composer control to pick the advisor model (or turn it off).
//
// Lives in `conversation.input.right` (a list slot) next to the model seat. The menu lists the
// same provider-grouped models as DSH's model picker (the session's model directory), plus
// "Off" and "Same as agent". Hovering a model that has reasoning efforts opens a side submenu to
// pick its effort; clicking the model row picks it with its default effort. The choice is saved
// on the host (POST omp-advisor/settings) and applies from the advisor's next review.
window.__ModuleLoader__.load({
  id: '@local/omp-advisor',
  factory(require) {
    const React = require('react');
    const ReactDOM = require('react-dom');
    const P = require('@deepseek-ai/dsh-client-ui-primitives');
    const h = React.createElement;
    const NS = 'ompAdvisor';

    const en = {
      label: 'Advisor', off: 'Advisor off', same: 'Same as agent', offItem: 'Off',
      sameItem: 'Same model as the agent', title: 'Second-model advisor', effort: 'Effort',
      providerDefault: 'Default', loading: 'Loading models…', error: 'Could not save: {msg}',
      hint: 'Reviews each step and adds notes or blockers.',
    };
    const zh = {
      label: '顾问', off: '顾问关闭', same: '同智能体', offItem: '关闭',
      sameItem: '与智能体相同的模型', title: '第二模型顾问', effort: '推理强度',
      providerDefault: '默认', loading: '正在加载模型…', error: '保存失败：{msg}',
      hint: '审查每一步并给出提示或阻断意见。',
    };

    const CSS = `
.oadv-root{position:relative;display:flex;align-items:center;min-width:0}
.oadv-trigger{border:0;background:none;color:var(--dsw-alias-label-secondary);height:28px;max-width:200px;padding:0 6px 0 6px;border-radius:var(--dsw-radius-sm);display:flex;align-items:center;gap:5px;font:inherit;font-size:13px;cursor:pointer;min-width:0}
.oadv-trigger:hover{background:var(--dsw-alias-interactive-bg-hover)}
.oadv-trigger[data-off]{color:var(--dsw-alias-label-caption)}
.oadv-trigger:focus-visible{box-shadow:0 0 0 2px var(--dsw-focus-ring-color,var(--dsw-alias-state-business-primary));outline:none}
.oadv-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.oadv-effort{color:var(--dsw-alias-label-caption);white-space:nowrap}
.oadv-menu,.oadv-sub{position:fixed;z-index:1100;min-width:240px;max-width:min(380px,100vw - 32px);max-height:min(420px,100vh - 96px);overflow-y:auto;padding:4px;color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-elevation-prominent);border-radius:var(--dsw-radius-lg,10px);background:var(--dsw-alias-bg-l1,var(--dsw-alias-surface-l1,#1e1e1e))}
.oadv-sub{min-width:160px}
.oadv-head{padding:6px 8px 4px;font-size:12px;color:var(--dsw-alias-label-tertiary)}
.oadv-group{padding:8px 8px 2px;font-size:11px;letter-spacing:.02em;color:var(--dsw-alias-label-caption);text-transform:uppercase}
.oadv-item{width:100%;display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border:0;background:none;color:inherit;font:inherit;font-size:13px;text-align:left;border-radius:var(--dsw-radius-md);cursor:pointer}
.oadv-item:hover,.oadv-item[data-active]{background:var(--dsw-alias-interactive-bg-hover)}
.oadv-item-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oadv-item-meta{color:var(--dsw-alias-label-caption);font-size:12px;white-space:nowrap}
.oadv-check{width:14px;flex:none;display:inline-flex;justify-content:center}
.oadv-sep{height:1px;margin:4px 6px;background:var(--dsw-alias-border-l1,rgba(127,127,127,.2))}
.oadv-status{padding:8px;font-size:12px;color:var(--dsw-alias-label-tertiary)}
.oadv-err{padding:6px 8px;font-size:12px;color:var(--dsw-alias-state-danger,#f85149)}
`;
    let cssDone = false;
    function installCss() {
      if (cssDone || typeof document === 'undefined') return;
      const s = document.createElement('style');
      s.dataset.ompAdvisor = '';
      s.textContent = CSS;
      document.head.appendChild(s);
      cssDone = true;
    }

    const Ic = (name) => P[name] || (() => null);
    const IconCheck = Ic('IconCheckOutlineRegular');
    const IconChevronDown = Ic('IconChevronDownOutlineRegular');
    const IconChevronRight = Ic('IconChevronRightOutlineRegular');
    const IconAdvisor = P.IconSparkleRegular || P.IconEyeOutlineRegular || (() => null);

    const fill = (s, v) => String(s).replace(/\{(\w+)\}/g, (_, k) => (v && v[k] !== undefined ? v[k] : ''));
    const effortName = (e) => (e?.id === 'xhigh' ? 'Extra' : e?.name ?? e?.id);

    // ---- host settings store (shared by every session's control) ----
    const settings = (() => {
      let value = null;
      let inflight = null;
      const subs = new Set();
      const emit = () => subs.forEach((f) => f());
      async function call(init) {
        const res = await fetch('omp-advisor/settings', { ...init, headers: { accept: 'application/json', ...(init?.body ? { 'content-type': 'application/json' } : {}) } });
        let json = {};
        try { json = await res.json(); } catch { /* empty */ }
        if (!res.ok) throw new Error(json.message || res.statusText || String(res.status));
        return json;
      }
      return {
        subscribe(f) { subs.add(f); return () => subs.delete(f); },
        get() { return value; },
        load() {
          inflight ??= call().then((v) => { value = v; emit(); }).catch(() => {}).finally(() => { inflight = null; });
          return inflight;
        },
        async save(patch) {
          const prev = value;
          value = { ...(value ?? {}), ...patch };
          emit();
          try { value = await call({ method: 'POST', body: JSON.stringify(patch) }); emit(); } catch (e) { value = prev; emit(); throw e; }
        },
      };
    })();

    function useSettings() {
      const v = React.useSyncExternalStore(settings.subscribe, settings.get);
      React.useEffect(() => { if (v === null) settings.load(); }, [v]);
      return v;
    }

    function place(anchor, menu, { side = 'above', gap = 6 } = {}) {
      const a = anchor.getBoundingClientRect();
      const m = menu.getBoundingClientRect();
      const vw = window.innerWidth; const vh = window.innerHeight;
      if (side === 'right') {
        let left = a.right + 2;
        if (left + m.width > vw - 8) left = a.left - m.width - 2;
        let top = Math.min(a.top - 4, vh - m.height - 8);
        return { left: Math.max(8, left), top: Math.max(8, top) };
      }
      let left = Math.min(a.left, vw - m.width - 8);
      let top = a.top - m.height - gap;
      if (top < 8) top = a.bottom + gap;
      return { left: Math.max(8, left), top: Math.max(8, Math.min(top, vh - m.height - 8)) };
    }

    function AdvisorPicker({ directory, load, t }) {
      React.useEffect(installCss, []);
      const st = useSettings();
      const dir = React.useSyncExternalStore((f) => directory.subscribe(f), () => directory.getSnapshot());
      const [open, setOpen] = React.useState(false);
      const [hover, setHover] = React.useState(null); // { key, el, model, group }
      const [err, setErr] = React.useState(null);
      const [pos, setPos] = React.useState(null);
      const [subPos, setSubPos] = React.useState(null);
      const rootRef = React.useRef(null);
      const trigRef = React.useRef(null);
      const menuRef = React.useRef(null);
      const subRef = React.useRef(null);
      const hoverTimer = React.useRef(null);

      const enabled = st?.enabled !== false;
      const own = !!(st?.provider && st?.model);
      const groups = dir?.groups ?? [];
      const current = own ? groups.find((g) => g.id === st.provider)?.models.find((m) => m.id === st.model) : null;
      const effortOf = (model, id) => effortName(model?.reasoning?.efforts?.find((e) => e.id === id)) ?? id;

      const label = !st ? t('label') : !enabled ? t('off') : own ? (current?.name ?? st.model) : t('same');
      const effortLabel = enabled && own && current?.reasoning
        ? (st.reasoningEffort ? effortOf(current, st.reasoningEffort) : t('providerDefault'))
        : null;

      // open / close behaviour
      React.useEffect(() => {
        if (!open) return undefined;
        if (dir?.status !== 'ready') load();
        const onDown = (e) => {
          for (const r of [rootRef, menuRef, subRef]) if (r.current?.contains(e.target)) return;
          setOpen(false);
        };
        const onKey = (e) => { if (e.key === 'Escape') { setOpen(false); trigRef.current?.focus(); } };
        document.addEventListener('mousedown', onDown);
        document.addEventListener('keydown', onKey);
        return () => { document.removeEventListener('mousedown', onDown); document.removeEventListener('keydown', onKey); };
      }, [open]);
      React.useLayoutEffect(() => {
        if (!open) { setPos(null); setHover(null); return; }
        if (menuRef.current && trigRef.current) setPos(place(trigRef.current, menuRef.current));
      }, [open, groups.length, dir?.status]);
      React.useLayoutEffect(() => {
        if (!hover) { setSubPos(null); return; }
        if (subRef.current && hover.el) setSubPos(place(hover.el, subRef.current, { side: 'right' }));
      }, [hover]);

      const choose = async (patch) => {
        setErr(null);
        setOpen(false);
        try { await settings.save(patch); } catch (e) { setErr(String(e.message || e)); setOpen(true); }
      };
      const pickModel = (group, model, effort) => choose({
        enabled: true, provider: group.id, model: model.id,
        reasoningEffort: effort === undefined ? (model.reasoning?.defaultEffort ?? null) : effort,
      });

      const enterRow = (group, model, el) => {
        clearTimeout(hoverTimer.current);
        if (!model.reasoning?.efforts?.length) { setHover(null); return; }
        hoverTimer.current = setTimeout(() => setHover({ key: `${group.id}/${model.id}`, el, group, model }), 120);
      };
      const leaveRow = () => { clearTimeout(hoverTimer.current); };

      const check = (on) => h('span', { className: 'oadv-check' }, on ? h(IconCheck, { size: 14 }) : null);

      const menu = open ? ReactDOM.createPortal(h('div', {
        ref: menuRef, className: 'oadv-menu', role: 'menu', 'aria-label': t('title'),
        style: pos ? { left: pos.left, top: pos.top } : { left: -9999, top: -9999, visibility: 'hidden' },
        onMouseLeave: () => { clearTimeout(hoverTimer.current); },
      },
      h('div', { className: 'oadv-head' }, t('title'), ' · ', t('hint')),
      err ? h('div', { className: 'oadv-err' }, fill(t('error'), { msg: err })) : null,
      h('button', { type: 'button', role: 'menuitemradio', 'aria-checked': !enabled, className: 'oadv-item', onMouseEnter: () => setHover(null), onClick: () => choose({ enabled: false }) },
        check(!enabled), h('span', { className: 'oadv-item-name' }, t('offItem'))),
      h('button', { type: 'button', role: 'menuitemradio', 'aria-checked': enabled && !own, className: 'oadv-item', onMouseEnter: () => setHover(null), onClick: () => choose({ enabled: true, provider: '', model: '', reasoningEffort: null }) },
        check(enabled && !own), h('span', { className: 'oadv-item-name' }, t('sameItem'))),
      h('div', { className: 'oadv-sep' }),
      dir?.status === 'loading' && !groups.length ? h('div', { className: 'oadv-status' }, t('loading')) : null,
      ...groups.flatMap((group) => [
        h('div', { key: `g:${group.id}`, className: 'oadv-group' }, group.name ?? group.id),
        ...group.models.map((model) => {
          const key = `${group.id}/${model.id}`;
          const selected = enabled && own && st.provider === group.id && st.model === model.id;
          const hasEfforts = !!model.reasoning?.efforts?.length;
          return h('button', {
            key, type: 'button', role: 'menuitemradio', 'aria-checked': selected, 'aria-haspopup': hasEfforts ? 'menu' : undefined,
            className: 'oadv-item', 'data-active': hover?.key === key ? '' : undefined,
            onMouseEnter: (e) => enterRow(group, model, e.currentTarget),
            onMouseLeave: leaveRow,
            onFocus: (e) => enterRow(group, model, e.currentTarget),
            onKeyDown: (e) => { if (e.key === 'ArrowRight' && hasEfforts) { setHover({ key, el: e.currentTarget, group, model }); setTimeout(() => subRef.current?.querySelector('button')?.focus(), 0); } },
            onClick: () => pickModel(group, model),
            disabled: model.available === false,
          },
          check(selected),
          h('span', { className: 'oadv-item-name' }, model.name ?? model.id),
          selected && st.reasoningEffort ? h('span', { className: 'oadv-item-meta' }, effortOf(model, st.reasoningEffort)) : null,
          hasEfforts ? h(IconChevronRight, { size: 12 }) : null);
        }),
      ])), document.body) : null;

      const sub = open && hover ? ReactDOM.createPortal(h('div', {
        ref: subRef, className: 'oadv-sub', role: 'menu', 'aria-label': t('effort'),
        style: subPos ? { left: subPos.left, top: subPos.top } : { left: -9999, top: -9999, visibility: 'hidden' },
        onMouseEnter: () => clearTimeout(hoverTimer.current),
        onKeyDown: (e) => { if (e.key === 'ArrowLeft') { hover.el?.focus(); setHover(null); } },
      },
      h('div', { className: 'oadv-head' }, hover.model.name ?? hover.model.id, ' · ', t('effort')),
      ...(hover.model.reasoning.defaultEffort === undefined ? [h('button', {
        key: 'def', type: 'button', role: 'menuitemradio', className: 'oadv-item',
        'aria-checked': enabled && own && st.provider === hover.group.id && st.model === hover.model.id && !st.reasoningEffort,
        onClick: () => pickModel(hover.group, hover.model, null),
      }, check(enabled && own && st.provider === hover.group.id && st.model === hover.model.id && !st.reasoningEffort), h('span', { className: 'oadv-item-name' }, t('providerDefault')))] : []),
      ...hover.model.reasoning.efforts.map((e) => {
        const on = enabled && own && st.provider === hover.group.id && st.model === hover.model.id
          && (st.reasoningEffort ?? hover.model.reasoning.defaultEffort) === e.id;
        return h('button', { key: e.id, type: 'button', role: 'menuitemradio', 'aria-checked': on, className: 'oadv-item', onClick: () => pickModel(hover.group, hover.model, e.id) },
          check(on), h('span', { className: 'oadv-item-name' }, effortName(e)),
          e.id === hover.model.reasoning.defaultEffort ? h('span', { className: 'oadv-item-meta' }, t('providerDefault')) : null);
      })), document.body) : null;

      return h('div', { ref: rootRef, className: 'oadv-root' },
        h('button', {
          ref: trigRef, type: 'button', className: 'oadv-trigger', 'data-off': enabled ? undefined : '',
          'aria-haspopup': 'menu', 'aria-expanded': open, title: t('title'),
          onClick: () => setOpen((v) => !v),
        },
        h(IconAdvisor, { size: 14 }),
        h('span', { className: 'oadv-label' }, label),
        effortLabel ? h('span', { className: 'oadv-effort' }, effortLabel) : null,
        h(IconChevronDown, { size: 12 })),
        menu, sub);
    }

    return {
      inject: ['slots', 'locale', 'sessions', 'modelDirectories'],
      apply(ctx) {
        ctx.effect(() => ctx.locale.register(NS, { en, zh }), 'omp-advisor: dictionaries');
        ctx.slots.inject('conversation.input.right', () => ctx.slots.register({
          name: 'conversation.input.right',
          id: 'omp-advisor',
          order: 50,
          locale: NS,
          inject: (sessionId) => {
            const directory = ctx.modelDirectories.directoryFor(sessionId);
            // Read-only use of the directory: the advisor never calls directory.select (that would
            // switch the agent's own model).
            return { directory: directory.store, load: () => { directory.load().catch(() => {}); } };
          },
        }, AdvisorPicker));
      },
    };
  },
});