import { api } from '../services/api.js';
import { showToast } from '../ui/toast.js';

export async function renderOverview(guildId: string) {
  const section = document.getElementById('section-overview');
  if (!section) return;
  section.innerHTML = '<p class="muted">Lade Uebersicht...</p>';
  try {
    const data: any = await api.overview(guildId);
    const stats = data?.stats || {};
    section.innerHTML = `
      <h2 class="section-title">Uebersicht</h2>
      <div class="grid">
        <div class="card">
          <p class="label">Tickets offen</p>
          <p class="stat">${stats.openTickets ?? '-'}</p>
        </div>
        <div class="card">
          <p class="label">Module aktiv</p>
          <p class="stat">${stats.activeModules ?? '-'}</p>
        </div>
        <div class="card">
          <p class="label">Events geplant</p>
          <p class="stat">${stats.events ?? '-'}</p>
        </div>
      </div>
    `;
  } catch (err) {
    console.error(err);
    section.innerHTML = '<div class="empty-state">Uebersicht konnte nicht geladen werden.</div>';
    showToast('Fehler beim Laden der Uebersicht', true);
  }
}