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

let activeTab = 'friends';
let refreshTimer = null;

export function mountFriends(el) {
  activeTab = 'friends';
  if (refreshTimer) clearInterval(refreshTimer);

  el.innerHTML = `
    <div style="display:flex;flex-direction:column;height:100%;">
      <div style="padding:12px 16px;background:#0f0f1e;">
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
          <h2 style="font-size:18px;font-weight:700;color:#f8fafc;">${t('social.friends')}</h2>
          <button class="btn btn-secondary" id="btn-search" style="min-height:34px;padding:6px 14px;font-size:12px;">${emoji('search_icon', '🔍', 13)} بحث</button>
        </div>
        <div style="display:flex;gap:6px;flex-wrap:wrap;">
          <button class="social-tab active" data-tab="friends">الأصدقاء</button>
          <button class="social-tab" data-tab="pending">الطلبات <span id="pending-count" style="display:none;font-size:10px;background:#EF4444;color:#fff;border-radius:50%;padding:1px 5px;margin-right:2px;"></span></button>
          <button class="social-tab" data-tab="online">متصلين</button>
          <button class="social-tab" data-tab="activity">${emoji('news', '📰', 12)} أخبار</button>
        </div>
      </div>
      <div id="social-content" style="flex:1;overflow-y:auto;padding:12px 16px;"></div>
    </div>
    <style>
      .social-tab{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);color:#94a3b8;font-size:12px;font-weight:600;padding:7px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all 0.15s;}
      .social-tab.active{background:#2563EB;border-color:#2563EB;color:#fff;}
      .social-tab:active{transform:scale(0.95);}
      .friend-card{display:flex;align-items:center;gap:12px;padding:12px;background:#1a1a2e;border-radius:12px;margin-bottom:8px;transition:transform 0.1s;}
      .friend-card:active{transform:scale(0.98);}
      .friend-avatar{width:44px;height:44px;border-radius:50%;background:#2a2a4a;display:flex;align-items:center;justify-content:center;font-size:18px;overflow:hidden;position:relative;flex-shrink:0;}
      .friend-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
      .online-dot{position:absolute;bottom:0;right:0;width:12px;height:12px;border-radius:50%;background:#34D399;border:2px solid #1a1a2e;}
      .friend-actions{display:flex;gap:6px;flex-shrink:0;}
      .friend-action{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:transform 0.1s,background 0.15s;}
      .friend-action:active{transform:scale(0.85);background:rgba(255,255,255,0.1);}
    </style>
  `;

  el.querySelector('#btn-search').addEventListener('click', () => {
    audio.play('click');
    showSearch(el);
  });

  el.querySelectorAll('.social-tab').forEach(tab => {
    tab.addEventListener('click', () => {
      audio.play('click');
      el.querySelectorAll('.social-tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      activeTab = tab.dataset.tab;
      loadTab(el, activeTab);
    });
  });

  loadTab(el, 'friends');
  loadPendingCount(el);

  refreshTimer = setInterval(() => {
    if (activeTab === 'online') loadTab(el, 'online');
  }, 15000);
}

async function loadPendingCount(el) {
  try {
    const data = await net.get('friends.php', { action: 'pending' });
    const count = (data.pending || []).length;
    const badge = el.querySelector('#pending-count');
    if (badge) {
      if (count > 0) {
        badge.textContent = count;
        badge.style.display = 'inline';
      } else {
        badge.style.display = 'none';
      }
    }
  } catch (e) {}
}

async function loadTab(el, tab) {
  const content = el.querySelector('#social-content');
  content.innerHTML = '<div style="text-align:center;padding:20px;color:#64748b;">جاري التحميل...</div>';

  switch (tab) {
    case 'friends': await loadFriends(content); break;
    case 'pending': await loadPending(content, el); break;
    case 'online': await loadOnline(content); break;
    case 'activity': await loadActivity(content); break;
  }
}

async function loadFriends(content) {
  try {
    const data = await net.get('friends.php', { action: 'list' });
    const friends = data.friends || [];

    if (friends.length === 0) {
      content.innerHTML = `
        <div style="text-align:center;padding:40px 20px;">
          <div style="font-size:48px;margin-bottom:12px;opacity:0.5;">${emoji('people', '👥', 48)}</div>
          <div style="font-size:15px;font-weight:700;color:#f8fafc;margin-bottom:6px;">لا يوجد أصدقاء بعد</div>
          <div style="font-size:12px;color:#64748b;margin-bottom:16px;">ابحث عن لاعبين وأرسل لهم طلب صداقة</div>
          <button class="btn btn-primary" id="empty-search" style="font-size:13px;padding:10px 24px;">${emoji('search_icon', '🔍', 13)} ابحث عن لاعبين</button>
        </div>`;
      content.querySelector('#empty-search')?.addEventListener('click', () => {
        showSearch(content.closest('[style*="height:100%"]') || content.parentElement);
      });
      return;
    }

    const online = friends.filter(f => f.is_online);
    const offline = friends.filter(f => !f.is_online);
    const sorted = [...online, ...offline];

    content.innerHTML = `
      <div style="font-size:11px;color:#64748b;margin-bottom:8px;">${friends.length} أصدقاء${online.length > 0 ? ` — ${online.length} متصل` : ''}</div>
      ${sorted.map(f => renderFriendCard(f)).join('')}
    `;
    bindFriendActions(content);
  } catch (e) {
    content.innerHTML = `<div style="text-align:center;color:#ef4444;padding:24px;">فشل التحميل — <span style="text-decoration:underline;cursor:pointer;" id="retry-friends">حاول مرة أخرى</span></div>`;
    content.querySelector('#retry-friends')?.addEventListener('click', () => loadFriends(content));
  }
}

async function loadPending(content, rootEl) {
  try {
    const data = await net.get('friends.php', { action: 'pending' });
    const pending = data.pending || [];

    if (pending.length === 0) {
      content.innerHTML = `
        <div style="text-align:center;padding:40px;color:#64748b;">
          <div style="font-size:32px;margin-bottom:8px;opacity:0.5;">${emoji('inbox', '📥', 32)}</div>
          <div>لا توجد طلبات معلقة</div>
        </div>`;
      return;
    }

    const requesterIds = pending.map(p => p.requester_id).filter(Boolean);
    let profiles = {};
    if (requesterIds.length > 0) {
      try {
        const profileData = await net.get('friends.php', { action: 'profiles', ids: requesterIds.join(',') });
        (profileData.profiles || []).forEach(p => { profiles[p.id] = p; });
      } catch (e) {}
    }

    content.innerHTML = `
      <div style="font-size:11px;color:#64748b;margin-bottom:10px;">${pending.length} طلب معلق</div>
      ${pending.map(p => {
        const profile = profiles[p.requester_id] || {};
        const name = profile.display_name || profile.username || p.requester_id?.substring(0, 8) || 'لاعب';
        const avatar = profile.avatar_url;
        const level = profile.level || 1;
        return `
          <div class="friend-card" data-friendship="${p.id}">
            <div class="friend-avatar">
              ${avatar ? `<img src="${avatar}">` : emoji('person', '👤', 18)}
            </div>
            <div style="flex:1;min-width:0;">
              <div style="font-size:13px;font-weight:600;color:#f8fafc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${name}</div>
              <div style="font-size:11px;color:#64748b;">مستوى ${level} — أرسل لك طلب صداقة</div>
            </div>
            <div class="friend-actions">
              <div class="friend-action" data-accept="${p.id}" title="قبول" style="background:rgba(52,211,153,0.15);border-color:rgba(52,211,153,0.3);color:#34D399;font-weight:700;">✓</div>
              <div class="friend-action" data-reject="${p.id}" title="رفض" style="background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.2);color:#EF4444;">✕</div>
            </div>
          </div>
        `;
      }).join('')}
    `;

    content.querySelectorAll('[data-accept]').forEach(btn => {
      btn.addEventListener('click', async () => {
        const card = btn.closest('.friend-card');
        const friendshipId = btn.dataset.accept;
        btn.style.opacity = '0.5';
        btn.style.pointerEvents = 'none';
        try {
          await net.post('friends.php', { action: 'accept', friendship_id: friendshipId });
          audio.play('reward');
          juice.hapticLight();
          card.querySelector('.friend-actions').innerHTML = '<span style="font-size:11px;color:#34D399;font-weight:600;">✓ تم القبول</span>';
          card.style.borderRight = '3px solid #34D399';
          loadPendingCount(rootEl);
        } catch (e) {
          btn.style.opacity = '1';
          btn.style.pointerEvents = 'auto';
        }
      });
    });

    content.querySelectorAll('[data-reject]').forEach(btn => {
      btn.addEventListener('click', async () => {
        const card = btn.closest('.friend-card');
        const friendshipId = btn.dataset.reject;
        try {
          await net.del('friends.php', { target_id: friendshipId });
          audio.play('click');
          card.style.transition = 'opacity 0.3s, transform 0.3s';
          card.style.opacity = '0';
          card.style.transform = 'translateX(20px)';
          setTimeout(() => card.remove(), 300);
          loadPendingCount(rootEl);
        } catch (e) {}
      });
    });
  } catch (e) {
    content.innerHTML = `<div style="text-align:center;color:#ef4444;">فشل التحميل</div>`;
  }
}

async function loadOnline(content) {
  try {
    const data = await net.get('friends.php', { action: 'list' });
    const friends = (data.friends || []).filter(f => f.is_online);

    if (friends.length === 0) {
      content.innerHTML = `
        <div style="text-align:center;padding:40px;color:#64748b;">
          <div style="font-size:32px;margin-bottom:8px;opacity:0.5;">${emoji('sleeping', '😴', 32)}</div>
          <div style="font-size:14px;margin-bottom:4px;">لا يوجد أصدقاء متصلين الآن</div>
          <div style="font-size:11px;color:#475569;">سيظهرون هنا عند دخولهم</div>
        </div>`;
      return;
    }

    content.innerHTML = `
      <div style="font-size:11px;color:#34D399;margin-bottom:10px;">${friends.length} متصل الآن</div>
      ${friends.map(f => renderFriendCard(f)).join('')}
    `;
    bindFriendActions(content);
  } catch (e) {
    content.innerHTML = `<div style="text-align:center;color:#ef4444;">فشل التحميل</div>`;
  }
}

function renderFriendCard(f) {
  const userId = store.get('auth.userId');
  return `
    <div class="friend-card" data-uid="${f.id}">
      <div class="friend-avatar">
        ${f.avatar_url ? `<img src="${f.avatar_url}">` : emoji('person', '👤', 18)}
        ${f.is_online ? '<div class="online-dot"></div>' : ''}
      </div>
      <div style="flex:1;min-width:0;">
        <div style="font-size:13px;font-weight:600;color:#f8fafc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${f.display_name || f.username || 'لاعب'}</div>
        <div style="font-size:11px;color:${f.is_online ? '#34D399' : '#64748b'};">${f.is_online ? 'متصل الآن' : 'غير متصل'}${f.level ? ` — مستوى ${f.level}` : ''}</div>
      </div>
      <div class="friend-actions">
        ${f.is_online ? `<div class="friend-action" data-invite="${f.id}" title="تحدّي" style="background:rgba(228,172,56,0.15);border-color:rgba(228,172,56,0.3);color:#E4AC38;">${emoji('challenge_swords', '⚔️', 14)}</div>` : ''}
        <div class="friend-action" data-profile="${f.id}" title="الملف الشخصي">${emoji('person', '👤', 14)}</div>
        <div class="friend-action" data-remove="${f.id}" title="إزالة" style="font-size:11px;color:#64748b;">✕</div>
      </div>
    </div>
  `;
}

function bindFriendActions(content) {
  content.querySelectorAll('[data-invite]').forEach(btn => {
    btn.addEventListener('click', () => {
      audio.play('click');
      juice.hapticLight();
      const uid = btn.dataset.invite;
      const card = btn.closest('.friend-card');
      const name = card?.querySelector('[style*="font-weight:600"]')?.textContent || 'صديق';
      bus.emit('challenge:send', { targetId: uid, targetName: name });
      scene.switchWorld('play');
    });
  });

  content.querySelectorAll('[data-profile]').forEach(btn => {
    btn.addEventListener('click', () => {
      audio.play('click');
      scene.push('player-profile', { playerId: btn.dataset.profile });
    });
  });

  content.querySelectorAll('[data-remove]').forEach(btn => {
    btn.addEventListener('click', async () => {
      audio.play('click');
      const card = btn.closest('.friend-card');
      const name = card?.querySelector('[style*="font-weight:600"]')?.textContent || 'هذا الصديق';
      if (!confirm(`إزالة ${name} من الأصدقاء؟`)) return;
      try {
        await net.del('friends.php', { target_id: btn.dataset.remove });
        card.style.transition = 'opacity 0.3s, transform 0.3s';
        card.style.opacity = '0';
        card.style.transform = 'translateX(20px)';
        setTimeout(() => card.remove(), 300);
      } catch (e) {}
    });
  });
}

function showSearch(el) {
  const content = el.querySelector('#social-content');
  content.innerHTML = `
    <div style="margin-bottom:16px;">
      <div style="display:flex;gap:8px;">
        <input class="input" id="search-input" type="text" placeholder="اسم المستخدم أو الاسم..." style="flex:1;min-height:40px;font-size:14px;" autocomplete="off">
        <button class="btn btn-primary" id="search-go" style="min-height:40px;padding:8px 16px;font-size:13px;">بحث</button>
      </div>
      <div style="font-size:11px;color:#475569;margin-top:4px;">ابحث بأي جزء من الاسم (حرفين على الأقل)</div>
    </div>
    <div id="search-results"></div>
  `;

  const input = content.querySelector('#search-input');
  const btn = content.querySelector('#search-go');
  input.focus();

  let debounceTimer = null;
  const doSearch = async () => {
    const query = input.value.trim();
    if (query.length < 2) {
      content.querySelector('#search-results').innerHTML = '<div style="text-align:center;color:#64748b;padding:12px;font-size:12px;">أدخل حرفين على الأقل</div>';
      return;
    }
    const results = content.querySelector('#search-results');
    results.innerHTML = '<div style="text-align:center;color:#64748b;padding:12px;">جاري البحث...</div>';

    try {
      const data = await net.get('friends.php', { action: 'search', query });
      const players = data.players || [];
      if (players.length === 0) {
        results.innerHTML = '<div style="text-align:center;color:#64748b;padding:24px;font-size:13px;">لم يتم العثور على نتائج — جرب اسم آخر</div>';
        return;
      }
      results.innerHTML = players.map(p => `
        <div class="friend-card">
          <div class="friend-avatar">
            ${p.avatar_url ? `<img src="${p.avatar_url}">` : emoji('person', '👤', 18)}
            ${p.is_online ? '<div class="online-dot"></div>' : ''}
          </div>
          <div style="flex:1;min-width:0;">
            <div style="font-size:13px;font-weight:600;color:#f8fafc;">${p.display_name || p.username || 'لاعب'}</div>
            <div style="font-size:11px;color:#64748b;">${p.is_online ? 'متصل' : 'غير متصل'} — مستوى ${p.level || 1}</div>
          </div>
          <button class="btn btn-primary" data-add="${p.id}" style="min-height:32px;padding:6px 12px;font-size:11px;flex-shrink:0;">+ أضف</button>
        </div>
      `).join('');

      results.querySelectorAll('[data-add]').forEach(addBtn => {
        addBtn.addEventListener('click', async () => {
          addBtn.disabled = true;
          addBtn.textContent = '...';
          try {
            await net.post('friends.php', { action: 'request', target_id: addBtn.dataset.add });
            audio.play('reward');
            juice.hapticLight();
            addBtn.textContent = '✓ تم الإرسال';
            addBtn.style.background = '#34D399';
            addBtn.style.borderColor = '#34D399';
          } catch (e) {
            const msg = e.message || '';
            if (msg.includes('duplicate') || msg.includes('already')) {
              addBtn.textContent = 'مرسل سابقاً';
              addBtn.style.background = '#64748b';
            } else {
              addBtn.textContent = 'فشل';
              addBtn.disabled = false;
              setTimeout(() => { addBtn.textContent = '+ أضف'; }, 2000);
            }
          }
        });
      });
    } catch (e) {
      results.innerHTML = '<div style="text-align:center;color:#ef4444;">فشل البحث</div>';
    }
  };

  btn.addEventListener('click', doSearch);
  input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doSearch(); });
  input.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(doSearch, 500);
  });
}

