// ─── Savuki Drilling — Dashboard Module ──────────────────────────────────
import { getDashboardStats } from '../api.js';
import { navigate } from '../app.js';

const PREVIEW_ROWS = 5;
const fmt = n => (+n || 0).toLocaleString('en-ZA', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

export async function initDashboard(role) {
  const container = document.getElementById('view-content');
  container.innerHTML = renderLoader();

  let stats;
  try {
    stats = await getDashboardStats();
  } catch (err) {
    container.innerHTML = renderError(err.message);
    return;
  }

  const renderers = {
    dev: renderDevAdmin,
    test: renderDevAdmin,
    admin: renderAdmin,
    dispatch: renderDispatchWorkshop,
    workshop: renderDispatchWorkshop,
    manager: renderManager,
    driver: renderDriverInstall,
    install: renderDriverInstall,
  };

  const fn = renderers[role] || renderDriverInstall;
  container.innerHTML = fn(stats, role);

  document.querySelectorAll('[data-refresh]').forEach(btn => {
    btn.addEventListener('click', () => initDashboard(role));
  });

  // Wire dashboard tabs (admin/dev only)
  initDashTabs();

  document.querySelectorAll('.card-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.closest('.card').classList.toggle('collapsed');
    });
  });

  document.querySelectorAll('.show-more-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const tbody = btn.closest('tbody');
      const hidden = tbody.querySelectorAll('tr.extra-row');
      const isExpanded = btn.dataset.expanded === 'true';
      hidden.forEach(r => r.style.display = isExpanded ? 'none' : '');
      btn.dataset.expanded = isExpanded ? 'false' : 'true';
      btn.textContent = isExpanded ? `Show all ${btn.dataset.total}` : 'Show less';
    });
  });

  // Wire View buttons on jobcard rows
  document.querySelectorAll('.dash-jc-view').forEach(btn => {
    btn.addEventListener('click', () => navigate('jobcard-view', { id: +btn.dataset.id }));
  });
}

// ── UI helpers ────────────────────────────────────────────────────────────

function dashTabNav(labels) {
  return `<div style="display:flex;gap:0;border-bottom:2px solid var(--border-light);margin-bottom:1rem;overflow-x:auto;flex-wrap:nowrap">
    ${labels.map((t, i) => `
      <button class="dash-tab-btn" data-tab="${i}"
        style="padding:.6rem 1.1rem;border:none;background:none;white-space:nowrap;cursor:pointer;
               font-size:.84rem;font-weight:600;border-bottom:2px solid ${i === 0 ? 'var(--primary)' : 'transparent'};
               color:${i === 0 ? 'var(--primary)' : 'var(--text-muted)'};margin-bottom:-2px">
        ${t}
      </button>`).join('')}
  </div>`;
}

function initDashTabs() {
  const btns = document.querySelectorAll('.dash-tab-btn');
  const panels = document.querySelectorAll('.dash-tab-panel');
  btns.forEach(btn => {
    btn.addEventListener('click', () => {
      const idx = +btn.dataset.tab;
      btns.forEach(b => {
        const on = +b.dataset.tab === idx;
        b.style.color = on ? 'var(--primary)' : 'var(--text-muted)';
        b.style.borderColor = on ? 'var(--primary)' : 'transparent';
      });
      panels.forEach(p => { p.style.display = +p.dataset.panel === idx ? '' : 'none'; });
    });
  });
}

function renderLoader() {
  return `<div class="page-loader"><div class="spinner"></div><span>Loading dashboard…</span></div>`;
}

function renderError(msg) {
  return `<div class="empty-state">${svgIcon('alert')}<p>${msg}</p></div>`;
}

