// AuditLog — the receipt ledger table + a slide-in receipt detail drawer
function AuditLog({ ledger, openReceipt, selected, closeReceipt }) {
  const [filter, setFilter] = React.useState("all");
  const rows = filter === "all" ? ledger : ledger.filter(r => r.outcome === filter);
  const chips = [["all","All"],["allow","allow"],["needs_approval","needs_approval"],["deny","deny"]];
  return (
    <div className="content-wrap fadein">
      <div className="page-head" style={{display:'flex',alignItems:'flex-end',gap:16}}>
        <div>
          <div className="eb">Audit log</div>
          <h2>Signed receipt chain</h2>
        </div>
        <div style={{marginLeft:'auto',display:'flex',gap:8}}>
          <span className="pill pill-allow" style={{padding:'6px 11px'}}><i data-lucide="shield-check"></i>chain verified</span>
          <button className="btn btn-ghost"><i data-lucide="download"></i>Export evidence</button>
        </div>
      </div>

      <div style={{display:'flex',gap:7,marginBottom:14}}>
        {chips.map(([id,label]) =>
          <button key={id} onClick={() => setFilter(id)}
            className={"pill " + (filter===id ? "pill-indigo" : "pill-neutral")}
            style={{cursor:'pointer',padding:'5px 12px',fontSize:12}}>{label}</button>)}
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        <div style={{display:'grid',gridTemplateColumns:'52px 86px 1fr 150px 130px 40px',gap:12,padding:'11px 18px',
          borderBottom:'1px solid var(--ink-800)',fontFamily:'var(--font-mono)',fontSize:10.5,letterSpacing:'.08em',
          textTransform:'uppercase',color:'var(--ink-500)'}}>
          <span>seq</span><span>phase</span><span>action</span><span>principal</span><span>outcome</span><span></span>
        </div>
        {rows.map(r =>
          <button key={r.seq} onClick={() => openReceipt(r)}
            style={{display:'grid',gridTemplateColumns:'52px 86px 1fr 150px 130px 40px',gap:12,alignItems:'center',
              padding:'13px 18px',borderTop:'1px solid var(--ink-850)',width:'100%',background:selected&&selected.seq===r.seq?'var(--ink-850)':'none',
              border:'none',borderTop:'1px solid var(--ink-850)',cursor:'pointer',textAlign:'left',color:'inherit',transition:'background .15s'}}
            onMouseEnter={e=>{if(!(selected&&selected.seq===r.seq))e.currentTarget.style.background='var(--ink-850)'}}
            onMouseLeave={e=>{if(!(selected&&selected.seq===r.seq))e.currentTarget.style.background='none'}}>
            <span className="mono" style={{fontSize:12,color:'var(--ink-400)'}}>{r.seq}</span>
            <span className="mono" style={{fontSize:11.5,color:'var(--fg-muted)'}}>{r.phase}</span>
            <span className="mono" style={{fontSize:12.5,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
              <span style={{color:'#9A90FA'}}>{r.method}</span> <span style={{color:'var(--fg-2)'}}>{r.path}</span>
            </span>
            <span style={{display:'flex',alignItems:'center',gap:7,fontSize:12.5,color:'var(--fg-2)',minWidth:0}}>
              <i data-lucide={r.kind==='agent'?'bot':'user-round'} style={{width:14,height:14,color:r.kind==='agent'?'#3DEBB6':'#9A90FA',flexShrink:0}}></i>
              <span className="mono" style={{whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.principal}</span>
            </span>
            <OutcomePill outcome={r.outcome}/>
            <i data-lucide="chevron-right" style={{width:16,height:16,color:'var(--ink-500)'}}></i>
          </button>)}
      </div>

      {selected && <ReceiptDrawer r={selected} onClose={closeReceipt}/>}
    </div>
  );
}

function ReceiptDrawer({ r, onClose }) {
  const kv = [
    ["seq", String(r.seq)],
    ["phase", r.phase],
    ["outcome", r.outcome],
    ["rule", r.rule],
    ["principal", r.principal],
    ["action", `${r.method} api.acme.com${r.path}`],
    r.amount ? ["amount", r.amount] : null,
    ["action_fingerprint", r.fpr],
    ["intent_hash", r.intent],
    ["prev_hash", r.prev],
    r.approval ? ["approval_id", r.approval] : null,
    ["signature", "Ed25519 ✓ verified"],
  ].filter(Boolean);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(7,9,13,.6)',backdropFilter:'blur(2px)',zIndex:40}}></div>
      <div style={{position:'fixed',top:0,right:0,bottom:0,width:440,background:'var(--ink-950)',borderLeft:'1px solid var(--ink-700)',
        zIndex:41,boxShadow:'var(--shadow-lg)',display:'flex',flexDirection:'column',animation:'slidein .28s var(--ease) both'}}>
        <style>{`@keyframes slidein{from{transform:translateX(30px);opacity:.5}to{transform:none;opacity:1}}`}</style>
        <div style={{display:'flex',alignItems:'center',gap:12,padding:'18px 22px',borderBottom:'1px solid var(--ink-800)'}}>
          <div style={{width:34,height:34,borderRadius:10,display:'grid',placeItems:'center',
            background:r.outcome==='allow'?'rgba(6,201,140,.12)':r.outcome==='deny'?'rgba(240,85,106,.12)':'rgba(245,165,36,.12)',
            border:'1px solid '+(r.outcome==='allow'?'rgba(6,201,140,.34)':r.outcome==='deny'?'rgba(240,85,106,.32)':'rgba(245,165,36,.32)'),
            color:r.outcome==='allow'?'#3DEBB6':r.outcome==='deny'?'#F0728A':'#F5B53F'}}>
            <i data-lucide={r.outcome==='allow'?'badge-check':r.outcome==='deny'?'shield-x':'clock'} style={{width:18,height:18}}></i>
          </div>
          <div>
            <div style={{fontSize:15,fontWeight:600}}>Receipt · seq {r.seq}</div>
            <div className="mono" style={{fontSize:11.5,color:'var(--fg-muted)',marginTop:2}}>{r.ts} · {r.phase}</div>
          </div>
          <button onClick={onClose} className="btn btn-ghost" style={{marginLeft:'auto',padding:7}}><i data-lucide="x" style={{width:16,height:16}}></i></button>
        </div>
        <div style={{padding:'18px 22px',overflowY:'auto'}}>
          {r.note && <div style={{display:'flex',gap:9,alignItems:'flex-start',padding:'11px 13px',borderRadius:10,
            background:'var(--ink-900)',border:'1px solid var(--ink-700)',marginBottom:16,fontSize:12.5,color:'var(--fg-2)'}}>
            <i data-lucide="info" style={{width:15,height:15,color:'#9A90FA',flexShrink:0,marginTop:1}}></i>{r.note}</div>}
          <div style={{display:'grid',gridTemplateColumns:'130px 1fr',gap:'11px 12px'}}>
            {kv.map(([k,v],i) =>
              <React.Fragment key={i}>
                <span className="mono" style={{fontSize:11.5,color:'var(--ink-500)'}}>{k}</span>
                <span className="mono" style={{fontSize:11.5,color:k==='signature'?'#3DEBB6':k==='outcome'?(r.outcome==='allow'?'#3DEBB6':r.outcome==='deny'?'#F0728A':'#F5B53F'):/fingerprint|hash/.test(k)?'#9A90FA':'var(--fg)',wordBreak:'break-all',lineHeight:1.5}}>{v}</span>
              </React.Fragment>)}
          </div>
          <div style={{marginTop:20,paddingTop:16,borderTop:'1px solid var(--ink-800)',display:'flex',gap:8}}>
            <button className="btn btn-ghost"><i data-lucide="copy"></i>Copy receipt</button>
            <button className="btn btn-ghost"><i data-lucide="git-commit-horizontal"></i>Verify link</button>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}
window.AuditLog = AuditLog;