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

export function mountView(el) {
  const player = store.get('player') || {};

  el.innerHTML = `
    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
      <!-- Player Card -->
      <div class="card" style="text-align:center;padding:var(--s-6);">
        <div style="width:80px;height:80px;border-radius:50%;background:var(--bg-elevated);margin:0 auto var(--s-3);display:flex;align-items:center;justify-content:center;font-size:36px;border:3px solid var(--gold);">
          ${player.avatar_url ? `<img src="${player.avatar_url}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` : '👤'}
        </div>
        <div style="font-size:18px;font-weight:700;">${player.display_name || player.username || 'Player'}</div>
        <div style="font-size:13px;color:var(--text-secondary);margin-top:2px;">Level ${player.level || 1}</div>
      </div>

      <!-- Stats -->
      <div class="card">
        <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">${t('profile.stats')}</div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);text-align:center;">
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--gold);font-family:var(--font-lat);">${player.games_played || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">مباريات</div>
          </div>
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--win);font-family:var(--font-lat);">${player.games_won || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">فوز</div>
          </div>
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--cyan);font-family:var(--font-lat);">${player.current_streak || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">سلسلة</div>
          </div>
        </div>
      </div>

      <!-- Ratings -->
      <div class="card">
        <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">التصنيف</div>
        <div style="display:flex;flex-direction:column;gap:var(--s-2);">
          ${renderRating('شطرنج (سريع)', player.elo_rapid)}
          ${renderRating('شطرنج (خاطف)', player.elo_blitz)}
          ${renderRating('شطرنج (رصاصة)', player.elo_bullet)}
        </div>
      </div>

      <!-- Actions -->
      <div style="display:flex;gap:var(--s-3);">
        <button class="btn btn-secondary w-full" id="btn-settings">${t('profile.settings')}</button>
        <button class="btn btn-secondary w-full" id="btn-logout" style="color:var(--error);">خروج</button>
      </div>
    </div>
  `;

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

  el.querySelector('#btn-logout').addEventListener('click', () => {
    audio.play('click');
    bus.emit('auth:logout');
  });
}

function renderRating(label, rating) {
  return `
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <span style="font-size:13px;color:var(--text-secondary);">${label}</span>
      <span style="font-size:15px;font-weight:700;font-family:var(--font-lat);">${rating || 1200}</span>
    </div>
  `;
}
