/* screens-engagements.jsx - unified engagement list (Overview) + managed-service command center.
   Overview content is rendered inside EngagementsScreen (screens-ops.jsx). The command center
   (ManagedEngagementDetail) is self-wrapped and reached via the route engagement/<id>. */
const DSeng = window.Stand8DesignSystem_b5c975;

// Unified rows: managed-service engagements + staff-aug singles (engagements without a projectId).
function engRows() {
  const D = window.E8DATA;
  const managed = (D.managedEngagements || []).map((m) => ({
    _kind: 'managed', id: m.id, cid: null, name: m.name, client: m.client, type: 'Managed service',
    team: m.team.length, poBurn: m.poBurn.pct, csat: m.csat ? m.csat.score : null,
    healthTone: m.health.tone, healthLabel: m.health.tone === 'success' ? 'Healthy' : 'At risk',
  }));
  const singles = (D.engagements || []).filter((e) => !e.projectId).map((e) => ({
    _kind: 'single', id: e.id, cid: e.cid, name: e.consultant, client: e.client, type: 'Staff aug',
    team: 1, poBurn: e.poBurn, csat: null,
    healthTone: (e.po === 'expired' || e.po === 'expiring') ? 'danger' : (e.po === 'depleting' ? 'warning' : 'success'),
    healthLabel: (e.renewal && e.renewal !== 'Not due') ? ('Renewal: ' + e.renewal) : 'Healthy',
  }));
  return managed.concat(singles);
}

const ENG_COLS = [
  { key: 'name', label: 'Engagement', locked: true, width: 260, minWidth: 180, maxWidth: 480, render: (r) => (
    <span><span style={{ fontWeight: 600 }}>{r.name}</span>
      <span style={{ display: 'block', fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)' }}>{r.client}</span></span>
  ) },
  { key: 'type', label: 'Type', width: 150, minWidth: 120, maxWidth: 240, render: (r) => (
    <DSeng.Badge tone={r.type === 'Managed service' ? 'accent' : 'neutral'}>{r.type}</DSeng.Badge>
  ) },
  { key: 'team', label: 'Team', width: 80, minWidth: 64, maxWidth: 140, render: (r) => r.team },
  { key: 'poBurn', label: 'PO burn', width: 170, minWidth: 140, maxWidth: 260, render: (r) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, width: '100%' }}>
      <DSeng.Progress value={r.poBurn} soft={r.poBurn < 50} style={{ minWidth: 0 }} />
      <span className="tnum" style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-secondary)' }}>{r.poBurn}%</span></span>
  ) },
  { key: 'csat', label: 'CSAT', width: 80, minWidth: 70, maxWidth: 140, render: (r) => r.csat == null ? <span style={{ color: 'var(--ui-text-tertiary)' }}>-</span> : r.csat },
  { key: 'health', label: 'Health', width: 180, minWidth: 130, maxWidth: 320, render: (r) => (
    <DSeng.Badge tone={r.healthTone} dot>{r.healthLabel}</DSeng.Badge>
  ) },
];

// Portfolio rollup across all managed-service programs + staff-aug placements.
function portfolioStats() {
  const D = window.E8DATA;
  const managed = D.managedEngagements || [];
  const engs = D.engagements || [];
  const tcv = managed.reduce((s, m) => s + ((m.contract && m.contract.tcvNum) || 0), 0);
  const atRisk = managed.filter((m) => m.health && m.health.tone !== 'success').length;
  const csatVals = managed.filter((m) => m.csat).map((m) => m.csat.score);
  const csatAvg = csatVals.length ? (csatVals.reduce((a, b) => a + b, 0) / csatVals.length) : null;
  const marginVals = managed.filter((m) => m.margin).map((m) => m.margin.pct);
  const marginAvg = marginVals.length ? Math.round(marginVals.reduce((a, b) => a + b, 0) / marginVals.length) : null;
  const poRisk = engs.filter((e) => e.po === 'expiring' || e.po === 'expired').length;
  return {
    tcv: '$' + (tcv / 1000000).toFixed(1) + 'M', programs: managed.length, atRisk,
    deployed: engs.length, margin: marginAvg == null ? '-' : marginAvg + '%',
    csat: csatAvg == null ? '-' : csatAvg.toFixed(1), poRisk,
  };
}

