// Wallet / profile page

function PedbyProfile({ wallet, tokens, onNav }) {
  const holdings = Object.entries(wallet.holdings).filter(([, v]) => v > 0);
  const created = tokens.filter(t => t.creator === 'you');

  if (!wallet.connected) {
    return (
      <div style={{ maxWidth: 420, margin: '0 auto', padding: '96px 28px', textAlign: 'center' }}>
        <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Connect your wallet</div>
        <div style={{ fontSize: 13.5, color: '#6B7570', marginBottom: 22 }}>Connect a Base wallet to launch tokens, hold positions and track your activity.</div>
        <Btn kind="primary" size="lg" onClick={wallet.connect} style={{ margin: '0 auto' }}>Connect wallet</Btn>
      </div>
    );
  }

  return (
    <div className="pedby-page-pad" style={{ maxWidth: 900, margin: '0 auto', padding: '36px 28px 96px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 28 }}>
        <Avatar name={wallet.address} tone="soft" size={56} />
        <div>
          <div className="sf-num" style={{ fontSize: 18, fontWeight: 700 }}>{wallet.address}</div>
          <div style={{ fontSize: 12.5, color: '#6B7570' }}>Base wallet</div>
        </div>
        <div style={{ marginLeft: 'auto', textAlign: 'right' }}>
          <div className="sf-num" style={{ fontSize: 22, fontWeight: 700 }}>{wallet.eth.toFixed(4)} ETH</div>
          <div style={{ fontSize: 11.5, color: '#6B7570' }}>available balance</div>
        </div>
      </div>

      <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>Your holdings</div>
      {holdings.length === 0 ? (
        <Card pad={20} style={{ marginBottom: 28, color: '#9AA39E', fontSize: 13, textAlign: 'center' }}>No positions yet — buy into a token from the marketplace.</Card>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px,1fr))', gap: 12, marginBottom: 28 }}>
          {holdings.map(([id, amt]) => {
            const t = tokens.find(tt => tt.id === id);
            if (!t) return null;
            return (
              <Card key={id} pad={16} style={{ cursor: 'pointer' }} onClick={() => onNav('token', id)}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                  <span style={{ fontWeight: 700, fontSize: 13 }}>${t.ticker}</span>
                  {t.graduated ? <Pill tone="blue" dot>Grad</Pill> : <Pill tone="green" dot>Live</Pill>}
                </div>
                <div className="sf-num" style={{ fontSize: 16, fontWeight: 700 }}>{Math.round(amt).toLocaleString()}</div>
                <div style={{ fontSize: 11, color: '#6B7570' }}>tokens held</div>
              </Card>
            );
          })}
        </div>
      )}

      <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>Tokens you created</div>
      {created.length === 0 ? (
        <Card pad={20} style={{ color: '#9AA39E', fontSize: 13, textAlign: 'center' }}>
          You haven't launched anything yet. <button onClick={() => onNav('create')} style={{ background: 'none', border: 'none', color: '#1E8C45', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>Launch a token →</button>
        </Card>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px,1fr))', gap: 16 }}>
          {created.map(t => <TokenCard key={t.id} t={t} onClick={() => onNav('token', t.id)} />)}
        </div>
      )}
    </div>
  );
}

window.PedbyProfile = PedbyProfile;