// In-game emote system for chess
// Preset emotes that both players can send during a match

const EMOTES = [
  { key: 'gg', emoji: '🤝', label: 'GG' },
  { key: 'good_move', emoji: '👏', label: 'نقلة ممتازة' },
  { key: 'think', emoji: '🤔', label: 'يفكر...' },
  { key: 'hurry', emoji: '⏱️', label: 'أسرع' },
  { key: 'wow', emoji: '😮', label: 'واو!' },
  { key: 'laugh', emoji: '😂', label: 'هههه' },
  { key: 'angry', emoji: '😤', label: 'غاضب' },
  { key: 'hello', emoji: '👋', label: 'مرحبا' },
];

let emoteBar = null;
let emoteCallback = null;
let lastEmoteTime = 0;
const COOLDOWN = 3000; // 3 seconds between emotes

export function create(container, onSend) {
  emoteCallback = onSend;

  emoteBar = document.createElement('div');
  emoteBar.className = 'emote-bar';
  emoteBar.innerHTML = `
    <button class="emote-toggle" id="emote-toggle">💬</button>
    <div class="emote-panel hidden" id="emote-panel">
      ${EMOTES.map(e => `
        <button class="emote-btn" data-key="${e.key}" title="${e.label}">
          <span style="font-size:22px;">${e.emoji}</span>
        </button>
      `).join('')}
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .emote-bar { position:absolute;bottom:52px;right:8px;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:6px; }
    .emote-toggle { width:40px;height:40px;border-radius:50%;background:#1e1e3a;border:1px solid rgba(255,255,255,0.1);color:#f8fafc;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.15s,background 0.15s;box-shadow:0 2px 8px rgba(0,0,0,0.3); }
    .emote-toggle:active { transform:scale(0.9);background:#2a2a5a; }
    .emote-panel { display:flex;gap:6px;padding:8px;background:#1e1e3a;border-radius:12px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.5);animation:slideUpBounce 0.3s cubic-bezier(0.16,1,0.3,1); }
    .emote-panel.hidden { display:none; }
    .emote-btn { width:40px;height:40px;border-radius:8px;background:rgba(255,255,255,0.05);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.1s,background 0.15s; }
    .emote-btn:hover { background:rgba(255,255,255,0.1); }
    .emote-btn:active { transform:scale(0.85); }
    .emote-btn.cooldown { opacity:0.3;pointer-events:none; }
    .emote-received { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;animation:emoteFloat 2s ease-out forwards;pointer-events:none;z-index:40; }
    @keyframes emoteFloat { 0%{opacity:1;transform:translate(-50%,-50%) scale(0.5);} 30%{transform:translate(-50%,-50%) scale(1.2);} 60%{opacity:1;transform:translate(-50%,-80%) scale(1);} 100%{opacity:0;transform:translate(-50%,-120%) scale(0.8);} }
  `;
  container.appendChild(style);
  container.appendChild(emoteBar);

  // Toggle panel
  emoteBar.querySelector('#emote-toggle').addEventListener('click', () => {
    const panel = emoteBar.querySelector('#emote-panel');
    panel.classList.toggle('hidden');
  });

  // Emote buttons
  emoteBar.querySelectorAll('.emote-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const now = Date.now();
      if (now - lastEmoteTime < COOLDOWN) return;
      lastEmoteTime = now;

      const key = btn.dataset.key;
      const emote = EMOTES.find(e => e.key === key);
      if (emote && emoteCallback) {
        emoteCallback(emote);
        showSentFeedback(btn);
      }

      // Close panel
      emoteBar.querySelector('#emote-panel').classList.add('hidden');
    });
  });
}

function showSentFeedback(btn) {
  btn.classList.add('cooldown');
  setTimeout(() => btn.classList.remove('cooldown'), COOLDOWN);
}

export function showReceived(container, emote, fromElement) {
  const emojiText = emote.emoji || emote;
  const el = document.createElement('div');
  el.textContent = emojiText;
  el.style.cssText = 'position:fixed;font-size:40px;z-index:999;pointer-events:none;';
  document.body.appendChild(el);

  // Calculate start position (from sender's panel or default top)
  const containerRect = container.getBoundingClientRect();
  const centerX = containerRect.left + containerRect.width / 2;
  const centerY = containerRect.top + containerRect.height / 2;

  let startX = centerX;
  let startY = containerRect.top + 20;

  if (fromElement) {
    const fromRect = fromElement.getBoundingClientRect();
    startX = fromRect.left + fromRect.width / 2;
    startY = fromRect.top + fromRect.height / 2;
  }

  // Animate from sender position → center of board with scale + fade
  el.animate([
    { left: startX + 'px', top: startY + 'px', transform: 'translate(-50%,-50%) scale(0.3)', opacity: 0 },
    { left: startX + 'px', top: startY + 'px', transform: 'translate(-50%,-50%) scale(1.3)', opacity: 1, offset: 0.2 },
    { left: centerX + 'px', top: centerY + 'px', transform: 'translate(-50%,-50%) scale(1.5)', opacity: 1, offset: 0.5 },
    { left: centerX + 'px', top: centerY + 'px', transform: 'translate(-50%,-50%) scale(2)', opacity: 0 }
  ], {
    duration: 1800,
    easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
    fill: 'forwards'
  }).onfinish = () => el.remove();
}

// Legacy function for backward compat
export function showReceivedAt(container, emote) {
  showReceived(container, emote, null);
}

export function destroy() {
  if (emoteBar) {
    emoteBar.remove();
    emoteBar = null;
  }
}