function PortfolioBand() {
  const ps = portfolioStats();
  const cells = [
    { v: ps.tcv, l: 'TCV under management' },
    { v: ps.programs, l: ps.atRisk ? ps.atRisk + ' at risk' : 'all healthy', sub: 'Programs' },
    { v: ps.deployed, l: 'Consultants deployed' },
    { v: ps.margin, l: 'Blended margin' },
    { v: ps.csat, l: 'Aggregate CSAT' },
    { v: ps.poRisk, l: 'POs at risk', warn: ps.poRisk > 0 },
  ];
  const Kpi = window.KpiCard;
  return (
    <div className="e8-eng-portfolio">
      {cells.map((c, i) => (
        <Kpi key={i} label={c.sub ? c.sub + ' · ' + c.l : c.l} value={c.v} valueColor={c.warn ? 'var(--ui-warning-text)' : undefined} labelWrap />
      ))}
    </div>
  );
}

// The Overview list content (no wrapper) - placed inside EngagementsScreen's e8-page.
function EngagementsOverview() {
  const { density } = React.useContext(E8Ctx);
  const [filter, setFilter] = React.useState('all');
  const all = engRows();
  const rows = all.filter((r) => filter === 'all' || (filter === 'managed' ? r._kind === 'managed' : r._kind === 'single'));
  const counts = { all: all.length, managed: all.filter((r) => r._kind === 'managed').length, single: all.filter((r) => r._kind === 'single').length };
  const go = (r) => r._kind === 'managed' ? navigate('engagement/' + r.id) : (r.cid ? navigate('consultant/' + r.cid) : null);
  return (
    <React.Fragment>
      <PortfolioBand />
      <ConfigurableTable
        listKey="engagements"
        empty={<div style={{ maxWidth: 460, margin: '24px auto' }}><DSeng.EmptyState icon="hub" title="No engagements yet" body="Managed-service programs and staff-aug placements appear here once a job order fills." /></div>}
        registry={ENG_COLS}
        rows={rows}
        density={density}
        onRowClick={go}
        toolbar={
          <DSeng.SubTabs
            items={[
              { id: 'all', label: 'All', count: counts.all },
              { id: 'managed', label: 'Managed service', count: counts.managed },
              { id: 'single', label: 'Staff aug', count: counts.single },
            ]}
            active={filter}
            onChange={setFilter}
          />
        }
      />
    </React.Fragment>
  );
}

/* ----------------------------- Command center ----------------------------- */

function EngHealthRing({ score, tone }) {
  const color = tone === 'success' ? 'var(--ui-success)' : tone === 'danger' ? 'var(--ui-danger)' : 'var(--ui-warning)';
  return (
    <div className="e8-ring" style={{ background: 'conic-gradient(' + color + ' 0 ' + score + '%, var(--ui-fill) ' + score + '% 100%)' }}>
      <div className="e8-ring-in"><b>{score}</b><span>HEALTH</span></div>
    </div>
  );
}

function EngFactorBar({ f }) {
  const color = f.tone === 'success' ? 'var(--ui-success)' : f.tone === 'danger' ? 'var(--ui-danger)' : 'var(--ui-warning)';
  const pos = f.contribution >= 0;
  return (
    <div className="e8-eng-factor">
      <span className="e8-eng-factor-n">{f.label}</span>
      <span className="e8-eng-factor-bar"><span style={{ width: f.pct + '%', background: color }} /></span>
      <span className="e8-eng-factor-v" style={{ color: pos ? 'var(--ui-success-text)' : 'var(--ui-danger-text)' }}>{pos ? '+' : ''}{f.contribution}</span>
    </div>
  );
}

