// 05 — Wad detail (policy container, edit, revoke)

function ScreenWadDetail({ onNav = () => {} }) {
  const [editing, setEditing] = React.useState(null);
  const [confirmRevoke, setConfirmRevoke] = React.useState(false);

  return (
    <div style={{
      position:'absolute', inset:0,
      background:'var(--bg)',
      display:'flex', flexDirection:'column',
      overflow:'hidden',
    }}>
      <StatusBar tint="light" />
      <div style={{
        flex:1, overflowY:'auto', padding:'4px 0 100px',
      }}>
        <WadHeader onBack={() => onNav('home')}/>
        <WadHero />
        <WadPolicy editing={editing} setEditing={setEditing} />
        <WadAllowlist />
        <WadActions onRevoke={() => setConfirmRevoke(true)}/>
      </div>
      <TabBar active="wads" onNav={onNav} />
      {confirmRevoke && <RevokeSheet onClose={() => setConfirmRevoke(false)} />}
    </div>
  );
}

function WadHeader({ onBack }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'8px 18px 12px',
      borderBottom:'1px solid var(--line)',
    }}>
      <div onClick={onBack} style={{
        display:'flex', alignItems:'center', gap:6,
        color:'var(--ink-soft)', cursor:'pointer',
        fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.04em',
      }}>
        <span style={{fontSize:18,lineHeight:1}}>‹</span> wads
      </div>
      <div style={{
        fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase',
      }}>wad · 0x7B…d2A1</div>
      <div style={{
        fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-soft)',
        cursor:'pointer',
      }}>···</div>
    </div>
  );
}

function WadHero() {
  return (
    <div style={{padding:'22px 22px 20px', borderBottom:'1px solid var(--line)'}}>
      <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:14}}>
        <AgentAvatar name="Bia" size={56}/>
        <div style={{flex:1}}>
          <div style={{
            fontFamily:'var(--display)', fontWeight:500, fontSize:28,
            letterSpacing:'-0.025em', color:'var(--ink)', lineHeight:1,
          }}>Bia</div>
          <div style={{
            fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
            letterSpacing:'0.04em', marginTop:5,
          }}>comms · personal · grip-enabled</div>
        </div>
        <div style={{
          padding:'4px 9px', background:'var(--green-soft)',
          border:'1px solid var(--green-line)', borderRadius:4,
          fontFamily:'var(--mono)', fontSize:9.5, color:'var(--green)',
          letterSpacing:'0.16em', textTransform:'uppercase',
        }}>active</div>
      </div>
      <div style={{
        display:'grid', gridTemplateColumns:'1fr 1fr', gap:1,
        background:'var(--line)',
        border:'1px solid var(--line)', borderRadius:8, overflow:'hidden',
      }}>
        <Mini k="spent today" v={<span><span style={{color:'var(--ink)'}}>$142</span><span style={{color:'var(--ink-mute)'}}> / $300</span></span>}/>
        <Mini k="txs · 30d" v="48"/>
      </div>
    </div>
  );
}

function Mini({ k, v }) {
  return (
    <div style={{padding:'12px 14px', background:'var(--bg)'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:5,
      }}>{k}</div>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:18,
        color:'var(--ink)', letterSpacing:'-0.01em',
        fontVariantNumeric:'tabular-nums',
      }}>{v}</div>
    </div>
  );
}

function WadPolicy({ editing, setEditing }) {
  const fields = [
    { k:'agent', v:'0x7B3a…d2A1', mono:true, lock:true },
    { k:'principal', v:'lea.base', mono:true, lock:true },
    { k:'scope', v:'comms.* · subs.media.*', edit:'scope' },
    { k:'cap.daily', v:'$300 USDC', edit:'cap', highlight:true },
    { k:'cap.tx', v:'$100 USDC', edit:'tx' },
    { k:'expires', v:'in 28 days · 2026-05-23', edit:'expires' },
    { k:'rate.limit', v:'12 / hour', edit:'rate' },
  ];
  return (
    <div style={{padding:'22px 22px 4px'}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'baseline',
        marginBottom:10,
      }}>
        <div style={{
          fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'0.18em',
          color:'var(--ink-mute)', textTransform:'uppercase',
        }}>policy · signed</div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
          display:'flex', alignItems:'center', gap:5,
        }}>
          <span style={{
            width:5,height:5,borderRadius:'50%',background:'var(--green)',
            boxShadow:'0 0 5px var(--green)',
          }}/>
          enforced onchain
        </div>
      </div>
      <div style={{
        background:'var(--bg-soft)',
        border:'1px solid var(--line)', borderRadius:10,
        padding:'4px 0',
        fontFamily:'var(--mono)', fontSize:11.5, lineHeight:1.7,
      }}>
        <div style={{padding:'8px 14px 4px', color:'var(--ink-mute)', fontSize:10, letterSpacing:'0.06em'}}>
          {'{'}
        </div>
        {fields.map((f, i) => (
          <div key={f.k} style={{
            display:'flex', alignItems:'center', gap:8,
            padding:'5px 14px',
            background: f.highlight ? 'rgba(63,202,140,0.04)' : 'transparent',
          }}>
            <span style={{color:'var(--ink-mute)', minWidth:90}}>"{f.k}"<span style={{color:'var(--ink-dim)'}}>:</span></span>
            <span style={{
              flex:1,
              color: f.mono ? 'var(--ochre)' : 'var(--ink)',
              fontWeight: f.highlight ? 500 : 400,
            }}>{f.mono ? `"${f.v}"` : `"${f.v}"`}</span>
            {f.edit && !f.lock && (
              <span style={{
                fontSize:9.5, color:'var(--green)', cursor:'pointer',
                letterSpacing:'0.16em', textTransform:'uppercase',
                padding:'2px 6px', border:'1px solid var(--green-line)', borderRadius:3,
              }}>edit</span>
            )}
            {f.lock && (
              <span style={{color:'var(--ink-dim)', fontSize:11}}>🔒</span>
            )}
          </div>
        ))}
        <div style={{padding:'4px 14px 8px', color:'var(--ink-mute)', fontSize:10}}>
          {'}'}
        </div>
      </div>
    </div>
  );
}

