/* ============================================================
   screen_upgrader.jsx — «Апгрейдер»: круг шанса, вращающаяся стрелка,
   слева ставка из инвентаря, справа желаемый предмет, анимация win/lose.

   Шанс считает СЕРВЕР (POST /api/upgrade/chance), розыгрыш — тоже
   СЕРВЕР (POST /api/upgrade/play), фронт анимирует по resultAngle.
   ============================================================ */
const { useState:useStateU, useRef:useRefU, useEffect:useEffectU } = React;

const RING = 248, RR = 110, CCirc = 2*Math.PI*RR;

function UpgraderScreen({ items, onUpgrade, flash, dev, devPin }){
  const [stakeUids,setStake] = useStateU([]);
  const [targetId,setTarget] = useStateU(null);
  const [phase,setPhase] = useStateU('idle');     // idle|spin|win|lose
  const [angle,setAngle] = useStateU(0);
  const [trans,setTrans] = useStateU('none');
  const [picker,setPicker] = useStateU(null);      // 'stake'|'target'|null
  const [result,setResult] = useStateU(null);
  const [chance,setChance] = useStateU(0);
  const [chanceLoading,setChanceLoading] = useStateU(false);

  const stakeItems = items.filter(it=>stakeUids.includes(it.uid));
  const stakeVal = stakeItems.reduce((s,it)=>s+giftById(it.giftId).ton,0);
  const target = targetId ? giftById(targetId) : null;
  const targetVal = target ? target.ton : 0;

  const ready = stakeVal>0 && targetVal>0 && targetVal>stakeVal && !chanceLoading;
  const mult = (stakeVal>0 && targetVal>0) ? (targetVal/stakeVal) : 0;
  const winColor = '#2f8eff';

  // пересчёт шанса на сервере при изменении ставки/цели
  useEffectU(()=>{
    if(stakeUids.length===0 || !targetId || targetVal<=stakeVal){
      setChance(0);
      return;
    }
    let cancelled=false;
    setChanceLoading(true);
    Api.upgradeChance(stakeUids, targetId).then(res=>{
      if(!cancelled) setChance(res.chance);
    }).catch(()=>{
      if(!cancelled) setChance(0);
    }).finally(()=>{
      if(!cancelled) setChanceLoading(false);
    });
    return ()=>{ cancelled=true; };
  },[stakeUids.join(','), targetId]);

  async function play(){
    if(!ready || phase==='spin') return;
    setPhase('spin'); setResult(null);
    try{
      const res = await Api.upgradePlay(stakeUids, targetId); // {win,chance,roll,resultAngle,gift,itemUid}
      const next = Math.ceil((angle+1)/360)*360 + 360*4 + res.resultAngle;
      setTrans('transform 4.4s cubic-bezier(.16,.7,.18,1)');
      setAngle(next);
      setTimeout(()=>{
        setPhase(res.win?'win':'lose');
        setResult({ isWin:res.win, target: res.win ? res.gift : target });
        onUpgrade(res.win ? { win:true, gift:res.gift, itemUid:res.itemUid } : { win:false }, stakeUids);
      },4500);
    }catch(err){
      setPhase('idle');
      flash && flash('Не удалось выполнить апгрейд');
    }
  }

  function reset(){
    setResult(null); setPhase('idle'); setStake([]); setTarget(null);
    setTrans('none');
  }

  const glow = phase==='win' ? '#34c759' : phase==='lose' ? '#ff453a' : winColor;
  const chanceFrac = Math.max(0, Math.min(1, chance/100));

  return (
    <div className="screen">
      <div className="h1">Апгрейдер</div>
      <div className="sub">Прокачай дешёвый предмет в дорогой</div>

      {/* круг */}
      <div style={{position:'relative',width:RING,maxWidth:'100%',margin:'18px auto 0',aspectRatio:'1'}}>
        {dev && devPin(10,{left:'50%',top:-4,marginLeft:-10})}
        <svg viewBox={`0 0 ${RING} ${RING}`} style={{width:'100%',height:'100%',
          filter:`drop-shadow(0 0 26px ${glow}${phase==='idle'?'33':'66'})`,transition:'filter .4s'}}>
          <defs>
            <linearGradient id="winarc" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#5aa8ff"/><stop offset="1" stopColor="#2b7bff"/>
            </linearGradient>
          </defs>
          {/* тики */}
          {Array.from({length:60}).map((_,i)=>{
            const a=(i/60)*2*Math.PI, r1=RR+18, r2=RR+23, cx=RING/2, cy=RING/2;
            return <line key={i} x1={cx+r1*Math.cos(a)} y1={cy+r1*Math.sin(a)}
              x2={cx+r2*Math.cos(a)} y2={cy+r2*Math.sin(a)}
              stroke="rgba(255,255,255,.12)" strokeWidth={i%5===0?2:1}/>;
          })}
          {/* трек */}
          <circle cx={RING/2} cy={RING/2} r={RR} fill="none" stroke="#26262b" strokeWidth="14"/>
          {/* зона выигрыша */}
          <circle cx={RING/2} cy={RING/2} r={RR} fill="none"
            stroke={phase==='lose'?'#3a2326':'url(#winarc)'} strokeWidth="14" strokeLinecap="round"
            strokeDasharray={`${chanceFrac*CCirc} ${CCirc}`}
            transform={`rotate(-90 ${RING/2} ${RING/2})`}
            style={{transition:'stroke-dasharray .4s var(--ease)'}}/>
        </svg>

        {/* стрелка */}
        <div style={{position:'absolute',inset:0,transform:`rotate(${angle}deg)`,transition:trans,
          willChange:'transform'}}>
          <div style={{position:'absolute',left:'50%',top:6,transform:'translateX(-50%)'}}>
            <svg width="26" height="32" viewBox="0 0 26 32">
              <path d="M13 1 24 24a3 3 0 0 1-3.4 4.2L13 26l-7.6 2.2A3 3 0 0 1 2 24Z"
                fill={glow} stroke="#0b0b0d" strokeWidth="1.5"/>
            </svg>
          </div>
        </div>

        {/* центр */}
        <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',
          alignItems:'center',justifyContent:'center',gap:2}}>
          <div style={{color:glow,transition:'color .3s',transform:'scale(1.1)'}}>
            <IconUpgrade size={46} sw={2.6}/>
          </div>
          <div style={{fontSize:34,fontWeight:800,letterSpacing:'-1px',marginTop:4,
            color: phase==='lose'?'#ff6b62':phase==='win'?'#46d36a':'#fff'}}>
            {(stakeVal>0 && targetVal>0 && targetVal>stakeVal) ? Math.round(chance) : '—'}<span style={{fontSize:18}}>%</span>
          </div>
          <div style={{color:'var(--text-sec)',fontSize:12,fontWeight:600}}>
            {(stakeVal>0 && targetVal>0 && targetVal>stakeVal) ? `шанс · x${mult.toFixed(2)}` : 'выбери предметы'}
          </div>
        </div>
      </div>

      {/* ставка | цель */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:11,marginTop:22,position:'relative'}}>
        <SlotCard side="Ваша ставка" empty="Выбрать из инвентаря"
          items={stakeItems} val={stakeVal} accent="#7d8896"
          onClick={()=>phase!=='spin'&&setPicker('stake')}/>
        <SlotCard side="Цель апгрейда" empty="Что выбить"
          items={target?[{uid:'t',giftId:target.id}]:[]} val={targetVal} accent="#2f8eff"
          onClick={()=>phase!=='spin'&&setPicker('target')}/>
      </div>

      {/* CTA */}
      <div style={{position:'relative',marginTop:18}}>
        {dev && devPin(11,{right:6,top:-12})}
        {phase==='win'||phase==='lose'
          ? <button className="btn btn-ghost btn-block" onClick={reset}>Ещё раз</button>
          : <button className="btn btn-primary btn-block" onClick={play} disabled={!ready||phase==='spin'}>
              {phase==='spin'?'Крутим…':'Прокачать'}
            </button>}
      </div>

      {/* пикеры */}
      <Sheet open={picker==='stake'} onClose={()=>setPicker(null)}>
        <StakePicker items={items} selected={stakeUids} setSelected={setStake}/>
      </Sheet>
      <Sheet open={picker==='target'} onClose={()=>setPicker(null)}>
        <TargetPicker minVal={stakeVal} current={targetId}
          onPick={(id)=>{ setTarget(id); setPicker(null); }}/>
      </Sheet>

      {/* результат */}
      <UpgradeResult result={result} onClose={reset}/>
    </div>
  );
}

