/* Screen A — Morning run + Today's renewal work */
const { useState: tS, useEffect: tE } = React;

/* ---------- decision card ---------- */
function AutoTag({ v }) {
  const L = { handled: 'Agent handled', prepared: 'Agent prepared', recommends: 'Agent recommends', blocked: 'Agent blocked', monitor: 'Monitoring' };
  return <span className={'auto ' + v}><i className="ad" />{L[v]}</span>;
}

function Reasoning({ d }) {
  const app = useApp(); const MD = window.MD;
  const [ev, setEv] = tS(false);
  const r = d.renewal ? MD.byId[d.renewal] : null;
  const evidence = r ? (window.AG.openC(r)[0] || { evidence: [] }).evidence : [];
  const g = Object.assign({}, d.reasoning, d.source ? { source: d.source } : {});
  return <div className="rpanel">
    <div className="row" style={{ marginBottom: 12 }}><span className="eyebrow">Why the agent recommends this</span><span className="grow" /><span className="src engine"><i className="sd" />Engine · morning run 06:24</span></div>
    <div className="rgrid">
      <div><span className="l">Condition</span><span className="v">{g.condition}</span></div>
      <div><span className="l">Age</span><span className="v">{g.age}</span></div>
      <div><span className="l">Prior attempts</span><span className="v">{g.attempts}</span></div>
      <div><span className="l">Response</span><span className="v">{g.response}</span></div>
      <div><span className="l">Deadline</span><span className="v">{g.deadline}</span></div>
      {g.source ? <div style={{ gridColumn: '1/-1' }}><span className="l">Relevant message or document</span><span className="v">{g.source}</span></div> : null}
    </div>
    <div className="rconc"><b>Why this action.</b> {g.conclusion}</div>
    {g.alt ? <div className="rconc" style={{ borderLeftColor: 'var(--line-strong)', marginTop: 9 }}><b>Why not the alternatives.</b> {g.alt}</div> : null}
    <div className="row" style={{ marginTop: 14 }}>
      <button className={'see-btn' + (ev ? ' on' : '')} onClick={() => setEv(!ev)}><Icon n={ev ? 'chevron-up' : 'chevron-down'} s={13} />{ev ? 'Hide source evidence' : 'Show source evidence'}<span className="dim">{evidence.length}</span></button>
      {r ? <button className="see-btn" onClick={() => app.nav('#/renewal/' + r.id)}><Icon n="arrow-right" s={13} />Open the full briefing</button> : null}
    </div>
    {ev ? <div className="see-panel">
      <div className="eyebrow" style={{ marginBottom: 8 }}>Underlying evidence · observed, derived, human, uncertain</div>
      {evidence.length ? evidence.map((e) => <div className="evline" key={e.id}>
        <span className="eb"><Icon n={e.src === 'salesforce' ? 'database' : e.src === 'email' ? 'mail' : e.src === 'amrisk' ? 'building' : e.src === 'accounting' ? 'receipt' : 'activity'} s={12} /></span>
        <div className="grow"><div className="row" style={{ gap: 7 }}><b>{e.label}</b><span className={'evtag ' + e.type}>{e.type}</span></div><p>{e.detail}</p>
          <div className="row xs dim" style={{ gap: 8, marginTop: 3 }}><span className={'src ' + e.src}><i className="sd" />{SRC_LABEL[e.src]}</span><span>{dt(e.at)}</span></div></div>
      </div>) : <div className="sm mut">Evidence for this decision sits on the Close Chain artifacts — open the workspace to inspect both source documents side by side.</div>}
    </div> : null}
  </div>;
}

