// 07 — Settings (DID, guardians, daily cap, time-lock)

function ScreenSettings({ onNav = () => {} }) {
  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',
      }}>
        <SetHeader/>
        <SetIdentity/>
        <SetGroup title="security" items={[
          { label:'global daily cap', sub:'across all wads', val:<span style={{fontFamily:'var(--mono)',color:'var(--ink)'}}>$1,500</span>, edit:true },
          { label:'time-lock', sub:'tx > $2,000 wait 24h', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
          { label:'biometric (face id)', sub:'required for approvals', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
          { label:'session lock', sub:'idle > 5 min', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
        ]}/>
        <SetGuardians/>
        <SetGroup title="notifications" items={[
          { label:'approval requests', sub:'push · always', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
          { label:'large incoming tx', sub:'push · > $100', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
          { label:'daily summary', sub:'09:00 local', val:<span style={{color:'var(--ink-mute)'}}>off</span>, toggle:true },
          { label:'agent activity', sub:'in-app · digest', val:<span style={{color:'var(--green)'}}>on</span>, toggle:true },
        ]}/>
        <SetGroup title="advanced" items={[
          { label:'recovery phrase', sub:'12 words · seed backup', val:'view', link:true },
          { label:'export keys', sub:'developers only', val:'export', link:true },
          { label:'switch network', sub:'currently base mainnet', val:'change', link:true },
        ]}/>
        <SetFooter/>
      </div>
      <TabBar active="settings" onNav={onNav}/>
    </div>
  );
}

function SetHeader() {
  return (
    <div style={{padding:'8px 22px 18px'}}>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:28,
        letterSpacing:'-0.025em', color:'var(--ink)',
      }}>Settings</div>
    </div>
  );
}

function SetIdentity() {
  return (
    <div style={{padding:'0 22px 8px'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:10,
      }}>principal identity</div>
      <div style={{
        background:'var(--card)', border:'1px solid var(--line)',
        borderRadius:10, padding:'16px 16px 14px',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:14}}>
          <div style={{
            width:44,height:44,borderRadius:'50%',
            background:'linear-gradient(135deg,#3FCA8C,#2A8A5E)',
            display:'flex',alignItems:'center',justifyContent:'center',
            fontFamily:'var(--display)',fontStyle:'italic',fontWeight:600,
            fontSize:20, color:'var(--bg)',
          }}>L</div>
          <div style={{flex:1}}>
            <div style={{
              fontFamily:'var(--display)', fontWeight:500, fontSize:18,
              color:'var(--ink)',letterSpacing:'-0.01em',
              display:'flex', alignItems:'center', gap:6,
            }}>
              lea.base
              <span style={{color:'var(--green)',fontSize:14}}>✓</span>
            </div>
            <div style={{
              fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
              letterSpacing:'0.04em', marginTop:2,
            }}>did:base:0x4f8c3e21…d2a3</div>
          </div>
        </div>
        <div style={{
          padding:'10px 12px',
          background:'var(--bg-soft)',
          border:'1px solid var(--line)', borderRadius:6,
          fontFamily:'var(--mono)', fontSize:10.5, color:'var(--ink-soft)',
          letterSpacing:'0.04em', lineHeight:1.5,
          display:'flex', alignItems:'center', justifyContent:'space-between',
        }}>
          <span>0x4f8c3e21a8b9c4d…d2a3</span>
          <span style={{color:'var(--green)', cursor:'pointer'}}>copy</span>
        </div>
      </div>
    </div>
  );
}

function SetGuardians() {
  const guardians = [
    { name:'mom.eth', sig:'0x9c…3f', state:'verified', color:'#A78BDA' },
    { name:'maxi.lens', sig:'0x4a…b1', state:'verified', color:'#88C4E8' },
    { name:'+ add 1 more', sig:null, state:'pending', color:null },
  ];
  return (
    <div style={{padding:'24px 22px 8px'}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'baseline',
        marginBottom:10,
      }}>
        <div style={{
          fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
          letterSpacing:'0.18em', textTransform:'uppercase',
        }}>social recovery · 2 of 3</div>
        <span style={{
          fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
        }}>healthy</span>
      </div>
      <div style={{
        background:'var(--card)', border:'1px solid var(--line)',
        borderRadius:10, overflow:'hidden',
      }}>
        {guardians.map((g, i) => (
          <div key={i} style={{
            padding:'12px 14px',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            display:'flex', alignItems:'center', gap:12,
            opacity: g.state === 'pending' ? 0.6 : 1,
          }}>
            <div style={{
              width:30, height:30, borderRadius:'50%',
              background: g.color
                ? `linear-gradient(135deg, ${g.color}, ${g.color}88)`
                : 'transparent',
              border: g.color ? 'none' : '1px dashed var(--line-strong)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontFamily:'var(--display)',fontStyle:'italic',fontWeight:600,
              fontSize:12, color: g.color ? '#fff' : 'var(--ink-mute)',
              flexShrink:0,
            }}>{g.name[0] === '+' ? '+' : g.name[0].toUpperCase()}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{
                fontSize:13, color:'var(--ink)', fontWeight:500,
                letterSpacing:'-0.005em',
              }}>{g.name}</div>
              {g.sig && (
                <div style={{
                  fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
                  letterSpacing:'0.04em', marginTop:1,
                }}>{g.sig}</div>
              )}
            </div>
            {g.state === 'verified' && (
              <span style={{
                fontFamily:'var(--mono)', fontSize:9.5, color:'var(--green)',
                letterSpacing:'0.16em', textTransform:'uppercase',
                padding:'3px 8px', background:'var(--green-soft)',
                border:'1px solid var(--green-line)', borderRadius:4,
              }}>verified</span>
            )}
            {g.state === 'pending' && (
              <span style={{
                fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
                letterSpacing:'0.04em', cursor:'pointer',
              }}>add →</span>
            )}
          </div>
        ))}
      </div>
      <div style={{
        marginTop:10,
        fontFamily:'var(--display)', fontStyle:'italic', fontSize:13,
        color:'var(--ink-mute)', lineHeight:1.5, textWrap:'pretty',
      }}>
        Guardians can recover access if you lose your phone. Two of three signatures required. They never see balances or move funds.
      </div>
    </div>
  );
}