// слот ставки/цели
function SlotCard({ side, empty, items, val, accent, onClick }){
  return (
    <button className="card" onClick={onClick} style={{border:'1px solid var(--hairline)',cursor:'pointer',
      padding:'13px 13px 15px',textAlign:'left',fontFamily:'var(--font)',minHeight:128}}>
      <div style={{color:'var(--text-sec)',fontSize:12.5,fontWeight:700,marginBottom:9}}>{side}</div>
      {items.length===0 ? (
        <div style={{display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',
          gap:8,padding:'12px 0'}}>
          <div style={{width:44,height:44,borderRadius:13,background:'var(--surface-2)',
            display:'flex',alignItems:'center',justifyContent:'center',color:accent}}>
            <IconPlus size={22}/>
          </div>
          <div style={{color:'var(--text-ter)',fontSize:12,textAlign:'center',fontWeight:600}}>{empty}</div>
        </div>
      ):(
        <div>
          <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
            {items.slice(0,4).map((it,i)=>{ const g=giftById(it.giftId); return (
              <div key={i} style={{width:42,height:42,borderRadius:11,background:'var(--surface-2)',
                display:'flex',alignItems:'center',justifyContent:'center',fontSize:24,
                outline:`1.5px solid ${rarityRing(g.rarity)}66`}}>{g.emoji}</div>
            );})}
            {items.length>4 && <div style={{width:42,height:42,borderRadius:11,background:'var(--surface-2)',
              display:'flex',alignItems:'center',justifyContent:'center',fontWeight:800,fontSize:13,
              color:'var(--text-sec)'}}>+{items.length-4}</div>}
          </div>
          <div style={{marginTop:11,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <Price value={Number(val.toFixed(2))} currency="ton" size={14}/>
            <span style={{color:accent,fontSize:12,fontWeight:700}}>изменить</span>
          </div>
        </div>
      )}
    </button>
  );
}

function StakePicker({ items, selected, setSelected }){
  function toggle(uid){
    setSelected(selected.includes(uid)?selected.filter(x=>x!==uid):[...selected,uid]);
  }
  const sum = items.filter(it=>selected.includes(it.uid)).reduce((s,it)=>s+giftById(it.giftId).ton,0);
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:4}}>
        <span className="h2" style={{fontSize:18}}>Выбери ставку</span>
        <Price value={Number(sum.toFixed(2))} currency="ton" size={15}/>
      </div>
      <div style={{color:'var(--text-sec)',fontSize:13,marginBottom:14}}>Можно выбрать несколько предметов</div>
      {items.length===0
        ? <div style={{textAlign:'center',color:'var(--text-ter)',padding:'30px 0'}}>Инвентарь пуст</div>
        : <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
            {items.map(it=>{ const g=giftById(it.giftId); return (
              <GiftTile key={it.uid} gift={g} size={68} selected={selected.includes(it.uid)}
                onClick={()=>toggle(it.uid)}/>
            );})}
          </div>}
    </div>
  );
}

