// Emote panel for backgammon — with cooldown + net sync
import * as audio from '../../../core/audio.js';
import * as net from '../../../core/net.js';
import { t } from '../../../core/i18n.js';

const EMOTES = ['🎲', '😤', '🤔', '👏', '😂', '🔥', '💀', '🫡'];
const PHRASES = [
  () => t('emote.nice_game'),
  () => t('emote.great_move'),
  () => t('emote.lucky'),
  () => t('emote.think_faster'),
  () => t('emote.rematch'),
  () => 'gg wp'
];
const COOLDOWN = 3000;

let lastEmoteTime = 0;

export function createEmotePanel(container, options = {}) {
  const { matchId, mode, onEmote } = options;

  const panel = document.createElement('div');
  panel.className = 'bgg-emote-panel';
  panel.style.display = 'none';

  panel.innerHTML = `
    <div class="bgg-emotes">${EMOTES.map(e => `<button class="bgg-emote-btn">${e}</button>`).join('')}</div>
    <div class="bgg-phrases">${PHRASES.map(p => `<button class="bgg-phrase-btn">${p()}</button>`).join('')}</div>
  `;

  panel.querySelectorAll('.bgg-emote-btn').forEach(btn => {
    btn.onclick = () => {
      if (Date.now() - lastEmoteTime < COOLDOWN) return;
      lastEmoteTime = Date.now();
      audio.play('sfx_emote');
      onEmote?.(btn.textContent, 'emote');
      panel.style.display = 'none';
      if (mode === 'live' && matchId) {
        net.post('backgammon-match.php', { action: 'emote', match_id: matchId, emote: btn.textContent }).catch(() => {});
      }
    };
  });

  panel.querySelectorAll('.bgg-phrase-btn').forEach(btn => {
    btn.onclick = () => {
      if (Date.now() - lastEmoteTime < COOLDOWN) return;
      lastEmoteTime = Date.now();
      audio.play('sfx_emote');
      onEmote?.(btn.textContent, 'phrase');
      panel.style.display = 'none';
    };
  });

  container.appendChild(panel);
  return panel;
}

export function toggle(panel) {
  if (!panel) return;
  panel.style.display = panel.style.display === 'none' ? '' : 'none';
}