function SetGroup({ title, items }) {
  return (
    <div style={{padding:'24px 22px 0'}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
        letterSpacing:'0.18em', textTransform:'uppercase', marginBottom:10,
      }}>{title}</div>
      <div style={{
        background:'var(--card)', border:'1px solid var(--line)',
        borderRadius:10, overflow:'hidden',
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding:'12px 14px',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            display:'flex', alignItems:'center', gap:12,
            cursor: it.link ? 'pointer' : 'default',
          }}>
            <div style={{flex:1, minWidth:0}}>
              <div style={{
                fontSize:13.5, color:'var(--ink)', fontWeight:500,
                letterSpacing:'-0.005em',
              }}>{it.label}</div>
              <div style={{
                fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
                letterSpacing:'0.04em', marginTop:2,
              }}>{it.sub}</div>
            </div>
            {it.toggle ? (
              <Toggle on={String(it.val.props?.children).includes('on')}/>
            ) : it.link ? (
              <span style={{
                fontFamily:'var(--mono)', fontSize:10.5, color:'var(--green)',
                letterSpacing:'0.04em',
                display:'flex', alignItems:'center', gap:4,
              }}>{it.val} →</span>
            ) : (
              <div style={{
                display:'flex', alignItems:'center', gap:8,
                fontFamily:'var(--mono)', fontSize:11.5, color:'var(--ink)',
              }}>
                {it.val}
                {it.edit && <span style={{color:'var(--green)',fontSize:10}}>edit</span>}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function Toggle({ on }) {
  const [v, setV] = React.useState(on);
  return (
    <div onClick={() => setV(!v)} style={{
      width:42, height:24, borderRadius:14,
      background: v ? 'var(--green)' : 'var(--ink-dim)',
      position:'relative', cursor:'pointer',
      transition:'background .2s',
    }}>
      <div style={{
        position:'absolute', top:2, left: v ? 20 : 2,
        width:20, height:20, borderRadius:'50%',
        background:'#fff',
        boxShadow:'0 1px 3px rgba(0,0,0,0.3)',
        transition:'left .2s',
      }}/>
    </div>
  );
}

function SetFooter() {
  return (
    <div style={{
      padding:'32px 22px 8px',
      textAlign:'center',
    }}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-mute)',
        letterSpacing:'0.16em', textTransform:'uppercase', lineHeight:1.7,
      }}>
        grip · agent app<br/>
        <span style={{opacity:0.6}}>v 0.4.2 · base mainnet</span>
      </div>
    </div>
  );
}

window.ScreenSettings = ScreenSettings;