// Tabla específica — picker, then 10 problems of that table
const TablaEspecifica = ({ profile, onFinish, onQuit }) => {
  const t = window.MP_I18N.t;
  const diff = window.MP_DATA.difficultyForGrade(profile.grade);
  const [table, setTable] = React.useState(null);
  const [idx, setIdx] = React.useState(0);
  const [score, setScore] = React.useState(0);
  const [correct, setCorrect] = React.useState(0);
  const [problem, setProblem] = React.useState(null);
  const [choices, setChoices] = React.useState([]);
  const [picked, setPicked] = React.useState(null);
  const [status, setStatus] = React.useState(null);
  const TOTAL = 10;

  const next = (i, tbl) => {
    const b = (i % TOTAL) + 1;
    const p = { a: tbl, b, answer: tbl * b };
    setProblem(p);
    setChoices(window.MP_DATA.genOptions(p.answer, 4));
    setPicked(null);
    setStatus(null);
  };

  const start = (n) => {
    setTable(n);
    setIdx(0);
    next(0, n);
  };

  const pick = (c) => {
    if (picked != null) return;
    setPicked(c);
    const isRight = c === problem.answer;
    if (isRight) {
      window.MP_SOUND.correct();
      setStatus('right');
      setCorrect(x => x + 1);
      setScore(s => s + 8);
    } else {
      window.MP_SOUND.wrong();
      setStatus('wrong');
    }
    setTimeout(() => {
      const ni = idx + 1;
      if (ni >= TOTAL) {
        const finalCorrect = correct + (isRight ? 1 : 0);
        onFinish({
          mode: 'tabla',
          score: score + (isRight ? 8 : 0) + (finalCorrect === TOTAL ? 30 : 0),
          correct: finalCorrect,
          total: TOTAL,
          table,
          perfect: finalCorrect === TOTAL
        });
      } else {
        setIdx(ni);
        next(ni, table);
      }
    }, 600);
  };

  if (table == null) {
    return (
      <GameShell label={t('tabla')} score={0} onQuit={onQuit}>
        <div className="text-center"><Mascot id="tachi" size={100} /></div>
        <h2 className="h-2 text-center">{t('tabla_sub')}</h2>
        <div className="game-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {diff.tables.map(n => (
            <button key={n} className="game-card gc-violet" style={{ aspectRatio: '1/1' }} onClick={() => { window.MP_SOUND.tap(); start(n); }}>
              <div className="gc-title" style={{ margin: 'auto', fontSize: 40 }}>×{n}</div>
            </button>
          ))}
        </div>
      </GameShell>
    );
  }

  return (
    <GameShell label={`${t('tabla')} ×${table}`} score={score} onQuit={onQuit}>
      <div className="row" style={{ justifyContent: 'space-between' }}>
        <span className="chip">×{table}</span>
        <span className="chip">{idx + 1}/{TOTAL}</span>
      </div>
      <div className="progress-bar"><div style={{ width: (idx / TOTAL * 100) + '%' }} /></div>
      {problem && <Problem a={problem.a} b={problem.b} status={status} blank="r" />}
      <Options choices={choices} onPick={pick} picked={picked} correct={problem?.answer} />
    </GameShell>
  );
};
window.TablaEspecifica = TablaEspecifica;