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

export async function mountView(el) {
  try {
    const fresh = await net.get('profile.php');
    if (fresh && !fresh.error) store.set('player', fresh);
  } catch (e) {}
  const player = store.get('player') || {};

  el.innerHTML = `
    <div style="padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-4);">
      <!-- Player Card -->
      <div class="card" style="text-align:center;padding:var(--s-6);">
        <div class="profile-avatar-wrap" id="avatar-wrap">
          <div class="profile-avatar">
            ${player.avatar_url ? `<img src="${player.avatar_url}" style="width:100%;height:100%;border-radius:50%;object-fit:cover;">` : emoji('person', '👤', 40)}
          </div>
          <div class="profile-avatar-edit">${emoji('camera', '📷', 14)}</div>
        </div>
        <input type="file" id="avatar-input" accept="image/*" style="display:none;">
        <div id="avatar-uploading" style="display:none;margin:var(--s-2) auto 0;font-size:12px;color:var(--text-secondary);">جاري الرفع...</div>
        <div style="font-size:18px;font-weight:700;margin-top:var(--s-3);">${player.display_name || player.username || 'Player'}</div>
        <div style="font-size:13px;color:var(--text-secondary);margin-top:2px;">Level ${player.level || 1}</div>
      </div>

      <!-- Stats -->
      <div class="card">
        <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">${t('profile.stats')}</div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);text-align:center;">
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--gold);font-family:var(--font-lat);">${player.games_played || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">مباريات</div>
          </div>
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--win);font-family:var(--font-lat);">${player.games_won || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">فوز</div>
          </div>
          <div>
            <div style="font-size:20px;font-weight:700;color:var(--cyan);font-family:var(--font-lat);">${player.current_streak || 0}</div>
            <div style="font-size:11px;color:var(--text-secondary);">سلسلة</div>
          </div>
        </div>
      </div>

      <!-- Ratings -->
      <div class="card">
        <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">التصنيف</div>
        <div style="display:flex;flex-direction:column;gap:var(--s-2);">
          ${renderRating('شطرنج (سريع)', player.elo_rapid)}
          ${renderRating('شطرنج (خاطف)', player.elo_blitz)}
          ${renderRating('شطرنج (رصاصة)', player.elo_bullet)}
        </div>
      </div>

      <!-- Organization Membership -->
      <div class="card" id="org-section">
        <div style="font-size:15px;font-weight:600;margin-bottom:var(--s-3);">${emoji('building', '🏢', 18)} المنظمة</div>
        <div id="org-membership-content" style="font-size:13px;color:var(--text-secondary);">جاري التحميل...</div>
      </div>

      <!-- Profile Actions -->
      <div style="display:flex;flex-direction:column;gap:var(--s-3);">
        <button class="btn btn-primary w-full" id="btn-edit-profile" style="min-height:44px;">${emoji('edit', '✏️', 16)} تعديل الملف الشخصي</button>
        <button class="btn btn-secondary w-full" id="btn-org-apply" style="min-height:44px;">${emoji('building', '🏢', 16)} الانضمام لمنظمة</button>
      </div>

      <!-- Actions -->
      <div style="display:flex;gap:var(--s-3);">
        <button class="btn btn-secondary w-full" id="btn-settings">${t('profile.settings')}</button>
        <button class="btn btn-secondary w-full" id="btn-logout" style="color:var(--error);">خروج</button>
      </div>
    </div>
  `;

  const avatarInput = el.querySelector('#avatar-input');
  const avatarWrap = el.querySelector('#avatar-wrap');
  let isUploading = false;

  avatarWrap.addEventListener('click', () => {
    if (isUploading) return;
    audio.play('click');
    avatarInput.click();
  });

  avatarInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file || isUploading) return;
    isUploading = true;
    avatarWrap.style.opacity = '0.5';
    const uploading = el.querySelector('#avatar-uploading');
    uploading.style.display = 'block';
    try {
      const compressed = await compressAvatar(file);
      const formData = new FormData();
      formData.append('avatar', compressed, 'avatar.jpg');
      const token = store.get('auth.token');
      const res = await fetch('/api/avatar.php', {
        method: 'POST',
        headers: { 'Authorization': `Bearer ${token}` },
        body: formData
      });
      const data = await res.json();
      if (data.avatar_url) {
        store.set('player', { ...store.get('player'), avatar_url: data.avatar_url });
        bus.emit('store:player');
        mountView(el);
        return;
      } else {
        bus.emit('toast', { text: data.error || 'فشل رفع الصورة', type: 'error' });
      }
    } catch (err) {
      bus.emit('toast', { text: 'فشل رفع الصورة', type: 'error' });
    }
    isUploading = false;
    avatarWrap.style.opacity = '1';
    uploading.style.display = 'none';
  });

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

  el.querySelector('#btn-org-apply').addEventListener('click', () => {
    audio.play('click');
    scene.push('profile-org-apply');
  });

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

  el.querySelector('#btn-logout').addEventListener('click', () => {
    audio.play('click');
    bus.emit('auth:logout');
  });

  // Load org membership
  loadOrgMembership(el);
}

async function loadOrgMembership(el) {
  const content = el.querySelector('#org-membership-content');
  if (!content) return;
  try {
    const memberships = await net.post('profile.php', { action: 'my-memberships' });
    if (Array.isArray(memberships) && memberships.length > 0) {
      const active = memberships.filter(m => m.status === 'active');
      if (active.length > 0) {
        content.innerHTML = active.map(m => {
          const org = m.organizations;
          const logoHtml = org && org.logo_url
            ? `<img src="${org.logo_url}" style="width:28px;height:28px;border-radius:6px;object-fit:contain;" alt="">`
            : `<div style="width:28px;height:28px;border-radius:6px;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;">${emoji('building', '🏢', 14)}</div>`;
          return `
            <div style="display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) 0;">
              ${logoHtml}
              <div style="flex:1;">
                <div style="font-size:13px;font-weight:600;color:var(--text-primary);">${org ? org.name : 'منظمة'}</div>
                <div style="font-size:11px;color:var(--text-secondary);">${m.role || 'عضو'}</div>
              </div>
              <span style="background:var(--success);color:#fff;font-size:10px;padding:2px 6px;border-radius:10px;">عضو</span>
            </div>
          `;
        }).join('');
        return;
      }
    }
    content.innerHTML = `<div style="font-size:13px;color:var(--text-secondary);">لست عضواً في أي منظمة بعد</div>`;
  } catch (e) {
    content.innerHTML = `<div style="font-size:13px;color:var(--text-secondary);">لست عضواً في أي منظمة بعد</div>`;
  }
}

function compressAvatar(file) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      const size = 512;
      const canvas = document.createElement('canvas');
      canvas.width = size;
      canvas.height = size;
      const ctx = canvas.getContext('2d');

      const min = Math.min(img.width, img.height);
      const sx = (img.width - min) / 2;
      const sy = (img.height - min) / 2;
      ctx.drawImage(img, sx, sy, min, min, 0, 0, size, size);

      canvas.toBlob(
        (blob) => blob ? resolve(blob) : reject(new Error('Compression failed')),
        'image/jpeg',
        0.82
      );
      URL.revokeObjectURL(img.src);
    };
    img.onerror = () => { URL.revokeObjectURL(img.src); reject(new Error('Invalid image')); };
    img.src = URL.createObjectURL(file);
  });
}

function renderRating(label, rating) {
  return `
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <span style="font-size:13px;color:var(--text-secondary);">${label}</span>
      <span style="font-size:15px;font-weight:700;font-family:var(--font-lat);">${rating || 1200}</span>
    </div>
  `;
}
