// 04 — Home dashboard (standalone Grip Agent app)
// Principal pill · balance · open wads strip · recent activity · tabbar

function ScreenHome({ onNav = () => {} }) {
  return (
    <div style={{
      position:'absolute', inset:0,
      background:'var(--bg)',
      backgroundImage: 'radial-gradient(ellipse 600px 400px at 50% -100px, rgba(63,202,140,0.08), transparent 60%)',
      display:'flex', flexDirection:'column',
      overflow:'hidden',
    }}>
      <StatusBar tint="light" />
      <div style={{
        flex:1, overflowY:'auto', padding:'12px 22px 100px',
      }}>
        <HomeTop />
        <HomePrincipal />
        <HomeBalance />
        <HomeQuickActions />
        <HomeWads onNav={onNav}/>
        <HomeRecent onNav={onNav}/>
      </div>
      <TabBar active="home" onNav={(id) => onNav(id)} />
    </div>
  );
}

function HomeTop() {
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'4px 0 16px',
    }}>
      <div style={{display:'flex', alignItems:'center', gap:8}}>
        <span style={{
          fontFamily:'var(--display)', fontStyle:'italic', fontWeight:500,
          fontSize:24, color:'var(--green)', letterSpacing:'-0.02em',
        }}>grip</span>
        <span style={{color:'var(--ink)',fontFamily:'var(--display)',fontSize:24,fontWeight:500,marginLeft:-4}}>.</span>
      </div>
      <div style={{display:'flex', alignItems:'center', gap:10}}>
        <button style={{
          width:34, height:34, borderRadius:'50%',
          background:'var(--card)', border:'1px solid var(--line)',
          display:'flex',alignItems:'center',justifyContent:'center',
          color:'var(--ink-soft)', cursor:'pointer',
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/>
          </svg>
        </button>
        <div style={{
          width:34, height:34, borderRadius:'50%',
          background:'linear-gradient(135deg,#3FCA8C,#2A8A5E)',
          display:'flex',alignItems:'center',justifyContent:'center',
          fontFamily:'var(--display)',fontStyle:'italic',fontWeight:600,
          fontSize:15, color:'var(--bg)',
        }}>L</div>
      </div>
    </div>
  );
}

function HomePrincipal() {
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:8,
      padding:'5px 12px 5px 8px',
      background:'var(--green-soft)',
      border:'1px solid var(--green-line)',
      borderRadius:18,
      fontFamily:'var(--mono)', fontSize:11, color:'var(--green)',
      letterSpacing:'0.04em',
    }}>
      <span style={{
        width:6, height:6, borderRadius:'50%', background:'var(--green)',
        boxShadow:'0 0 8px var(--green)', animation:'pulse 2s infinite',
      }}/>
      <span style={{color:'var(--ink-mute)',fontSize:9,letterSpacing:'0.18em',textTransform:'uppercase'}}>principal</span>
      <span>lea.base</span>
      <span style={{color:'var(--green)',marginLeft:2}}>✓</span>
    </div>
  );
}

function HomeBalance() {
  return (
    <div style={{paddingTop:18, paddingBottom:6}}>
      <div style={{
        fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'0.18em',
        color:'var(--ink-mute)', textTransform:'uppercase', marginBottom:8,
      }}>balance · usdc</div>
      <div style={{
        fontFamily:'var(--display)', fontWeight:500, fontSize:56,
        letterSpacing:'-0.045em', lineHeight:1, color:'var(--ink)',
        fontVariantNumeric:'tabular-nums',
        display:'flex', alignItems:'baseline', gap:4,
      }}>
        <span style={{color:'var(--ink-mute)',fontSize:24}}>$</span>
        <span>4,287</span>
        <span style={{color:'var(--ink-mute)',fontSize:34}}>.43</span>
      </div>
      <div style={{
        marginTop:8, display:'flex', gap:8, alignItems:'center',
        fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-soft)',
      }}>
        <span style={{color:'var(--green)'}}>+$ 142.18</span>
        <span style={{color:'var(--ink-mute)',opacity:0.6}}>·</span>
        <span style={{color:'var(--ink-mute)'}}>last 24h</span>
      </div>
    </div>
  );
}

function HomeQuickActions() {
  const actions = [
    { id:'send', label:'send', icon:'↗' },
    { id:'recv', label:'receive', icon:'↙' },
    { id:'spawn', label:'new wad', icon:'+' },
    { id:'swap', label:'swap', icon:'⇅' },
  ];
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8,
      marginTop:18,
    }}>
      {actions.map(a => (
        <button key={a.id} style={{
          padding:'14px 6px',
          background:'var(--card)', border:'1px solid var(--line)',
          borderRadius:10, color:'var(--ink)',
          display:'flex',flexDirection:'column',alignItems:'center',gap:6,
          cursor:'pointer',
        }}>
          <span style={{
            fontFamily:'var(--display)',fontWeight:500,fontSize:18,
            color:'var(--green)',
          }}>{a.icon}</span>
          <span style={{
            fontFamily:'var(--mono)',fontSize:10,
            color:'var(--ink-soft)',letterSpacing:'0.06em',
          }}>{a.label}</span>
        </button>
      ))}
    </div>
  );
}

