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

export async function mountActivity(el) {
  el.innerHTML = `
    <div style="padding:16px;display:flex;flex-direction:column;gap:12px;">
      <h2 style="font-size:18px;font-weight:700;color:#f8fafc;">📰 آخر الأخبار</h2>
      <div id="activity-list"></div>
    </div>
  `;

  try {
    const data = await net.get('activity.php');
    renderActivity(el, data.activity || []);
  } catch (e) {
    el.querySelector('#activity-list').innerHTML = '<div style="text-align:center;color:#64748b;padding:32px;">لا توجد أخبار</div>';
  }
}

function renderActivity(el, activities) {
  const list = el.querySelector('#activity-list');
  if (activities.length === 0) {
    list.innerHTML = '<div style="text-align:center;color:#64748b;padding:32px;">لا توجد أخبار — العب لتظهر أخبارك هنا</div>';
    return;
  }

  const actionLabels = {
    'game_win': 'فاز بمباراة',
    'game_loss': 'خسر مباراة',
    'game_draw': 'تعادل في مباراة',
    'achievement_unlock': 'حصل على إنجاز',
    'level_up': 'ارتقى لمستوى جديد',
    'tournament_join': 'انضم لبطولة',
    'friend_add': 'أضاف صديق جديد'
  };

  list.innerHTML = activities.map(a => {
    const actor = a.actor || {};
    const label = actionLabels[a.action] || a.action;
    const time = timeAgo(a.created_at);

    return `
      <div style="display:flex;gap:10px;padding:10px;background:#1a1a2e;border-radius:10px;">
        <div style="width:36px;height:36px;border-radius:50%;background:#2a2a4a;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;">
          ${actor.avatar_url ? `<img src="${actor.avatar_url}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` : emoji('person', '👤', 14)}
        </div>
        <div style="flex:1;">
          <div style="font-size:13px;color:#f8fafc;"><strong>${actor.display_name || actor.username || '?'}</strong> ${label}</div>
          <div style="font-size:10px;color:#64748b;margin-top:2px;">${time}</div>
        </div>
      </div>
    `;
  }).join('');
}

function timeAgo(date) {
  if (!date) return '';
  const diff = Date.now() - new Date(date).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'الآن';
  if (mins < 60) return `منذ ${mins} دقيقة`;
  const hours = Math.floor(mins / 60);
  if (hours < 24) return `منذ ${hours} ساعة`;
  return `منذ ${Math.floor(hours / 24)} يوم`;
}
