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

export async function mountGroups(el) {
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;height:100%;">
      <div style="padding:12px 16px;background:var(--bg-panel);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;color:var(--text-primary);flex:1;">${t('social.groups_tab')}</h2>
        <button class="btn btn-primary" id="create-btn" style="min-height:34px;padding:6px 14px;font-size:12px;">+ ${t('group.create')}</button>
      </div>
      <div id="groups-list" style="flex:1;overflow-y:auto;padding:12px 16px;">
        <div style="text-align:center;padding:24px;color:var(--text-secondary);">${t('common.loading')}</div>
      </div>
    </div>
  `;

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

  try {
    const data = await net.get('groups.php', { action: 'list' });
    const groups = data.groups || [];
    const container = el.querySelector('#groups-list');

    if (!groups.length) {
      container.innerHTML = `
        <div style="text-align:center;padding:48px 24px;color:var(--text-secondary);">
          <div style="font-size:40px;margin-bottom:12px;">${emoji('group', '👥', 40)}</div>
          <div style="font-size:14px;">${t('group.no_groups')}</div>
          <div style="font-size:12px;margin-top:4px;">${t('group.no_groups_hint')}</div>
        </div>`;
      return;
    }

    container.innerHTML = groups.map(g => `
      <div class="group-card" data-id="${g.id}" style="display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:transform 0.1s;">
        <div style="width:48px;height:48px;border-radius:12px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;">
          ${g.avatar_url ? `<img src="${g.avatar_url}" style="width:48px;height:48px;object-fit:cover;border-radius:12px;">` : `<span style="font-size:22px;">${emoji('group', '👥', 22)}</span>`}
        </div>
        <div style="flex:1;min-width:0;">
          <div style="font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">${escapeHtml(g.name)}</div>
          <div style="font-size:12px;color:var(--text-muted);">${g.member_count || 1} ${t('group.members')} • ${g.my_role === 'owner' ? t('group.owner') : g.my_role === 'admin' ? t('group.admin') : t('profile.member')}</div>
        </div>
        <span style="color:var(--text-muted);font-size:16px;">←</span>
      </div>
    `).join('');

    container.querySelectorAll('.group-card').forEach(card => {
      card.addEventListener('click', () => {
        audio.play('click');
        scene.push('group-chat', { groupId: card.dataset.id });
      });
    });
  } catch (e) {
    el.querySelector('#groups-list').innerHTML = `<div style="text-align:center;padding:24px;color:var(--error);">${t('common.error')}</div>`;
  }
}

function escapeHtml(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}
