import * as bus from '../../../core/bus.js';
import * as store from '../../../core/store.js';
import * as scene from '../../../core/scene.js';
import * as net from '../../../core/net.js';
import * as audio from '../../../core/audio.js';
import { t } from '../../../core/i18n.js';

export function mountRegister(el) {
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:var(--s-6);">
      <div style="font-size:36px;font-weight:800;color:var(--gold);margin-bottom:var(--s-2);">EL3AB</div>
      <p style="color:var(--text-secondary);margin-bottom:var(--s-8);font-size:14px;">${t('auth.register')}</p>
      <form id="register-form" style="width:100%;max-width:320px;display:flex;flex-direction:column;gap:var(--s-3);">
        <input class="input" type="text" id="reg-username" placeholder="${t('auth.username')}" autocomplete="username" required minlength="3" maxlength="20">
        <input class="input" type="email" id="reg-email" placeholder="${t('auth.email')}" autocomplete="email" required>
        <input class="input" type="password" id="reg-pass" placeholder="${t('auth.password')}" autocomplete="new-password" required minlength="6">
        <div id="reg-error" style="color:var(--error);font-size:13px;min-height:20px;"></div>
        <button type="submit" class="btn btn-primary w-full" id="reg-btn">${t('auth.register.btn')}</button>
      </form>
      <p style="margin-top:var(--s-6);color:var(--text-secondary);font-size:13px;">
        ${t('auth.have_account')} <a href="#" id="goto-login" style="color:var(--gold);text-decoration:none;font-weight:600;">${t('auth.login')}</a>
      </p>
    </div>
  `;

  const form = el.querySelector('#register-form');
  const errEl = el.querySelector('#reg-error');
  const btn = el.querySelector('#reg-btn');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const username = el.querySelector('#reg-username').value.trim();
    const email = el.querySelector('#reg-email').value.trim();
    const pass = el.querySelector('#reg-pass').value;
    if (!username || !email || !pass) return;

    btn.disabled = true;
    btn.textContent = t('auth.registering');
    errEl.textContent = '';

    try {
      const data = await net.post('auth.php', { action: 'signup', email, password: pass, username });
      if (data.error) throw new Error(data.error);

      store.set('auth.token', data.access_token);
      store.set('auth.refreshToken', data.refresh_token);
      store.set('auth.userId', data.user.id);

      const profile = await net.get('profile.php');
      if (profile && !profile.error) store.set('player', profile);

      audio.play('levelUp', 'reward');
      bus.emit('auth:success');
    } catch (err) {
      errEl.textContent = err.message || t('common.error');
      btn.disabled = false;
      btn.textContent = t('auth.register.btn');
    }
  });

  el.querySelector('#goto-login').addEventListener('click', (e) => {
    e.preventDefault();
    audio.play('click');
    scene.replace('auth-login');
  });
}
