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

export function mountResult(el, params) {
  const { winner = 'you', scores = [0, 0], matchLength = 3, mode = 'bot', reason = '' } = params || {};
  const didWin = winner === 'you';

  audio.play(didWin ? 'sfx_bg_win_match' : 'lose', 'game');

  el.innerHTML = `
    <div class="bgr-wrap">
      <div class="bgr-hero">
        <div class="bgr-trophy">${didWin ? emoji('trophy', '🏆', 64) : emoji('pensive', '😔', 64)}</div>
        <h1 class="bgr-title">${didWin ? 'مبروك! فزت!' : 'خسرت هالمرة'}</h1>
        ${reason === 'abandon' ? '<p class="bgr-reason">الخصم انسحب</p>' : ''}
      </div>

      <div class="bgr-scoreboard">
        <div class="bgr-score-row">
          <span class="bgr-score-label">أنت</span>
          <span class="bgr-score-val ${didWin ? 'bgr-score-win' : ''}">${scores[0]}</span>
        </div>
        <div class="bgr-score-divider">من ${matchLength}</div>
        <div class="bgr-score-row">
          <span class="bgr-score-label">الخصم</span>
          <span class="bgr-score-val ${!didWin ? 'bgr-score-win' : ''}">${scores[1]}</span>
        </div>
      </div>

      <div class="bgr-buttons">
        <button class="bgr-btn bgr-btn-primary" id="btn-rematch">
          ${emoji('fire', '🔥', 18)} العب مرة ثانية
        </button>
        <button class="bgr-btn bgr-btn-secondary" id="btn-exit">
          رجوع للقائمة
        </button>
      </div>
    </div>
    ${getResultStyles()}
  `;

  el.querySelector('#btn-rematch').onclick = () => {
    audio.play('click');
    scene.replace('backgammon-room', { mode: 'menu' });
  };
  el.querySelector('#btn-exit').onclick = () => {
    audio.play('click');
    scene.exitGameMode();
    bus.emit('navigate', { world: 'play', scene: 'play-table' });
  };
}

function getResultStyles() {
  return `<style>
    .bgr-wrap {
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      height:100%;padding:24px;
      background:linear-gradient(180deg,#0a0f14 0%,#101820 50%,#141f2c 100%);
    }
    .bgr-hero { text-align:center;margin-bottom:32px; }
    .bgr-trophy { font-size:64px;margin-bottom:16px;animation:bgFloat 3s ease-in-out infinite; }
    .bgr-title { font-size:24px;font-weight:800;color:#f8fafc;margin:0; }
    .bgr-reason { font-size:13px;color:#94a3b8;margin:8px 0 0; }

    .bgr-scoreboard {
      display:flex;align-items:center;gap:16px;
      padding:20px 32px;border-radius:16px;
      background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
      margin-bottom:32px;
    }
    .bgr-score-row { display:flex;flex-direction:column;align-items:center;gap:4px; }
    .bgr-score-label { font-size:12px;color:#64748b; }
    .bgr-score-val { font-size:32px;font-weight:800;color:#94a3b8; }
    .bgr-score-win { color:#d4940a; }
    .bgr-score-divider { font-size:11px;color:#475569; }

    .bgr-buttons { display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px; }
    .bgr-btn {
      padding:14px 24px;border-radius:14px;border:none;
      font-size:15px;font-weight:700;cursor:pointer;text-align:center;
      transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    }
    .bgr-btn:active { transform:scale(0.95); }
    .bgr-btn-primary { background:linear-gradient(135deg,#d4940a,#8B4513);color:#fff;box-shadow:0 4px 16px rgba(212,148,10,0.3); }
    .bgr-btn-secondary { background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#94a3b8; }

    @keyframes bgFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
  </style>`;
}