function statusBadge(s) {
  const map = {
    PENDING: 'badge-pending', ACTIVE: 'badge-active', COMPLETE: 'badge-complete',
    DEPARTED: 'badge-orange', DEPARTURE: 'badge-orange',
    ARRIVED: 'badge-blue',
    DRILLING_START: 'badge-drilling', DRILLING_RESUME: 'badge-drilling',
    DRILLING_PAUSE: 'badge-orange', DRILLING_STOP: 'badge-active',
    RIEMING_START: 'badge-drilling', RIEMING_RESUMED: 'badge-drilling', RIEM_START: 'badge-drilling',
    RIEMING_PAUSED: 'badge-orange', RIEMING_STOP: 'badge-active', RIEM_STOP: 'badge-active',
    CASING_START: 'badge-drilling', CASING_RESUME: 'badge-drilling',
    CASING_PAUSE: 'badge-orange', CASING_STOP: 'badge-active',
    BLASTING_START: 'badge-drilling', BLASTING_RESUME: 'badge-drilling',
    BLASTING_PAUSE: 'badge-orange', BLASTING_STOP: 'badge-active',
    FINALISING: 'badge-orange',
  };
  const label = {
    DEPARTED: 'Departed', DEPARTURE: 'Departed', ARRIVED: 'On Site',
    DRILLING_START: 'Drilling', DRILLING_RESUME: 'Drilling', DRILLING_PAUSE: 'Drill Paused', DRILLING_STOP: 'Drill Stopped',
    RIEMING_START: 'Rieming', RIEMING_RESUMED: 'Rieming', RIEM_START: 'Rieming',
    RIEMING_PAUSED: 'Riem Paused', RIEMING_STOP: 'Riem Stopped', RIEM_STOP: 'Riem Stopped',
    CASING_START: 'Casing', CASING_RESUME: 'Casing', CASING_PAUSE: 'Casing Paused', CASING_STOP: 'Casing Stopped',
    BLASTING_START: 'Blasting', BLASTING_RESUME: 'Blasting', BLASTING_PAUSE: 'Blast Paused', BLASTING_STOP: 'Blast Stopped',
    FINALISING: 'Finalising',
  };
  const upper = (s || '').toUpperCase();
  return `<span class="badge ${map[upper] || 'badge-navy'}">${label[upper] || s || '—'}</span>`;
}

function svgIcon(name) {
  const paths = {
    jobcard: `<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>`,
    stock: `<path d="M20 7H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2z"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/>`,
    drill: `<path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/>`,
    meter: `<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>`,
    pump: `<path d="M3 3h6l3 9-3.5 2A11 11 0 0012 22h0a11 11 0 00-3.5-8L5 12 8 3H3z"/>`,
    invoice: `<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/>`,
    alert: `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12" y2="16"/>`,
    refresh: `<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>`,
    chevron: `<polyline points="6 9 12 15 18 9"/>`,
  };
  return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths[name] || ''}</svg>`;
}

function refreshBtn() {
  return `<button class="refresh-btn" data-refresh title="Refresh">${svgIcon('refresh')}</button>`;
}

function card(title, bodyHtml, { badge = '', extra = '', startCollapsed = true, noPad = false } = {}) {
  const collapsed = startCollapsed ? 'collapsed' : '';
  const pad = noPad ? 'padding:0' : '';
  return `
  <div class="card ${collapsed}">
    <div class="card-header">
      <span class="card-title">${title}</span>
      <div style="display:flex;align-items:center;gap:0.5rem;margin-left:auto">
        ${badge}${extra}
        <button class="card-toggle" title="Toggle">${svgIcon('chevron')}</button>
      </div>
    </div>
    <div class="card-collapsible">
      <div class="card-body" style="${pad}">${bodyHtml}</div>
    </div>
  </div>`;
}

function statCard(label, value, sub, color = 'orange', iconName = '') {
  return `<div class="stat-card ${color}">
    <div class="stat-label">${label}</div>
    <div class="stat-value">${value ?? '—'}</div>
    ${sub ? `<div class="stat-sub">${sub}</div>` : ''}
    ${iconName ? `<div class="stat-icon">${svgIcon(iconName)}</div>` : ''}
  </div>`;
}

// ── Table builders ────────────────────────────────────────────────────────

function buildRows(rows, mapFn, preview = PREVIEW_ROWS) {
  const total = rows.length;
  const html = rows.map((r, i) => {
    const tr = mapFn(r);
    return i >= preview ? tr.replace('<tr>', '<tr class="extra-row" style="display:none">') : tr;
  }).join('');

  const showMore = total > preview
    ? `<tr class="show-more-row"><td colspan="99" data-label="">
        <button class="show-more-btn" data-expanded="false" data-total="${total}">Show all ${total}</button>
       </td></tr>`
    : '';

  return html + showMore;
}

function jobcardsTable(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No active jobcards.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr><th>JC #</th><th>Client</th><th>Team</th><th>Status</th><th>Bit / Serial</th><th>Meters</th><th></th></tr></thead>
    <tbody>${buildRows(rows, j => `<tr>
      <td data-label="JC #"><strong>#${j.jc_no || j.record_id}</strong></td>
      <td data-label="Client">
        <div>${j.client_name || '—'}</div>
        <div style="font-size:.75rem;color:var(--text-muted)">${j.address || ''}</div>
      </td>
      <td data-label="Team"><span class="badge badge-navy">${j.team_name || '—'}</span></td>
      <td data-label="Status">${statusBadge(j.live_status || j.jc_current_status)}</td>
      <td data-label="Bit / Serial" style="font-size:.82rem;font-weight:600;color:var(--navy)">${j.current_serial || '—'}</td>
      <td data-label="Meters" style="font-weight:700;color:var(--orange)">${j.total_meters > 0 ? (+j.total_meters).toFixed(1) + 'm' : '—'}</td>
      <td data-label=""><button class="btn btn-primary btn-sm dash-jc-view" data-id="${j.record_id}" style="white-space:nowrap">View</button></td>
    </tr>`)}</tbody>
  </table></div>`;
}

