// =========================================================
// INBOX WORKSPACE V2 — Phase 20
// -----------------------------------------------------------------
// Global attention / triage layer. Three peer views:
//   Needs Action  · Waiting  · History
//
// Depth cap: no Inbox Detail route. On wide desktop, the selected
// item renders a contextual preview alongside the list. Primary
// actions route to the CANONICAL Detail page.
//
// Reads exclusively from data.inboxItems[]. Every item references
// a canonical target (design / doc / decision / research / feature /
// contract / stage / work / dev). Nothing is duplicated.
// =========================================================

const IB_STATE = {
  'needs-action': { tone: 'yellow', label: 'Needs action' },
  'waiting':      { tone: 'blue',   label: 'Waiting'      },
  'resolved':     { tone: 'green',  label: 'Resolved'     },
};

// Neutral mono short codes — the brief bans rainbow-per-type.
const IB_KIND = {
  review:            { short: 'REVIEW',  verb: 'requested your review'   },
  approval:          { short: 'APPROVE', verb: 'requested approval'      },
  decision:          { short: 'DECIDE',  verb: 'needs your input'        },
  'blocked-by-you':  { short: 'BLOCK',   verb: 'is blocked by you'       },
  stage:             { short: 'STAGE',   verb: 'is ready for completion' },
  'client-approval': { short: 'CLIENT',  verb: 'requires your response'  },
  'doc-review':      { short: 'REVIEW',  verb: 'requested document review' },
  question:          { short: 'QUERY',   verb: 'asked you a question'    },
};

// The primary CTA verb per targetType.
const IB_PRIMARY = {
  design:              'Review design',
  doc:                 'Review document',
  decision:            'Open decision',
  research:            'Open study',
  feature:             'Open feature',
  contract:            'Open contract',
  'contract-milestone':'Open milestone',
  stage:               'Review stage',
  work:                'Open work',
  dev:                 'Open system',
};

const IB_KIND_ICON = {
  design: 'palette', doc: 'files', decision: 'decisions',
  research: 'flask', feature: 'features',
  contract: 'contracts', 'contract-milestone': 'wallet',
  stage: 'stages', work: 'work', dev: 'terminal',
};

function ibStateChip(state, size = 'sm') {
  const s = IB_STATE[state];
  if (!s) return null;
  return <Label tone={s.tone} dot size={size}>{s.label}</Label>;
}

function ibPortrait(name) {
  const projs = Object.values(window.MYGENI_PROJECT_DATA || {});
  for (const p of projs) {
    const hit = (p.people || {})[(name || '').toLowerCase()];
    if (hit?.portrait) return hit.portrait;
  }
  return null;
}

function ibProject(pid) {
  return window.MYGENI_PROJECT_DATA?.[pid];
}

// Canonical Detail route for an inbox item's target.
function ibTargetHref(item) {
  const p = ibProject(item.targetProject);
  if (!p) return null;
  const t = item.targetType, r = item.targetRef;
  if (t === 'design')             return `#/projects/${p.id}/design/item/${r}`;
  if (t === 'doc')                return `#/projects/${p.id}/documents/doc/${r}`;
  if (t === 'decision')           return `#/decisions/dec/${r}`;
  if (t === 'research')           return `#/projects/${p.id}/research/study/${r}`;
  if (t === 'feature')            return `#/projects/${p.id}/features/${r}`;
  if (t === 'contract')           return `#/projects/${p.id}/commercial/contract/${r}`;
  if (t === 'contract-milestone') return `#/projects/${p.id}/commercial/contract/${String(r).split(':')[0]}`;
  if (t === 'stage')              return `#/projects/${p.id}/plan`;
  if (t === 'work')               return `#/my-work/item/${r}`;
  if (t === 'dev')                return `#/projects/${p.id}/development/system/${r}`;
  return null;
}

