// Policy — the active policy rendered as readable cards (forbidden / rules / default)
function Policy({ policy }) {
  return (
    <div className="content-wrap fadein">
      <div className="page-head" style={{display:'flex',alignItems:'flex-end',gap:16}}>
        <div>
          <div className="eb">Policy</div>
          <h2>Active policy</h2>
          <p>Deterministic, fail-closed. Order is forbidden → rules (first match wins) → default. No model in the decision path.</p>
        </div>
        <div style={{marginLeft:'auto',display:'flex',gap:8}}>
          <span className="pill pill-neutral" style={{padding:'6px 11px'}}><i data-lucide="git-branch"></i>version {policy.version}</span>
          <button className="btn btn-ghost"><i data-lucide="pencil"></i>Edit YAML</button>
        </div>
      </div>

      {/* forbidden */}
      <SectionLabel icon="octagon-x" tone="deny" title="Forbidden" sub="hard denials, evaluated first" />
      <div style={{display:'flex',flexDirection:'column',gap:10,marginBottom:24}}>
        {policy.forbidden.map((f,i) =>
          <div key={i} className="card" style={{padding:'14px 18px',display:'flex',alignItems:'center',gap:14,borderLeft:'2px solid var(--deny)'}}>
            <span className="mono" style={{fontSize:13,color:'var(--fg)'}}>{f.name}</span>
            <span className="mono" style={{marginLeft:'auto',fontSize:12,color:'var(--fg-muted)'}}>
              {Object.entries(f.match).map(([k,v]) => `${k}: ${v}`).join(" · ")}
            </span>
            <span className="pill pill-deny"><i data-lucide="ban"></i>deny</span>
          </div>)}
      </div>

      {/* rules */}
      <SectionLabel icon="list-checks" tone="indigo" title="Rules" sub="first match wins" />
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {policy.rules.map((r,i) => <RuleCard key={i} r={r}/>)}
      </div>

      {/* default */}
      <div className="card" style={{marginTop:16,padding:'14px 18px',display:'flex',alignItems:'center',gap:12}}>
        <i data-lucide="shield-x" style={{width:17,height:17,color:'var(--fg-muted)'}}></i>
        <span style={{fontSize:13.5,color:'var(--fg-2)'}}>Anything not explicitly allowed is refused</span>
        <span className="pill pill-deny" style={{marginLeft:'auto'}}><i data-lucide="lock"></i>default: deny</span>
      </div>
    </div>
  );
}

function RuleCard({ r }) {
  const isAppr = r.decision === "needs_approval";
  return (
    <div className="card" style={{padding:'18px 20px',borderLeft:'2px solid '+(isAppr?'var(--approval)':'var(--allow)')}}>
      <div style={{display:'flex',alignItems:'center',gap:12,marginBottom:14}}>
        <span className="mono" style={{fontSize:14,fontWeight:500,color:'var(--fg)'}}>{r.name}</span>
        <span className={"pill " + (isAppr?"pill-appr":"pill-allow")} style={{marginLeft:'auto'}}>
          <i data-lucide={isAppr?"clock":"badge-check"}></i>{r.decision}
        </span>
      </div>
      <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:r.constraints?14:0}}>
        {Object.entries(r.match).map(([k,v]) =>
          <span key={k} className="pill pill-neutral" style={{fontSize:11}}>
            <span style={{color:'var(--ink-500)'}}>{k}</span> {String(v)}
          </span>)}
      </div>
      {r.constraints &&
        <div style={{borderTop:'1px solid var(--ink-800)',paddingTop:12,display:'flex',flexDirection:'column',gap:8}}>
          <span className="mono" style={{fontSize:10.5,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--ink-500)'}}>constraints</span>
          {Object.entries(r.constraints).map(([k,v]) =>
            <div key={k} style={{display:'flex',alignItems:'center',gap:9,fontFamily:'var(--font-mono)',fontSize:12}}>
              <i data-lucide="sliders-horizontal" style={{width:13,height:13,color:'#9A90FA'}}></i>
              <span style={{color:'var(--fg-2)'}}>{k}</span>
              <span style={{color:'var(--ink-500)'}}>{Object.entries(v).map(([kk,vv]) => `${kk}: ${Array.isArray(vv)?'['+vv.join(', ')+']':vv}`).join("  ·  ")}</span>
            </div>)}
        </div>}
    </div>
  );
}

function SectionLabel({ icon, tone, title, sub }) {
  const c = {deny:'#F0728A',indigo:'#9A90FA'}[tone];
  return (
    <div style={{display:'flex',alignItems:'center',gap:10,margin:'8px 0 12px'}}>
      <i data-lucide={icon} style={{width:16,height:16,color:c}}></i>
      <span style={{fontSize:13.5,fontWeight:600}}>{title}</span>
      <span style={{fontSize:12,color:'var(--fg-muted)'}}>{sub}</span>
    </div>
  );
}
window.Policy = Policy;