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 { t } from '../../../core/i18n.js';
import { assetImg } from '../../../core/theme.js';

export function mountSplash(el) {
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--s-6);padding:var(--s-4);">
      <div class="splash-logo" style="animation:glow 2s ease-in-out infinite;">${assetImg('logo', 'EL3AB', 180, 60)}</div>
      <div class="splash-sub" style="color:var(--text-secondary);font-size:14px;animation:pulse 2s ease-in-out infinite;">${t('app.tagline')}</div>
      <div class="splash-loader" style="margin-top:var(--s-8);">
        <div style="width:120px;height:4px;background:var(--bg-elevated);border-radius:2px;overflow:hidden;">
          <div style="width:0%;height:100%;background:var(--gold);border-radius:2px;animation:loadBar 2s ease-out forwards;"></div>
        </div>
      </div>
    </div>
    <style>
      @keyframes loadBar { 0% { width: 0%; } 100% { width: 100%; } }
    </style>
  `;

  setTimeout(async () => {
    const token = store.get('auth.token');
    if (token) {
      try {
        const profile = await net.get('profile.php');
        if (profile && !profile.error) {
          store.set('player', profile);
          store.set('auth.userId', profile.id);
          if (store.get('auth.isGuest')) {
            bus.emit('auth:guestSuccess');
          } else {
            bus.emit('auth:success');
          }
          return;
        }
      } catch (e) {}
    }
    scene.replace('auth-login');
  }, 1500);
}