function HomeWads({ onNav }) {
  const wads = [
    { name:'Bia', scope:'comms · personal', cap:300, used:142, color:'#A78BDA' },
    { name:'Pi', scope:'devops · infra', cap:1000, used:380, color:'#88C4E8' },
    { name:'Atlas', scope:'travel · ops', cap:500, used:0, color:'#E0A561' },
  ];
  return (
    <div style={{marginTop:24}}>
      <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',
        }}>open wads · 3</div>
        <span style={{
          fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
          cursor:'pointer',
        }}>manage →</span>
      </div>
      {wads.map(w => (
        <div key={w.name} onClick={() => onNav('wad-detail')} style={{
          padding:'12px 14px',
          background:'var(--card)', border:'1px solid var(--line)',
          borderRadius:10, marginBottom:6,
          display:'flex', alignItems:'center', gap:12,
          cursor:'pointer',
        }}>
          <AgentAvatar name={w.name} size={34}/>
          <div style={{flex:1, minWidth:0}}>
            <div style={{
              display:'flex',alignItems:'baseline',justifyContent:'space-between',gap:8,
            }}>
              <span style={{
                fontFamily:'var(--display)',fontWeight:500,fontSize:15,
                color:'var(--ink)',letterSpacing:'-0.005em',
              }}>{w.name}</span>
              <span style={{
                fontFamily:'var(--mono)',fontSize:10.5,
                color:'var(--ink-soft)',fontVariantNumeric:'tabular-nums',
              }}>
                <span style={{color:'var(--ink)'}}>${w.used}</span>
                <span style={{color:'var(--ink-mute)'}}> / ${w.cap}</span>
              </span>
            </div>
            <div style={{
              fontFamily:'var(--mono)',fontSize:10,color:'var(--ink-mute)',
              letterSpacing:'0.04em',marginTop:1,
            }}>{w.scope}</div>
            <div style={{
              marginTop:6, height:2, background:'var(--line-strong)',
              borderRadius:1, overflow:'hidden',
            }}>
              <div style={{
                height:'100%', width:`${(w.used/w.cap)*100}%`,
                background:w.color, borderRadius:1,
              }}/>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function HomeRecent({ onNav }) {
  const txs = [
    { agent:'Pi', to:'Anthropic API', amt:80, dir:'out', time:'2m ago', tag:'compute' },
    { agent:'Bia', to:'Spotify', amt:12, dir:'out', time:'1h ago', tag:'subs' },
    { agent:null, to:'lea.base', amt:500, dir:'in', time:'3h ago', tag:'fund' },
  ];
  return (
    <div style={{marginTop:24}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'baseline',
        marginBottom:8,
      }}>
        <div style={{
          fontFamily:'var(--mono)', fontSize:9.5, letterSpacing:'0.18em',
          color:'var(--ink-mute)', textTransform:'uppercase',
        }}>recent</div>
        <span style={{
          fontFamily:'var(--mono)', fontSize:10, color:'var(--green)',
          cursor:'pointer',
        }} onClick={() => onNav('activity')}>all →</span>
      </div>
      <div style={{
        background:'var(--card)', border:'1px solid var(--line)',
        borderRadius:10, overflow:'hidden',
      }}>
        {txs.map((t, i) => (
          <div key={i} style={{
            padding:'12px 14px',
            borderTop: i === 0 ? 'none' : '1px solid var(--line)',
            display:'flex', alignItems:'center', gap:12,
          }}>
            <div style={{
              width:30, height:30, borderRadius:'50%',
              background: t.dir === 'in' ? 'var(--green-soft)' : 'rgba(224,122,95,0.14)',
              color: t.dir === 'in' ? 'var(--green)' : 'var(--rust)',
              display:'flex',alignItems:'center',justifyContent:'center',
              fontFamily:'var(--mono)', fontSize:12, fontWeight:600,
              flexShrink:0,
            }}>{t.dir === 'in' ? '↙' : '↗'}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{
                fontSize:13, color:'var(--ink)', fontWeight:500,
                letterSpacing:'-0.005em',
              }}>{t.to}</div>
              <div style={{
                fontFamily:'var(--mono)', fontSize:9.5, color:'var(--ink-mute)',
                letterSpacing:'0.06em', marginTop:1,
                display:'flex', gap:6, alignItems:'center',
              }}>
                {t.agent && (
                  <>
                    <span style={{color:AGENT_COLORS[t.agent].solid}}>· {t.agent}</span>
                    <span style={{opacity:0.4}}>·</span>
                  </>
                )}
                <span>{t.tag}</span>
                <span style={{opacity:0.4}}>·</span>
                <span>{t.time}</span>
              </div>
            </div>
            <div style={{
              fontFamily:'var(--display)', fontWeight:500, fontSize:14,
              color: t.dir === 'in' ? 'var(--green)' : 'var(--ink)',
              fontVariantNumeric:'tabular-nums', letterSpacing:'-0.01em',
            }}>{t.dir === 'in' ? '+' : '-'}${t.amt}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.ScreenHome = ScreenHome;