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

const PLACE_EMOJI = ['🥇', '🥈', '🥉'];
const PLACE_LABEL = ['المركز الأول', 'المركز الثاني', 'المركز الثالث'];
const PLACE_COLOR = ['#FFD700', '#C0C0C0', '#CD7F32'];

export function mountResult(el, params) {
  const { result, place, resigned, rewards } = params;
  const isWin = result === 'win';

  let content;
  if (resigned) {
    content = `
      <div style="font-size:64px;animation:float 2s ease-in-out infinite;">${emoji('skull', '💀', 64)}</div>
      <div style="font-size:24px;font-weight:800;color:var(--loss);">انسحبت من المباراة</div>
    `;
  } else if (isWin && place >= 1 && place <= 3) {
    const idx = place - 1;
    content = `
      <div style="font-size:72px;animation:float 2s ease-in-out infinite;">${emoji('medal_' + place, PLACE_EMOJI[idx], 72)}</div>
      <div style="font-size:28px;font-weight:800;color:${PLACE_COLOR[idx]};">${PLACE_LABEL[idx]}</div>
      <div style="font-size:16px;color:#94a3b8;margin-top:4px;">${place === 1 ? 'مبروك! أنت البطل' : 'أحسنت!'}</div>
    `;
  } else {
    content = `
      <div style="font-size:64px;animation:float 2s ease-in-out infinite;">${emoji('skull', '💀', 64)}</div>
      <div style="font-size:28px;font-weight:800;color:var(--loss);">المركز الرابع</div>
      <div style="font-size:16px;color:#94a3b8;margin-top:4px;">حظ أوفر المرة القادمة!</div>
    `;
  }

  const coins = rewards?.coins_earned ?? (isWin ? 50 : 10);
  const xp = rewards?.xp_earned ?? 15;
  const ratingChange = rewards?.rating_change ?? 0;

  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);">
      ${content}

      <!-- Rewards -->
      <div style="display:flex;gap:12px;margin-top:8px;">
        <div style="display:flex;align-items:center;gap:4px;padding:8px 14px;background:rgba(251,191,36,0.1);border:1px solid rgba(251,191,36,0.2);border-radius:10px;">
          <span style="font-size:16px;">${emoji('coin', '🪙', 16)}</span>
          <span style="font-size:14px;font-weight:700;color:#fbbf24;">+${coins}</span>
        </div>
        <div style="display:flex;align-items:center;gap:4px;padding:8px 14px;background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2);border-radius:10px;">
          <span style="font-size:16px;">${emoji('star', '⭐', 16)}</span>
          <span style="font-size:14px;font-weight:700;color:#a78bfa;">+${xp} XP</span>
        </div>
      </div>
      ${ratingChange ? `<div style="font-size:14px;font-weight:600;color:${ratingChange > 0 ? '#4ade80' : '#fca5a5'};">التصنيف: ${ratingChange > 0 ? '+' : ''}${ratingChange}</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>
  `;

  if (isWin) {
    juice.hapticSuccess?.();
    setTimeout(() => juice.confetti?.(window.innerWidth / 2, window.innerHeight / 3, 40), 300);
  }

  bus.emit('coins:earned', { amount: coins });
  bus.emit('xp:earned', { amount: xp });

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