// Method8 — demo · Improve (Actions register).
// Findings from Assure (gap assessment, formative) become actions; Improve
// tracks them to closure. Each closed action feeds an artefact back to Build.

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

const PPL = {
  priya: { n: 'Priya Iyer', i: 'PI', c: '#475467' },
  marcus: { n: 'Marcus Chen', i: 'MC', c: '#2e90fa' },
  sarah: { n: 'Sarah Okafor', i: 'SO', c: '#7a5af8' },
  tom: { n: 'Tom Reed', i: 'TR', c: '#0e9384' },
};

const ATYPE = {
  action: { label: 'Action', icon: <path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>, color: '#1570ef' },
  opportunity: { label: 'Opportunity', icon: <g><path d="M9 18h6"/><path d="M10 22h4"/><path d="M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14"/></g>, color: '#f79009' },
  feedback: { label: 'Feedback', icon: <g><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></g>, color: '#dc6803' },
};

const STATUS = {
  ns: { label: 'Not started', cls: 'ns' },
  ip: { label: 'In progress', cls: 'ip' },
  bl: { label: 'Blocked', cls: 'bl' },
  dn: { label: 'Done', cls: 'dn' },
};

const ACTIONS = [
  { id: 'ACT-118', title: 'Complete a sitewide RACI to clarify cross-functional accountabilities', src: 'Value Delivery · Interfaces', type: 'action', prio: 'high', owner: 'marcus', status: 'ip', due: '31 Jul 2026' },
  { id: 'ACT-117', title: 'Establish document governance — assign owners, controllers and change-control', src: 'Governance & Standards · Critical Documentation', type: 'opportunity', prio: 'high', owner: 'sarah', status: 'ns', due: '15 Aug 2026' },
  { id: 'ACT-116', title: 'Refresh the Group–Operations Delegation of Authority; publish "decide at level"', src: 'Formative · Decision Making', type: 'action', prio: 'high', owner: 'priya', status: 'ns', due: '31 Jul 2026' },
  { id: 'ACT-115', title: 'Define source-of-truth data and stand up one overarching BI system', src: 'Technology · Reporting', type: 'action', prio: 'medium', owner: 'tom', status: 'ns', due: '30 Sep 2026' },
  { id: 'ACT-114', title: 'Deploy field-leader verification routines for critical processes', src: 'Critical Processes', type: 'action', prio: 'high', owner: 'marcus', status: 'bl', due: '22 Jul 2026' },
  { id: 'ACT-113', title: 'Stand up a standing cross-functional interface routine for the ops–Group handoff', src: 'Formative · Coordination', type: 'action', prio: 'high', owner: 'priya', status: 'ip', due: '15 Aug 2026' },
  { id: 'ACT-112', title: 'Define and standardise internal H&S performance metrics in the operational line', src: 'Performance Mgmt · Metrics', type: 'opportunity', prio: 'medium', owner: 'sarah', status: 'ns', due: '—' },
  { id: 'ACT-111', title: 'Agree the leadership behaviours the model requires and build into performance reviews', src: 'Formative · Leadership Behaviour', type: 'feedback', prio: 'medium', owner: 'tom', status: 'dn', due: 'Closed' },
];

const FILTERS = [
  { id: 'all', label: 'All', count: 214 },
  { id: 'ns', label: 'Not started', count: 138 },
  { id: 'ip', label: 'In progress', count: 52 },
  { id: 'bl', label: 'Blocked', count: 9 },
  { id: 'dn', label: 'Done', count: 15 },
];

function ImproveView() {
  const { go } = useNav();
  const [filter, setFilter] = React.useState('all');
  const rows = filter === 'all' ? ACTIONS : ACTIONS.filter((a) => a.status === filter);

  return (
    <>
      <PageHead
        eyebrow={<><span>Improve</span><span className="dot"/><span>Action register</span><span className="dot"/><span className="live">Synced from Assure</span></>}
        title="Actions"
        sub={<>Every finding from a gap assessment, formative or survey lands here as an action. Track it to closure — and each closed action feeds an <b>artefact</b> back to the operating model.</>}
        actions={<><button className="btn btn-sec"><Ico d={I.ext} sw={2}/> Export</button><button className="btn btn-pri"><Ico d={I.plus} sw={2}/> New action</button></>}/>

      <section className="stats" style={{ marginBottom: 22 }}>
        <StatCard hue="orange" icon={I.improve} trend="from Assure" trendDir="up" label="Open actions" value="214" foot={<><b>138</b> not started · <b>52</b> in progress</>}/>
        <StatCard hue="violet" icon={I.shield} trend="9 blocked" trendDir="flat" label="High priority" value="74" foot={<>need an owner decision</>}/>
        <StatCard hue="teal" icon={I.check} trend="+15 QoQ" trendDir="up" label="Closed this quarter" value="15" foot={<>fed 11 artefacts back</>}/>
        <StatCard hue="fuchsia" icon={I.cal} trend="this month" trendDir="dn" label="Due in 30 days" value="28" foot={<><b>6</b> overdue</>}/>
      </section>

      <div className="reg-toolbar">
        {FILTERS.map((f) => (
          <button key={f.id} className={`reg-chip ${filter === f.id ? 'on' : ''}`} onClick={() => setFilter(f.id)}>
            {f.label} <span className="ct">{f.count}</span>
          </button>
        ))}
        <div style={{ marginLeft: 'auto', font: '400 12.5px/16px Inter', color: 'var(--ink4)' }}>Showing {rows.length} of {ACTIONS.length} loaded</div>
      </div>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        <table className="reg-table">
          <thead>
            <tr><th style={{ width: 92 }}>ID</th><th>Action</th><th style={{ width: 130 }}>Type</th><th style={{ width: 96 }}>Priority</th><th style={{ width: 150 }}>Owner</th><th style={{ width: 140 }}>Status</th><th style={{ width: 116 }}>Due</th></tr>
          </thead>
          <tbody>
            {rows.map((a) => {
              const t = ATYPE[a.type]; const s = STATUS[a.status]; const o = PPL[a.owner];
              return (
                <tr key={a.id} onClick={() => alert('Demo: would open ' + a.id)}>
                  <td><span className="reg-id">{a.id}</span></td>
                  <td>
                    <div className="reg-title">{a.title}</div>
                    <div className="reg-src" onClick={(e) => { e.stopPropagation(); go('gap'); }}><Ico d={I.file} sw={2}/> {a.src}</div>
                  </td>
                  <td><span className="ttag"><Ico d={t.icon} sw={1.9} style={{ color: t.color }}/> {t.label}</span></td>
                  <td><span className={`prio ${a.prio}`}>{a.prio === 'high' ? 'High' : a.prio === 'medium' ? 'Medium' : 'Low'}</span></td>
                  <td><span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><span className="reg-ava" style={{ background: o.c }}>{o.i}</span> {o.n.split(' ')[0]}</span></td>
                  <td><span className={`stag ${s.cls}`}><span className="sd"/> {s.label}</span></td>
                  <td style={{ color: a.due === 'Closed' ? '#067647' : a.status === 'bl' ? '#b42318' : 'var(--ink3)', font: '500 12.5px/16px Inter', whiteSpace: 'nowrap' }}>{a.due}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
}

Object.assign(window, { ImproveView });