function ResolvePanel({ d, onDone, kind: forced }) {
  const app = useApp(); const MD = window.MD;
  const r = d.renewal ? MD.byId[d.renewal] : null;
  const kind = forced || (d.id === 'DEC-3' ? 'receipt' : d.id === 'DEC-4' ? 'grid' : d.id === 'DEC-6' ? 'verify' : d.id === 'DEC-2' ? 'brief' : d.draft ? 'send' : 'note');
  const [pick, setPick] = tS(null);
  const [mapTo, setMapTo] = tS('');
  const [val, setVal] = tS('');
  const [reason, setReason] = tS('');
  const draft = d.draft ? MD.drafts.find((x) => x.id === d.draft) : null;

  if (kind === 'send' && draft) {
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">Prepared message</span><span className="grow" /><span className="sm mut">{draft.category}</span></div>
      <div className="kv" style={{ gridTemplateColumns: '56px 1fr', marginBottom: 10 }}>
        <span className="k">To</span><span className="v">{draft.to}</span>
        <span className="k">CC</span><span className="v">{draft.cc || '—'}</span>
        <span className="k">Subject</span><span className="v" style={{ fontWeight: 600 }}>{draft.subject}</span>
      </div>
      <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '14px 16px', fontSize: 13.5, lineHeight: 1.68, color: 'var(--text-2)', whiteSpace: 'pre-wrap', maxHeight: 240, overflow: 'auto' }}>{draft.body}</div>
      <div className="row" style={{ gap: 9, marginTop: 12 }}>
        <button className="see-btn" onClick={() => app.nav('#/outreach')}><Icon n="edit" s={13} />Edit in prepared outreach</button>
        <span className="sm dim">Editing records what changed, and the change type trains the next message in this category.</span>
      </div>
    </div>;
  }
  if (kind === 'brief') {
    const covers = (d.covers || []).map((x) => MD.byId[x]).filter(Boolean);
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">One brief · {covers.length} accounts, each with its own section</span></div>
      <div className="covered" style={{ margin: 0 }}>{covers.map((x) => <div className="cv" key={x.id}>
        <b>{x.account}</b>
        <span className="sm mut">{window.AG.openC(x).map((c) => c.cat + ' · ' + c.item).join(' · ') || 'no open condition'}</span>
        <span className="cx">{(window.AG.prim(x) || {}).owing || '—'}</span>
      </div>)}</div>
      <div className="row" style={{ gap: 9, marginTop: 12 }}>
        <button className="see-btn" onClick={() => app.nav('#/outreach')}><Icon n="eye" s={13} />Read the assembled brief</button>
        <span className="sm dim">Four individual drafts close when the brief is approved.</span>
      </div>
    </div>;
  }
  if (kind === 'receipt') {
    const rc = r.close.receipt;
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">Which renewal does this payment belong to?</span><span className="grow" /><span className="sm mut">{money(rc.observed)} · {rc.remitter} · {rc.ref}</span></div>
      <div className="covered" style={{ margin: 0 }}>{rc.candidates.map((c) => {
        const rr = MD.byId[c.id]; const on = pick === c.id;
        return <div className="cv" key={c.id} style={{ cursor: 'pointer', background: on ? 'var(--tint-blue)' : 'var(--surface)' }} onClick={() => setPick(c.id)}>
          <Icon n={on ? 'check' : 'dot'} s={13} style={{ color: on ? 'var(--blue)' : 'var(--text-dim)' }} />
          <b>{rr ? rr.account : c.id}</b><span className="sm mut">{c.why}</span>
          <span className="cx">{money(rr && rr.close && rr.close.billing.expected ? rr.close.billing.expected : rr.premiumPrior)} expected</span>
        </div>;
      })}</div>
      <div className="row" style={{ gap: 9, marginTop: 12 }}>
        <Gated action="receipt" label="Confirm receipt"><button className="btn p" disabled={!pick} onClick={() => { app.confirmReceipt(r.id, pick); onDone('Confirmed against ' + window.AG.acct(pick)); }}><Icon n="check" s={14} />Confirm receipt</button></Gated>
        <Gated action="receipt" label="Cannot match"><button className="btn" onClick={() => { app.receiptOther(r.id, 'cannot-match'); onDone('Recorded as unmatched'); }}>Cannot match</button></Gated>
        <span className="sm dim">Partial and overpayment handling sits in the close workspace.</span>
      </div>
    </div>;
  }
  if (kind === 'grid') {
    const c = r.close; const total = c.rows.reduce((s, x) => s + x.lk, 0);
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">Prepared coverage grid · one approval unit</span><span className="grow" /><span className="pill t-amber">2026 shadow — comparison only</span></div>
      <div className="covered" style={{ margin: 0 }}>{c.rows.map((x) => <div className="cv" key={x.id}>
        <b style={{ flex: '0 0 240px' }}>{x.coverage}</b>
        <span className="mono mut">{x.code}</span>
        <span className="sm mut">{x.limit}</span>
        <span className="cx" style={{ marginLeft: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
          <span className="tab" style={{ color: 'var(--text)', fontWeight: 600 }}>{money(x.lk)}</span>
          <span className="pill t-green"><Icon n="check" s={10} />Exact</span>
        </span>
      </div>)}</div>
      <div className="row" style={{ gap: 16, marginTop: 11, fontSize: 12.5 }}>
        <span><b>{c.rows.length}</b> coverages</span><span className="dim">·</span>
        <span><b>{money(total)}</b> total premium</span><span className="dim">·</span>
        <span><b>0</b> mismatches</span><span className="dim">·</span><span><b>0</b> mapping exceptions</span>
      </div>
      <div className="row" style={{ gap: 9, marginTop: 12 }}>
        <Gated action="approve" label="Approve shadow grid"><button className="btn p" onClick={() => { app.approveGrid(r.id); onDone('Shadow grid approved · comparison recorded'); }}><Icon n="check" s={14} />Approve shadow grid</button></Gated>
        <Gated action="reject" label="Reject"><button className="btn d" onClick={() => { app.rejectGrid(r.id, 'Wrong worksheet interpretation'); onDone('Grid rejected and returned to staging'); }}>Reject grid</button></Gated>
        <span className="sm dim">Approval records a comparison. No production coverage, invoice, or policy write occurs.</span>
      </div>
    </div>;
  }
  if (kind === 'parse') {
    const ws = r.close.worksheet;
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">I could not read this worksheet</span><span className="grow" /><span className="sm mut">{ws ? ws.name + ' · ' + ws.version : 'no worksheet'}</span></div>
      <div className="note red" style={{ marginBottom: 11 }}><Icon n="alert" s={15} /><span><b>Unsupported layout.</b> No coverage rows could be extracted, so I staged nothing. A partial parse never becomes a partial grid — I will not guess at a client's limit selections.</span></div>
      <div className="rconc" style={{ marginBottom: 11 }}><b>Your options.</b> Re-request the selection on Madison's standard template, or key the selection manually so the shadow comparison still has a record for this renewal. Either way the client's returned document stays on file with its provenance.</div>
      <div className="row" style={{ gap: 9, flexWrap: 'wrap' }}>
        <Gated action="send" label="Re-request on the standard template"><button className="btn p" onClick={() => { app.humanAction(r, 'classify', 'Re-request the selection worksheet on the standard template'); onDone('Re-request recorded · I will draft it for review'); }}>Re-request on the standard template</button></Gated>
        <Gated action="map" label="Key it manually"><button className="btn" onClick={() => { app.humanAction(r, 'classify', 'Selection to be keyed manually for shadow comparison'); onDone('Manual entry recorded for shadow comparison'); }}>Key it manually for comparison</button></Gated>
        <span className="sm dim">Nothing about the renewal's position changes — this only decides how the selection gets read.</span>
      </div>
    </div>;
  }
  if (kind === 'verify') {
    const c = r.close; const bad = c.rows.filter((x) => ['exact', 'corrected'].indexOf(x.st) < 0);
    const mapped = window.MD.mappings.filter((m) => m.code);
    return <div className="rpanel">
      <div className="row" style={{ marginBottom: 10 }}><span className="eyebrow">{bad.length} unresolved line{bad.length === 1 ? '' : 's'}</span><span className="grow" /><span className="sm mut">The AmRisk lock is authoritative — premium comparison is exact</span></div>
      {!bad.length ? <div className="note blue"><Icon n="check" s={15} /><span>All lines now reconcile. The coverage grid staged automatically and is waiting for approval.</span></div> : null}
      {bad.map((x) => <div key={x.id} style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-md)', padding: '13px 15px', marginBottom: 9 }}>
        <div className="row" style={{ gap: 10 }}><b style={{ fontSize: 13.5 }}>{x.coverage}</b>
          <span className={'pill ' + (x.st === 'map' ? 't-amber' : 't-red')}>{x.st === 'map' ? 'No risk-code mapping' : 'Conflicts with the lock'}</span>
          <span className="grow" />
          <span className="sm mut">worksheet {money(x.ws)} · locked <b style={{ color: 'var(--amber-deep)' }}>{money(x.lk)}</b></span>
        </div>
        {x.st === 'map' ? <div className="row" style={{ gap: 9, marginTop: 11 }}>
          <select className="mailf" style={{ maxWidth: 340 }} value={mapTo} onChange={(e) => setMapTo(e.target.value)}>
            <option value="">Choose the registry entry…</option>
            {mapped.map((m) => <option key={m.coverage} value={m.code}>{m.coverage} — {m.code}</option>)}
          </select>
          <Gated action="map" label="Apply mapping"><button className="btn p sm" disabled={!mapTo} onClick={() => { app.resolveMapping(r.id, x.id, mapTo); }}>Apply and re-verify</button></Gated>
        </div> : <div className="row" style={{ gap: 9, marginTop: 11 }}>
          <input className="mailf" style={{ maxWidth: 130 }} value={val} placeholder={String(x.lk)} onChange={(e) => setVal(e.target.value)} />
          <Gated action="correct" label="Record correction"><button className="btn p sm" onClick={() => app.correctLine(r.id, x.id, Number(String(val || x.lk).replace(/[^0-9.]/g, '')), 'Wrong parse')}>Record correction</button></Gated>
          <span className="sm dim">A correction that still conflicts with the lock cannot be approved.</span>
        </div>}
      </div>)}
    </div>;
  }
  return <div className="rpanel">
    <div className="eyebrow" style={{ marginBottom: 8 }}>Record the decision</div>
    <input className="mailf" value={reason} onChange={(e) => setReason(e.target.value)} placeholder={d.id === 'DEC-5' ? 'Note for the operations lead' : 'Reason, recorded with your name and the time'} />
    <div className="row" style={{ gap: 9, marginTop: 11 }}>
      <Gated action="hold" label="Record"><button className="btn p" disabled={!reason} onClick={() => { app.humanAction(r, d.id === 'DEC-5' ? 'route' : 'hold', reason); onDone(d.id === 'DEC-5' ? 'Routing recommendation recorded' : 'Held with a recorded reason'); }}>{d.id === 'DEC-5' ? 'Recommend routing' : 'Record hold'}</button></Gated>
      <span className="sm dim">Human decisions stay visible in the renewal history and the Salesforce audit record.</span>
    </div>
  </div>;
}

