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

export async function renderPipeline(guildId: string) {
  const container = document.getElementById('tickets-pipeline');
  if (!container) return;
  container.innerHTML = '<p class="muted">Lade Pipeline...</p>';
  try {
    const data: any = await api.pipeline(guildId);
    const lanes = data?.lanes || [];
    container.innerHTML = '<h3 class="label">Pipeline</h3>';
    if (!lanes.length) {
      container.innerHTML += '<div class="empty-state">Keine Pipeline-Daten</div>';
      return;
    }
    const grid = document.createElement('div');
    grid.className = 'grid';
    lanes.forEach((lane: any) => {
      const card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = `
        <p class="label">${lane.name || 'Lane'}</p>
        <p class="stat">${lane.count ?? 0}</p>
      `;
      grid.appendChild(card);
    });
    container.appendChild(grid);
  } catch (err) {
    console.error(err);
    container.innerHTML = '<div class="empty-state">Pipeline konnte nicht geladen werden.</div>';
    showToast('Fehler beim Laden der Pipeline', true);
  }
}