// Method8 — demo · Operating model artefact forms.
// The complete BOM workbook, split by the 5 pillars. Each artefact shows its
// real form structure (the columns are the input fields) and example rows.

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

const PILLAR_ACCENT = {
  vdo: { bar: '#2e90fa', tint: '#eff8ff', fg: '#175cd3' },
  gs: { bar: '#0ba5ec', tint: '#f0f9ff', fg: '#0086c9' },
  cp: { bar: '#17b26a', tint: '#f0fdf4', fg: '#067647' },
  tech: { bar: '#d444f1', tint: '#fdf4ff', fg: '#9f1ab1' },
  pmr: { bar: '#ef6820', tint: '#fff6ed', fg: '#b93815' },
};
const PILLAR_NUM = { vdo: 1, gs: 2, cp: 3, tech: 4, pmr: 5 };

// build status per artefact code (mirrors the model heatmap)
const ART_STATUS = {
  '1.1': 'built', '1.2': 'built', '1.3': 'progress', '1.4': 'assure', '1.5': 'progress', '1.6': 'built', '1.7': 'built',
  '2.1': 'assure', '2.2': 'pending', '2.3': 'progress',
  '3.1': 'progress', '3.2': 'pending',
  '4.1': 'pending', '4.2': 'progress',
  '5.1': 'pending', '5.2': 'progress', '5.3': 'pending', '5.4': 'built',
};
const ST_COLOR = { built: '#17b26a', assure: '#2e90fa', progress: '#f79009', pending: '#98a2b3' };
const ST_LABEL = { built: 'Built', assure: 'From Assure', progress: 'In progress', pending: 'Not started' };

// Reusable: the artefact list for one pillar (used on the expectation page)
function PillarArtefactList({ pillarId }) {
  const { go } = useNav();
  const data = window.MODEL_ARTEFACTS && window.MODEL_ARTEFACTS[pillarId];
  const ac = PILLAR_ACCENT[pillarId];
  if (!data) return null;
  return (
    <div className="art-list">
      {data.artefacts.map((a) => {
        const st = ART_STATUS[a.code] || 'pending';
        return (
          <div key={a.code} className="art-item" onClick={() => go(`art-${pillarId}-${a.code}`)}>
            <span className="ac-code" style={{ background: ac.tint, color: ac.fg }}>{a.code}</span>
            <div className="ac-body">
              <div className="ac-n">{a.name}</div>
              <div className="ac-o">{a.overview}</div>
            </div>
            <div className="ac-meta">
              <span className="ac-pill">{a.columns.length} fields</span>
              <span className="ac-pill">{a.rows.length} examples</span>
              <span className="ac-st" style={{ background: ST_COLOR[st] }} title={ST_LABEL[st]}/>
              <Ico d={I.arrowR} sw={2} size={15} style={{ color: 'var(--ink4)' }}/>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// The artefact form page: route art-<pillar>-<code>
function ArtefactView() {
  const { view, go } = useNav();
  const m = view.match(/^art-([a-z]+)-(.+)$/);
  if (!m) return null;
  const pillarId = m[1], code = m[2];
  const pillar = window.MODEL_ARTEFACTS && window.MODEL_ARTEFACTS[pillarId];
  if (!pillar) return null;
  const arts = pillar.artefacts;
  const idx = arts.findIndex((a) => a.code === code);
  const a = arts[idx];
  if (!a) return null;
  const ac = PILLAR_ACCENT[pillarId];
  const st = ART_STATUS[code] || 'pending';
  const prev = arts[idx - 1], next = arts[idx + 1];

  return (
    <>
      <PageHead
        eyebrow={<><span>Build · {PILLAR_NUM[pillarId]}. {pillar.name}</span><span className="dot"/><span>Artefact {code}</span><span className="dot"/><span style={{ color: ST_COLOR[st], fontWeight: 600 }}>{ST_LABEL[st]}</span></>}
        title={a.name}
        sub={a.overview}
        actions={<><button className="btn btn-sec" onClick={() => go('exp-' + pillarId)}><Ico d={I.arrowR} sw={2} style={{ transform: 'rotate(180deg)' }}/> {pillar.name}</button><button className="btn btn-pri" onClick={() => go('os')}><Ico d={I.layers} sw={2}/> Model</button></>}/>

      <div className="af-meta">
        <div className="af-chip"><div><div className="n" style={{ color: ac.fg }}>{a.columns.length}</div><div className="l">Form fields</div></div></div>
        <div className="af-chip"><div><div className="n">{a.rows.length}</div><div className="l">Example records</div></div></div>
        <div className="af-chip"><div><div className="n" style={{ color: ST_COLOR[st] }}>{ST_LABEL[st]}</div><div className="l">Build status</div></div></div>
      </div>

      <div className="card" style={{ marginBottom: 18 }}>
        <div className="card-head"><div className="card-head-l"><h2>Form fields</h2><div className="sub">The inputs captured for each {a.name.toLowerCase()} record</div></div></div>
        <div className="card-body" style={{ paddingTop: 14 }}>
          <div className="af-fields">
            {a.columns.map((c, i) => (
              <span key={i} className="af-field"><span className="fi">{i + 1}</span>{c}</span>
            ))}
          </div>
        </div>
      </div>

      <div className="af-rowh"><span className="t">Example records</span><span className="c">— real structure from the operating model workbook</span></div>
      <div className="af-tablewrap">
        <table className="af-table">
          <thead><tr>{a.columns.map((c, i) => <th key={i}>{c}</th>)}</tr></thead>
          <tbody>
            {a.rows.map((r, ri) => (
              <tr key={ri}>{a.columns.map((_, ci) => <td key={ci}>{r[ci] || <span style={{ color: 'var(--ink4)' }}>—</span>}</td>)}</tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="af-nav">
        <div className={`af-navbtn ${prev ? '' : 'disabled'}`} onClick={() => prev && go(`art-${pillarId}-${prev.code}`)}><Ico d={I.arrowR} sw={2.2} size={15} style={{ transform: 'rotate(180deg)' }}/> {prev ? `${prev.code} ${prev.name}` : 'Start'}</div>
        <div className={`af-navbtn ${next ? '' : 'disabled'}`} onClick={() => next && go(`art-${pillarId}-${next.code}`)}>{next ? `${next.code} ${next.name}` : 'End'} <Ico d={I.arrowR} sw={2.2} size={15}/></div>
      </div>
    </>
  );
}

Object.assign(window, { ArtefactView, PillarArtefactList });