function metersTable(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No meter records.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr><th>JC #</th><th>Client</th><th>Meters</th><th>Last Update</th></tr></thead>
    <tbody>${buildRows(rows, r => `<tr>
      <td data-label="JC #"><strong>#${r.jc_no}</strong></td>
      <td data-label="Client">${r.client_name || '—'}</td>
      <td data-label="Meters"><strong style="color:var(--accent)">${r.total_meters}m</strong></td>
      <td data-label="Last Update" style="color:var(--text-muted);font-size:0.8rem">${r.last_update || '—'}</td>
    </tr>`)}</tbody>
  </table></div>`;
}

function stockTable(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No items.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr><th>Category</th><th>Items</th><th>Total Qty</th></tr></thead>
    <tbody>${buildRows(rows, r => `<tr>
      <td data-label="Category">${r.type_name}</td>
      <td data-label="Items">${r.item_count}</td>
      <td data-label="Total Qty"><strong>${r.total_qty ?? 0}</strong></td>
    </tr>`)}</tbody>
  </table></div>`;
}

function lowStockTable(rows) {
  if (!rows?.length) return `<div class="empty-state" style="padding:1.5rem"><p>No low-stock alerts.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr><th>Item</th><th>Type</th><th>Qty</th></tr></thead>
    <tbody>${buildRows(rows, r => `<tr>
      <td data-label="Item">
        <strong>${r.item_name}</strong>
        <span style="display:block;font-size:0.75rem;color:var(--text-muted)">${r.stock_no}</span>
      </td>
      <td data-label="Type">${r.type_name}</td>
      <td data-label="Qty"><span class="badge ${r.quantity == 0 ? 'badge-drilling' : 'badge-pending'}">${r.quantity}</span></td>
    </tr>`)}</tbody>
  </table></div>`;
}

function assetsList(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No assets.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr><th>Asset</th><th>Type</th><th>ODO</th><th>Status</th></tr></thead>
    <tbody>${buildRows(rows, a => `<tr>
      <td data-label="Asset"><strong>${a.name}</strong></td>
      <td data-label="Type" style="color:var(--text-muted)">${a.type_name || '—'}</td>
      <td data-label="ODO">${a.odo ? a.odo.toLocaleString() + ' km' : '—'}</td>
      <td data-label="Status"><span class="badge ${a.status === 'ACTIVE' ? 'badge-active' : 'badge-complete'}">${a.status || '—'}</span></td>
    </tr>`)}</tbody>
  </table></div>`;
}

function activityList(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No recent activity.</p></div>`;
  return `<ul style="list-style:none;padding:0">
    ${rows.map(r => `<li style="display:flex;justify-content:space-between;align-items:center;
        padding:0.5rem 0;border-bottom:1px solid var(--border-light);font-size:0.82rem">
      <span><strong>${r.username || 'System'}</strong> → ${r.table_name || '?'}</span>
      <span style="color:var(--text-muted)">${r.date_time || ''}</span>
    </li>`).join('')}
  </ul>`;
}

