// In-game emote system for chess
// Preset emotes that both players can send during a match
import { t } from '../../../core/i18n.js';

const EMOTES = [
  { key: 'gg', emoji: '🤝', label: 'GG' },
  { key: 'good_move', emoji: '👏', get label() { return t('emote.good_move'); } },
  { key: 'think', emoji: '🤔', get label() { return t('emote.think'); } },
  { key: 'hurry', emoji: '⏱️', get label() { return t('emote.hurry'); } },
  { key: 'wow', emoji: '😮', get label() { return t('emote.wow'); } },
  { key: 'laugh', emoji: '😂', get label() { return t('emote.laugh'); } },
  { key: 'angry', emoji: '😤', get label() { return t('emote.angry'); } },
  { key: 'hello', emoji: '👋', get label() { return t('emote.hello'); } },
];

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 = `
    <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:relative;z-index:30; }
    .emote-panel { display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;background:var(--bg-elevated);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);max-width:100%; }
    .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 3s ease-out forwards;pointer-events:none;z-index:40; }
    @keyframes emoteFloat { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.3);} 15%{opacity:1;transform:translate(-50%,-50%) scale(1.1);} 25%{transform:translate(-50%,-50%) scale(1);} 75%{opacity:1;transform:translate(-50%,-60%) scale(1);} 100%{opacity:0;transform:translate(-50%,-80%) scale(0.9);} }
  `;
  container.appendChild(style);
  container.appendChild(emoteBar);

  // Use the inline toggle button already in the player bar
  const inlineToggle = container.querySelector('#emote-inline-toggle');
  if (inlineToggle) {
    inlineToggle.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:36px;z-index:999;pointer-events:none;';
  document.body.appendChild(el);

  let x, y;
  if (fromElement) {
    const fromRect = fromElement.getBoundingClientRect();
    x = fromRect.left + fromRect.width / 2;
    y = fromRect.top + fromRect.height / 2;
  } else {
    const containerRect = container.getBoundingClientRect();
    x = containerRect.left + containerRect.width / 2;
    y = containerRect.top + 40;
  }

  el.animate([
    { left: x + 'px', top: y + 'px', transform: 'translate(-50%,-50%) scale(0)', opacity: 0 },
    { left: x + 'px', top: y + 'px', transform: 'translate(-50%,-50%) scale(1.15)', opacity: 1, offset: 0.12 },
    { left: x + 'px', top: y + 'px', transform: 'translate(-50%,-50%) scale(1)', opacity: 1, offset: 0.2 },
    { left: x + 'px', top: (y - 20) + 'px', transform: 'translate(-50%,-50%) scale(1)', opacity: 1, offset: 0.75 },
    { left: x + 'px', top: (y - 30) + 'px', transform: 'translate(-50%,-50%) scale(0.85)', opacity: 0 }
  ], {
    duration: 3000,
    easing: 'ease-out',
    fill: 'forwards'
  }).onfinish = () => el.remove();
}

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

export function getEmojiForKey(key) {
  const emote = EMOTES.find(e => e.key === key);
  return emote ? emote.emoji : '😮';
}

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