// screens-fortune.jsx — Fortune wheel + prize reveal + lucky points
const { useState: _fs_useState, useEffect: _fs_useEffect, useRef: _fs_useRef, useMemo: _fs_useMemo } = React;

function FortuneScreen({ ctx }){
  const { t: T, fortune, setFortune, setBalance, balance, navigate, fortuneStyle } = ctx;
  const prizes = window.RAVANA_DATA.fortune_prizes;
  const [rotation, setRotation] = _fs_useState(0);
  const [spinning, setSpinning] = _fs_useState(false);
  const [prize, setPrize] = _fs_useState(null);
  const [view, setView] = _fs_useState('wheel'); // wheel, exchange
  const [reelOffsets, setReelOffsets] = _fs_useState([0, 0, 0]);

  const canSpin = (fortune.spins > 0 || fortune.dailyReady) && !spinning;

  const spin = () => {
    if (!canSpin) return;
    setSpinning(true);
    const idx = Math.floor(Math.random() * prizes.length);
    const chosen = prizes[idx];

    if (fortuneStyle === 'reel') {
      // 3 reels to settle on a stack
      const offsets = [0,0,0].map((_,i) => -(60 + i*20) * 56);
      setReelOffsets(offsets);
    } else {
      // Wheel: rotate so pin (top) points to sector idx (centered)
      const slice = 360 / prizes.length;
      const baseRotations = 5 * 360;
      const target = baseRotations + (360 - (idx * slice + slice/2));
      setRotation(target);
    }

    setTimeout(() => {
      setPrize(chosen);
      setSpinning(false);
      // Deduct spin and add reward
      setFortune(f => ({
        ...f,
        spins: fortune.dailyReady ? f.spins : Math.max(0, f.spins - 1),
        dailyReady: false,
        cooldown: '23h 59m',
      }));
      if (chosen.kind === 'photo') setBalance(b => ({...b, photo: b.photo + chosen.amount}));
      if (chosen.kind === 'video') setBalance(b => ({...b, video: b.video + chosen.amount}));
      if (chosen.kind === 'points') setFortune(f => ({...f, points: f.points + chosen.amount}));
      if (chosen.kind === 'spin') setFortune(f => ({...f, spins: f.spins + chosen.amount}));
      if (chosen.kind === 'jackpot') {
        setBalance(b => ({...b, photo: b.photo + 100, video: b.video + 5}));
        setFortune(f => ({...f, points: f.points + 500}));
      }
    }, fortuneStyle === 'reel' ? 2300 : 3700);
  };

  if (view === 'exchange') return <LuckyPointsExchange ctx={ctx} onBack={()=>setView('wheel')}/>;

  return (
    <div className="screen" style={{position:'relative'}}>
      <StarField count={30}/>

      <ScreenHeader title={T('fortune_title')} subtitle={T('fortune_sub')}
        right={
          <div className="row" style={{gap: 6}}>
            <HelpButton topic="fortune" lang={ctx.lang}/>
            <button className="icon-btn" onClick={()=>setView('exchange')}><Icon.sparkles size={16}/></button>
          </div>
        }/>

      <div className="grid-2">
        <div className="card card-gold" style={{padding: 10}}>
          <div className="row-between">
            <div>
              <div className="dim" style={{fontSize:10,textTransform:'uppercase',letterSpacing:'0.12em'}}>{T('spins_left')}</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:600,color:'var(--gold)'}}>{fortune.spins}{fortune.dailyReady ? ' +1' : ''}</div>
            </div>
            <Icon.refresh size={20} style={{color:'var(--gold)'}}/>
          </div>
        </div>
        <div className="card" style={{padding: 10, borderColor:'rgba(155,92,255,0.22)'}}>
          <div className="row-between">
            <div>
              <div className="dim" style={{fontSize:10,textTransform:'uppercase',letterSpacing:'0.12em'}}>{T('lucky_points')}</div>
              <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:600,color:'var(--purple-3)'}}>{fortune.points}</div>
            </div>
            <Icon.sparkles size={20} style={{color:'var(--purple-3)'}}/>
          </div>
        </div>
      </div>

      {fortuneStyle === 'reel' ? (
        <ReelStage offsets={reelOffsets} spinning={spinning} prizes={prizes}/>
      ) : (
        <WheelStage rotation={rotation} prizes={prizes} spinning={spinning}/>
      )}

      <div className="row-between" style={{marginTop: 4}}>
        <div>
          {fortune.dailyReady ? (
            <div style={{display:'flex',alignItems:'center',gap: 6}}>
              <span className="chip chip-success"><Icon.zap size={11}/> {T('fortune_widget_ready')}</span>
            </div>
          ) : (
            <div className="dim">{T('next_daily')}: <span style={{color:'var(--gold)'}}>{fortune.cooldown}</span></div>
          )}
        </div>
      </div>

      <button onClick={spin} disabled={!canSpin}
        className="btn btn-gold btn-block btn-lg" style={{position:'relative'}}>
        {spinning ? <><span className="shimmer" style={{position:'absolute',inset:0,borderRadius:14,opacity:0.5}}/>Spinning…</>
          : (canSpin ? <><Icon.sparkles size={16}/> {T('spin')}</> : T('no_spins'))}
      </button>

      {/* Earn more spins */}
      <div className="section-title"><h3>{T('earn_spins')}</h3></div>
      <div className="col">
        <EarnRow icon={<Icon.gift size={16}/>} title={T('earn_invite')} action={()=>navigate('referrals')} accent="purple"/>
        <EarnRow icon={<Icon.crown size={16}/>} title={T('earn_purchase')} action={()=>navigate('credits')} accent="gold"/>
        <EarnRow icon={<Icon.users size={16}/>} title={T('earn_referral_paid')} action={()=>navigate('referrals')} accent="cyan"/>
        <EarnRow icon={<Icon.flame size={16}/>} title={T('earn_streak')} accent="purple"/>
      </div>

      {/* Recent prizes */}
      <div className="section-title"><h3>{T('recent_prizes')}</h3></div>
      <div className="col">
        {window.RAVANA_DATA.recent_prizes.map((p, i) => (
          <div className="card" key={i} style={{padding: 10}}>
            <div className="row" style={{gap: 12}}>
              <PrizeIcon kind={p.kind}/>
              <div style={{flex:1}}>
                <div style={{fontSize: 13, fontWeight: 500}}>
                  {prizeText(p.kind, p.amount)}
                </div>
                <div className="dim">{p.time}</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <PrizeRevealModal prize={prize} onClose={()=>setPrize(null)}
        canSpin={fortune.spins > 0 || fortune.dailyReady}
        onSpinAgain={()=>{ setPrize(null); setTimeout(spin, 200); }}
        navigate={navigate} ctx={ctx}/>
    </div>
  );
}

// ===== SVG Wheel =====
function WheelStage({ rotation, prizes, spinning }){
  const N = prizes.length;
  const slice = 360 / N;
  const cx = 150, cy = 150, R = 138, RI = 28;
  const TAU = Math.PI / 180;

  // Sector path
  const sectorPath = (i) => {
    const a1 = (i * slice - 90 - slice/2) * TAU;
    const a2 = ((i+1) * slice - 90 - slice/2) * TAU;
    const x1 = cx + R * Math.cos(a1), y1 = cy + R * Math.sin(a1);
    const x2 = cx + R * Math.cos(a2), y2 = cy + R * Math.sin(a2);
    return `M ${cx} ${cy} L ${x1} ${y1} A ${R} ${R} 0 0 1 ${x2} ${y2} Z`;
  };

  // Icon at sector midpoint
  const sectorIconPos = (i) => {
    const ang = (i * slice - 90) * TAU;
    const r = R * 0.62;
    return { x: cx + r * Math.cos(ang), y: cy + r * Math.sin(ang), deg: i * slice };
  };

  // Studs around the rim
  const STUDS = 24;
  const studs = Array.from({length: STUDS}, (_, i) => {
    const a = (i / STUDS) * 360 * TAU;
    return { x: cx + (R + 12) * Math.cos(a), y: cy + (R + 12) * Math.sin(a), i };
  });

  return (
    <div className="wheel-shell">
      {/* Pointer at top — fixed */}
      <svg className="wheel-pin-svg" viewBox="0 0 40 36" width="38" height="34" aria-hidden="true">
        <defs>
          <linearGradient id="pinGrad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0" stopColor="#FFE08A"/>
            <stop offset="0.6" stopColor="#F6C85F"/>
            <stop offset="1" stopColor="#A86A14"/>
          </linearGradient>
        </defs>
        <path d="M20 36 L4 6 Q20 0 36 6 Z" fill="url(#pinGrad)" stroke="#FFE9A8" strokeWidth="1"/>
        <circle cx="20" cy="10" r="3" fill="#fff" opacity="0.55"/>
      </svg>

      {/* The disc */}
      <svg className="wheel-svg" viewBox="0 0 300 300"
        style={{ transform: `rotate(${rotation}deg)`, transition: 'transform 3.6s cubic-bezier(.18,.78,.18,1)' }}>
        <defs>
          {prizes.map((p, i) => (
            <radialGradient key={i} id={`sg-${i}`} cx="50%" cy="50%" r="65%">
              <stop offset="0%" stopColor={lighten(p.color, 0.18)}/>
              <stop offset="100%" stopColor={p.color}/>
            </radialGradient>
          ))}
          <radialGradient id="rimGlow" cx="50%" cy="50%" r="50%">
            <stop offset="60%" stopColor="rgba(255,235,170,0)"/>
            <stop offset="100%" stopColor="rgba(255,235,170,0.5)"/>
          </radialGradient>
        </defs>

        {/* Outer rim — gold */}
        <circle cx={cx} cy={cy} r={R + 16} fill="#0c0a1a" stroke="#0a0814" strokeWidth="2"/>
        <circle cx={cx} cy={cy} r={R + 16} fill="none" stroke="url(#rimGlow)" strokeWidth="4"/>
        <circle cx={cx} cy={cy} r={R + 14} fill="none" stroke="#F6C85F" strokeWidth="2"/>
        <circle cx={cx} cy={cy} r={R + 9} fill="none" stroke="#7A4F00" strokeWidth="1"/>

        {/* Studs */}
        {studs.map(s => (
          <circle key={s.i} cx={s.x} cy={s.y} r="2.5" fill="#FFE08A"
            style={{ opacity: spinning ? (0.4 + (s.i % 3) * 0.3) : (s.i % 2 ? 0.95 : 0.55) }}/>
        ))}

        {/* Sectors */}
        {prizes.map((p, i) => (
          <path key={i} d={sectorPath(i)} fill={`url(#sg-${i})`}
            stroke="#F6C85F" strokeWidth="1.3"/>
        ))}

        {/* Sector labels — icon + text */}
        {prizes.map((p, i) => {
          const { x, y, deg } = sectorIconPos(i);
          const darkFg = p.color === '#F6C85F' || p.color === '#DFA64A';
          const fg = darkFg ? '#2a1700' : '#fff';
          return (
            <g key={i} transform={`translate(${x},${y}) rotate(${deg})`}>
              <SectorContent prize={p} fg={fg}/>
            </g>
          );
        })}

        {/* Spokes (subtle highlight) */}
        {prizes.map((_, i) => {
          const a = (i * slice - 90 - slice/2) * TAU;
          const xo = cx + (R - 2) * Math.cos(a);
          const yo = cy + (R - 2) * Math.sin(a);
          return <line key={i} x1={cx} y1={cy} x2={xo} y2={yo} stroke="rgba(0,0,0,0.18)" strokeWidth="0.8"/>;
        })}

        {/* Inner hub frame */}
        <circle cx={cx} cy={cy} r={RI + 8} fill="#050716" stroke="#F6C85F" strokeWidth="2"/>
        <circle cx={cx} cy={cy} r={RI} fill="#1a1635"/>
      </svg>

      {/* Hub label (counter-rotated so it stays upright) */}
      <div className="wheel-hub-static">
        <Icon.sparkles size={16} style={{color:'#F6C85F'}}/>
      </div>
    </div>
  );
}

// renders the icon + short text within a single sector group (transform already applied)
function SectorContent({ prize, fg }){
  // 16px icon centered at -10y, text below at +14y
  let icon = null;
  if (prize.kind === 'photo')   icon = <PathPhoto/>;
  else if (prize.kind === 'video')   icon = <PathVideo/>;
  else if (prize.kind === 'points')  icon = <PathSparkle/>;
  else if (prize.kind === 'spin')    icon = <PathRefresh/>;
  else if (prize.kind === 'jackpot') icon = <PathCrown/>;
  return (
    <g>
      <g transform="translate(-8,-22) scale(0.7)" fill={fg} stroke="none">{icon}</g>
      <text textAnchor="middle" y="6" fill={fg}
        style={{ fontFamily: 'Space Grotesk, Inter Tight, sans-serif', fontWeight: 700, fontSize: 13, letterSpacing: '0.02em' }}>
        {prize.short}
      </text>
    </g>
  );
}

// Filled SVG glyphs that go inside sectors (no stroke, currentColor=fg)
const PathPhoto = () => <path d="M3 5h14a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm7 3a3 3 0 100 6 3 3 0 000-6z"/>;
const PathVideo = () => <path d="M2 6a2 2 0 012-2h9a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14 1.5l4-2.5v10l-4-2.5v-5z"/>;
const PathSparkle = () => <path d="M10 1l1.6 4.4 4.4 1.6-4.4 1.6L10 13 8.4 8.6 4 7l4.4-1.6z"/>;
const PathRefresh = () => <path d="M10 2a8 8 0 016.3 3l1.7-1v4.5h-4.5l1.5-1.4A5 5 0 105 10h-3a8 8 0 018-8z"/>;
const PathCrown = () => <path d="M2 6l3 5 5-7 5 7 3-5v10H2z"/>;

function lighten(hex, amt){
  // Simple: blend hex toward white
  const c = hex.replace('#','');
  const r = parseInt(c.substr(0,2),16), g = parseInt(c.substr(2,2),16), b = parseInt(c.substr(4,2),16);
  const m = v => Math.round(v + (255 - v) * amt);
  const h = v => v.toString(16).padStart(2,'0');
  return `#${h(m(r))}${h(m(g))}${h(m(b))}`;
}

// ===== Slot reel =====
function ReelStage({ offsets, spinning, prizes }){
  // Render symbols as visual chips (icon + color)
  const Cells = ({ col }) => (
    <>
      {Array.from({length: 80}, (_, i) => {
        const p = prizes[i % prizes.length];
        return (
          <div key={i} className="reel-symbol" style={{ '--sym-color': p.color }}>
            <div className="reel-symbol-icn">
              {p.kind === 'photo' ? <Icon.photo size={22}/> :
               p.kind === 'video' ? <Icon.video size={22}/> :
               p.kind === 'points' ? <Icon.sparkles size={22}/> :
               p.kind === 'spin' ? <Icon.refresh size={22}/> :
               <Icon.crown size={22}/>}
            </div>
            <div className="reel-symbol-lbl">{p.short}</div>
          </div>
        );
      })}
    </>
  );

  return (
    <div className="reel-cabinet">
      {/* Top crown lights */}
      <div className="reel-lights top">
        {Array.from({length: 9}).map((_, i) =>
          <span key={i} className="reel-bulb" style={{ animationDelay: (i * 0.12)+'s' }}/>
        )}
      </div>

      <div className="reel-frame">
        {[0,1,2].map(col => (
          <div className="reel-col-v2" key={col}>
            <div className="reel-strip-v2" style={{
              transform: `translateY(${spinning ? offsets[col] : 0}px)`,
              transition: spinning ? `transform 2.2s cubic-bezier(.2,.7,.15,1) ${col * 0.15}s` : 'none'
            }}>
              <Cells col={col}/>
            </div>
            <div className="reel-glare"/>
          </div>
        ))}

        {/* Win line + arrows */}
        <div className="reel-win-line"/>
        <div className="reel-arrow-l">◀</div>
        <div className="reel-arrow-r">▶</div>
      </div>

      <div className="reel-lights bottom">
        {Array.from({length: 9}).map((_, i) =>
          <span key={i} className="reel-bulb" style={{ animationDelay: (i * 0.12 + 0.5)+'s' }}/>
        )}
      </div>
    </div>
  );
}

function PrizeIcon({ kind }){
  const map = {
    photo: { i: <Icon.photo size={16}/>, c: 'rgba(155,92,255,0.18)', col: 'var(--purple-3)' },
    video: { i: <Icon.video size={16}/>, c: 'rgba(34,211,238,0.16)', col: 'var(--cyan)' },
    points: { i: <Icon.sparkles size={16}/>, c: 'rgba(155,92,255,0.18)', col: 'var(--purple-3)' },
    spin: { i: <Icon.refresh size={16}/>, c: 'rgba(56,189,248,0.16)', col: 'var(--eblue)' },
    jackpot: { i: <Icon.crown size={16}/>, c: 'rgba(246,200,95,0.18)', col: 'var(--gold)' },
  };
  const m = map[kind] || map.photo;
  return <div style={{
    width: 32, height: 32, borderRadius: 10,
    background: m.c, color: m.col,
    display:'flex', alignItems:'center', justifyContent:'center'
  }}>{m.i}</div>;
}

function prizeText(kind, amount){
  if (kind === 'photo') return `+${amount} photo credits`;
  if (kind === 'video') return `+${amount} video min`;
  if (kind === 'points') return `+${amount} lucky points`;
  if (kind === 'spin') return `+${amount} extra spin`;
  if (kind === 'jackpot') return `Jackpot — +100 photos, +5 videos, +500 pts`;
  return kind;
}

function EarnRow({ icon, title, action, accent }){
  return (
    <button onClick={action} disabled={!action} className="card" style={{
      textAlign:'left', color:'inherit', cursor: action ? 'pointer' : 'default',
      padding: '10px 12px',
      display:'flex', alignItems:'center', gap: 12,
      opacity: action ? 1 : 0.7,
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 10,
        background: accent === 'gold' ? 'rgba(246,200,95,0.16)' :
                    accent === 'cyan' ? 'rgba(34,211,238,0.16)' :
                    'rgba(155,92,255,0.18)',
        color: accent === 'gold' ? 'var(--gold)' : accent === 'cyan' ? 'var(--cyan)' : 'var(--purple-3)',
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>{icon}</div>
      <div style={{flex: 1, fontSize: 12}}>{title}</div>
      {action && <Icon.chevronRight size={16}/>}
    </button>
  );
}

function PrizeRevealModal({ prize, onClose, onSpinAgain, canSpin, navigate, ctx }){
  if (!prize) return null;
  const { t: T } = ctx;
  const isJackpot = prize.kind === 'jackpot';
  const darkFg = prize.color === '#F6C85F' || prize.color === '#DFA64A';

  const particles = _fs_useMemo(() => Array.from({length: 22}, (_, i) => ({
    i,
    x: 50 + (Math.random() - 0.5) * 90,
    y: 50 + (Math.random() - 0.5) * 90,
    delay: Math.random() * 0.4,
    size: 4 + Math.random() * 6,
    color: [prize.color, '#F6C85F', '#9B5CFF', '#22D3EE'][Math.floor(Math.random()*4)],
    rotate: Math.random() * 360,
  })), [prize]);

  return (
    <Sheet open onClose={onClose}>
      <div className="prize-reveal">
        <div className="prize-rays" style={{ '--ray-color': prize.color }}>
          {Array.from({length: 12}).map((_, i) => (
            <div key={i} className="prize-ray" style={{ transform: `translate(-50%, -50%) rotate(${i*30}deg)` }}/>
          ))}
        </div>

        <div className="prize-particles">
          {particles.map(p => (
            <span key={p.i} className="prize-particle" style={{
              left: p.x + '%', top: p.y + '%',
              width: p.size, height: p.size,
              background: p.color,
              animationDelay: p.delay + 's',
              '--rot': p.rotate + 'deg',
            }}/>
          ))}
        </div>

        <div className="prize-medal-wrap">
          <div className="prize-medal-bg" style={{ '--ray-color': prize.color }}/>
          <div className="prize-medal" style={{
            background: `radial-gradient(circle at 35% 25%, ${lightenStr(prize.color, 0.35)}, ${prize.color} 65%, #0c0a1a 100%)`,
            borderColor: prize.color,
            color: darkFg ? '#2a1700' : '#fff',
            boxShadow: `0 0 60px 4px ${prize.color}66, inset 0 1px 12px rgba(255,255,255,0.4)`
          }}>
            <div className="prize-medal-glyph">
              {prize.kind === 'photo' ? <Icon.photo size={30}/> :
               prize.kind === 'video' ? <Icon.video size={30}/> :
               prize.kind === 'points' ? <Icon.sparkles size={30}/> :
               prize.kind === 'spin' ? <Icon.refresh size={30}/> :
               <Icon.crown size={36}/>}
            </div>
            <div className="prize-medal-amount">{prize.short}</div>
          </div>
        </div>

        <div className="prize-title">
          {isJackpot ? 'JACKPOT!' : 'You won'}
        </div>
        <div className="prize-text">{prizeText(prize.kind, prize.amount)}</div>
        <div className="prize-added"><Icon.check size={11}/> {T('prize_added')}</div>

        <div className="prize-actions">
          {canSpin && (
            <button className="btn btn-gold btn-block btn-lg" onClick={onSpinAgain}>
              <Icon.sparkles size={16}/> {T('spin_again')}
            </button>
          )}
          <div className="grid-2">
            <button className="btn btn-secondary" onClick={()=>{onClose(); navigate('create');}}>{T('create_another')}</button>
            <button className="btn btn-ghost" onClick={()=>{onClose(); navigate('referrals');}}>{T('invite_friends')}</button>
          </div>
        </div>
      </div>
    </Sheet>
  );
}

function lightenStr(hex, amt){
  const c = hex.replace('#','');
  const r = parseInt(c.substr(0,2),16), g = parseInt(c.substr(2,2),16), b = parseInt(c.substr(4,2),16);
  const m = v => Math.round(v + (255 - v) * amt);
  const h = v => v.toString(16).padStart(2,'0');
  return `#${h(m(r))}${h(m(g))}${h(m(b))}`;
}

function LuckyPointsExchange({ ctx, onBack }){
  const { t: T, fortune, setFortune, setBalance } = ctx;
  const [confirmation, setConfirmation] = _fs_useState(null);

  const exchanges = [
    { id: 'photo', cost: 100, label: T('points_to_photo'), reward: () => ({photo: 20}) },
    { id: 'video', cost: 500, label: T('points_to_video'), reward: () => ({video: 1}) },
    { id: 'spin',  cost: 300, label: T('points_to_spin'), reward: 'spin' },
  ];

  const doExchange = (ex) => {
    if (fortune.points < ex.cost) return;
    setFortune(f => ({...f, points: f.points - ex.cost, spins: ex.reward === 'spin' ? f.spins + 1 : f.spins}));
    if (ex.reward !== 'spin') {
      const r = ex.reward();
      setBalance(b => ({photo: b.photo + (r.photo||0), video: b.video + (r.video||0)}));
    }
    setConfirmation(ex.id);
    setTimeout(()=>setConfirmation(null), 1800);
  };

  return (
    <div className="screen">
      <ScreenHeader title={T('exchange_points')} onBack={onBack}/>
      <div className="card card-gold" style={{padding: 14}}>
        <div className="row" style={{gap: 12}}>
          <div style={{
            width: 44, height: 44, borderRadius: 12,
            background: 'rgba(155,92,255,0.18)', color: 'var(--purple-3)',
            display:'flex',alignItems:'center',justifyContent:'center'
          }}><Icon.sparkles size={20}/></div>
          <div>
            <div className="dim" style={{fontSize:10,textTransform:'uppercase',letterSpacing:'0.12em'}}>{T('lucky_points')}</div>
            <div style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:600,color:'var(--gold)'}}>{fortune.points}</div>
          </div>
        </div>
      </div>

      <div className="col">
        {exchanges.map(ex => {
          const can = fortune.points >= ex.cost;
          return (
            <div key={ex.id} className="card" style={{padding: 12}}>
              <div className="row-between">
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 13, fontWeight: 500}}>{ex.label}</div>
                  <div className="dim" style={{marginTop: 2}}>cost: {ex.cost} pts</div>
                </div>
                <button className={"btn " + (can ? 'btn-secondary' : 'btn-ghost') + " btn-sm"}
                  disabled={!can} onClick={()=>doExchange(ex)}>
                  {confirmation === ex.id ? <><Icon.check size={14}/> Done</> : T('exchange')}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.FortuneScreen = FortuneScreen;