function teamCards(rows, monthly) {
  if (!rows?.length) return `<div class="empty-state"><p>No teams found.</p></div>`;
  const mMap = {};
  (monthly || []).forEach(m => { mMap[m.team_id] = m; });

  // Sort: busiest first by active_total descending
  const sorted = [...rows].sort((a, b) => (+b.active_total || 0) - (+a.active_total || 0));

  return `<div class="team-grid">${sorted.map((t, i) => {
    const m = mMap[t.team_id] || {};
    const busy = +t.active_total || 0;
    const borderColor = busy > 0 ? 'var(--navy)' : 'var(--border)';
    const badge = i === 0 && busy > 0
      ? `<span class="badge badge-drilling" style="font-size:.65rem">🔥 Busiest</span>`
      : busy === 0
        ? `<span class="badge" style="background:var(--surface-2);color:var(--text-muted);font-size:.65rem">Idle</span>`
        : '';
    return `
    <div class="team-card" style="border-left:3px solid ${borderColor}">
      <div class="team-card-name" style="display:flex;justify-content:space-between;align-items:center">
        <span>${t.team_name}</span>${badge}
      </div>
      <div class="team-card-stats">
        <span class="team-card-stat badge-drilling">${t.drilling || 0} Drilling</span>
        <span class="team-card-stat badge-active">${t.active || 0} Active</span>
        <span class="team-card-stat badge-pending">${t.pending || 0} Pending</span>
      </div>
      ${monthly ? `
      <div style="margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-light);
                  display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem .5rem;font-size:.72rem;color:var(--text-muted)">
        <span>✅ JC Done: <b style="color:var(--text)">${m.jc_done || 0}</b></span>
        <span>⛏ Meters: <b style="color:var(--text)">${m.meters_drilled ? Number(m.meters_drilled).toFixed(0) + 'm' : '0m'}</b></span>
        <span>💧 Installs: <b style="color:var(--text)">${m.pump_installs || 0}</b></span>
        <span>🔧 Repairs: <b style="color:var(--text)">${m.pump_repairs || 0}</b></span>
      </div>` : ''}
    </div>`;
  }).join('')}
  </div>`;
}

