// ═══════════════════════════════════════════════════════════════════════════
// LandveX Finance — Dashboard View
// ═══════════════════════════════════════════════════════════════════════════

export const Dashboard = {
  async render(app) {
    app.render(`
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">Balansrapport</h2>
          <span class="badge badge-posted">2026-06</span>
        </div>
        <div class="card-body" id="dashboard-content">
          <div class="skeleton" style="height:200px"></div>
        </div>
      </div>
    `);
    
    try {
      const data = await app.api.get('/trial-balance?fiscal_year=2026&period=2026-06');
      this.renderBalance(data, app);
    } catch (e) {
      document.getElementById('dashboard-content').innerHTML = 
        `<p style="color:var(--red)">Fel: ${e.message}</p>`;
    }
  },
  
  renderBalance(data, app) {
    if (!data.ok || !data.accounts) return;
    
    const assets = data.accounts.filter(a => parseFloat(a.balance) > 0);
    const liabilities = data.accounts.filter(a => parseFloat(a.balance) < 0);
    
    const totalAssets = assets.reduce((s, a) => s + parseFloat(a.balance), 0);
    const totalLiab = liabilities.reduce((s, a) => s + parseFloat(a.balance), 0);
    
    document.getElementById('dashboard-content').innerHTML = `
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
        <div style="text-align:center;padding:16px;background:rgba(22,163,74,.05);border-radius:10px">
          <div style="font-size:.75rem;color:var(--text-2);text-transform:uppercase">Tillgångar</div>
          <div style="font-size:1.4rem;font-weight:700;color:var(--green);margin-top:4px">
            ${this.fmt(totalAssets)}
          </div>
        </div>
        <div style="text-align:center;padding:16px;background:rgba(220,38,38,.05);border-radius:10px">
          <div style="font-size:.75rem;color:var(--text-2);text-transform:uppercase">Skulder/EK</div>
          <div style="font-size:1.4rem;font-weight:700;color:var(--red);margin-top:4px">
            ${this.fmt(Math.abs(totalLiab))}
          </div>
        </div>
      </div>
      
      <h3 style="font-size:.85rem;color:var(--text-2);margin-bottom:12px">Viktiga konton</h3>
      <div class="table-wrap">
        <table>
          <thead><tr><th>Konto</th><th class="num">Saldo</th></tr></thead>
          <tbody>
            ${data.accounts.slice(0, 10).map(a => `
              <tr>
                <td><strong>${a.account_number}</strong> ${a.account_name}</td>
                <td class="num ${parseFloat(a.balance) >= 0 ? 'pos' : 'neg'}">${this.fmt(a.balance)}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      </div>
    `;
  },
  
  fmt(n) {
    return new Intl.NumberFormat('sv-SE', { style: 'currency', currency: 'SEK' }).format(n);
  }
};