// Shared in-game shell: HUD with score/timer/lives + pause
const GameShell = ({ children, score, timeLeft, totalTime, lives, totalLives, onQuit, label }) => {
  const t = window.MP_I18N.t;
  const pct = totalTime ? Math.max(0, Math.min(100, (timeLeft / totalTime) * 100)) : 0;
  return (
    <div className="play-stage">
      <div className="topbar">
        <button className="btn btn-ghost btn-icon" onClick={onQuit} aria-label={t('quit')}>
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><path d="M15 18l-6-6 6-6" /></svg>
        </button>
        <div className="brand">{label || ''}</div>
        <div className="spacer" />
      </div>

      <div className="hud">
        <div className="hud-cell">
          <div className="label">{t('score')}</div>
          <div className="value" style={{ color: 'var(--yellow)' }}>{score ?? 0}</div>
        </div>
        {totalTime != null && (
          <>
            <div className="hud-divider" />
            <div className="timer-bar"><div style={{ width: pct + '%' }} /></div>
            <div className="hud-cell">
              <div className="label">{t('time')}</div>
              <div className="value">{Math.max(0, Math.ceil(timeLeft || 0))}</div>
            </div>
          </>
        )}
        {totalLives != null && (
          <>
            <div className="hud-divider" />
            <div className="hud-cell">
              <div className="label">{t('lives')}</div>
              <div className="lives" style={{ marginTop: 2 }}>
                {Array.from({ length: totalLives }).map((_, i) => (
                  <span key={i} className={'life' + (i >= lives ? ' gone' : '')} />
                ))}
              </div>
            </div>
          </>
        )}
      </div>

      {children}
    </div>
  );
};

// Big problem display with op coloring
const Problem = ({ a, b, op = '×', blank, status }) => {
  const cls = 'problem ' + (status === 'wrong' ? 'shake' : status === 'right' ? 'pop' : '');
  return (
    <div className={cls}>
      {blank === 'a' ? <span className="blank">?</span> : <span>{a}</span>}
      <span className="op">{op}</span>
      {blank === 'b' ? <span className="blank">?</span> : <span>{b}</span>}
      <span className="eq">=</span>
      {blank === 'r' ? <span className="blank">?</span> : <span>{a * b}</span>}
    </div>
  );
};

// Numpad for typed answers
const Numpad = ({ value, onChange, onSubmit }) => {
  const press = (k) => {
    window.MP_SOUND.tap();
    if (k === 'del') onChange(String(value).slice(0, -1));
    else if (k === 'ok') onSubmit();
    else if (String(value).length < 4) onChange(String(value) + k);
  };
  return (
    <div className="numpad">
      {['1','2','3','4','5','6','7','8','9'].map(n => (
        <button key={n} className="num-key" onClick={() => press(n)}>{n}</button>
      ))}
      <button className="num-key del" onClick={() => press('del')} aria-label="borrar">⌫</button>
      <button className="num-key" onClick={() => press('0')}>0</button>
      <button className="num-key action" onClick={() => press('ok')}>OK</button>
    </div>
  );
};

// Multi-choice options
const Options = ({ choices, onPick, picked, correct }) => (
  <div className="options">
    {choices.map((c, i) => {
      let cls = 'option-btn';
      if (picked != null) {
        if (c === correct) cls += ' correct';
        else if (c === picked) cls += ' wrong';
        else cls += ' disabled';
      }
      return (
        <button key={i} className={cls} onClick={() => onPick(c)} disabled={picked != null}>{c}</button>
      );
    })}
  </div>
);

// Countdown "3, 2, 1, GO!"
const Countdown = ({ onDone }) => {
  const [n, setN] = React.useState(3);
  React.useEffect(() => {
    if (n < 0) { onDone(); return; }
    window.MP_SOUND.countdown();
    const t = setTimeout(() => setN(n - 1), 700);
    return () => clearTimeout(t);
  }, [n]);
  return (
    <div className="celebration" style={{ minHeight: 280, display: 'grid', placeItems: 'center' }}>
      <div className="big-number" key={n}>
        {n > 0 ? n : window.MP_I18N.t('go')}
      </div>
    </div>
  );
};

window.GameShell = GameShell;
window.Problem = Problem;
window.Numpad = Numpad;
window.Options = Options;
window.Countdown = Countdown;