import { $, api, esc, showError, renderHeader, renderFooter } from './common.js';

renderHeader('statistik');
renderFooter();

let stats = [];
let canEdit = false;   // angemeldet und laufendes Jahr

function detail(s) {
  if (!s.manual) return '';
  const sign = s.manual > 0 ? '+' : '−';
  return `<span class="meta">${s.calendar} aus Kalender ${sign} ${Math.abs(s.manual)} manuell</span>`;
}

function render() {
  $('#stats-empty').hidden = stats.length > 0;
  $('#stats-edit-hint').hidden = !canEdit;
  // Gleiche Anzahl → gleicher Platz
  const rank = (s) => 1 + stats.filter((x) => x.total > s.total).length;
  const max = Math.max(1, ...stats.map((s) => s.total));
  $('#stats-list').innerHTML = stats.map((s) => `
    <li class="${rank(s) <= 3 && s.total > 0 ? 'top' : ''}">
      <span class="rank">${rank(s)}.</span>
      <span class="who">
        <span class="name">${esc(s.name)} ${detail(s)}</span>
        <span class="stat-bar" aria-hidden="true"><i style="width: ${(s.total / max) * 100}%"></i></span>
      </span>
      <span class="actions">
        ${canEdit ? `
          <button class="small" data-step="-1" data-id="${s.id}" ${s.total ? '' : 'disabled'} aria-label="Ein Spiel weniger">−</button>` : ''}
        <span class="stat-total">${s.total}</span>
        ${canEdit ? `
          <button class="small" data-step="1" data-id="${s.id}" aria-label="Ein Spiel mehr">+</button>` : ''}
      </span>
    </li>`).join('');
}

$('#stats-list').addEventListener('click', async (e) => {
  const { step, id } = e.target.closest('[data-step]')?.dataset ?? {};
  if (!step) return;
  const s = stats.find((x) => x.id === id);
  try {
    const { manual } = await api('PUT', `/members/${id}/plays-manual`, { manual: Math.max(s.manual, -s.calendar) + Number(step) });
    s.manual = manual;
    s.total = Math.max(0, s.calendar + manual);
    stats.sort((a, b) => b.total - a.total || a.name.localeCompare(b.name, 'de'));
    render();
  } catch (err) {
    showError(err);
  }
});

let loggedIn = false;

async function load(year) {
  const data = await api('GET', `/stats${year ? `?year=${year}` : ''}`);
  stats = data.entries;
  canEdit = loggedIn && data.live;
  $('#stats-year').innerHTML = data.years
    .map((y, i) => `<option value="${y}" ${y === data.year ? 'selected' : ''}>${y}${i === 0 ? ' (laufend)' : ''}</option>`).join('');
  $('#stats-info').textContent = data.live
    ? `Laufendes Jahr: Spiel-Events seit dem 1. Januar ${data.year}, bei denen jemand zugesagt hat.`
    : `Endstand ${data.year}, gespeichert am ${new Date(data.savedAt).toLocaleDateString('de-DE')}.`;
  render();
}

$('#stats-year').addEventListener('change', (e) => load(e.target.value).catch(showError));

api('GET', '/me')
  .then(({ user }) => { loggedIn = !!user; return load(); })
  .catch(showError);