// Overview — at-a-glance stats + chain status + recent activity
function Overview({ ledger, pendingCount, setScreen, openReceipt }) {
  const allow = ledger.filter(r => r.outcome === "allow").length;
  const deny = ledger.filter(r => r.outcome === "deny").length;
  const stats = [
    { label: "Decisions today", value: "2,841", icon: "activity", tone: "indigo", delta: "+12%" },
    { label: "Allowed", value: "2,610", icon: "badge-check", tone: "mint", delta: "92%" },
    { label: "Needs approval", value: String(pendingCount), icon: "clock", tone: "amber", delta: "queue" },
    { label: "Denied", value: "188", icon: "shield-x", tone: "red", delta: "fail-closed" },
  ];
  return (
    <div className="content-wrap fadein">
      <div className="page-head">
        <div className="eb">Overview</div>
        <h2>Every access and action, accounted for</h2>
        <p>A deterministic decision point for every agent and human action — with a signed, tamper-evident trail behind all of it.</p>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:14}}>
        {stats.map((s,i) => <StatCard key={i} {...s}/>)}
      </div>

      {/* chain status banner */}
      <div className="card" style={{marginTop:14,padding:'16px 20px',display:'flex',alignItems:'center',gap:14,
        borderColor:'rgba(6,201,140,.3)',background:'linear-gradient(90deg,rgba(6,201,140,.06),var(--ink-900) 60%)'}}>
        <div style={{width:38,height:38,borderRadius:11,background:'rgba(6,201,140,.12)',border:'1px solid rgba(6,201,140,.34)',display:'grid',placeItems:'center',color:'var(--signal-400)'}}>
          <i data-lucide="shield-check" style={{width:20,height:20}}></i>
        </div>
        <div>
          <div style={{fontSize:14,fontWeight:600}}>Audit chain verified</div>
          <div className="mono" style={{fontSize:12,color:'var(--fg-muted)',marginTop:2}}>44 receipts · Ed25519 · hashes &amp; linkage intact · head a1b2…9c2b</div>
        </div>
        <button className="btn btn-ghost" style={{marginLeft:'auto'}} onClick={() => setScreen('audit')}><i data-lucide="arrow-right"></i>Open audit log</button>
      </div>

      {/* recent activity */}
      <div style={{display:'grid',gridTemplateColumns:'1.55fr 1fr',gap:14,marginTop:14}}>
        <div className="card" style={{overflow:'hidden'}}>
          <div style={{display:'flex',alignItems:'center',padding:'14px 18px',borderBottom:'1px solid var(--ink-800)'}}>
            <span style={{fontSize:14,fontWeight:600}}>Recent activity</span>
            <button className="btn btn-ghost" style={{marginLeft:'auto',padding:'5px 10px',fontSize:12}} onClick={() => setScreen('audit')}>View all</button>
          </div>
          {ledger.slice(0,5).map(r =>
            <button key={r.seq} onClick={() => openReceipt(r)} style={{display:'grid',gridTemplateColumns:'40px 1fr auto',gap:12,alignItems:'center',
              padding:'12px 18px',borderTop:'1px solid var(--ink-850)',background:'none',border:'none',borderTopColor:'var(--ink-850)',width:'100%',cursor:'pointer',textAlign:'left',color:'inherit'}}>
              <span className="mono" style={{fontSize:11.5,color:'var(--ink-500)'}}>#{r.seq}</span>
              <div style={{minWidth:0}}>
                <div 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>
                </div>
                <div className="mono" style={{fontSize:11,color:'var(--ink-500)',marginTop:2}}>{r.principal}</div>
              </div>
              <OutcomePill outcome={r.outcome}/>
            </button>)}
        </div>

        <div className="card" style={{padding:'18px 20px'}}>
          <div style={{fontSize:14,fontWeight:600,marginBottom:14}}>Decision mix · 24h</div>
          <Bars/>
          <div style={{marginTop:16,paddingTop:14,borderTop:'1px solid var(--ink-800)',display:'flex',flexDirection:'column',gap:9}}>
            <Legend color="#3DEBB6" label="allow" val="92%"/>
            <Legend color="#F5B53F" label="needs_approval" val="2%"/>
            <Legend color="#F0728A" label="deny" val="6%"/>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatCard({ label, value, icon, tone, delta }) {
  const c = {indigo:'#9A90FA',mint:'#3DEBB6',amber:'#F5B53F',red:'#F0728A'}[tone];
  return (
    <div className="card" style={{padding:'16px 18px'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,color:c}}>
        <i data-lucide={icon} style={{width:17,height:17}}></i>
        <span style={{fontSize:12.5,color:'var(--fg-muted)'}}>{label}</span>
      </div>
      <div style={{fontSize:28,fontWeight:600,letterSpacing:'-.03em',marginTop:10}}>{value}</div>
      <div className="mono" style={{fontSize:11,color:'var(--ink-500)',marginTop:3}}>{delta}</div>
    </div>
  );
}
function Bars() {
  const data = [60,72,55,80,68,90,75,84,62,78,88,70];
  return (
    <div style={{display:'flex',gap:5,alignItems:'flex-end',height:90}}>
      {data.map((h,i) =>
        <div key={i} style={{flex:1,height:h+'%',borderRadius:4,background:i===5?'linear-gradient(var(--indigo-400),var(--indigo-600))':'var(--ink-700)'}}></div>)}
    </div>
  );
}
function Legend({ color, label, val }) {
  return (
    <div style={{display:'flex',alignItems:'center',gap:9,fontSize:12.5}}>
      <span style={{width:9,height:9,borderRadius:3,background:color}}></span>
      <span className="mono" style={{color:'var(--fg-2)'}}>{label}</span>
      <span style={{marginLeft:'auto',color:'var(--fg-muted)'}}>{val}</span>
    </div>
  );
}
function OutcomePill({ outcome }) {
  const map = {
    allow: ["pill-allow","badge-check","allow"],
    needs_approval: ["pill-appr","clock","needs_approval"],
    deny: ["pill-deny","shield-x","deny"],
  }[outcome];
  return <span className={"pill " + map[0]}><i data-lucide={map[1]}></i>{map[2]}</span>;
}
window.Overview = Overview;
window.OutcomePill = OutcomePill;