import { renderTicketList } from './list.js';
import { renderPipeline } from './pipeline.js';
import { renderSla } from './sla.js';
import { renderAutomations } from './automations.js';
import { renderKb } from './kb.js';

export async function initTicketsSection(guildId: string) {
  const section = document.getElementById('section-tickets');
  if (!section) return;
  section.innerHTML = `
    <h2 class="section-title">Tickets</h2>
    <div class="tickets-grid">
      <div class="card" id="tickets-list"></div>
      <div class="card" id="tickets-pipeline"></div>
      <div class="card" id="tickets-sla"></div>
    </div>
    <div class="grid" style="margin-top:16px;">
      <div class="card" id="tickets-automations"></div>
      <div class="card" id="tickets-kb"></div>
    </div>
  `;
  await Promise.all([
    renderTicketList(guildId),
    renderPipeline(guildId),
    renderSla(guildId),
    renderAutomations(guildId),
    renderKb(guildId)
  ]);
}