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

export async function mountHistory(el) {
  el.innerHTML = `
    <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
      <div style="display:flex;align-items:center;gap:12px;">
        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;">←</button>
        <h2 style="font-size:18px;font-weight:700;">${t('profile.history')}</h2>
      </div>
      <div id="history-list">
        <div class="skeleton" style="height:60px;margin-bottom:8px;"></div>
        <div class="skeleton" style="height:60px;margin-bottom:8px;"></div>
        <div class="skeleton" style="height:60px;"></div>
      </div>
    </div>
  `;

  el.querySelector('#back-btn').addEventListener('click', () => { audio.play('click'); scene.pop(); });

  try {
    const token = store.get('auth.token');
    const res = await fetch('/api/leaderboard.php?game_key=chess&limit=1', {
      headers: { 'Authorization': 'Bearer ' + token }
    });
    // For now show a placeholder since we don't have a match history endpoint yet
    const list = el.querySelector('#history-list');
    list.innerHTML = `<p style="color:#94a3b8;text-align:center;padding:32px;">لا توجد مباريات سابقة</p>`;
  } catch (e) {
    el.querySelector('#history-list').innerHTML = `<p style="color:#ef4444;text-align:center;">${t('common.error')}</p>`;
  }
}
