/* ============================================================
   screen_tasks.jsx — «Задания»: подписка на канал, запуск бота и т.п.
   За выполнение начисляются ⭐ Stars.
   ============================================================ */
function TasksScreen({ tasks, onClaim, dev, devPin }){
  const taskIcon = { tg:IconTasks, bot:IconBot, fire:IconFire, users:IconUsers, case:IconCases };
  const left = tasks.filter(t=>!t.done);
  const totalLeft = left.reduce((s,t)=>s+t.reward,0);

  return (
    <div className="screen">
      <div className="h1">Задания</div>
      <div className="sub">Выполняй задания и получай ⭐ Stars</div>

      {/* баннер */}
      <div className="card" style={{marginTop:16,padding:'18px 20px',position:'relative',overflow:'hidden',
        background:'linear-gradient(135deg,#1d2a3f,#171a22)'}}>
        {dev && devPin(13,{right:10,top:10})}
        <div style={{position:'absolute',right:-10,top:-14,fontSize:96,opacity:.18}}>⭐</div>
        <div style={{color:'var(--text-sec)',fontSize:13,fontWeight:600}}>Доступно к получению</div>
        <div style={{marginTop:4}}><Price value={totalLeft} currency="star" size={30}/></div>
        <div style={{color:'var(--text-ter)',fontSize:13,marginTop:6}}>Звёздами можно открывать кейсы</div>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:10,marginTop:16}}>
        {tasks.map((t,i)=>{
          const Ic = taskIcon[t.icon] || IconTasks;
          return (
            <div key={t.id} className="card" style={{display:'flex',alignItems:'center',gap:13,
              padding:'13px 14px',opacity:t.done?.55:1,position:'relative'}}>
              {dev && i===0 && devPin(12,{left:6,top:-9})}
              {dev && i===3 && devPin(14,{left:6,top:-9})}
              <div style={{width:46,height:46,flex:'0 0 auto',borderRadius:13,
                background:t.done?'var(--surface-2)':'var(--accent-soft)',
                display:'flex',alignItems:'center',justifyContent:'center',
                color:t.done?'var(--text-ter)':'var(--accent)'}}>
                <Ic size={23}/>
              </div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontWeight:700,fontSize:15.5}}>{t.title}</div>
                <div style={{color:'var(--text-sec)',fontSize:12.5,marginTop:2,
                  whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{t.desc}</div>
                <div style={{marginTop:5}}><Price value={t.reward} currency="star" size={13}/></div>
              </div>
              {t.done
                ? <div style={{width:34,height:34,borderRadius:999,background:'var(--surface-2)',
                    display:'flex',alignItems:'center',justifyContent:'center',color:'var(--green)'}}>
                    <IconCheck size={19}/></div>
                : <button className="btn btn-primary" style={{height:40,padding:'0 16px',fontSize:14}}
                    onClick={()=>onClaim(t)}>{t.cta}</button>}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { TasksScreen });