/* global React, window */
const { useState: useStateG } = React;

const GlassboxView = () => {
  const [filt, setFilt] = useStateG('all');
  const rows = window.AUDIT_LOG.filter(r => filt==='all' ? true : r.kind===filt);
  const kinds = ['all','distribute','attest','transfer','kyc-grant','subscribe','vote','propose','evidence'];
  return (
    <>
      <div className="subbar">
        <div className="subbar__path">Immutable Audit Trail <span className="sep">/</span> <span style={{fontWeight:400, color:'var(--text-2)'}}>Glass-Box explorer</span></div>
        <div className="subbar__kpis">
          <Kpi label="Block height" value="18,440,219" delta="Base L2 · 2s ago" deltaKind="pos" />
          <Kpi label="Events · 24h" value="4,218" />
          <Kpi label="Evidence CIDs" value="1,044" delta="IPFS + Arweave" />
          <Kpi label="Retention" value="Forever" delta="pinned · triplicated" />
        </div>
      </div>

      <div className="canvas">
        <div className="grid grid--split" style={{marginBottom:16}}>
          <div className="card">
            <CardHead title="Event stream" help eyebrow="Real-time ledger" />
            <div className="row" style={{gap:6, flexWrap:'wrap', marginBottom:12}}>
              {kinds.map(k => (
                <button key={k} className={`btn btn--sm ${filt===k?'':'btn--ghost'}`} onClick={()=>setFilt(k)}>
                  {k}
                </button>
              ))}
            </div>
            <div className="ledger" style={{border:'1px solid var(--border)', borderRadius:6, overflow:'hidden'}}>
              <div className="ledger__row" style={{background:'var(--bg-muted)', fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--text-3)'}}>
                <span>Block</span><span>Event</span><span>Target</span><span>Amount</span><span>Tx</span>
              </div>
              {rows.map((r,i) => (
                <div key={i} className="ledger__row">
                  <span className="ledger__hash">#{r.block.toString().slice(-5)}</span>
                  <div>
                    <div className="row" style={{gap:6}}>
                      <Pill kind={r.kind==='distribute'?'pos':r.kind==='attest'?'amber':r.kind==='evidence'?'info':'default'}>{r.kind}</Pill>
                      <span className="muted text-sm">{r.actor}</span>
                    </div>
                    <div className="muted text-sm" style={{marginTop:2, fontSize:10}}>{r.ts} UTC</div>
                  </div>
                  <span className="mono text-sm">{r.target}</span>
                  <span className="num text-sm bold">{r.amt}</span>
                  <span className="ledger__hash"><b>{r.tx}</b></span>
                </div>
              ))}
            </div>
          </div>

          <div className="stack">
            <div className="card">
              <CardHead title="Evidence vault" eyebrow="Last 24 hours" help />
              <HBars rows={[
                { k:'Title deeds', v: 28, c:'var(--viz-4)' },
                { k:'Audit reports', v: 14, c:'var(--viz-1)' },
                { k:'Appraisals', v: 11, c:'var(--viz-3)' },
                { k:'Shipment BoL', v: 22, c:'var(--viz-5)' },
                { k:'Attestations', v: 44, c:'var(--viz-2)' },
              ]} />
            </div>
            <div className="card">
              <CardHead title="Signatory activity" eyebrow="3-of-3 oracle" help />
              <div className="stack-sm">
                {[
                  ['Legal · R. Cheng',     18, 'var(--viz-4)'],
                  ['Treasury · S. Okafor', 16, 'var(--viz-1)'],
                  ['Tech · L. Moreau',     20, 'var(--viz-5)'],
                ].map(([n,c,col]) => (
                  <div key={n}>
                    <div className="row row--sb text-sm"><span>{n}</span><span className="num muted">{c} signatures</span></div>
                    <div className="bar" style={{marginTop:4}}><div className="bar__fill" style={{width: (c/20*100)+'%', background: col}}/></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

window.GlassboxView = GlassboxView;