function DecisionCard({ d }) {
  const app = useApp(); const MD = window.MD;
  const [open, setOpen] = tS(null);
  const [done, setDone] = tS(null);
  const r = d.renewal ? MD.byId[d.renewal] : null;
  const a = d.advisor ? MD.advisors.find((x) => x.id === d.advisor) : (r ? window.AG.advOf(r) : null);
  const who = d.advisor ? a.name : (r ? r.account : '');
  const meta = d.advisor ? a.firm + ' · ' + a.policies.length + ' policies' : (r ? (a ? a.name : 'No advisor') + ' · ' + r.policy : '');
  const primary = () => {
    if (d.id === 'DEC-1' && d.draft) { app.sendDraft(d.draft); setDone('Approved · sent to ' + MD.drafts.find((x) => x.id === d.draft).to); setOpen(null); return; }
    if (d.id === 'DEC-2') { app.sendBrief(d.advisor, d.covers); setDone('Approved · one brief sent to ' + a.name + ', 4 drafts closed'); setOpen(null); return; }
    setOpen(open === 'resolve' ? null : 'resolve');
  };
  return <div className={'dcard ' + d.tone} id={'dec-' + d.id}>
    <div className="acc" />
    <div className="grow" style={{ minWidth: 0 }}>
      <div style={{ display: 'flex' }}>
        <div className="dcard-b">
          <div className="dcard-h"><span className="who">{who}</span><span className="meta">{meta}</span></div>
          <div className="verb">{d.verb}</div>
          <div className="body" dangerouslySetInnerHTML={{ __html: d.body }} />
          {d.conf ? <div className="dsig">
            <span className={'cf ' + d.conf.toLowerCase()}><i className="cd" />{d.conf === 'Blocked' ? 'Not determinable by me' : d.conf + ' confidence'}</span>
            <span className="dot">·</span>
            <span>Expected: <b>{d.expected}</b></span>
          </div> : null}
          <div className="dcard-chips">{d.chips.map((c, i) => <span key={i} className={'chip ' + c.t}><i className="cd" />{c.l}</span>)}</div>
        </div>
        <div className="dcard-r">
          <span className={'when' + (d.when === 'Act today' ? ' now' : '')}>{d.when}</span>
          <AutoTag v={d.autonomy} />
          <button className="reasoning-link" onClick={() => setOpen(open === 'reasoning' ? null : 'reasoning')}>{open === 'reasoning' ? 'Hide reasoning' : 'Open reasoning'}<Icon n={open === 'reasoning' ? 'chevron-up' : 'arrow-right'} s={13} /></button>
        </div>
      </div>
      {open === 'reasoning' ? <Reasoning d={d} /> : null}
      {open === 'resolve' ? <ResolvePanel d={d} onDone={(m) => { setDone(m); setOpen(null); }} /> : null}
      <div className="dbar">
        {done ? <><span className="decided approved"><Icon n="check" s={15} />{done}</span><span className="note">Recorded by {app.user.name} · {dt(new Date(MD.TODAY).toISOString())}</span></>
          : <>
            <Gated action={d.perm} label={d.approveLabel}><button className="btn p" onClick={primary}>{d.approveLabel}</button></Gated>
            <button className="btn" onClick={() => setOpen(open === 'resolve' ? null : 'resolve')}><Icon n="edit" s={13} />Adjust</button>
            <button className="btn" onClick={() => { if (r) app.humanAction(r, 'hold', 'Held from the worklist'); setDone('Held · no message sent'); }}><Icon n="pause" s={13} />Hold</button>
            {r ? <button className="btn" onClick={() => app.nav('#/renewal/' + r.id)}>Open briefing</button> : null}
            <span className="note">{d.autonomy === 'blocked' ? 'The agent stopped here deliberately — it will not guess between the options.' : 'The agent prepared this. Nothing sends until you approve.'}</span>
          </>}
      </div>
    </div>
  </div>;
}

