// Onboarding screen — register with name + initial + school code
const Onboarding = ({ onDone }) => {
  const t = window.MP_I18N.t;
  const [firstName, setFirst] = React.useState('');
  const [lastInitial, setLI] = React.useState('');
  const [schoolCode, setSC] = React.useState('');
  const [schoolName, setSN] = React.useState('');
  const [grade, setGrade] = React.useState('');
  const [err, setErr] = React.useState({});
  const [lang, setLang] = React.useState(window.MP_I18N.getLang());

  const switchLang = () => {
    const next = lang === 'es' ? 'en' : 'es';
    window.MP_I18N.setLang(next);
    setLang(next);
  };

  const submit = async () => {
    const e = {};
    if (firstName.trim().length < 2) e.firstName = true;
    if (lastInitial.trim().length < 1) e.lastInitial = true;
    if (schoolCode.trim().length < 3) e.schoolCode = true;
    setErr(e);
    if (Object.keys(e).length) return;
    window.MP_SOUND.celebrate();
    onDone({
      firstName: firstName.trim().slice(0, 20),
      lastInitial: lastInitial.trim().charAt(0).toUpperCase(),
      schoolCode: schoolCode.trim().toUpperCase().slice(0, 12),
      schoolName: schoolName.trim().slice(0, 60),
      grade,
      lang
    });
  };

  return (
    <>
      <div className="topbar">
        <div className="brand">★ MULTIPLIER</div>
        <div className="spacer" />
        <button className="btn btn-ghost btn-sm" onClick={switchLang}>{t('change_lang')}</button>
      </div>

      <div className="text-center mt-md">
        <Mascot id="nebu" size={140} mood="happy" />
        <h1 className="h-display mt-md" style={{ marginBottom: 6 }}>{t('welcome')}</h1>
        <p className="body" style={{ maxWidth: 380, margin: '0 auto' }}>{t('tagline')}</p>
      </div>

      <div className="card card-pop mt-lg">
        <div className={'field' + (err.firstName ? ' field-error' : '')}>
          <label>{t('enter_first_name')} ★</label>
          <input
            value={firstName}
            onChange={e => setFirst(e.target.value)}
            placeholder={lang === 'es' ? 'Mateo' : 'Sam'}
            autoComplete="off"
            maxLength={20}
          />
        </div>
        <div className={'field' + (err.lastInitial ? ' field-error' : '')}>
          <label>{t('enter_last_initial')} ★</label>
          <input
            value={lastInitial}
            onChange={e => setLI(e.target.value.toUpperCase().slice(0, 1))}
            placeholder="M"
            maxLength={1}
            style={{ textTransform: 'uppercase' }}
          />
          <div className="field-help">{t('privacy_note')}</div>
        </div>
        <div className={'field' + (err.schoolCode ? ' field-error' : '')}>
          <label>{t('enter_school_code')} ★</label>
          <input
            value={schoolCode}
            onChange={e => setSC(e.target.value.toUpperCase())}
            placeholder="SOL01"
            maxLength={12}
            style={{ textTransform: 'uppercase' }}
          />
          <div className="field-help">{t('need_school_code')}</div>
        </div>
        <div className="field">
          <label>{t('enter_school_name')}</label>
          <input
            value={schoolName}
            onChange={e => setSN(e.target.value)}
            placeholder={lang === 'es' ? 'Escuela...' : 'School...'}
            maxLength={60}
          />
        </div>
        <div className="field">
          <label>{t('enter_grade')}</label>
          <select value={grade} onChange={e => setGrade(e.target.value)}>
            <option value="">{t('grade_placeholder')}</option>
            <option value="1">{t('first_grade')}</option>
            <option value="2">{t('second_grade')}</option>
            <option value="3">{t('third_grade')}</option>
            <option value="4">{t('fourth_grade')}</option>
            <option value="5">{t('fifth_grade')}</option>
            <option value="6">{t('sixth_grade')}</option>
            <option value="0">{t('no_grade')}</option>
          </select>
        </div>

        <button className="btn btn-primary btn-block btn-lg mt-md" onClick={submit}>
          🚀 {t('start_adventure')}
        </button>
      </div>
    </>
  );
};

window.Onboarding = Onboarding;