boc/web/assets/boc.js

const API_BASE = window.location.hostname === 'localhost'
  ? 'http://localhost:9092'
  : 'https://landvex.com';

let token = localStorage.getItem('boc_token');

// Navigation
document.querySelectorAll('.sidebar-nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const module = link.dataset.module;
    showModule(module);

    document.querySelectorAll('.sidebar-nav a').forEach(l => l.classList.remove('active'));
    link.classList.add('active');
  });
});

function showModule(name) {
  document.querySelectorAll('.module').forEach(m => m.classList.remove('active'));
  document.getElementById(name).classList.add('active');

  // Load module data
  switch(name) {
    case 'dashboard': loadDashboard(); break;
    case 'crm': loadCRM(); break;
    case 'sales': loadSales(); break;
    case 'finance': loadFinance(); break;
    case 'support': loadSupport(); break;
    case 'analytics': loadAnalytics(); break;
  }
}

async function api(path, options = {}) {
  const res = await fetch(`${API_BASE}${path}`, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
      ...options.headers,
    },
  });

  if (res.status === 401) {
    localStorage.removeItem('boc_token');
    window.location.href = '/login.html';
    return;
  }

  return res.json();
}

// Dashboard
async function loadDashboard() {
  try {
    // Show alerts
    document.getElementById('alerts-container').style.display = 'block';

    const [mrr, arr, customers, tickets, deals, analytics] = await Promise.all([
      api('/api/v1/sales/mrr'),
      api('/api/v1/sales/arr'),
      api('/api/v1/crm/customers'),
      api('/api/v1/support/tickets'),
      api('/api/v1/sales/deals'),
      api('/api/v1/analytics/users')
    ]);

    document.getElementById('kpi-mrr').textContent = formatCurrency(mrr.mrr);
    document.getElementById('kpi-arr').textContent = formatCurrency(arr.arr);
    document.getElementById('kpi-customers').textContent = customers.total || 0;
    document.getElementById('kpi-tickets').textContent =
      (tickets.tickets || []).filter(t => t.status === 'open').length;
    document.getElementById('kpi-cash').textContent = '276 504';

    const pipelineValue = (deals.deals || [])
      .filter(d => d.status === 'open')
      .reduce((sum, d) => sum + (d.value || 0), 0);
    document.getElementById('kpi-pipeline').textContent = formatCurrency(pipelineValue);

    // Recent deals
    const recentDeals = document.getElementById('recent-deals');
    recentDeals.innerHTML = (deals.deals || []).slice(0, 5).map(d => `
      <div class="list-item">
        <div>
          <strong>${d.name}</strong>
          <div style="color: var(--text-secondary); font-size: 12px;">${d.stage}</div>
        </div>
        <div style="text-align: right;">
          <div>${formatCurrency(d.value)}</div>
          <span class="status status-${d.status}">${d.status}</span>
        </div>
      </div>
    `).join('');

    // Recent tickets
    const recentTickets = document.getElementById('recent-tickets');
    recentTickets.innerHTML = (tickets.tickets || []).filter(t => t.status === 'open').slice(0, 5).map(t => `
      <div class="list-item">
        <div>
          <strong>${t.subject}</strong>
          <div style="color: var(--text-secondary); font-size: 12px;">${t.assigned_to?.String || 'Ej tilldelad'}</div>
        </div>
        <span class="status status-${t.priority}">${t.priority}</span>
      </div>
    `).join('');

  } catch (err) {
    console.error('Failed to load dashboard:', err);
  }
}

// CRM
async function loadCRM() {
  try {
    const data = await api('/api/v1/crm/customers');
    const tbody = document.querySelector('#customers-table tbody');
    tbody.innerHTML = (data.customers || []).map(c => `
      <tr>
        <td>${c.name}</td>
        <td>${c.company}</td>
        <td><span class="status status-${c.status}">${c.status}</span></td>
        <td>${c.source}</td>
        <td>${formatDate(c.created_at)}</td>
      </tr>
    `).join('');
  } catch (err) {
    console.error('Failed to load CRM:', err);
  }
}

// Sales
async function loadSales() {
  try {
    const data = await api('/api/v1/sales/deals');
    const tbody = document.querySelector('#deals-table tbody');
    tbody.innerHTML = (data.deals || []).map(d => `
      <tr>
        <td>${d.name}</td>
        <td>${d.customer_id}</td>
        <td>${formatCurrency(d.value)}</td>
        <td><span class="status status-${d.status}">${d.status}</span></td>
        <td>${d.stage}</td>
        <td>${formatDate(d.expected_close)}</td>
      </tr>
    `).join('');
  } catch (err) {
    console.error('Failed to load sales:', err);
  }
}

// Finance
async function loadFinance() {
  try {
    const data = await api('/api/v1/finance/invoices');
    const tbody = document.querySelector('#invoices-table tbody');
    tbody.innerHTML = (data.invoices || []).map(i => `
      <tr>
        <td>${i.id}</td>
        <td>${i.customer_id}</td>
        <td>${formatCurrency(i.amount)}</td>
        <td><span class="status status-${i.status}">${i.status}</span></td>
        <td>${i.due_date?.Valid ? formatDate(i.due_date.String) : '-'}</td>
      </tr>
    `).join('');
  } catch (err) {
    console.error('Failed to load finance:', err);
  }
}