/* ---------- screen ---------- */
function TodayScreen() {
  const app = useApp(); const MD = window.MD; const AG = window.AG;
  const [entry, setEntry] = tS(true);
  const [live, setLive] = tS(-1);
  const [peek, setPeek] = tS(false);
  const [led, setLed] = tS(null);
  const c = AG.runCounts();
  const decs = AG.decisions();
  const today = decs.filter((d) => d.when === 'Act today');
  const week = decs.filter((d) => d.when !== 'Act today');
  const help = AG.help();

  tE(() => { if (live < 0 || live > AG.RUN_STEPS.length) return; const t = setTimeout(() => setLive(live + 1), 620); return () => clearTimeout(t); }, [live]);
  const running = live >= 0 && live <= AG.RUN_STEPS.length;

  return <div className="ag-canvas">
    {entry ? <div className="run">
      <div className="row" style={{ marginBottom: 14 }}>
        {running ? <span className="live"><i className="d" />Live · morning run</span> : <span className="eyebrow" style={{ color: '#6E7481' }}>Morning run · complete 06:14</span>}
        <span className="grow" />
        <button className="btn sm" style={{ background: 'transparent', borderColor: 'rgba(255,255,255,.18)', color: '#CBD0DB' }} onClick={() => setLive(0)}><Icon n="refresh" s={12} />Run again</button>
      </div>
      <h2>Your renewal book is ready.</h2>
      <p>I reviewed all {c.evaluated} renewals overnight, read the latest correspondence, matched incoming documents, suppressed unnecessary follow-ups, and prepared the items that need your judgment. Most of the book is progressing without intervention.</p>
      <div className="runcall">
        <div className="rc"><i className="cd blue" /><b>{c.decisions} decisions</b><span>need you today</span></div>
        <div className="rc"><i className="cd red" /><b>{c.exceptions} exceptions</b><span>need human help</span></div>
        <div className="rc quiet"><i className="cd" /><b>{c.normal} renewals</b><span>I left alone deliberately</span></div>
      </div>
      <div className="run-grid">
        <div><span className="l">Evaluated</span><span className="v">{c.evaluated}</span></div>
        <div><span className="l">Progressing</span><span className="v">{c.normal}</span></div>
        <div><span className="l">Handled automatically</span><span className="v">{c.auto}</span></div>
        <div><span className="l">Communications prepared</span><span className="v">12</span></div>
        <div><span className="l">Need your decision</span><span className="v hi">{c.decisions}</span></div>
        <div><span className="l">Exceptions</span><span className="v hi">{c.exceptions}</span></div>
      </div>
      {running || peek ? <div className="run-steps">{AG.RUN_STEPS.map((s, i) => <div key={s.label} className={'rstep ' + (running ? (i < live ? '' : i === live ? 'now' : 'todo') : '')}>
        <span className="ri"><Icon n={!running || i < live ? 'check' : i === live ? 'dot' : 'minus'} s={11} w={2.4} /></span>
        {s.label}
        <span className="rt">{!running || i <= live ? s.at : ''}</span>
      </div>)}</div> : null}
      <div className="row" style={{ gap: 10, marginTop: 20 }}>
        <button className="btn p" onClick={() => setEntry(false)}>Open today's worklist<Icon n="arrow-right" s={14} /></button>
        {!running ? <button className="btn" style={{ background: 'transparent', borderColor: 'rgba(255,255,255,.18)', color: '#CBD0DB' }} onClick={() => setPeek(!peek)}><Icon n={peek ? 'chevron-up' : 'chevron-down'} s={13} />{peek ? 'Hide what I did' : 'What I did'}</button> : null}
        <button className="btn" style={{ background: 'transparent', borderColor: 'rgba(255,255,255,.18)', color: '#CBD0DB' }} onClick={() => app.nav('#/activity')}>View agent activity</button>
      </div>
    </div> : <div className="runbar">
      <span className="row" style={{ gap: 8 }}><span className="pill t-green"><Icon n="check" s={10} />Run complete 06:14</span></span>
      <span className="sep" />
      <div className="rb"><span className="l">Evaluated</span><span className="v">{c.evaluated}</span></div>
      <div className="rb"><span className="l">Progressing</span><span className="v">{c.normal}</span></div>
      <div className="rb"><span className="l">Handled</span><span className="v">{c.auto}</span></div>
      <div className="rb"><span className="l">Prepared</span><span className="v">12</span></div>
      <div className="rb"><span className="l">Need you</span><span className="v" style={{ color: 'var(--blue-deep)' }}>{c.decisions}</span></div>
      <span className="grow" />
      <button className="see-btn" onClick={() => setEntry(true)}>Morning run</button>
      <button className="see-btn" onClick={() => app.nav('#/activity')}>Agent activity</button>
    </div>}

    <div className="ph">
      <div className="ph-row">
        <div className="grow">
          <h1>Your renewal worklist · Tue 17 Nov</h1>
          <p className="sub">I evaluated <b>{c.evaluated} renewals</b> this morning; <b>{c.normal} are progressing without help</b>. Below is the small part that needs you — each item is a decision I have already prepared and defended.</p>
        </div>
        <span className="ph-badge"><Icon n="activity" s={14} />{decs.length} decisions prepared</span>
      </div>
    </div>

    <div className="secwrap">
      <div className="sec"><span className="st">Needs your decision</span><span className="sn">{today.length}</span><span className="snote">Act today</span></div>
      {today.map((d) => <DecisionCard key={d.id} d={d} />)}
      <div className="sec" style={{ marginTop: 22 }}><span className="st">Needs your decision</span><span className="sn">{week.length}</span><span className="snote">This week</span></div>
      {week.map((d) => <DecisionCard key={d.id} d={d} />)}
    </div>

    <div className="secwrap">
      <div className="sec"><span className="st">Prepared and ready</span><span className="snote">Assembled by the agent · quick review, then it goes</span></div>
      <div className="ledger">{AG.prepared().map((p) => <div className="lrow" key={p.id} onClick={() => app.nav(p.route)}>
        <span className="li blue"><Icon n={p.ico} s={14} /></span>
        <div className="grow"><div className="lt"><b>{p.label}</b></div><div className="lm">{p.note}</div></div>
        <span className="lc">{p.n}</span>
        <Icon n="chevron-right" s={15} style={{ color: 'var(--text-dim)' }} />
      </div>)}</div>
    </div>

    <div className="secwrap">
      <div className="sec"><span className="st">Settled automatically</span><span className="snote">No human action was required for any of this</span></div>
      <div className="ledger">{AG.LEDGER.map((l) => <div key={l.id}>
        <div className="lrow" onClick={() => setLed(led === l.id ? null : l.id)}>
          <span className={'li ' + l.tone}><Icon n={l.ico} s={14} /></span>
          <div className="grow"><div className="lt" dangerouslySetInnerHTML={{ __html: l.text }} /><div className="lm">{l.meta}</div></div>
          <span className="lc">{l.count}</span>
          <Icon n={led === l.id ? 'chevron-up' : 'chevron-down'} s={15} style={{ color: 'var(--text-dim)' }} />
        </div>
        {led === l.id ? <div className="ldetail">{l.items.map((i, k) => <div className="li2" key={k}><Icon n="check" s={12} style={{ color: 'var(--green-deep)', marginTop: 3 }} />{i}</div>)}</div> : null}
      </div>)}</div>
    </div>

    <div className="secwrap">
      <div className="sec"><span className="st">Needs human help</span><span className="sn">{help.length}</span><span className="snote">The agent could not safely determine these</span></div>
      <div className="ledger">{help.map((x) => <HelpRow key={x.id} x={x} />)}</div>
    </div>

    <div className="secwrap">
      <div className="sec"><span className="st">Monitoring</span><span className="snote">Watched deliberately · no action would add anything today</span></div>
      <div className="mon">{AG.monitoring().map(({ r, why, meta }) => <div className="mrow" key={r.id} onClick={() => app.nav('#/renewal/' + r.id)}>
        <span className="mw">{r.account}</span>
        <span className="mx">{why}<div className="xs dim" style={{ marginTop: 2 }}>{meta}</div></span>
        <span className="mt"><span className="auto monitor"><i className="ad" />Monitoring</span><div className="xs dim" style={{ marginTop: 3 }}>Next evaluation 14:00</div></span>
      </div>)}</div>
      <div className="note" style={{ marginTop: 12 }}><Icon n="info" s={15} style={{ color: 'var(--text-muted)' }} /><span><b>{c.normal} renewals were examined and deliberately left alone.</b> The agent found nothing that needed a message, an escalation, or a person. That is the intended outcome for most of the book.</span></div>
    </div>
  </div>;
}

