// ═══════════════════════════════════════════════════════════════════════════
// LandveX Finance — Accounts View
// ═══════════════════════════════════════════════════════════════════════════

export const Accounts = {
  async render(app) {
    app.render(`
      <div class="card">
        <div class="card-header">
          <h2 class="card-title">Kontoplan</h2>
          <span class="badge badge-posted">BAS 2024</span>
        </div>
        <div class="card-body" id="accounts-content">
          <div class="skeleton" style="height:300px"></div>
        </div>
      </div>
    `);
    
    try {
      const data = await app.api.get('/accounts');
      this.renderAccounts(data, app);
    } catch (e) {
      document.getElementById('accounts-content').innerHTML = 
        `<p style="color:var(--red)">Fel: ${e.message}</p>`;
    }
  },
  
  renderAccounts(data, app) {
    if (!data.ok || !data.accounts) return;
    
    const byType = {};
    data.accounts.forEach(a => {
      const type = a.account_type;
      if (!byType[type]) byType[type] = [];
      byType[type].push(a);
    });
    
    const typeNames = {
      asset: 'Tillgångar',
      liability: 'Skulder',
      equity: 'Eget kapital',
      income: 'Intäkter',
      expense: 'Kostnader'
    };
    
    document.getElementById('accounts-content').innerHTML = `
      ${Object.entries(byType).map(([type, accounts]) => `
        <div style="margin-bottom:20px">
          <h3 style="font-size:.8rem;color:var(--text-2);text-transform:uppercase;margin-bottom:8px">
            ${typeNames[type] || type} (${accounts.length})
          </h3>
          <div class="table-wrap">
            <table>
              <tbody>
                ${accounts.map(a => `
                  <tr>
                    <td><strong>${a.account_number}</strong></td>
                    <td>${a.name}</td>
                    <td class="num">${a.normal_balance === 'debit' ? 'D' : 'K'}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      `).join('')}
    `;
  }
};