/* ============================================================
   screen_inventory.jsx — «Инвентарь»: предметы с рулетки/апгрейда.
   Тап по предмету → продать за TON или вывести NFT.
   ============================================================ */
function InventoryScreen({ items, onSell, onWithdraw, dev, devPin }){
  const [sel,setSel] = React.useState(null);
  const totalTon = items.reduce((s,it)=> s + giftById(it.giftId).ton, 0);

  return (
    <div className="screen">
      <div className="h1">Инвентарь</div>
      <div className="sub">Предметы, выпавшие с рулетки и апгрейда</div>

      {/* сводка стоимости */}
      <div className="card" style={{display:'flex',alignItems:'center',justifyContent:'space-between',
        padding:'15px 18px',marginTop:16,position:'relative'}}>
        {dev && devPin(7,{right:10,top:-10})}
        <div>
          <div style={{color:'var(--text-sec)',fontSize:13,fontWeight:600}}>Всего предметов</div>
          <div style={{fontSize:24,fontWeight:800,marginTop:2}}>{items.length}</div>
        </div>
        <div style={{textAlign:'right'}}>
          <div style={{color:'var(--text-sec)',fontSize:13,fontWeight:600}}>Оценочная стоимость</div>
          <div style={{marginTop:4}}><Price value={Number(totalTon.toFixed(1))} currency="ton" size={20}/></div>
        </div>
      </div>

      {items.length===0 ? (
        <div style={{textAlign:'center',color:'var(--text-sec)',padding:'70px 20px'}}>
          <div style={{fontSize:54,opacity:.5}}>🎒</div>
          <div style={{marginTop:10,fontWeight:600}}>Инвентарь пуст</div>
          <div style={{fontSize:14,marginTop:4}}>Открой кейс, чтобы получить первый подарок</div>
        </div>
      ) : (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginTop:16}}>
          {items.map(it=>{
            const g = giftById(it.giftId);
            return <GiftTile key={it.uid} gift={g} size={72} onClick={()=>setSel(it)}/>;
          })}
        </div>
      )}

      {/* карточка предмета */}
      <Sheet open={!!sel} onClose={()=>setSel(null)}>
        {sel && (()=>{ const g=giftById(sel.giftId); const r=RARITY[g.rarity]; return (
          <div style={{textAlign:'center',position:'relative'}}>
            {dev && devPin(8,{left:2,top:-2})}
            {dev && devPin(9,{right:2,top:-2})}
            <div style={{fontSize:88,margin:'6px 0',filter:`drop-shadow(0 12px 20px ${r.hex}66)`}}>{g.emoji}</div>
            <div style={{fontSize:22,fontWeight:800}}>{g.title}</div>
            <div style={{marginTop:8}}><RarityTag rarity={g.rarity}/></div>
            <div style={{marginTop:14,display:'flex',justifyContent:'center'}}>
              <span style={{background:'var(--surface-2)',borderRadius:999,padding:'8px 16px'}}>
                <Price value={g.ton} currency="ton" size={17}/>
              </span>
            </div>
            <div style={{display:'flex',gap:10,marginTop:22}}>
              <button className="btn btn-ghost" style={{flex:1,height:52,gap:7}}
                onClick={()=>{ onWithdraw(sel); setSel(null); }}>
                <IconArrowOut size={19}/> Вывести
              </button>
              <button className="btn btn-gold" style={{flex:1,height:52,gap:7}}
                onClick={()=>{ onSell(sel); setSel(null); }}>
                <IconSell size={18}/> Продать
              </button>
            </div>
            <div style={{color:'var(--text-ter)',fontSize:12,marginTop:12}}>
              «Вывести» — отправка реального NFT-подарка в Telegram
            </div>
          </div>
        );})()}
      </Sheet>
    </div>
  );
}

Object.assign(window, { InventoryScreen });