function HelpRow({ x }) {
  const app = useApp(); const MD = window.MD; const AG = window.AG;
  const [open, setOpen] = tS(false);
  const [pick, setPick] = tS(null);
  const decFor = { X3: 'DEC-6', X4: 'DEC-6', X6: 'DEC-3', X5: null };
  const jump = (decId) => { const el = document.getElementById('dec-' + decId); const body = document.querySelector('.ag-body'); if (el && body) body.scrollTop = el.offsetTop - 16; };
  return <div>
    <div className="lrow" onClick={() => setOpen(!open)}>
      <span className="li" style={{ background: 'var(--tint-red)', color: 'var(--red-deep)' }}><Icon n="alert" s={14} /></span>
      <div className="grow"><div className="lt"><b>{x.cat}</b> — {x.summary}</div>
        <div className="lm">{x.renewal ? AG.acct(x.renewal) + ' · ' : ''}open {x.age < 1 ? Math.round(x.age * 24) + 'h' : Math.round(x.age) + 'd'} · owner {x.owner}</div></div>
      <span className="pill t-red">{open ? 'Close' : 'Resolve'}</span>
    </div>
    {open ? <div className="ldetail" style={{ paddingTop: 12 }}>
      {x.email ? <>
        <div className="note" style={{ marginBottom: 11 }}><Icon n="mail" s={15} style={{ color: 'var(--blue)' }} /><span><b>{x.email.name} &lt;{x.email.from}&gt;</b> · {dt(x.email.at)}<div style={{ marginTop: 3 }}>{x.email.subject} · {x.email.attachments.join(', ')}</div>
          <div className="sm mut" style={{ marginTop: 6 }}>{x.reason}</div></span></div>
        <div className="eyebrow" style={{ marginBottom: 7 }}>The agent ranked the likely matches</div>
        <div className="covered" style={{ margin: 0 }}>{x.candidates.map((c) => {
          const rr = MD.byId[c.renewal]; const on = pick === c.renewal;
          return <div className="cv" key={c.renewal} style={{ cursor: 'pointer', background: on ? 'var(--tint-blue)' : 'var(--surface)', display: 'block' }} onClick={() => setPick(c.renewal)}>
            <div className="row" style={{ gap: 9 }}><Icon n={on ? 'check' : 'dot'} s={13} style={{ color: on ? 'var(--blue)' : 'var(--text-dim)' }} />
              <b>{rr ? rr.account : c.renewal}</b><span className={'pill ' + (c.score > 0.5 ? 't-blue' : 't-slate')}>match {c.score}</span></div>
            <div className="sm mut" style={{ marginTop: 5, paddingLeft: 22 }}>{c.why.join(' · ')}</div>
          </div>;
        })}</div>
        <div className="row" style={{ gap: 9, marginTop: 12 }}>
          <Gated action="match" label="Match to renewal"><button className="btn p" disabled={!pick} onClick={() => app.matchEmail(x.id, pick)}><Icon n="link" s={13} />Match to renewal</button></Gated>
          <button className="btn" onClick={() => app.resolveException(x.id, 'Marked unrelated to any renewal')}>Mark unrelated</button>
          <span className="sm dim">Nothing is attached until you decide. Your decision becomes a reusable matching signal.</span>
        </div>
      </> : x.affected ? <>
        <div className="note amber" style={{ marginBottom: 10 }}><Icon n="alert" s={15} /><span><b>Absence of a reply is not treated as fact.</b> {x.resolution}</span></div>
        <div className="eyebrow" style={{ marginBottom: 6 }}>Affected renewals · {x.affected.length}</div>
        {x.affected.map((id) => <div className="li2" key={id}><button className="reasoning-link" style={{ fontSize: 12.5 }} onClick={() => app.nav('#/renewal/' + id)}>{AG.acct(id)}</button></div>)}
      </> : <>
        <div className="note" style={{ marginBottom: 11 }}><Icon n="info" s={15} style={{ color: 'var(--text-muted)' }} /><span><b>Why the agent stopped.</b> {x.resolution}</span></div>
        <div className="row" style={{ gap: 9 }}>
          {decFor[x.id] ? <button className="btn p" onClick={() => jump(decFor[x.id])}>Go to the prepared decision<Icon n="arrow-up" s={13} /></button> : null}
          {x.renewal ? <button className="btn" onClick={() => app.nav('#/renewal/' + x.renewal)}>Open the briefing</button> : null}
        </div>
      </>}
    </div> : null}
  </div>;
}

Object.assign(window, { TodayScreen, HelpRow, DecisionCard, Reasoning, AutoTag, ResolvePanel });
