/* ============================================================
   screen_profile.jsx — «Профиль»: авторизация через TG ID,
   статистика, баланс, история операций, пополнение/вывод.
   ============================================================ */
function ProfileScreen({ user, history, onTopup, dev, devPin }){
  const best = giftById(user.stats.best);
  const stat = (label,val)=>(
    <div className="card" style={{padding:'14px 15px'}}>
      <div style={{color:'var(--text-sec)',fontSize:12.5,fontWeight:600}}>{label}</div>
      <div style={{fontSize:22,fontWeight:800,marginTop:3}}>{val}</div>
    </div>
  );
  return (
    <div className="screen">
      {/* шапка профиля */}
      <div style={{display:'flex',alignItems:'center',gap:14,marginTop:14,position:'relative'}}>
        {dev && devPin(2,{left:-2,top:-8})}
        <img src={user.avatar} referrerPolicy="no-referrer" alt=""
          style={{width:72,height:72,borderRadius:'50%',objectFit:'cover',
            border:'2px solid var(--hairline-strong)'}}/>
        <div style={{flex:1,minWidth:0}}>
          <div style={{fontSize:22,fontWeight:800}}>{user.name}</div>
          <div style={{color:'var(--accent)',fontSize:14,fontWeight:600}}>{user.username}</div>
          <div style={{color:'var(--text-ter)',fontSize:12,marginTop:3}}>TG ID: {user.tgId}</div>
        </div>
      </div>

      {/* баланс */}
      <div className="card" style={{marginTop:18,padding:'16px 18px',position:'relative'}}>
        {dev && devPin(15,{right:10,top:-9})}
        <div style={{color:'var(--text-sec)',fontSize:13,fontWeight:600}}>Баланс</div>
        <div style={{display:'flex',gap:18,marginTop:8,alignItems:'center'}}>
          <Price value={user.balanceTon} currency="ton" size={24}/>
          <div style={{width:1,height:22,background:'var(--hairline-strong)'}}/>
          <Price value={user.balanceStar} currency="star" size={24}/>
        </div>
        <div style={{display:'flex',gap:10,marginTop:16}}>
          <button className="btn btn-primary" style={{flex:1,height:46,fontSize:15,gap:7}} onClick={onTopup}>
            <IconPlus size={18}/> Пополнить
          </button>
          <button className="btn btn-ghost" style={{flex:1,height:46,fontSize:15,gap:7}} onClick={onTopup}>
            <IconArrowOut size={18}/> Вывести
          </button>
        </div>
      </div>

      {/* статистика */}
      <div className="section-row"><span className="h2">Статистика</span></div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:11}}>
        {stat('Кейсов открыто', user.stats.opened)}
        {stat('Апгрейдов', user.stats.upgrades)}
        {stat('Выиграно', <Price value={user.stats.wonTon} currency="ton" size={20}/>)}
        <div className="card" style={{padding:'14px 15px'}}>
          <div style={{color:'var(--text-sec)',fontSize:12.5,fontWeight:600}}>Лучший дроп</div>
          <div style={{display:'flex',alignItems:'center',gap:7,marginTop:3}}>
            <span style={{fontSize:26}}>{best.emoji}</span>
            <span style={{fontSize:15,fontWeight:800}}>{best.title}</span>
          </div>
        </div>
      </div>

      {/* история */}
      <div className="section-row" style={{position:'relative'}}>
        <span className="h2">История</span>
        {dev && devPin(16,{right:-2,top:6})}
      </div>
      <div className="card" style={{overflow:'hidden'}}>
        {history.length===0 && (
          <div style={{textAlign:'center',color:'var(--text-ter)',padding:'24px 0',fontSize:13}}>Пока пусто</div>
        )}
        {history.map((h,i)=>(
          <div key={h.id} style={{display:'flex',alignItems:'center',gap:12,padding:'13px 15px',
            borderBottom:i<history.length-1?'.5px solid var(--hairline)':'none'}}>
            <div style={{width:40,height:40,borderRadius:11,background:'var(--surface-2)',flex:'0 0 auto',
              display:'flex',alignItems:'center',justifyContent:'center',fontSize:21}}>
              {h.giftId ? giftById(h.giftId).emoji
                : h.kind==='topup' ? '➕' : h.delta==='lose' ? '💨' : '⭐'}
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontWeight:700,fontSize:14.5}}>{h.label}</div>
              <div style={{color:'var(--text-ter)',fontSize:12,marginTop:1}}>{formatTs(h.ts)}</div>
            </div>
            <div style={{fontSize:13,fontWeight:700,textAlign:'right'}}>
              {h.delta==='lose' && <span style={{color:'var(--red)'}}>проигрыш</span>}
              {h.delta==='out' && <span style={{color:'var(--text-sec)'}}>вывод</span>}
              {h.delta==='ton' && h.amountTon!=null && <Price value={`+${h.amountTon}`} currency="ton" size={13}/>}
              {h.delta==='star' && h.amountStar!=null && <Price value={`+${h.amountStar}`} currency="star" size={13}/>}
              {h.delta==='+' && h.giftId && <span style={{color:'var(--green)'}}>+ {giftById(h.giftId).title}</span>}
            </div>
          </div>
        ))}
      </div>

      <div style={{textAlign:'center',color:'var(--text-ter)',fontSize:12,margin:'18px 0 0'}}>
        Авторизация через Telegram · данные initData проверяются на сервере
      </div>
    </div>
  );
}

Object.assign(window, { ProfileScreen });