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 mountHome(el, params) {
  const { orgId } = params;

  el.innerHTML = `
    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
      <div style="display:flex;align-items:center;gap:var(--s-3);">
        <button class="btn btn-secondary" id="back-btn" style="width:36px;height:36px;padding:0;">←</button>
        <h2 style="font-size:18px;font-weight:700;" id="org-name">...</h2>
      </div>
      <div id="org-content">
        <div class="skeleton" style="height:120px;margin-bottom:var(--s-3);"></div>
        <div class="skeleton" style="height:80px;"></div>
      </div>
    </div>
  `;

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

  try {
    const org = await net.get('orgs.php', { action: 'detail', id: orgId });
    renderOrg(el, org);
  } catch (e) {
    el.querySelector('#org-content').innerHTML = `<p style="color:var(--error);">${t('common.error')}</p>`;
  }
}

function renderOrg(el, org) {
  el.querySelector('#org-name').textContent = org.name_ar || org.name || 'Organization';

  el.querySelector('#org-content').innerHTML = `
    <div class="card" style="text-align:center;padding:var(--s-6);">
      <div style="width:64px;height:64px;border-radius:var(--r-md);background:var(--bg-elevated);margin:0 auto var(--s-3);display:flex;align-items:center;justify-content:center;font-size:28px;">
        ${org.logo_url ? `<img src="${org.logo_url}" style="width:100%;height:100%;border-radius:var(--r-md);object-fit:cover;">` : emoji('building', '🏛️', 28)}
      </div>
      <div style="font-size:16px;font-weight:700;">${org.name_ar || org.name}</div>
      <div style="font-size:13px;color:var(--text-secondary);margin-top:var(--s-2);">${org.description || ''}</div>
      <div style="display:flex;gap:var(--s-4);justify-content:center;margin-top:var(--s-4);">
        <div style="text-align:center;">
          <div style="font-size:18px;font-weight:700;color:var(--gold);">${org.member_count || 0}</div>
          <div style="font-size:11px;color:var(--text-secondary);">${t('org.members')}</div>
        </div>
        <div style="text-align:center;">
          <div style="font-size:18px;font-weight:700;color:var(--cyan);">${org.game_focus || 'chess'}</div>
          <div style="font-size:11px;color:var(--text-secondary);">${t('org.game')}</div>
        </div>
      </div>
    </div>

    ${org.members && org.members.length > 0 ? `
    <div class="card" style="padding:var(--s-4);">
      <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">${t('org.members_section')} (${org.members.length})</div>
      ${org.members.slice(0, 10).map(m => `
        <div style="display:flex;align-items:center;gap:var(--s-2);padding:var(--s-1) 0;">
          <div style="width:24px;height:24px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:12px;">${emoji('person', '👤', 12)}</div>
          <span style="font-size:13px;">${m.user_id?.substring(0, 8) || 'Member'}</span>
          <span style="font-size:10px;color:var(--text-muted);margin-right:auto;">${m.role}</span>
        </div>
      `).join('')}
    </div>
    ` : ''}

    <button class="btn btn-primary w-full" id="join-btn">${t('org.join')}</button>
  `;

  el.querySelector('#join-btn')?.addEventListener('click', async () => {
    try {
      await net.post('orgs.php', { action: 'join', org_id: org.id });
      audio.play('coin', 'reward');
      el.querySelector('#join-btn').innerHTML = `${emoji('checkmark', '✅', 14)} ${t('org.joined')}`;
      el.querySelector('#join-btn').disabled = true;
    } catch (e) {
      audio.play('click');
    }
  });
}
