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 function mountBlockedList(el) {
  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;">${t('settings.blocked_list')}</h2>
      </div>
      <div id="blocked-content" style="display:flex;flex-direction:column;gap:var(--s-3);">
        <div style="text-align:center;padding:var(--s-6);color:var(--text-secondary);">${t('common.loading')}</div>
      </div>
    </div>
  `;

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

  loadBlockedList(el);
}

async function loadBlockedList(el) {
  const container = el.querySelector('#blocked-content');
  try {
    const data = await net.get('friends.php', { action: 'blocked-list' });
    const list = data.blocked || [];

    if (!list.length) {
      container.innerHTML = `<div style="text-align:center;padding:var(--s-6);color:var(--text-secondary);">${t('block.empty')}</div>`;
      return;
    }

    container.innerHTML = list.map(item => `
      <div class="card" style="display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);" data-id="${item.blocked_id}">
        <div style="width:40px;height:40px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;overflow:hidden;">
          ${item.profile?.avatar_url ? `<img src="${item.profile.avatar_url}" style="width:40px;height:40px;object-fit:cover;border-radius:50%;">` : emoji('person', '👤', 18)}
        </div>
        <div style="flex:1;">
          <div style="font-size:14px;font-weight:600;color:var(--text-primary);">${item.profile?.display_name || 'Player'}</div>
          <div style="font-size:12px;color:var(--text-secondary);">${item.type === 'mute' ? t('block.muted') : t('block.blocked')}</div>
        </div>
        <button class="btn btn-secondary unblock-btn" data-id="${item.blocked_id}" data-type="${item.type}" style="min-height:var(--tap-min);padding:4px 12px;font-size:12px;">
          ${item.type === 'mute' ? t('block.unmute') : t('block.unblock')}
        </button>
      </div>
    `).join('');

    container.querySelectorAll('.unblock-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id = btn.dataset.id;
        const type = btn.dataset.type;
        btn.disabled = true;
        btn.style.opacity = '0.5';
        try {
          await net.post('friends.php', { action: type === 'mute' ? 'unmute' : 'unblock', target_id: id });
          btn.closest('.card').remove();
          audio.play('click');
          if (!container.querySelector('.card')) {
            container.innerHTML = `<div style="text-align:center;padding:var(--s-6);color:var(--text-secondary);">${t('block.empty')}</div>`;
          }
        } catch (e) {
          btn.disabled = false;
          btn.style.opacity = '1';
        }
      });
    });
  } catch (e) {
    container.innerHTML = `<div style="text-align:center;padding:var(--s-6);color:var(--error);">${t('common.error')}</div>`;
  }
}