// Tiny inline SVG sparkline for a numeric history (e.g. health over time). No chart-lib dependency.
// Mirrors the 3px inset of E8Charts.Sparkline (charts.jsx); kept separate - bare polyline, no area/dot.
function engSparkline(data, color) {
  if (!data || data.length < 2) return null;
  const w = 130, h = 30, pad = 3, mx = Math.max.apply(null, data), mn = Math.min.apply(null, data);
  const span = (mx - mn) || 1;
  const pts = data.map((v, i) => (pad + (i / (data.length - 1)) * (w - pad * 2)).toFixed(1) + ',' + (h - pad - ((v - mn) / span) * (h - pad * 2)).toFixed(1)).join(' ');
  return (
    <svg viewBox={'0 0 ' + w + ' ' + h} preserveAspectRatio="none" height={h} style={{ overflow: 'visible', display: 'block', flex: '1 1 auto', minWidth: 0, maxWidth: w }} aria-hidden="true">
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

const ENG_SECTIONS = [
  { id: 'briefing', label: 'Weekly briefing' },
  { id: 'factors', label: 'Health factors' },
  { id: 'forecast', label: 'PO burn & ledger' },
  { id: 'csat', label: 'Customer CSAT' },
  { id: 'team', label: 'Team roster' },
  { id: 'economics', label: 'Economics' },
  { id: 'utilization', label: 'Team utilization' },
  { id: 'actions', label: 'Next best actions' },
  { id: 'timeline', label: 'Roll-on / roll-off' },
  { id: 'whitespace', label: 'Account whitespace' },
  { id: 'deliverables', label: 'Deliverables / SLA' },
];
const ENG_SECTION_IDS = ENG_SECTIONS.map((s) => s.id);

function EngSectionsMenu({ lay }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);
  const toggle = (sid) => lay.hidden.has(sid) ? lay.add(sid) : lay.remove(sid);
  return (
    <div className="e8-colswrap" ref={ref}>
      <DSeng.Button variant="ghost" size="sm" icon="tune" onClick={() => setOpen(!open)}>Customize</DSeng.Button>
      {open ? (
        <div className="e8-colsmenu" role="menu">
          <div className="e8-colsmenu-h">Show sections</div>
          {ENG_SECTIONS.map((s) => (
            <div key={s.id} className="e8-colsmenu-row">
              <label className="e8-colsmenu-lab">
                <input type="checkbox" checked={!lay.hidden.has(s.id)} onChange={() => toggle(s.id)} />
                <span>{s.label}</span>
              </label>
            </div>
          ))}
          <button type="button" className="e8-colsmenu-reset" onClick={lay.reset}>Reset to default</button>
        </div>
      ) : null}
    </div>
  );
}

function ManagedEngagementDetail({ id }) {
  const D = window.E8DATA;
  const m = (D.managedEngagements || []).find((x) => x.id === id);
  const { showToast } = React.useContext(E8Ctx);
  const cap = React.useContext(window.CaptureCtx);
  const lay = useDashLayout('e8-eng-layout-v2', ENG_SECTION_IDS, ENG_SECTION_IDS);
  const vis = (sid) => !lay.hidden.has(sid);
  /* R104 T2: re-render when a note lands so the activity feed updates in place. */
  const [, setEngTick] = React.useState(0);
  React.useEffect(() => (window.E8Events ? window.E8Events.subscribe(['store:changed'], () => setEngTick((t) => t + 1)) : undefined), []);
  if (!m) {
    return (
      <React.Fragment>
        <Topbar crumbs={[{ label: 'Engagements', to: 'engagements' }, { label: 'Not found' }]} />
        <div className="e8-content"><div className="e8-page">
          <DSeng.EmptyState icon="search_off" title="Engagement not found" body="This managed-service engagement does not exist." />
        </div></div>
      </React.Fragment>
    );
  }
  const act = (label) => showToast ? showToast(label + ' (prototype)') : null;
  const confTone = (c) => c === 'high' ? 'success' : c === 'med' ? 'warning' : 'neutral';
  const confLabel = (c) => c === 'high' ? 'High' : c === 'med' ? 'Med' : 'Low';
  const tlCols = '140px repeat(' + m.timeline.quarters.length + ', minmax(46px, 1fr))';
  const runDry = m.poBurn.forecast.gap && m.poBurn.forecast.gap !== 'on track';
  const openEngNote = () => (cap ? cap.open({ target: 'note', entityLabel: m.name, refType: 'engagement', refId: m.id }) : null);
  /* R104 T2: one activity feed for the engagement - a couple of derived milestones + its own notes. */
  const engBase = [
    { id: 'eng-brief', when: 'This week', actor: 'ELEV8', ai: true, prov: 'drafted', title: 'Weekly briefing drafted', body: m.briefing ? m.briefing.text : null },
    { id: 'eng-start', when: 'SOW start', actor: m.owner, ai: false, prov: 'human', title: m.name + ' engagement', body: m.team.length + ' consultants · ' + m.contract.tcv + ' TCV · SOW thru ' + m.contract.end },
  ];
  const engNotes = window.e8NoteEvents ? window.e8NoteEvents('engagement', m.id) : [];
  const engTimeline = window.e8MergeEvents ? window.e8MergeEvents(engBase.concat(engNotes)) : engBase;
  const EngTimeline = window.Timeline;

  return (
    <React.Fragment>
      <Topbar
        crumbs={[{ label: 'Engagements', to: 'engagements' }, { label: m.name }]}
        actions={<React.Fragment><EngSectionsMenu lay={lay} /><DSeng.Button variant="ghost" size="sm" icon="note_add" onClick={openEngNote}>Add note</DSeng.Button><DSeng.Button variant="primary" size="sm" icon="ios_share" onClick={() => act('Share briefing')}>Share briefing</DSeng.Button></React.Fragment>}
      />
      <div className="e8-content">
        <div className="e8-page">

          {/* Header */}
          <div className="e8-card e8-eng-hd" style={{ marginBottom: 14 }}>
            <EngHealthRing score={m.health.score} tone={m.health.tone} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                <h1 className="e8-h1">{m.name}</h1>
                <DSeng.Badge tone="accent">Managed service</DSeng.Badge>
                {m.health.tone !== 'success'
                  ? <DSeng.Badge tone={m.health.tone === 'danger' ? 'danger' : 'warning'}>At risk</DSeng.Badge>
                  : <DSeng.Badge tone="success" dot>Healthy</DSeng.Badge>}
              </div>
              <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-secondary)', marginTop: 6 }}>{m.team.length} consultants · {m.contract.tcv} TCV · SOW thru {m.contract.end} · health {m.health.delta >= 0 ? '+' : ''}{m.health.delta} this month</div>
              <div style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)', marginTop: 4 }}>Owner {m.owner} · CSM {m.csm} · Sponsor {m.sponsor}</div>
            </div>
            {m.health.history ? (
              /* The 6-mo trend is its own right-aligned zone: it fills the card's dead right side
                 instead of wedging a fifth row under the owner line. */
              <div className="e8-eng-hd-trend">
                <span className="e8-eng-hd-trend-l">Health trend · 6 mo</span>
                {engSparkline(m.health.history, m.health.delta >= 0 ? 'var(--ui-success)' : 'var(--ui-danger)')}
              </div>
            ) : null}
          </div>

          {/* Briefing + factors */}
          {(vis('briefing') || vis('factors')) ? (
          <div className="e8-eng-2col" style={{ marginBottom: 14 }}>
            {vis('briefing') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span className="e8-sectionlabel">Weekly briefing</span>
                <DSeng.ProvenanceBadge kind="drafted" />
              </div>
              <p style={{ margin: 0, fontSize: 'var(--ui-text-base)', lineHeight: 1.55, color: 'var(--ui-text)', textWrap: 'pretty' }}>{m.briefing.text}</p>
            </div>
            ) : null}
            {vis('factors') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 10 }}>What is driving the score</div>
              {m.health.factors.map((f) => <EngFactorBar key={f.key} f={f} />)}
            </div>
            ) : null}
          </div>
          ) : null}

          {/* PO burn forecast */}
          {vis('forecast') ? (
          <div className="e8-card" style={{ padding: '14px 16px', marginBottom: 14 }}>
            <div className="e8-sectionlabel" style={{ marginBottom: 6 }}>PO burn forecast</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 20 }}>
              <span style={{ fontSize: 'var(--ui-text-3xl)', fontWeight: 650 }}>{m.poBurn.pct}%</span>
              <span style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-secondary)' }}>{m.poBurn.spent} of {m.poBurn.total} · ~{m.poBurn.monthsLeft} mo left</span>
            </div>
            <div className="e8-eng-runway" style={{ '--burn': m.poBurn.forecast.todayPct + '%', '--runway-c': runDry ? 'var(--ui-danger)' : 'var(--ui-success)', '--runway-tint': runDry ? 'var(--ui-danger-tint)' : 'var(--ui-success-tint)' }}>
              <span className="e8-eng-mark" style={{ left: m.poBurn.forecast.todayPct + '%' }}><i style={{ background: runDry ? 'var(--ui-danger)' : 'var(--ui-success)' }} /><b style={{ color: runDry ? 'var(--ui-danger-text)' : 'var(--ui-success-text)' }}>Today {m.poBurn.forecast.todayPct}%</b></span>
              {runDry ? <span className="e8-eng-mark" style={{ left: m.poBurn.forecast.exhaustPct + '%' }}><i style={{ background: 'var(--ui-warning)' }} /><b style={{ color: 'var(--ui-warning-text)' }}>PO exhausts {m.poBurn.forecast.exhaustLabel}</b></span> : null}
              <span className="e8-eng-mark e8-eng-mark-end" style={{ left: '100%' }}><i style={{ background: 'var(--ui-success)' }} /><b style={{ color: 'var(--ui-success-text)' }}>SOW end</b></span>
            </div>
            {runDry
              ? <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-warning-text)', marginTop: 12 }}>At the current run-rate the PO runs dry {m.poBurn.forecast.gap} before the SOW ends. Raise a change order to avoid an unbilled gap.</div>
              : <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-success-text)', marginTop: 12 }}>On track to finish within the SOW term.</div>}
            {(m.poBurn.pos && m.poBurn.pos.length) ? (
              <div className="e8-eng-ledger">
                <div className="e8-eng-ledger-h">
                  <span>Purchase orders</span>
                  <span>Burn {m.poBurn.burnRate} · exhausts {m.poBurn.exhaustDate}</span>
                </div>
                {m.poBurn.pos.map((po) => (
                  <div key={po.id} className="e8-eng-po">
                    <span className="e8-eng-po-name">{po.label}</span>
                    <span className="e8-eng-po-bar"><span style={{ width: po.consumedPct + '%', background: po.state === 'exhausted' ? 'var(--ui-text-tertiary)' : po.consumedPct >= 85 ? 'var(--ui-danger)' : po.consumedPct >= 65 ? 'var(--ui-warning)' : 'var(--ui-success)' }} /></span>
                    <span className="e8-eng-po-amt tnum">{po.consumedPct}% of {po.amount}</span>
                    <DSeng.Badge tone={po.state === 'exhausted' ? 'neutral' : 'success'}>{po.state === 'exhausted' ? 'Spent' : 'Active'}</DSeng.Badge>
                  </div>
                ))}
              </div>
            ) : null}
          </div>
          ) : null}

          {/* Customer CSAT */}
          {vis('csat') && m.csat ? (
          <div className="e8-card" style={{ padding: '14px 16px', marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <span className="e8-sectionlabel">Customer CSAT</span>
              {typeof m.csat.delta === 'number' ? <DSeng.Badge tone={m.csat.delta >= 0 ? 'success' : 'danger'}>{m.csat.delta >= 0 ? '+' : ''}{m.csat.delta}</DSeng.Badge> : null}
            </div>
            <div className="e8-eng-csat">
              <div className="e8-eng-csat-score">
                <span className="e8-eng-csat-big">{m.csat.score}<i>/{m.csat.max}</i></span>
                <span className="e8-eng-csat-meta">{m.csat.responses} responses · {m.csat.responseRate}% response rate · last {m.csat.lastSurvey}</span>
                <span className="e8-eng-csat-note">{m.csat.note}</span>
              </div>
              <div className="e8-eng-csat-chart" role="img" aria-label={'CSAT trend, latest ' + m.csat.score + ' of ' + m.csat.max}>
                {(m.csat.trend || []).map((v, i) => (
                  <div key={i} className="e8-eng-cbar">
                    <span style={{ height: Math.round((v / m.csat.max) * 100) + '%', background: v >= 4.5 ? 'var(--ui-success)' : v >= 4 ? 'var(--ui-warning)' : 'var(--ui-danger)' }} title={v} />
                    <em>{m.csat.trendLabels ? m.csat.trendLabels[i] : ''}</em>
                  </div>
                ))}
              </div>
            </div>
            {(m.csat.surveys && m.csat.surveys.length) ? (
            <div className="e8-eng-surveys">
              {m.csat.surveys.map((s, i) => (
                <div key={i} className="e8-eng-survey">
                  <span className="e8-eng-survey-score" style={{ background: s.score >= 5 ? 'var(--ui-success-tint)' : s.score >= 4 ? 'var(--ui-warning-tint)' : 'var(--ui-danger-tint)', color: s.score >= 5 ? 'var(--ui-success-text)' : s.score >= 4 ? 'var(--ui-warning-text)' : 'var(--ui-danger-text)' }}>{s.score}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 'var(--ui-text-sm)' }}><b>{s.respondent}</b> <span style={{ color: 'var(--ui-text-tertiary)' }}>· {s.role} · {s.date}</span></div>
                    <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-secondary)', marginTop: 2, fontStyle: 'italic' }}>"{s.verbatim}"</div>
                  </div>
                </div>
              ))}
            </div>
            ) : null}
          </div>
          ) : null}

          {/* Team + next actions */}
          {(vis('team') || vis('actions')) ? (
          <div className="e8-eng-2col" style={{ marginBottom: 14 }}>
            {vis('team') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 10 }}>Team · {m.team.length} people</div>
              {m.team.map((p) => {
                const tone = p.sentimentTone || 'neutral';
                const dot = tone === 'success' ? 'var(--ui-success)' : tone === 'danger' ? 'var(--ui-danger)' : 'var(--ui-warning)';
                return (
                  <div key={p.cid} className="e8-eng-mem" {...window.clickableProps(() => navigate('consultant/' + p.cid))}>
                    <DSeng.Avatar name={p.name} size="sm" />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 'var(--ui-text-base)', fontWeight: 600 }}>{p.name}</div>
                      <div style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)' }}>{p.role} · ${p.bill}/hr{p.note ? ' · ' + p.note : ''}</div>
                    </div>
                    <span className="e8-eng-membar"><span style={{ width: p.poBurn + '%', background: p.poBurn >= 90 ? 'var(--ui-danger)' : p.poBurn >= 70 ? 'var(--ui-warning)' : 'var(--ui-success)' }} /></span>
                    <span className="e8-eng-dot" style={{ background: dot }} title={tone} />
                  </div>
                );
              })}
            </div>
            ) : null}
            {vis('actions') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span className="e8-sectionlabel">Next best actions</span>
                <DSeng.ProvenanceBadge kind="advised" />
              </div>
              {m.nextActions.map((a, i) => (
                <div key={i} className="e8-eng-act">
                  <span className="material-symbols-outlined e8-eng-act-ic">{a.icon}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text)' }}>{a.text}</div>
                    <div style={{ fontSize: 'var(--ui-text-xs)', color: 'var(--ui-text-tertiary)' }}>{a.sub}</div>
                  </div>
                  <DSeng.Badge tone={confTone(a.confidence)}>{confLabel(a.confidence)}</DSeng.Badge>
                  <DSeng.Button variant="secondary" size="sm" onClick={() => act(a.cta + ': ' + a.text)}>{a.cta}</DSeng.Button>
                </div>
              ))}
            </div>
            ) : null}
          </div>
          ) : null}

          {/* Economics + utilization */}
          {(vis('economics') || vis('utilization')) ? (
          <div className="e8-eng-2col" style={{ marginBottom: 14 }}>
            {vis('economics') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 12 }}>Economics</div>
              <div className="e8-eng-econ">
                <div className="e8-eng-econ-stat"><b>{m.contract.tcv}</b><span>TCV</span></div>
                <div className="e8-eng-econ-stat"><b>{m.margin.monthly}</b><span>Margin / mo</span></div>
                {m.margin.blendedBill ? <div className="e8-eng-econ-stat"><b>${m.margin.blendedBill}/hr</b><span>Blended bill</span></div> : null}
                {m.margin.blendedPay ? <div className="e8-eng-econ-stat"><b>${m.margin.blendedPay}/hr</b><span>Blended pay</span></div> : null}
              </div>
              {typeof m.margin.target === 'number' ? (
              <div style={{ marginTop: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--ui-text-sm)', marginBottom: 5 }}>
                  <span style={{ color: 'var(--ui-text-tertiary)' }}>Margin {m.margin.pct}% · target {m.margin.target}%</span>
                  <span style={{ fontWeight: 600, color: m.margin.pct >= m.margin.target ? 'var(--ui-success-text)' : 'var(--ui-warning-text)' }}>{m.margin.pct >= m.margin.target ? 'On target' : (m.margin.target - m.margin.pct) + ' pts under'}</span>
                </div>
                <div className="e8-eng-margin-bar"><span style={{ width: Math.min(100, m.margin.pct) + '%' }} /><i style={{ left: Math.min(100, m.margin.target) + '%' }} title={'Target ' + m.margin.target + '%'} /></div>
              </div>
              ) : null}
            </div>
            ) : null}
            {vis('utilization') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 12 }}>Team utilization · last 6 weeks</div>
              <div className="e8-eng-util">
                {m.team.map((p) => (
                  <div key={p.cid} className="e8-eng-util-row">
                    <span className="e8-eng-util-name">{p.name}</span>
                    <span className="e8-eng-util-cells">
                      {(p.utilTrend || []).map((u, i) => (
                        <i key={i} title={u + '% billable'} style={{ background: u >= 90 ? 'var(--ui-success)' : u >= 70 ? 'color-mix(in srgb, var(--ui-success) 55%, var(--ui-surface))' : u >= 40 ? 'color-mix(in srgb, var(--ui-warning) 48%, var(--ui-surface))' : u > 0 ? 'color-mix(in srgb, var(--ui-danger) 55%, var(--ui-surface))' : 'var(--ui-fill)' }} />
                      ))}
                    </span>
                    <span className="e8-eng-util-pct tnum" style={{ color: p.util >= 90 ? 'var(--ui-success-text)' : p.util >= 70 ? 'var(--ui-text-secondary)' : 'var(--ui-warning-text)' }}>{p.util}%</span>
                  </div>
                ))}
              </div>
              <div className="e8-eng-legend" style={{ marginTop: 10 }}>
                <span><i style={{ background: 'var(--ui-success)' }} />Full</span>
                <span><i style={{ background: 'color-mix(in srgb, var(--ui-success) 55%, var(--ui-surface))' }} />High</span>
                <span><i style={{ background: 'color-mix(in srgb, var(--ui-warning) 48%, var(--ui-surface))' }} />Partial</span>
                <span><i style={{ background: 'color-mix(in srgb, var(--ui-danger) 55%, var(--ui-surface))' }} />Bench risk</span>
              </div>
            </div>
            ) : null}
          </div>
          ) : null}

          {/* Roll-on / roll-off timeline */}
          {vis('timeline') ? (
          <div className="e8-card" style={{ padding: '14px 16px', marginBottom: 14 }}>
            <div className="e8-sectionlabel" style={{ marginBottom: 12 }}>Roll-on / roll-off · by quarter</div>
            <div className="e8-eng-tl" style={{ gridTemplateColumns: tlCols }}>
              <div />
              {m.timeline.quarters.map((q) => <div key={q} className="e8-eng-tlh">{q}</div>)}
              {m.timeline.members.map((mem, ri) => (
                <React.Fragment key={ri}>
                  <div className="e8-eng-tlname">{mem.name}</div>
                  {mem.segs.map((s, ci) => <div key={ci} className={'e8-eng-seg ' + s} />)}
                </React.Fragment>
              ))}
            </div>
            <div className="e8-eng-legend">
              <span><i style={{ background: 'var(--ui-accent)' }} />Active</span>
              <span><i style={{ background: 'var(--ui-daybreak)' }} />Ramping</span>
              <span><i style={{ background: 'color-mix(in srgb, var(--ui-danger) 55%, var(--ui-surface))' }} />Rolling off</span>
              <span><i style={{ background: 'var(--ui-fill)' }} />Not on team</span>
            </div>
          </div>
          ) : null}

          {/* Whitespace + deliverables */}
          {(vis('whitespace') || vis('deliverables')) ? (
          <div className="e8-eng-2col">
            {vis('whitespace') ? (
            <div className="e8-card e8-eng-white" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 10 }}>Account whitespace</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ fontSize: 'var(--ui-text-metric)', fontWeight: 700, color: 'var(--ui-accent)' }}>{m.whitespace.count}</span>
                <div style={{ flex: 1, fontSize: 'var(--ui-text-sm)', color: 'var(--ui-text-secondary)' }}>{m.whitespace.note} · <b>{m.whitespace.value}</b></div>
                <DSeng.Button variant="secondary" size="sm" onClick={() => act('See reqs')}>See reqs</DSeng.Button>
              </div>
            </div>
            ) : null}
            {vis('deliverables') ? (
            <div className="e8-card" style={{ padding: '14px 16px' }}>
              <div className="e8-sectionlabel" style={{ marginBottom: 10 }}>Deliverables · SLA</div>
              {m.deliverables.map((d, i) => (
                <div key={i} className="e8-eng-ms">
                  <span className="material-symbols-outlined e8-eng-ms-ic" style={{ fontSize: 15, color: d.state === 'done' ? 'var(--ui-success-text)' : d.state === 'progress' ? 'var(--ui-warning-text)' : 'var(--ui-text-tertiary)' }}>{d.state === 'done' ? 'check_circle' : d.state === 'progress' ? 'pending' : 'radio_button_unchecked'}</span>
                  <span style={{ fontSize: 'var(--ui-text-sm)' }}>{d.label}</span>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--ui-border)', fontSize: 'var(--ui-text-sm)' }}>
                <span style={{ color: 'var(--ui-text-tertiary)' }}>SLA adherence</span><span style={{ fontWeight: 600, color: 'var(--ui-success-text)' }}>{m.sla.pct}%</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, fontSize: 'var(--ui-text-sm)' }}>
                <span style={{ color: 'var(--ui-text-tertiary)' }}>Renewal</span><span style={{ fontWeight: 600 }}>{m.renewal.label}</span>
              </div>
            </div>
            ) : null}
          </div>
          ) : null}

          {/* Activity - one merged feed incl. this engagement's own notes */}
          <div className="e8-card" style={{ padding: '14px 16px', marginTop: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <span className="e8-sectionlabel">Activity</span>
              {EngTimeline ? <DSeng.Button variant="ghost" size="sm" icon="note_add" style={{ marginLeft: 'auto' }} onClick={openEngNote}>Add note</DSeng.Button> : null}
            </div>
            {EngTimeline ? <EngTimeline events={engTimeline} /> : null}
          </div>

          {window.RecordTasksRail ? (
            <div style={{ maxWidth: 380, marginTop: 14 }}>
              <window.RecordTasksRail refType="engagement" refId={m.id} />
            </div>
          ) : null}

        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { EngagementsOverview, ManagedEngagementDetail, engRows, ENG_COLS });