// Dashboard module — rendered dynamically into #app
export async function render(container) {
  container.innerHTML = `
    <header class="module-header">
      <h1>Dashboard</h1>
      <p class="subtitle">Överblick över hela verksamheten</p>
    </header>
    <div class="kpi-grid">
      <div class="kpi-card">
        <div class="kpi-value" id="kpi-revenue">—</div>
        <div class="kpi-label">Månadsintäkt</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="kpi-deals">—</div>
        <div class="kpi-label">Aktiva deals</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="kpi-customers">—</div>
        <div class="kpi-label">Kunder</div>
      </div>
      <div class="kpi-card">
        <div class="kpi-value" id="kpi-tickets">—</div>
        <div class="kpi-label">Öppna ärenden</div>
      </div>
    </div>
    <div class="section">
      <h2>Snabbåtgärder</h2>
      <div class="quick-actions">
        <button onclick="location.hash='/crm'">+ Ny kund</button>
        <button onclick="location.hash='/sales'">+ Ny offert</button>
        <button onclick="location.hash='/finance'">+ Ny faktura</button>
      </div>
    </div>
  `;

  // Load real data
  try {
    const [deals, customers, tickets] = await Promise.all([
      apiRequest('/sales/deals').then(r => r.ok ? r.json() : {deals: []}),
      apiRequest('/crm/customers').then(r => r.ok ? r.json() : {customers: []}),
      apiRequest('/support/tickets').then(r => r.ok ? r.json() : {tickets: []}),
    ]);

    document.getElementById('kpi-deals').textContent = deals.deals?.length || 0;
    document.getElementById('kpi-customers').textContent = customers.customers?.length || 0;
    document.getElementById('kpi-tickets').textContent = tickets.tickets?.length || 0;
  } catch (err) {
    console.error('Dashboard load error:', err);
  }
}