SBCanvas.service.register('countdown', {
  init() {
    this.remaining = 300;
    this.interval = SBCanvas.setInterval(() => {
      this.remaining--;
      SBCanvas.vars.set('countdown', this.remaining);
      if (this.remaining <= 0) {
        SBCanvas.clearTimer(this.interval);
        SBCanvas.emit('countdown-done', {});
      }
    }, 1000);
  },

  dispose() {
    SBCanvas.clearTimer(this.interval);
  },

  onEvent(event, data) {
    if (event === 'activity:tip') {
      this.remaining += data.amount * 10;
    }
  }
});

const svc = SBCanvas.service.get('countdown');
console.log(svc.remaining);

SBCanvas.service.dispose('countdown');
SBCanvas.service.disposeAll();

SBCanvas.service.register('leaderboard', {
  async init() {
    this.data = (await SBCanvas.store.get('leaderboard')) || [];
    this.render();
  },

  onEvent(event, data) {
    if (event === 'activity:tip') {
      const existing = this.data.find(e => e.username === data.username);
      if (existing) {
        existing.total += data.amount;
      } else {
        this.data.push({ username: data.username, total: data.amount });
      }
      this.data.sort((a, b) => b.total - a.total);
      this.data = this.data.slice(0, 10);
      this.render();
      SBCanvas.store.set('leaderboard', this.data);
    }
  },

  dispose() {
    SBCanvas.store.set('leaderboard', this.data);
  },

  render() {
    const el = document.getElementById('leaderboard');
    el.innerHTML = '';
    for (const entry of this.data) {
      const div = document.createElement('div');
      div.textContent = `${entry.username}: $${entry.total}`;
      el.appendChild(div);
    }
  }
});