function bitSerialsTable(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No serial numbers recorded yet.</p></div>`;
  return `<div class="table-wrap"><table>
    <thead><tr>
      <th>Serial / Bit</th><th>Type</th><th>Jobs</th><th>Total Meters</th><th>Last Used</th>
    </tr></thead>
    <tbody>${rows.map(r => `<tr>
      <td data-label="Serial"><strong style="color:var(--navy)">${r.serial_number}</strong></td>
      <td data-label="Type"><span class="badge ${r.bit_type === 'Rieming' ? 'badge-orange' : 'badge-drilling'}">${r.bit_type}</span></td>
      <td data-label="Jobs">${r.jobcard_count}</td>
      <td data-label="Meters" style="font-weight:700;color:var(--orange)">${(+r.total_meters || 0).toFixed(1)}m</td>
      <td data-label="Last Used" style="font-size:.78rem;color:var(--text-muted)">${(r.last_used || '').slice(0, 10) || '—'}</td>
    </tr>`).join('')}
    </tbody>
  </table></div>`;
}

// ── DEV / TEST Dashboard ──────────────────────────────────────────────────

function renderDevAdmin(stats) {
  const jc = stats.active_jobcards || [];
  const drill = jc.filter(j => j.jc_current_status === 'DRILLING').length;
  const pend = jc.filter(j => j.jc_current_status === 'PENDING').length;
  const inv = stats.invoice_summary || [];
  const unpaid = inv.find(i => i.status === 'UNPAID')?.count || 0;
  const low = stats.low_stock || [];

  return `
  <div class="page-header">
    <div><h1>Operations Dashboard</h1><div class="sub">Full overview — all modules</div></div>
    ${refreshBtn()}
  </div>
  <div class="stat-grid">
    ${statCard('Active Jobcards', jc.length, `${drill} drilling`, 'navy', 'jobcard')}
    ${statCard('Drilling', drill, 'in progress', 'blue', 'drill')}
    ${statCard('Meters This Month', stats.meters_this_month ?? '—', 'total drilled', 'orange', 'meter')}
    ${statCard('Booked Stock', stats.booked_stock ?? '—', 'orders out', 'navy', 'stock')}
    ${statCard('Pump Installs', stats.pump_summary?.installs ?? '—', 'active', 'green', 'pump')}
    ${statCard('Pump Repairs', stats.pump_summary?.repairs ?? '—', 'active', 'orange', 'pump')}
    ${statCard('Pending', pend, 'awaiting start', 'red')}
    ${statCard('Unpaid Invoices', unpaid, 'outstanding', 'red', 'invoice')}
  </div>
  ${dashTabNav(['Jobcards', 'Teams', 'Meters', 'Stock', 'Bits & Serials', 'Activity'])}

  <div class="dash-tab-panel" data-panel="0">
    <div class="card">
      <div class="card-header">
        <span class="card-title">Active Jobcards</span>
        <span class="badge badge-navy">${jc.length}</span>
      </div>
      <div class="card-body" style="padding:0">${jobcardsTable(jc)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="1" style="display:none">
    ${teamCards(stats.jobcards_by_team)}
  </div>

  <div class="dash-tab-panel" data-panel="2" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Recent Meters Drilled</span></div>
      <div class="card-body" style="padding:0">${metersTable(stats.recent_meters)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="3" style="display:none">
    <div class="section-grid">
      <div class="card">
        <div class="card-header">
          <span class="card-title">⚠ Low Stock Alerts</span>
          <span class="badge badge-pending">${low.length}</span>
        </div>
        <div class="card-body" style="padding:0">${lowStockTable(low)}</div>
      </div>
      <div class="card">
        <div class="card-header"><span class="card-title">Stock by Category</span></div>
        <div class="card-body" style="padding:0">${stockTable(stats.stock_summary)}</div>
      </div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="4" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">🔩 Bit / Serial Usage</span></div>
      <div class="card-body" style="padding:0">${bitSerialsTable(stats.bit_serials)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="5" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Recent System Activity</span></div>
      <div class="card-body">${activityList(stats.recent_activity)}</div>
    </div>
  </div>`;
}

// ── ADMIN Dashboard ───────────────────────────────────────────────────────

function renderAdmin(stats) {
  const jc = stats.active_jobcards || [];
  const drill = jc.filter(j => j.jc_current_status === 'DRILLING').length;
  const pd = stats.pump_detail || {};
  const jcm = stats.jc_month_compare || {};
  const ws = stats.water_strike_avg || {};
  const oi = stats.outstanding_inv || {};

  // Trend arrow helper
  const trend = (now, prev) => {
    if (!prev) return '';
    const up = now >= prev;
    const pct = prev > 0 ? Math.abs(Math.round((now - prev) / prev * 100)) : 0;
    return `<span style="font-size:.7rem;color:${up ? 'var(--success)' : 'var(--danger)'}">
      ${up ? '▲' : '▼'} ${pct}%</span>`;
  };

  return `
  <div class="page-header">
    <div><h1>Admin Dashboard</h1><div class="sub">Operations overview</div></div>
    ${refreshBtn()}
  </div>

  <!-- Top stat cards -->
  <div class="stat-grid">
    ${statCard('Active Jobcards', jc.length, `${drill} drilling`, 'navy', 'jobcard')}
    ${statCard('Meters This Month', stats.meters_this_month ?? '—', 'total drilled', 'orange', 'meter')}
    ${statCard('Active Installs', pd.active_installs ?? '—', 'in progress', 'green', 'pump')}
    ${statCard('Active Repairs', pd.active_repairs ?? '—', 'in progress', 'orange', 'pump')}
    ${statCard('Outstanding Invoices', oi.count ?? '—', oi.total ? 'R ' + fmt(oi.total) : 'none due', oi.count > 0 ? 'red' : 'green', 'invoice')}
  </div>

  <!-- Dashboard tabs -->
  ${dashTabNav(['Jobcards', 'Teams', 'Pump Jobs', 'Meters', 'Bits & Serials', 'Stats'])}

  <!-- 0: Active Jobcards -->
  <div class="dash-tab-panel" data-panel="0">
    <div class="card">
      <div class="card-header">
        <span class="card-title">Active Jobcards</span>
        <span class="badge badge-navy">${jc.length}</span>
      </div>
      <div class="card-body" style="padding:0">${jobcardsTable(jc)}</div>
    </div>
  </div>

  <!-- 1: Teams -->
  <div class="dash-tab-panel" data-panel="1" style="display:none">
    ${teamCards(stats.jobcards_by_team, stats.team_monthly)}
  </div>

  <!-- 2: Pump Jobs -->
  <div class="dash-tab-panel" data-panel="2" style="display:none">
    <div class="section-grid">
      <div class="card">
        <div class="card-header"><span class="card-title">💧 Pump Jobs This Month</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--success)">${pd.done_installs_this ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">Installs Completed</div>
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--orange)">${pd.done_repairs_this ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">Repairs Completed</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header"><span class="card-title">🔧 Active Pump Jobs</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--navy)">${pd.active_installs ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">Active Installs</div>
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--navy)">${pd.active_repairs ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">Active Repairs</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 3: Meters -->
  <div class="dash-tab-panel" data-panel="3" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Recent Meters Drilled</span></div>
      <div class="card-body" style="padding:0">${metersTable(stats.recent_meters)}</div>
    </div>
  </div>

  <!-- 4: Bits & Serials -->
  <div class="dash-tab-panel" data-panel="4" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">🔩 Bit / Serial Usage</span></div>
      <div class="card-body" style="padding:0">${bitSerialsTable(stats.bit_serials)}</div>
    </div>
  </div>

  <!-- 5: Stats -->
  <div class="dash-tab-panel" data-panel="5" style="display:none">
    <div class="section-grid">
      <div class="card">
        <div class="card-header"><span class="card-title">📋 Completed Jobcards</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--navy)">${jcm.this_month ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${jcm.this_label || 'This Month'}</div>
            ${jcm.this_month != null ? trend(jcm.this_month, jcm.last_month) : ''}
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--text-muted)">${jcm.last_month ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${jcm.last_label || 'Last Month'}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header"><span class="card-title">💧 Avg Water Strike Depth</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--navy)">${ws.this_month ? ws.this_month + 'm' : '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${ws.this_label || 'This Month'}</div>
            ${ws.this_month && ws.last_month ? trend(ws.this_month, ws.last_month) : ''}
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--text-muted)">${ws.last_month ? ws.last_month + 'm' : '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${ws.last_label || 'Last Month'}</div>
          </div>
        </div>
      </div>
    </div>
  </div>`;
}

function netMovementTable(rows) {
  if (!rows?.length) return `<div class="empty-state"><p>No data.</p></div>`;
  return `<table class="data-table">
    <thead><tr>
      <th>Category</th><th>Received</th><th>Consumed</th><th>Net</th>
    </tr></thead>
    <tbody>${rows.map(r => {
    const net = (r.received || 0) - (r.consumed || 0);
    const netColor = net > 0 ? 'var(--success)' : net < 0 ? 'var(--danger)' : 'var(--text-muted)';
    return `<tr>
        <td>${r.category}</td>
        <td style="color:var(--success)">${r.received || 0}</td>
        <td style="color:var(--danger)">${r.consumed || 0}</td>
        <td style="font-weight:700;color:${netColor}">${net > 0 ? '+' : ''}${net}</td>
      </tr>`;
  }).join('')}</tbody>
  </table>`;
}

function teamStockOutTable(teams) {
  if (!teams?.length) return `<div class="empty-state"><p>No stock currently out with teams.</p></div>`;
  return `<table class="data-table">
    <thead><tr><th>Team</th><th>Orders Out</th><th>Total Items</th><th>Items</th></tr></thead>
    <tbody>${teams.map(t => `<tr>
      <td><span class="badge badge-navy">${t.team_name}</span></td>
      <td>${t.order_count}</td>
      <td style="font-weight:700">${t.item_count}</td>
      <td style="font-size:.78rem;color:var(--text-muted);max-width:260px;white-space:normal">
        ${[...new Set(t.items)].slice(0, 8).join(', ')}${t.items.length > 8 ? '…' : ''}
      </td>
    </tr>`).join('')}</tbody>
  </table>`;
}

// ── DISPATCH / WORKSHOP Dashboard ─────────────────────────────────────────

function renderDispatchWorkshop(stats, role) {
  const low = stats.low_stock || [];
  const mv = stats.stock_movement || {};
  const bk = stats.booking_stats || {};
  const tso = stats.team_stock_out || [];

  const trendArrow = (now, prev) => {
    if (!prev && !now) return '';
    const up = now >= prev;
    const pct = prev > 0 ? Math.abs(Math.round((now - prev) / prev * 100)) : 0;
    return `<span style="font-size:.7rem;color:${up ? 'var(--success)' : 'var(--danger)'}">${up ? '▲' : '▼'} ${pct}%</span>`;
  };

  return `
  <div class="page-header">
    <div><h1>Stock Dashboard</h1><div class="sub">Stock control & inventory</div></div>
    ${refreshBtn()}
  </div>

  <!-- Top stats -->
  <div class="stat-grid">
    ${statCard('Booked Orders', stats.booked_stock ?? '—', 'currently out', 'navy', 'stock')}
    ${statCard('Booked Today', bk.today ?? '—', bk.items_today + ' items', 'orange')}
    ${statCard('Booked This Week', bk.week ?? '—', bk.items_week + ' items', 'blue')}
    ${statCard('Booked This Month', bk.month ?? '—', bk.items_month + ' items', 'navy')}
    ${statCard('Low Stock Alerts', low.length, 'need attention', low.length > 0 ? 'red' : 'green')}
  </div>

  <!-- Consumed vs Received comparison -->
  ${dashTabNav(['Stock Out', 'Low Stock', 'Net Movement', 'Stock by Category'])}

  <div class="dash-tab-panel" data-panel="0">
    <div class="section-grid">
      <div class="card">
        <div class="card-header"><span class="card-title">📉 Items Consumed</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--danger)">${mv.consumed_this ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${mv.this_label || 'This Month'}</div>
            ${trendArrow(mv.consumed_this, mv.consumed_last)}
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--text-muted)">${mv.consumed_last ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${mv.last_label || 'Last Month'}</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-header"><span class="card-title">📈 Items Received</span></div>
        <div class="card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
          <div style="text-align:center;padding:.5rem 0">
            <div style="font-size:2rem;font-weight:800;color:var(--success)">${mv.received_this ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${mv.this_label || 'This Month'}</div>
            ${trendArrow(mv.received_this, mv.received_last)}
          </div>
          <div style="text-align:center;padding:.5rem 0;border-left:1px solid var(--border-light)">
            <div style="font-size:2rem;font-weight:800;color:var(--text-muted)">${mv.received_last ?? '—'}</div>
            <div style="font-size:.78rem;color:var(--text-muted)">${mv.last_label || 'Last Month'}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="card" style="margin-top:1rem">
      <div class="card-header"><span class="card-title">📦 Stock Out by Team</span></div>
      <div class="card-body" style="padding:0">${teamStockOutTable(tso)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="1" style="display:none">
    <div class="card">
      <div class="card-header">
        <span class="card-title">⚠️ Low Stock Items</span>
        ${low.length > 0 ? `<span class="badge badge-pending">${low.length} alerts</span>` : ''}
      </div>
      <div class="card-body" style="padding:0">${lowStockTable(low)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="2" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Net Movement by Category</span></div>
      <div class="card-body" style="padding:0">${netMovementTable(mv.by_category)}</div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="3" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Stock by Category</span></div>
      <div class="card-body" style="padding:0">${stockTable(stats.stock_summary)}</div>
    </div>
  </div>`;
}

// ── MANAGER Dashboard ─────────────────────────────────────────────────────

function renderManager(stats) {
  return `
  <div class="page-header">
    <div><h1>Management Dashboard</h1><div class="sub">Reports & performance overview</div></div>
    ${refreshBtn()}
  </div>
  <div class="stat-grid">
    ${statCard('Meters This Month', stats.meters_this_month ?? '—', 'total drilled', 'orange', 'meter')}
  </div>
  ${dashTabNav(['Teams', 'Meters'])}

  <div class="dash-tab-panel" data-panel="0">
    ${teamCards(stats.jobcards_by_team, stats.team_monthly)}
  </div>

  <div class="dash-tab-panel" data-panel="1" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Recent Drilling Meters</span></div>
      <div class="card-body" style="padding:0">${metersTable(stats.recent_meters)}</div>
    </div>
  </div>`;
}

// ── DRIVER / INSTALL Dashboard ────────────────────────────────────────────

function renderDriverInstall(stats, role) {
  const jc = stats.my_jobcards || [];
  const perf = stats.team_perf || {};
  const stock = stats.my_stock_detail || [];
  const water = stats.water_results || [];
  const pump = stats.pump_this_month || {};
  const isInstall = role === 'install';

  const statusBadge = s => {
    const map = { DRILLING: 'badge-drilling', ACTIVE: 'badge-active', PENDING: 'badge-pending', COMPLETE: 'badge-complete' };
    return `<span class="badge ${map[s] || 'badge-navy'}">${s || '—'}</span>`;
  };

  return `
  <div class="page-header">
    <div><h1>My Dashboard</h1><div class="sub">Your team's overview — ${perf.this_label || ''}</div></div>
    ${refreshBtn()}
  </div>

  <!-- Performance stats -->
  <div class="stat-grid">
    ${statCard('Active Jobs', jc.length, 'assigned to team', 'navy', 'jobcard')}
    ${statCard('Completed This Month', perf.jc_done ?? '—', perf.this_label || '', 'green')}
    ${statCard('Meters This Month', perf.meters ? perf.meters + 'm' : '—', 'drilled', 'orange', 'meter')}
    ${statCard('Stock Out', stats.booked_stock ?? '—', 'orders out', 'navy', 'stock')}
    ${isInstall ? statCard('Pump Installs', pump.installs ?? '—', 'completed this month', 'green', 'pump') : ''}
    ${isInstall ? statCard('Pump Repairs', pump.repairs ?? '—', 'completed this month', 'orange', 'pump') : ''}
  </div>

  ${dashTabNav(['My Jobcards', 'My Stock', ...(isInstall && water.length ? ['Water Results'] : []), 'Meters'])}

  <div class="dash-tab-panel" data-panel="0">
    <div class="card">
      <div class="card-header">
        <span class="card-title">My Team's Jobcards</span>
        <span class="badge badge-navy">${jc.length}</span>
      </div>
      <div class="card-body" style="padding:0;overflow-x:auto">
        ${jc.length ? `<table class="data-table">
          <thead><tr><th>JC No</th><th>Client</th><th>Area</th><th>Status</th><th>Action Date</th></tr></thead>
          <tbody>${jc.map(j => `<tr>
            <td><strong>#${j.jc_no}</strong></td>
            <td>${j.client_name || '—'}</td>
            <td>${j.address || '—'}</td>
            <td>${statusBadge(j.jc_current_status)}</td>
            <td style="font-size:.8rem;color:var(--text-muted)">${j.action_date || '—'}</td>
          </tr>`).join('')}</tbody>
        </table>` : `<div class="empty-state" style="padding:1.5rem"><p>No active jobcards.</p></div>`}
      </div>
    </div>
  </div>

  <div class="dash-tab-panel" data-panel="1" style="display:none">
    <div class="card">
      <div class="card-header">
        <span class="card-title">📦 My Team's Stock</span>
        ${stock.length ? `<span class="badge badge-orange">${stock.length} items</span>` : ''}
      </div>
      <div class="card-body" style="padding:0;overflow-x:auto">
        ${stock.length ? `<table class="data-table">
          <thead><tr><th>Item</th><th>Qty</th><th>Order</th><th>Date Booked</th></tr></thead>
          <tbody>${stock.map(s => `<tr>
            <td>${s.item_name}</td>
            <td style="font-weight:700">${s.amount}</td>
            <td style="font-size:.8rem;color:var(--text-muted)">${s.order_no}</td>
            <td style="font-size:.8rem;color:var(--text-muted)">${s.booking_date || '—'}</td>
          </tr>`).join('')}</tbody>
        </table>` : `<div class="empty-state" style="padding:1.5rem"><p>No stock currently booked out.</p></div>`}
      </div>
    </div>
  </div>

  ${isInstall && water.length ? `
  <div class="dash-tab-panel" data-panel="2" style="display:none">
    <div class="card">
      <div class="card-header">
        <span class="card-title">💧 Recent Water Results</span>
        ${stats.avg_water_strike ? `<span class="badge badge-navy">Avg ${stats.avg_water_strike}m this month</span>` : ''}
      </div>
      <div class="card-body" style="padding:0;overflow-x:auto">
        <table class="data-table">
          <thead><tr><th>JC No</th><th>Client</th><th>Area</th><th>Water Strike</th><th>Flow Rate</th></tr></thead>
          <tbody>${water.map(w => `<tr>
            <td><strong>#${w.jc_no}</strong></td>
            <td>${w.client_name || '—'}</td>
            <td>${w.address || '—'}</td>
            <td style="font-weight:700;color:var(--navy)">${w.water_strike ? w.water_strike + 'm' : '—'}</td>
            <td>${w.water_flow ? w.water_flow + ' ℓ/h' : '—'}</td>
          </tr>`).join('')}</tbody>
        </table>
      </div>
    </div>
  </div>` : ''}

  <div class="dash-tab-panel" data-panel="${isInstall && water.length ? 3 : 2}" style="display:none">
    <div class="card">
      <div class="card-header"><span class="card-title">Meters Drilled</span></div>
      <div class="card-body" style="padding:0">${metersTable(stats.recent_meters)}</div>
    </div>
  </div>`;
}