// energy.jsx — Energy refill sheet, Ad watch, Subscription
const { useState: useStateE, useEffect: useEffectE } = React;

function EnergyScreen({ data, setData, back, go, resume }) {
  const full = data.energy >= data.maxEnergy;
  return (
    <Screen bg={T.surface}>
      <div style={{ paddingTop: 8 }}><TopBar title="" onBack={back}/></div>
      <div style={{ textAlign: 'center', paddingTop: 8 }}>
        {/* energy dots */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginBottom: 18 }}>
          {Array.from({ length: data.maxEnergy }).map((_, i) => (
            <div key={i} style={{ width: 30, height: 30, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', background: i < data.energy ? T.teal : T.surface2 }}>
              <Icon name="bolt" size={17} color={i < data.energy ? '#fff' : T.ink3} fill={i < data.energy ? '#fff' : 'none'} sw={i < data.energy ? 0 : 2}/>
            </div>
          ))}
        </div>
        <h1 style={{ fontSize: 26, fontWeight: 800, color: T.ink, letterSpacing: -0.6, margin: '0 0 6px' }}>{data.energy > 0 ? `에너지 ${data.energy}개` : '에너지가 없어요'}</h1>
        <p style={{ fontSize: 15, color: T.ink2, lineHeight: 1.5, maxWidth: 290, margin: '0 auto 8px' }}>
          {data.energy > 0 ? 'Quest를 하나 진행할 때마다 에너지 1개를 써요.' : '광고를 보거나, 잠시 기다리면 다시 채워져요.'}
        </p>
        {!full && (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '9px 15px', borderRadius: 999, background: T.tealSoft, marginTop: 6 }}>
            <Icon name="clock" size={16} color={T.tealDark} sw={2}/>
            <span style={{ fontSize: 14.5, fontWeight: 800, color: T.tealDark, fontVariantNumeric: 'tabular-nums' }}>다음 +1까지 {fmtClock(data.nextSec)}</span>
          </div>
        )}
      </div>

      <div style={{ marginTop: 26 }}>
        {/* watch ad */}
        <Card pad={16} style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ width: 48, height: 48, borderRadius: 14, background: T.tealSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="play" size={24} color={T.teal}/></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 16, fontWeight: 800, color: T.ink }}>광고 보고 +1 에너지</div>
            <div style={{ fontSize: 13, color: T.ink3, fontWeight: 600 }}>약 30초 · 무료</div>
          </div>
          <Btn variant="teal" size="sm" style={{ width: 'auto', padding: '0 18px' }} onClick={() => go('ad')} disabled={full}>보기</Btn>
        </Card>

        {/* subscribe */}
        <button onClick={() => go('subscribe')} style={{ width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 24, padding: 18, background: `linear-gradient(135deg, ${T.coral}, ${T.violet})`, boxShadow: `0 10px 26px ${T.violet}33`, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, width: 70, height: '100%', background: 'rgba(255,255,255,0.2)', animation: 'shine 5s ease-in-out infinite' }}/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: 13, background: 'rgba(255,255,255,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="crown" size={24} color="#fff"/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 17, fontWeight: 800, color: '#fff', letterSpacing: -0.3 }}>Fitbody PRO · 무제한 에너지</div>
              <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,0.9)', fontWeight: 600, marginTop: 1 }}>월 $4.99 · 광고 없이 계속 진행</div>
            </div>
            <Icon name="chevron" size={20} color="#fff" sw={2.4}/>
          </div>
        </button>
      </div>

      {resume && data.energy > 0 && (
        <FloatCTA>
          <Btn onClick={() => { setData(d => ({ ...d, energy: Math.max(0, d.energy - 1) })); go('player', { quest: resume }); }}>에너지 쓰고 계속</Btn>
        </FloatCTA>
      )}
    </Screen>
  );
}

