// Method8 — demo · Expectation page (Define).
// Mirrors the operating-model overview at expectation scale: two metrics —
// Completion (artefacts built) and Health (Understanding / Performance /
// Maturity, from Assure) — then the artefacts table. Noise stripped.

const { Ico, I, PageHead, useNav } = window;

function compColor(v) { return v >= 70 ? '#17b26a' : v >= 40 ? '#2e90fa' : '#f79009'; }

function ExpectationView() {
  const { view, go } = useNav();
  const id = view.slice(4);
  const e = window.MODEL.EXP_BY_ID[id];
  const healthColor = window.modelHealthColor;
  if (!e) return null;

  const built = e.artefacts.filter(([, s]) => s === 'built' || s === 'assure').length;
  const progress = e.artefacts.filter(([, s]) => s === 'progress').length;
  const pending = e.artefacts.length - built - progress;
  const total = e.artefacts.length;
  const compPct = Math.round(built / total * 100);
  const idx = window.MODEL.EXPECTATIONS.findIndex((x) => x.id === id);
  const M = [
    { name: 'Understanding', src: 'Formative · survey', value: e.measures.u, color: '#17b26a' },
    { name: 'Performance', src: 'Survey · gap assessment', value: e.measures.p, color: '#47cd89' },
    { name: 'Maturity', src: 'Gap assessment · formative', value: e.measures.m, color: e.measures.m >= 70 ? '#17b26a' : e.measures.m >= 50 ? '#f79009' : '#f04438' },
  ];

  return (
    <>
      <PageHead
        eyebrow={<><span>Define · Expectation {idx + 1} of 5</span><span className="dot"/><span>Operating model</span><span className="dot"/><span className="live">Live</span></>}
        title={e.name}
        sub={<>&ldquo;{e.stmt}&rdquo;</>}
        actions={<><button className="btn btn-sec" onClick={() => go('os')}><Ico d={I.layers} sw={2}/> Model</button><button className="btn btn-pri" onClick={() => go('gap')}><Ico d={I.file} sw={2}/> Assess</button></>}/>

      {/* Two metrics — Completion + Health, same as the model overview */}
      <div className="om-two" style={{ marginBottom: 22 }}>
        <div className="om-metric">
          <span className="mtag" style={{ background: '#eff8ff', color: '#175cd3' }}><span className="d" style={{ background: '#2e90fa' }}/> Define · completion</span>
          <div className="mtop">
            <div className="mbig" style={{ color: compColor(compPct) }}>{compPct}<small>%</small></div>
            <div><div className="mname">Artefacts built</div><div className="mfoot"><b style={{ color: 'var(--ink2)' }}>{built}</b> of {total} built</div></div>
          </div>
          <div className="om-comptrack">
            <i style={{ width: `${built / total * 100}%`, background: '#17b26a' }}/>
            <i style={{ width: `${progress / total * 100}%`, background: '#f79009' }}/>
          </div>
          <div className="om-compseg">
            <span className="cs"><i style={{ background: '#17b26a' }}/> <b>{built}</b> built</span>
            <span className="cs"><i style={{ background: '#f79009' }}/> <b>{progress}</b> in progress</span>
            <span className="cs"><i style={{ background: '#e4e7ec' }}/> <b>{pending}</b> not started</span>
          </div>
        </div>

        <div className="om-metric">
          <span className="mtag" style={{ background: '#f4f3ff', color: '#5925dc' }}><span className="d" style={{ background: '#7a5af8' }}/> Assure · health</span>
          <div className="mtop">
            <div className="mbig" style={{ color: healthColor(e.health) }}>{e.health}<small>%</small></div>
            <div><div className="mname">Expectation health</div><div className="mfoot">Blended from three measures · driven by Assure assessments</div></div>
          </div>
          <div className="om-hcomp">
            {M.map((m) => (
              <div key={m.name} className="om-hc">
                <div className="hch"><span className="hcn">{m.name}</span><span className="hcsrc">{m.src}</span><span className="hcv" style={{ color: m.color }}>{m.value}%</span></div>
                <div className="om-hctrack"><i style={{ width: `${m.value}%`, background: m.color }}/></div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Artefacts table */}
      <div className="card">
        <div className="card-head">
          <div className="card-head-l"><h2>Artefacts</h2><div className="sub">The records that prove this expectation — open one to see its form &amp; examples</div></div>
          <span className="badge gray">{built}/{total} built</span>
        </div>
        <div className="card-body" style={{ paddingTop: 14 }}>
          <div className="art-legend" style={{ marginBottom: 14 }}>
            <span><i style={{ background: '#17b26a' }}/> Built</span>
            <span><i style={{ background: '#f79009' }}/> In progress</span>
            <span><i style={{ background: '#2e90fa' }}/> From Assure</span>
            <span><i style={{ background: '#98a2b3' }}/> Not started</span>
          </div>
          {window.PillarArtefactList ? <window.PillarArtefactList pillarId={id}/> : null}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ExpectationView });