function TargetPicker({ minVal, current, onPick }){
  // цель должна быть дороже ставки
  const list = GIFTS.filter(g=> g.ton > minVal).sort((a,b)=>a.ton-b.ton);
  return (
    <div>
      <span className="h2" style={{fontSize:18}}>Что хочешь выбить</span>
      <div style={{color:'var(--text-sec)',fontSize:13,margin:'4px 0 14px'}}>
        Цель дороже ставки — чем дороже, тем меньше шанс
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
        {list.map(g=>(
          <GiftTile key={g.id} gift={g} size={68} selected={current===g.id} onClick={()=>onPick(g.id)}/>
        ))}
      </div>
    </div>
  );
}

function UpgradeResult({ result, onClose }){
  if(!result) return null;
  const { isWin, target } = result;
  const col = isWin ? '#34c759' : '#ff453a';
  return (
    <CenterModal open={true} onClose={onClose} dismissable={true}>
      <div style={{background:'#17171a',borderRadius:26,padding:'28px 22px 22px',textAlign:'center',
        border:`1px solid ${col}55`,boxShadow:`0 0 60px ${col}40`}}>
        <div style={{fontSize:90,animation:'pop .5s var(--ease) both',
          filter:`drop-shadow(0 12px 22px ${col}77)`}}>
          {isWin ? target.emoji : '💨'}
        </div>
        <div style={{fontSize:23,fontWeight:800,marginTop:10,color:col}}>
          {isWin ? 'Апгрейд удался!' : 'Не повезло'}
        </div>
        <div style={{color:'var(--text-sec)',fontSize:14,marginTop:6}}>
          {isWin ? <>Ты выбил «{target.title}»</> : 'Ставка сгорела. Попробуй ещё раз'}
        </div>
        <button className="btn btn-primary btn-block" style={{marginTop:22}} onClick={onClose}>
          {isWin ? 'Забрать в инвентарь' : 'Понятно'}
        </button>
      </div>
    </CenterModal>
  );
}

Object.assign(window, { UpgraderScreen });