async function loadActivity(content) {
  try {
    const data = await net.get('activity.php');
    const activities = data.activity || [];
    if (activities.length === 0) {
      content.innerHTML = `
        <div style="text-align:center;padding:40px;color:#64748b;">
          <div style="font-size:32px;margin-bottom:8px;opacity:0.5;">${emoji('news', '📰', 32)}</div>
          <div>لا توجد أخبار — العب لتظهر أخبارك هنا</div>
        </div>`;
      return;
    }
    const labels = {
      game_win: 'فاز بمباراة',
      game_loss: 'خسر مباراة',
      game_draw: 'تعادل',
      achievement_unlock: 'حصل على إنجاز',
      level_up: 'ارتقى لمستوى جديد',
      tournament_join: 'انضم لبطولة',
      tournament_win: 'فاز ببطولة',
      friend_add: 'أضاف صديقاً جديداً'
    };
    const icons = {
      game_win: '🏆', game_loss: '💔', game_draw: '🤝',
      achievement_unlock: '🎖️', level_up: '⬆️',
      tournament_join: '🏅', tournament_win: '🥇', friend_add: '👋'
    };
    content.innerHTML = activities.map(a => {
      const actor = a.actor || {};
      const label = labels[a.action] || a.action;
      const icon = icons[a.action] || '📌';
      return `<div style="display:flex;gap:10px;padding:10px;background:#1a1a2e;border-radius:10px;margin-bottom:6px;">
        <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%;object-fit:cover;border-radius:50%;">` : icon}
        </div>
        <div style="flex:1;min-width:0;">
          <div style="font-size:13px;color:#f8fafc;"><strong>${actor.display_name || actor.username || '?'}</strong> ${label}</div>
          ${a.created_at ? `<div style="font-size:10px;color:#475569;margin-top:2px;">${timeAgo(a.created_at)}</div>` : ''}
        </div>
      </div>`;
    }).join('');
  } catch (e) {
    content.innerHTML = `<div style="text-align:center;color:#64748b;padding:32px;">لا توجد أخبار</div>`;
  }
}

function timeAgo(dateStr) {
  const diff = Date.now() - new Date(dateStr).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} ساعة`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `منذ ${days} يوم`;
  return new Date(dateStr).toLocaleDateString('ar');
}