function AdScreen({ onDone }) {
  const [left, setLeft] = useStateE(5);
  useEffectE(() => {
    if (left <= 0) return;
    const t = setTimeout(() => setLeft(l => l - 1), 1000);
    return () => clearTimeout(t);
  }, [left]);
  return (
    <div style={{ position: 'absolute', inset: 0, background: '#0B0B0C', display: 'flex', flexDirection: 'column' }}>
      <StatusBar light/>
      {/* fake ad */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', background: 'radial-gradient(120% 80% at 50% 30%, #2A2D3A, #0B0B0C)' }}>
        <div style={{ position: 'absolute', top: 64, left: 18, fontFamily: 'ui-monospace, monospace', fontSize: 11, color: 'rgba(255,255,255,0.5)', letterSpacing: 1 }}>AD</div>
        <div style={{ width: 96, height: 96, borderRadius: 26, background: 'linear-gradient(135deg, #6E8BFF, #3B5BDB)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22, animation: 'floatY 2.4s ease-in-out infinite' }}>
          <Icon name="sparkle" size={48} color="#fff"/>
        </div>
        <div style={{ fontSize: 22, fontWeight: 800, color: '#fff', marginBottom: 6 }}>광고 재생 중</div>
        <div style={{ fontSize: 14.5, color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>잠시만 기다려 주세요</div>
        <div style={{ position: 'absolute', top: 60, right: 18, width: 38, height: 38, borderRadius: 999, background: 'rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 15, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{left}</div>
      </div>
      <div style={{ padding: '18px 22px 34px' }}>
        <Btn variant={left <= 0 ? 'teal' : 'soft'} disabled={left > 0} onClick={onDone} icon={left <= 0 ? <Icon name="bolt" size={19} color="#fff" fill="#fff" sw={0}/> : null}>
          {left > 0 ? `${left}초 후 보상 받기` : '+1 에너지 받기'}
        </Btn>
      </div>
    </div>
  );
}

function SubscribeScreen({ data, onSubscribe, back }) {
  const feats = [
    ['무제한 에너지', '광고·기다림 없이 계속', 'bolt'],
    ['모든 Motion Academy 잠금 해제', '카메라 코칭 무제한', 'academy'],
    ['Body Check 월간 리포트', '변화 추적 확장', 'scan'],
    ['Streak 보호 강화', '바쁜 날도 안심', 'flame'],
  ];
  if (data.pro) {
    return (
      <Screen bg={T.surface}>
        <div style={{ paddingTop: 8 }}><TopBar title="Fitbody PRO" onBack={back}/></div>
        <div style={{ textAlign: 'center', paddingTop: 30 }}>
          <div style={{ width: 88, height: 88, borderRadius: 26, background: `linear-gradient(135deg, ${T.coral}, ${T.violet})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><Icon name="crown" size={44} color="#fff"/></div>
          <h1 style={{ fontSize: 25, fontWeight: 800, color: T.ink, margin: '0 0 6px' }}>이미 PRO 회원이에요</h1>
          <p style={{ fontSize: 15, color: T.ink2 }}>에너지 무제한이 적용 중이에요.</p>
        </div>
      </Screen>
    );
  }
  return (
    <div style={{ position: 'absolute', inset: 0, background: T.surface, display: 'flex', flexDirection: 'column' }}>
      <StatusBar/>
      {/* hero */}
      <div style={{ padding: '54px 22px 22px', background: `linear-gradient(140deg, ${T.coral} 0%, ${T.violet} 100%)`, borderRadius: '0 0 30px 30px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, width: 90, height: '100%', background: 'rgba(255,255,255,0.18)', animation: 'shine 5s ease-in-out infinite' }}/>
        <div style={{ position: 'relative' }}>
          <button onClick={back} style={{ width: 40, height: 40, borderRadius: 999, border: 'none', cursor: 'pointer', background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14 }}><Icon name="close" size={20} color="#fff" sw={2.2}/></button>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'rgba(255,255,255,0.22)', padding: '6px 13px', borderRadius: 999, marginBottom: 12 }}>
            <Icon name="crown" size={17} color="#fff"/><span style={{ fontSize: 12.5, fontWeight: 800, color: '#fff', letterSpacing: 1 }}>FITBODY PRO</span>
          </div>
          <h1 style={{ fontSize: 28, fontWeight: 800, color: '#fff', letterSpacing: -0.6, lineHeight: 1.25, margin: 0 }}>멈추지 않고<br/>매일 이어가요</h1>
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 20 }}>
          {feats.map((f, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: T.coralSoft, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={f[2]} size={21} color={T.coral} fill={f[2] === 'bolt' || f[2] === 'flame' ? T.coral : 'none'} sw={f[2] === 'bolt' || f[2] === 'flame' ? 0 : 2}/></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 16, fontWeight: 800, color: T.ink }}>{f[0]}</div>
                <div style={{ fontSize: 13, color: T.ink3, fontWeight: 600 }}>{f[1]}</div>
              </div>
              <Icon name="check" size={20} color={T.good} sw={2.6}/>
            </div>
          ))}
        </div>
      </div>

      <div style={{ padding: '12px 22px 30px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6, marginBottom: 12 }}>
          <span style={{ fontSize: 30, fontWeight: 800, color: T.ink, letterSpacing: -1 }}>$4.99</span>
          <span style={{ fontSize: 15, color: T.ink3, fontWeight: 700 }}>/ 월</span>
        </div>
        <Btn variant="primary" onClick={onSubscribe}>월 구독 시작</Btn>
        <div style={{ textAlign: 'center', fontSize: 12, color: T.ink3, fontWeight: 600, marginTop: 12 }}>언제든 해지 가능 · 첫 7일 무료 체험</div>
      </div>
    </div>
  );
}

Object.assign(window, { EnergyScreen, AdScreen, SubscribeScreen });