// Support
async function loadSupport() {
  try {
    const data = await api('/api/v1/support/tickets');
    const tbody = document.querySelector('#tickets-table tbody');
    tbody.innerHTML = (data.tickets || []).map(t => `
      <tr>
        <td>${t.subject}</td>
        <td>${t.customer_id}</td>
        <td><span class="status status-${t.priority}">${t.priority}</span></td>
        <td><span class="status status-${t.status}">${t.status}</span></td>
        <td>${t.assigned_to?.String || 'Ej tilldelad'}</td>
      </tr>
    `).join('');
  } catch (err) {
    console.error('Failed to load support:', err);
  }
}

// Analytics
async function loadAnalytics() {
  try {
    const [users, revenue, retention] = await Promise.all([
      api('/api/v1/analytics/users'),
      api('/api/v1/analytics/revenue'),
      api('/api/v1/analytics/retention')
    ]);

    document.getElementById('analytics-dau').textContent =
      (users.daily_active || 0).toLocaleString('sv-SE');
    document.getElementById('analytics-revenue').textContent =
      formatCurrency(revenue.revenue_this_month || 0);
    document.getElementById('analytics-retention').textContent =
      (retention.day_30 || 0) + '%';
  } catch (err) {
    console.error('Failed to load analytics:', err);
  }
}

// Modal
function showModal(type) {
  const modal = document.getElementById('modal');
  const title = document.getElementById('modal-title');
  const body = document.getElementById('modal-body');

  modal.style.display = 'flex';

  if (type === 'new-customer') {
    title.textContent = 'Ny kund';
    body.innerHTML = `
      <div class="form-group">
        <label>Namn</label>
        <input type="text" id="new-customer-name" placeholder="Företagsnamn">
      </div>
      <div class="form-group">
        <label>E-post</label>
        <input type="email" id="new-customer-email" placeholder="kund@foretag.se">
      </div>
      <div class="form-group">
        <label>Telefon</label>
        <input type="tel" id="new-customer-phone" placeholder="070-123 45 67">
      </div>
      <div class="form-group">
        <label>Status</label>
        <select id="new-customer-status">
          <option value="lead">Lead</option>
          <option value="prospect">Prospect</option>
          <option value="customer">Kund</option>
        </select>
      </div>
      <button class="btn-primary" onclick="createCustomer()">Spara</button>
    `;
  } else if (type === 'new-deal') {
    title.textContent = 'Ny deal';
    body.innerHTML = `
      <div class="form-group">
        <label>Deal-namn</label>
        <input type="text" id="new-deal-name" placeholder="Projektnamn">
      </div>
      <div class="form-group">
        <label>Värde (SEK)</label>
        <input type="number" id="new-deal-value" placeholder="100000">
      </div>
      <div class="form-group">
        <label>Steg</label>
        <select id="new-deal-stage">
          <option value="prospect">Prospect</option>
          <option value="qualified">Qualified</option>
          <option value="proposal">Proposal</option>
          <option value="negotiation">Negotiation</option>
        </select>
      </div>
      <button class="btn-primary" onclick="createDeal()">Spara</button>
    `;
  }
}

function hideModal() {
  document.getElementById('modal').style.display = 'none';
}

async function createCustomer() {
  const name = document.getElementById('new-customer-name').value;
  const email = document.getElementById('new-customer-email').value;
  const phone = document.getElementById('new-customer-phone').value;
  const status = document.getElementById('new-customer-status').value;

  if (!name) {
    alert('Namn krävs');
    return;
  }

  try {
    await api('/api/v1/crm/customers', {
      method: 'POST',
      body: JSON.stringify({ name, email, phone, status })
    });

    hideModal();
    loadCRM();
  } catch (err) {
    alert('Kunde inte skapa kund: ' + err.message);
  }
}

async function createDeal() {
  const name = document.getElementById('new-deal-name').value;
  const value = parseFloat(document.getElementById('new-deal-value').value);
  const stage = document.getElementById('new-deal-stage').value;

  if (!name || !value) {
    alert('Namn och värde krävs');
    return;
  }

  try {
    await api('/api/v1/sales/deals', {
      method: 'POST',
      body: JSON.stringify({ name, value, stage, status: 'open' })
    });

    hideModal();
    loadSales();
  } catch (err) {
    alert('Kunde inte skapa deal: ' + err.message);
  }
}

// Helpers
function formatCurrency(value) {
  return new Intl.NumberFormat('sv-SE').format(value || 0) + ' SEK';
}

function formatDate(dateStr) {
  if (!dateStr) return '-';
  const date = new Date(dateStr);
  return date.toLocaleDateString('sv-SE');
}

function logout() {
  localStorage.removeItem('boc_token');
  window.location.href = '/login.html';
}

// Init
document.addEventListener('DOMContentLoaded', () => {
  if (!token && !window.location.pathname.includes('login')) {
    window.location.href = '/login.html';
    return;
  }

  loadDashboard();
});