// Resolve canonical inline context per item — Project code + stage +
// mission + feature/target. Rendered as a single grey line under the
// title, safe inside anchor rows.
function ibInlineContext(item) {
  const p = ibProject(item.targetProject);
  if (!p) return null;
  const parts = [p.code];

  // Try to pick up a stage number from linked canonical items.
  let stageN = null, missionKey = null, featureId = null;
  if (item.targetType === 'design') {
    const d = p.design?.screens?.find(s => s.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  } else if (item.targetType === 'doc') {
    const d = p.documents?.find(x => x.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  } else if (item.targetType === 'decision') {
    const d = (window.MYGENI_DATA?.decisions || []).find(x => x.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  } else if (item.targetType === 'research') {
    const d = p.research?.find(x => x.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  } else if (item.targetType === 'work') {
    const d = (window.MYGENI_DATA?.workItems || []).find(x => x.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  } else if (item.targetType === 'stage') {
    stageN = item.targetRef;
  } else if (item.targetType === 'contract-milestone') {
    const [cid, msid] = String(item.targetRef).split(':');
    const c = (window.MYGENI_DATA?.contracts || []).find(x => x.id === cid);
    const ms = c?.stageLinks?.find(x => x.id === msid);
    if (ms) stageN = ms.stage;
  } else if (item.targetType === 'dev') {
    const d = p.dev?.systems?.find(x => x.id === item.targetRef);
    if (d) { stageN = d.links?.stage; missionKey = d.links?.mission; featureId = d.links?.feature; }
  }

  const stage = stageN && p.stages?.find(s => s.n === stageN);
  const mission = missionKey && (window.MYGENI_MISSIONS || {})[missionKey];
  const feature = featureId && p.features?.find(f => f.id === featureId);

  if (stage)   parts.push(`S${String(stage.n).padStart(2,'0')} · ${stage.name}`);
  if (mission) parts.push(mission.label);
  if (feature) parts.push(feature.title);
  return parts;
}

// -----------------------------------------------------------------
// Contextual preview dispatcher — REUSES existing previews.
// Never draws Inbox-specific visual content per brief §29.
// -----------------------------------------------------------------
function IBPreview({ item }) {
  const p = ibProject(item.targetProject);
  if (!p) return null;

  if (item.targetType === 'design') {
    const d = p.design?.screens?.find(s => s.id === item.targetRef);
    if (!d) return null;
    return (
      <div className="ib-prev-frame">
        <div className="ib-prev-inner">
          {window.DVMock ? <DVMock kind={d.kind} /> : null}
        </div>
      </div>
    );
  }

  if (item.targetType === 'doc') {
    const doc = p.documents?.find(x => x.id === item.targetRef);
    if (!doc) return null;
    return (
      <div className="ib-prev-frame">
        <div className="ib-prev-inner ib-prev-inner-doc">
          {window.DXPreview ? <DXPreview doc={doc} /> : null}
        </div>
      </div>
    );
  }

  if (item.targetType === 'decision') {
    const dec = (window.MYGENI_DATA?.decisions || []).find(x => x.id === item.targetRef);
    if (!dec) return null;
    const evN = (dec.evidence || []).length;
    const optN = (dec.options || []).length;
    return (
      <div className="ib-prev-decision">
        <div className="dv-eyebrow">Decision · question</div>
        <p className="ib-prev-decision-q">{dec.question || dec.title}</p>
        <div className="ib-prev-decision-facts">
          <div className="ib-prev-fact">
            <span className="dv-eyebrow">Evidence</span>
            <b>{evN} linked items</b>
          </div>
          <div className="ib-prev-fact">
            <span className="dv-eyebrow">Options</span>
            <b>{optN} considered</b>
          </div>
          <div className="ib-prev-fact">
            <span className="dv-eyebrow">Type</span>
            <b>{dec.type ? dec.type.charAt(0).toUpperCase() + dec.type.slice(1) : '—'}</b>
          </div>
        </div>
      </div>
    );
  }

  if (item.targetType === 'contract-milestone') {
    const [cid, msid] = String(item.targetRef).split(':');
    const c = (window.MYGENI_DATA?.contracts || []).find(x => x.id === cid);
    const ms = c?.stageLinks?.find(x => x.id === msid);
    if (!ms) return null;
    const stage = p.stages?.find(s => s.n === ms.stage);
    return (
      <div className="ib-prev-milestone">
        <div className="dv-eyebrow">Contract milestone</div>
        <div className="ib-prev-ms-title">{ms.label}</div>
        <div className="ib-prev-ms-body">
          <div className="ib-prev-ms-tile">
            <div className="dv-eyebrow">Stage</div>
            <b className="mono">S{String(ms.stage).padStart(2,'0')}</b>
            <span>{stage?.name}</span>
          </div>
          {ms.amount && (
            <div className="ib-prev-ms-tile">
              <div className="dv-eyebrow">Amount</div>
              <b className="mono">{ms.amount}</b>
            </div>
          )}
          <div className="ib-prev-ms-tile">
            <div className="dv-eyebrow">Due</div>
            <b>{ms.date}</b>
          </div>
          <div className="ib-prev-ms-tile">
            <div className="dv-eyebrow">Contract</div>
            <b className="mono">{c.id}</b>
          </div>
        </div>
      </div>
    );
  }

  if (item.targetType === 'contract') {
    const c = (window.MYGENI_DATA?.contracts || []).find(x => x.id === item.targetRef);
    if (!c) return null;
    return (
      <div className="ib-prev-milestone">
        <div className="dv-eyebrow">Contract</div>
        <div className="ib-prev-ms-title">{c.title}</div>
        <div className="ib-prev-ms-body">
          <div className="ib-prev-ms-tile">
            <div className="dv-eyebrow">Status</div>
            <b>{c.status}</b>
          </div>
          <div className="ib-prev-ms-tile">
            <div className="dv-eyebrow">Value</div>
            <b className="mono">{c.value}</b>
          </div>
        </div>
      </div>
    );
  }

  if (item.targetType === 'stage') {
    const stage = p.stages?.find(s => s.n === item.targetRef);
    if (!stage) return null;
    const readiness = window.stageReadiness ? window.stageReadiness(stage) : { percent: 0, remaining: {} };
    return (
      <div className="ib-prev-stage">
        <div className="dv-eyebrow">Stage completion</div>
        <div className="ib-prev-stage-title">
          <span className="mono">S{String(stage.n).padStart(2,'0')}</span>
          <span>{stage.name}</span>
        </div>
        <div className="ib-prev-stage-bar">
          <div className="ib-prev-stage-fill" style={{ width: `${readiness.percent}%` }} />
        </div>
        <div className="ib-prev-stage-facts">
          <span className="mono">{readiness.percent}%</span>
          <span>ready</span>
          {readiness.remaining?.checks > 0 && <>
            <span className="dot-sep">·</span>
            <span>{readiness.remaining.checks} required checks left</span>
          </>}
        </div>
      </div>
    );
  }

  if (item.targetType === 'research') {
    const r = p.research?.find(x => x.id === item.targetRef);
    if (!r) return null;
    return (
      <div className="ib-prev-research">
        <div className="dv-eyebrow">Research study · {r.type}</div>
        <div className="ib-prev-research-title">{r.title}</div>
        {r.question && <p className="ib-prev-research-q">{r.question}</p>}
        <div className="ib-prev-research-facts">
          <span>{r.participants || 0} participants</span>
          <span className="dot-sep">·</span>
          <span>Status {r.status}</span>
        </div>
      </div>
    );
  }

  if (item.targetType === 'work') {
    const w = (window.MYGENI_DATA?.workItems || []).find(x => x.id === item.targetRef);
    if (!w) return null;
    return (
      <div className="ib-prev-work">
        <div className="dv-eyebrow">Work item</div>
        <div className="ib-prev-work-title">{w.title}</div>
        {w.outcome && <p className="ib-prev-work-outcome">{w.outcome}</p>}
      </div>
    );
  }

  if (item.targetType === 'dev') {
    const sys = p.dev?.systems?.find(x => x.id === item.targetRef);
    if (!sys) return null;
    return (
      <div className="ib-prev-work">
        <div className="dv-eyebrow">System</div>
        <div className="ib-prev-work-title">{sys.name}</div>
        {sys.purpose && <p className="ib-prev-work-outcome">{sys.purpose}</p>}
      </div>
    );
  }

  return null;
}

// -----------------------------------------------------------------
// ROW — structured, portrait + action phrase + target title
// -----------------------------------------------------------------
function IBRow({ item, selected, onSelect, dense = false }) {
  const project = ibProject(item.targetProject);
  const kind = IB_KIND[item.kind] || { short: 'ATTN', verb: 'requires attention' };
  const inline = ibInlineContext(item);
  const primaryHref = ibTargetHref(item);

  const requesterLabel = item.requesterOrg
    ? `${item.requester} · ${item.requesterOrg}`
    : item.requester;

  const actionPhrase = item.direction === 'outgoing' && item.waitingOn
    ? <>Waiting for <b>{item.waitingOn}</b></>
    : <><b>{requesterLabel}</b> {kind.verb}</>;

  return (
    <button
      type="button"
      className={`ib-row${selected ? ' selected' : ''}${item.priority === 'now' ? ' urgent' : ''}${dense ? ' ib-row-dense' : ''}`}
      onClick={() => onSelect(item.id)}
    >
      <Avatar name={item.direction === 'outgoing' ? item.waitingOn : item.requester}
              size="sm"
              portrait={ibPortrait(item.direction === 'outgoing' ? item.waitingOn : item.requester)} />
      <div className="ib-row-main">
        <div className="ib-row-head">
          <span className="ib-kind mono">{kind.short}</span>
          <span className="ib-row-action">{actionPhrase}</span>
        </div>
        <div className="ib-row-target">
          <Icon name={IB_KIND_ICON[item.targetType] || 'files'} size={12} strokeWidth={1.75} />
          <span className="ib-row-title">{item.targetTitle}</span>
        </div>
        {item.note && !dense && <div className="ib-row-note">{item.note}</div>}
        <div className="ib-row-context">
          {inline && inline.map((seg, i) => (
            <React.Fragment key={i}>
              {i > 0 && <span className="dot-sep">·</span>}
              <span>{seg}</span>
            </React.Fragment>
          ))}
        </div>
      </div>
      <div className="ib-row-side">
        <span className="ib-since">{item.direction === 'outgoing' ? `waiting ${item.since}` : item.since}</span>
        {primaryHref && (
          <a href={primaryHref} className="ib-row-open" onClick={(e) => e.stopPropagation()}>
            <Icon name="chevronRight" size={12} strokeWidth={2} />
          </a>
        )}
      </div>
    </button>
  );
}

// -----------------------------------------------------------------
// PREVIEW PANEL — contextual, wide-desktop only.
// -----------------------------------------------------------------
function IBPreviewPanel({ item }) {
  if (!item) {
    return (
      <div className="ib-preview ib-preview-empty">
        <div className="ib-preview-empty-icon"><Icon name="inbox" size={22} strokeWidth={1.5} /></div>
        <div className="ib-preview-empty-title">Select an item</div>
        <div className="ib-preview-empty-sub">Pick a request to see its canonical context and the primary action.</div>
      </div>
    );
  }

  const kind = IB_KIND[item.kind] || { short: 'ATTN', verb: 'requires attention' };
  const primaryHref = ibTargetHref(item);
  const primaryLabel = IB_PRIMARY[item.targetType] || 'Open';

  const requesterLabel = item.requesterOrg
    ? `${item.requester} · ${item.requesterOrg}`
    : item.requester;

  const linkedWork = item.workItemLinked
    && (window.MYGENI_DATA?.workItems || []).find(w => w.id === item.workItemLinked);

  return (
    <div className="ib-preview">
      <div className="ib-preview-head">
        <div className="dv-eyebrow">
          <span className="ib-kind mono">{kind.short}</span>
          <span className="dot-sep">·</span>
          <span>{item.direction === 'outgoing' ? 'You initiated' : 'Incoming attention'}</span>
        </div>
        <div className="ib-preview-title">{item.targetTitle}</div>
        <div className="ib-preview-who">
          <Avatar name={item.direction === 'outgoing' ? item.waitingOn : item.requester}
                  size="xs"
                  portrait={ibPortrait(item.direction === 'outgoing' ? item.waitingOn : item.requester)} />
          <span>
            {item.direction === 'outgoing'
              ? <>Waiting on <b>{item.waitingOn}</b></>
              : <><b>{requesterLabel}</b> {kind.verb}</>}
          </span>
          <span className="dot-sep">·</span>
          <span>{item.since}</span>
        </div>
      </div>

      {/* Canonical preview */}
      <IBPreview item={item} />

      {/* Reason / note */}
      {item.note && (
        <div className="ib-preview-note">
          <div className="dv-eyebrow">Why it needs attention</div>
          <p>{item.note}</p>
        </div>
      )}

      {item.blocks && (
        <div className="ib-preview-blocks">
          <span className="dv-eyebrow">Blocks</span>
          <span>{item.blocks}</span>
        </div>
      )}

      {item.afterResponse && (
        <div className="ib-preview-after">
          <span className="dv-eyebrow">After response</span>
          <span>{item.afterResponse}</span>
        </div>
      )}

      {/* Actions */}
      <div className="ib-preview-actions">
        {primaryHref && (
          <a href={primaryHref} className="btn btn-primary btn-sm">
            <Icon name="externalLink" size={14} strokeWidth={1.75} />
            <span>{primaryLabel}</span>
          </a>
        )}
        {item.state === 'needs-action' && (
          linkedWork
            ? (
              <a href={`#/my-work/item/${linkedWork.id}`} className="btn btn-white btn-sm">
                <Icon name="work" size={14} strokeWidth={1.75} />
                <span>View in My Work</span>
              </a>
            )
            : (
              <button className="btn btn-white btn-sm">
                <Icon name="plus" size={14} strokeWidth={2} />
                <span>Add to My Work</span>
              </button>
            )
        )}
      </div>
    </div>
  );
}

// =========================================================
// NEEDS ACTION
// =========================================================

function IBNeedsAction({ data }) {
  const items = (data.inboxItems || []).filter(i => i.state === 'needs-action');
  const priorityOrder = { now: 0, soon: 1, later: 2 };
  const sorted = [...items].sort((a, b) => {
    const pa = priorityOrder[a.priority] ?? 3;
    const pb = priorityOrder[b.priority] ?? 3;
    if (pa !== pb) return pa - pb;
    return 0;
  });

  const [selectedId, setSelectedId] = React.useState(sorted[0]?.id || null);
  React.useEffect(() => {
    if (!sorted.find(i => i.id === selectedId) && sorted[0]) setSelectedId(sorted[0].id);
  }, [items.length]);

  const selected = sorted.find(i => i.id === selectedId);

  if (sorted.length === 0) {
    return (
      <div className="ib-empty-caught">
        <div className="ib-empty-mark"><Icon name="check" size={18} strokeWidth={2} /></div>
        <div className="ib-empty-h">You're caught up.</div>
        <div className="ib-empty-sub">Nothing currently needs your response.</div>
        <div className="ib-empty-actions">
          <a href="#/my-work" className="btn btn-white btn-sm">View My Work</a>
          <a href="#/home"    className="btn btn-white btn-sm">Return home</a>
        </div>
      </div>
    );
  }

  // Priority bucket dividers
  const groups = [
    { key: 'now',   label: 'Now',   items: sorted.filter(i => i.priority === 'now') },
    { key: 'soon',  label: 'Soon',  items: sorted.filter(i => i.priority === 'soon') },
    { key: 'later', label: 'Later', items: sorted.filter(i => i.priority === 'later') },
  ].filter(g => g.items.length > 0);

  return (
    <div className="ib-split">
      <div className="ib-list-col">
        {groups.map(g => (
          <div key={g.key} className="ib-group">
            <div className="ib-group-h">
              <span>{g.label}</span>
              <span className="mono">{g.items.length}</span>
            </div>
            <div className="ib-list">
              {g.items.map(item => (
                <IBRow key={item.id}
                       item={item}
                       selected={item.id === selectedId}
                       onSelect={setSelectedId} />
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="ib-preview-col">
        <IBPreviewPanel item={selected} />
      </div>
    </div>
  );
}

// =========================================================
// WAITING
// =========================================================

function IBWaiting({ data }) {
  const items = (data.inboxItems || []).filter(i => i.state === 'waiting');
  const [selectedId, setSelectedId] = React.useState(items[0]?.id || null);
  const selected = items.find(i => i.id === selectedId);

  if (items.length === 0) {
    return (
      <div className="ib-empty-caught">
        <div className="ib-empty-mark"><Icon name="check" size={18} strokeWidth={2} /></div>
        <div className="ib-empty-h">Nothing outstanding.</div>
        <div className="ib-empty-sub">You aren't waiting on anyone right now.</div>
      </div>
    );
  }

  return (
    <div className="ib-split">
      <div className="ib-list-col">
        <div className="ib-note">
          <Icon name="clock" size={12} strokeWidth={1.75} />
          <span>Requests you've made or reviews you initiated. The next move belongs to someone else.</span>
        </div>
        <div className="ib-list">
          {items.map(item => (
            <IBRow key={item.id} item={item}
                   selected={item.id === selectedId}
                   onSelect={setSelectedId} />
          ))}
        </div>
      </div>
      <div className="ib-preview-col">
        <IBPreviewPanel item={selected} />
      </div>
    </div>
  );
}

// =========================================================
// HISTORY
// =========================================================

function IBHistory({ data }) {
  const items = (data.inboxItems || []).filter(i => i.state === 'resolved');

  if (items.length === 0) {
    return (
      <div className="ib-empty-caught">
        <div className="ib-empty-h">No history yet.</div>
        <div className="ib-empty-sub">Resolved requests will appear here for traceability.</div>
      </div>
    );
  }

  return (
    <div className="ib-history">
      <div className="ib-list ib-history-list">
        {items.map(item => {
          const primaryHref = ibTargetHref(item);
          const kind = IB_KIND[item.kind] || { short: 'ATTN' };
          return (
            <a key={item.id} href={primaryHref || '#'}
               className="ib-history-row"
               onClick={(e) => { if (!primaryHref) e.preventDefault(); }}>
              <div className="ib-history-check">
                <Icon name="check" size={11} strokeWidth={2.5} />
              </div>
              <div className="ib-history-body">
                <div className="ib-history-head">
                  <span className="ib-kind mono">{kind.short}</span>
                  <span className="ib-history-resolution">{item.resolution || 'Resolved'}</span>
                </div>
                <div className="ib-history-title">{item.targetTitle}</div>
                <div className="ib-history-sub">
                  <span>Requested by {item.requester}</span>
                  <span className="dot-sep">·</span>
                  <span>Resolved by {item.resolvedBy || item.recipient}</span>
                  <span className="dot-sep">·</span>
                  <span>{item.resolvedAt}</span>
                </div>
              </div>
              <Icon name="chevronRight" size={13} strokeWidth={2} style={{ color: 'var(--text-tertiary)', flex: 'none' }} />
            </a>
          );
        })}
      </div>
    </div>
  );
}

// =========================================================
// ROUTER SHELL
// -----------------------------------------------------------------
// Sub-route shape:
//   /inbox            → Needs Action (default)
//   /inbox/waiting    → Waiting
//   /inbox/history    → History
// (No Detail route — primary action routes to canonical Detail.)
// =========================================================

function InboxWorkspaceV2({ data, subId }) {
  const view = subId === 'waiting' ? 'waiting'
             : subId === 'history' ? 'history'
             : 'needs-action';

  const setView = (v) => {
    location.hash = v === 'needs-action' ? '#/inbox' : `#/inbox/${v}`;
  };

  const items = data.inboxItems || [];
  const needsN   = items.filter(i => i.state === 'needs-action').length;
  const waitingN = items.filter(i => i.state === 'waiting').length;

  return (
    <main className="main ib-root" data-screen-label={`Inbox · ${view}`}>
      <div className="mw-head">
        <div>
          <h1 className="mw-h1">Inbox</h1>
          <p className="mw-h1-sub">Attention, not noise. Reviews, approvals, decisions, and blockers that need your response — with a direct path to the canonical work.</p>
        </div>
        <div className="mw-head-right">
          <div className="dv-seg" role="tablist" aria-label="Inbox views">
            {[
              { k: 'needs-action', label: 'Needs Action', n: needsN },
              { k: 'waiting',      label: 'Waiting',      n: waitingN },
              { k: 'history',      label: 'History',      n: null },
            ].map(t => (
              <button key={t.k}
                      role="tab"
                      aria-selected={view === t.k}
                      className={`dv-seg-btn${view === t.k ? ' active' : ''}`}
                      onClick={() => setView(t.k)}>
                <span>{t.label}</span>
                {t.n != null && t.n > 0 && <span className="ib-seg-n">{t.n}</span>}
              </button>
            ))}
          </div>
        </div>
      </div>

      {view === 'needs-action' && <IBNeedsAction data={data} />}
      {view === 'waiting'      && <IBWaiting     data={data} />}
      {view === 'history'      && <IBHistory     data={data} />}
    </main>
  );
}

Object.assign(window, {
  InboxWorkspaceV2,
  IBRow, IBPreview,
});