function WadAllowlist() {
  const items = [
    { d:'spotify.com', tag:'subs' },
    { d:'anthropic.com', tag:'compute' },
    { d:'openai.com', tag:'compute' },
    { d:'+ 4 more', tag:null, mute:true },
  ];
  return (
    <div style={{padding:'22px 22px 4px'}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'baseline',
        marginBottom:10,
      }}>
        <div style={{
          fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'0.18em',
          color:'var(--ink-mute)', textTransform:'uppercase',
        }}>allowlist · 7</div>
        <span style={{
          fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
          cursor:'pointer',
        }}>+ add</span>
      </div>
      <div style={{display:'flex', flexWrap:'wrap', gap:6}}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding:'6px 10px',
            background: it.mute ? 'transparent' : 'var(--card)',
            border:'1px solid var(--line)',
            borderRadius:5,
            display:'flex', alignItems:'center', gap:6,
            fontFamily:'var(--mono)', fontSize:10.5,
            color: it.mute ? 'var(--ink-mute)' : 'var(--ink-soft)',
            letterSpacing:'0.04em',
          }}>
            <span>{it.d}</span>
            {it.tag && (
              <span style={{
                color:'var(--green)', fontSize:9, opacity:0.7,
                paddingLeft:6, borderLeft:'1px solid var(--line)',
              }}>{it.tag}</span>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function WadActions({ onRevoke }) {
  return (
    <div style={{padding:'24px 22px 6px'}}>
      <button onClick={onRevoke} style={{
        width:'100%', padding:'14px',
        background:'transparent',
        border:'1px solid rgba(224,122,95,0.4)',
        color:'#E07A5F',
        borderRadius:10,
        fontFamily:'var(--mono)', fontWeight:600, fontSize:12,
        letterSpacing:'0.08em', textTransform:'uppercase',
        cursor:'pointer',
      }}>revoke wad</button>
      <div style={{
        marginTop:10, fontFamily:'var(--display)', fontStyle:'italic',
        fontSize:13, color:'var(--ink-mute)', textAlign:'center',
        lineHeight:1.5, textWrap:'pretty',
      }}>
        revocation is signed by your principal and effective onchain in &lt;1 block.
      </div>
    </div>
  );
}

function RevokeSheet({ onClose }) {
  return (
    <div style={{
      position:'absolute', inset:0, zIndex:50,
      background:'rgba(0,0,0,0.7)',
      backdropFilter:'blur(8px)',
      display:'flex', alignItems:'flex-end',
      animation:'fadeUp .25s',
    }} onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width:'100%', background:'var(--bg-soft)',
        borderTop:'1px solid var(--line-strong)',
        borderRadius:'18px 18px 0 0',
        padding:'24px 22px 36px',
        animation:'fadeUp .3s',
      }}>
        <div style={{
          width:36, height:4, background:'var(--ink-mute)',
          opacity:0.4, borderRadius:2, margin:'0 auto 18px',
        }}/>
        <div style={{
          fontFamily:'var(--display)', fontWeight:500, fontSize:22,
          letterSpacing:'-0.02em', color:'var(--ink)',
          textWrap:'balance', marginBottom:8,
        }}>
          revoke <em style={{color:'#E07A5F', fontStyle:'italic'}}>Bia</em>'s wad?
        </div>
        <div style={{
          fontFamily:'var(--display)', fontStyle:'italic',
          fontSize:14, color:'var(--ink-soft)', lineHeight:1.5,
          textWrap:'pretty', marginBottom:18,
        }}>
          Bia loses spend permission instantly. Pending tx will fail. Funds stay in your principal — they never moved.
        </div>
        <button style={{
          width:'100%', padding:'14px',
          background:'#E07A5F', color:'var(--bg)',
          border:'none', borderRadius:10,
          fontFamily:'var(--body)', fontWeight:600, fontSize:14,
          letterSpacing:'-0.01em',
          cursor:'pointer', marginBottom:8,
        }}>confirm revoke · sign</button>
        <button onClick={onClose} style={{
          width:'100%', padding:'14px',
          background:'transparent', color:'var(--ink-soft)',
          border:'1px solid var(--line-strong)', borderRadius:10,
          fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em',
          cursor:'pointer',
        }}>keep wad</button>
      </div>
    </div>
  );
}

window.ScreenWadDetail = ScreenWadDetail;