// ─── Dashboard Module ───────────────────────────────────────────────

const Dashboard = {
  async render(app) {
    const [res, newsRes] = await Promise.all([
      app.api('dashboard/stats'),
      app.api('news&perpage=5')
    ]);
    const s = res.success && res.data ? res.data : { orders: 0, active_orders: 0, pending_orders: 0, unpaid_invoices: 0, open_tickets: 0, active_domains: 0, paid_invoices: 0 };
    const news = newsRes.success && newsRes.data ? newsRes.data.items || [] : [];

    app.$content.innerHTML = `
      <div class="page-header">
        <h1>Dashboard</h1>
      </div>
      <div class="stats">
        <div class="stat">
          <div class="stat-label">Total Orders</div>
          <div class="stat-value">${s.orders || 0}</div>
          <div class="stat-change stat-up">Active: ${s.active_orders || 0}</div>
        </div>
        <div class="stat">
          <div class="stat-label">Active Services</div>
          <div class="stat-value">${s.active_orders || 0}</div>
          <div class="stat-change stat-down">Pending: ${s.pending_orders || 0}</div>
        </div>
        <div class="stat">
          <div class="stat-label">Invoices</div>
          <div class="stat-value">${s.paid_invoices || 0}</div>
          <div class="stat-change stat-up">Unpaid: ${s.unpaid_invoices || 0}</div>
        </div>
        <div class="stat">
          <div class="stat-label">Active Domains</div>
          <div class="stat-value">${s.active_domains || 0}</div>
        </div>
        <div class="stat">
          <div class="stat-label">Open Tickets</div>
          <div class="stat-value">${s.open_tickets || 0}</div>
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <div class="card">
            <div class="card-header"><h3>Quick Actions</h3></div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:.5rem">
              <a href="#services" data-nav="services" class="btn btn-primary btn-block">View Services</a>
              <a href="#billing" data-nav="billing" class="btn btn-secondary btn-block">View Invoices</a>
              <a href="#new-ticket" data-nav="new-ticket" class="btn btn-secondary btn-block">Open Support Ticket</a>
              <a href="#profile" data-nav="profile" class="btn btn-secondary btn-block">Update Profile</a>
            </div>
          </div>
        </div>
        <div class="col-6">
          <div class="card">
            <div class="card-header"><h3>Account Info</h3></div>
            <div class="card-body">
              <p><strong>Name:</strong> ${app.escape(app.state.user?.fname || '')} ${app.escape(app.state.user?.lname || '')}</p>
              <p><strong>Email:</strong> ${app.escape(app.state.user?.email || '')}</p>
              <p><strong>Phone:</strong> ${app.escape(app.state.user?.phone || 'N/A')}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="card card-flat mt-4">
        <div class="card-header"><h3>Recent News</h3></div>
        <div class="card-body">
          ${news.length ? news.map(n => `
            <div style="padding:.75rem 0;border-bottom:1px solid var(--gray-100)">
              <strong>${app.escape(n.title)}</strong>
              <small style="color:var(--gray-500);margin-left:.5rem">${n.date ? n.date.slice(0,10) : ''}</small>
              <p style="margin:.25rem 0 0;color:var(--gray-500)">${app.escape(n.body)}</p>
            </div>
          `).join('') : '<p style="color:var(--gray-500)">No news yet.</p>'}
        </div>
      </div>
    `;
  }
};