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

export function mountResult(el, params) {
  const { result, scores = [] } = params;
  const isWin = result === 'win';
  const icon = isWin ? emoji('trophy', '🏆', 64) : emoji('skull', '💀', 64);
  const title = isWin ? t('game.you_win') : t('game.you_lose');
  const color = isWin ? 'var(--win)' : 'var(--loss)';

  el.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--s-6);padding:var(--s-6);">
      <div style="font-size:64px;animation:float 2s ease-in-out infinite;">${icon}</div>
      <div style="font-size:28px;font-weight:800;color:${color};">${title}</div>
      <div style="color:var(--text-secondary);font-size:14px;">النقاط: ${scores.join(' - ')}</div>
      <div style="display:flex;gap:var(--s-3);margin-top:var(--s-6);">
        <button class="btn btn-primary" id="btn-again">${t('game.rematch')}</button>
        <button class="btn btn-secondary" id="btn-back">${t('game.back')}</button>
      </div>
    </div>
  `;

  el.querySelector('#btn-again').addEventListener('click', () => {
    audio.play('click');
    scene.replace('domino-game', { mode: params.mode });
  });

  el.querySelector('#btn-back').addEventListener('click', () => {
    audio.play('click');
    bus.emit('navigate', { world: 'play', scene: 'play-table' });
  });
}
