// ============================================================
// Fleet Module
// ============================================================

let fleetState = { vehicleId: null, tab: 'overview' };

async function renderFleet(params = {}) {
  // All roles can use fuel slip; techs see simplified fleet page
  if (!Auth.can('fleet','view')) {
    return renderTechFleetPage();
  }

  const content = document.getElementById('page-content');
  content.innerHTML = `
    <div class="section-header">
      <div><h2>Fleet Management</h2><p class="text-muted text-sm">Vehicles, costs, service schedules and documents</p></div>
      <div class="d-flex gap-2">
        ${Auth.can('fleet','create') ? `<button class="btn btn-outline" onclick="openFuelSlipModal()">⛽ Fuel Slip</button>` : ''}
        ${Auth.can('fleet','create') ? `<button class="btn btn-primary" onclick="openAddVehicleModal()">+ Add Vehicle</button>` : ''}
      </div>
    </div>
    <div id="fleet-body"><div class="loading-overlay"><div class="spinner"></div></div></div>`;

  loadFleetList();
}

function renderTechFleetPage() {
  const content = document.getElementById('page-content');
  content.innerHTML = `
    <div class="section-header">
      <div><h2>Fleet</h2><p class="text-muted text-sm">Log fuel and expenses for company vehicles</p></div>
    </div>
    <div style="max-width:420px;margin:3rem auto;text-align:center">
      <div style="font-size:4rem;margin-bottom:1rem">⛽</div>
      <h4 class="mb-2">Fuel Slip Capture</h4>
      <p class="text-muted text-sm mb-4">Capture your fuel slip with odometer reading and a photo of the slip</p>
      <button class="btn btn-primary btn-lg w-full" onclick="openFuelSlipModal()">⛽ Capture Fuel Slip</button>
    </div>`;
}

async function loadFleetList() {
  const wrap = document.getElementById('fleet-body');
  const res = await API.post('fleet/vehicles', { action:'list' });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger p-3">Failed to load vehicles.</p>'; return; }
  const vehicles = res.data.vehicles || [];

  if (!vehicles.length) {
    wrap.innerHTML = `<div class="empty-state"><div class="empty-icon">🚗</div><div class="empty-title">No vehicles</div><div class="empty-sub">Add your first vehicle to get started</div>${Auth.can('fleet','create') ? `<button class="btn btn-primary mt-3" onclick="openAddVehicleModal()">+ Add Vehicle</button>` : ''}</div>`;
    return;
  }

  // Service warnings
  const warnings = vehicles.filter(v => v.service_due?.length > 0);
  const warningHtml = warnings.length ? `
    <div class="alert alert-warning mb-4">
      ⚠️ <strong>${warnings.length} vehicle(s) due for service:</strong>
      ${warnings.map(v => `${v.make} ${v.model} (${v.registration}) — ${v.service_due.map(s=>s.service_type).join(', ')}`).join('; ')}
    </div>` : '';

  wrap.innerHTML = warningHtml + `
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem">
      ${vehicles.map(v => {
        const dueCount = v.service_due?.length || 0;
        return `
        <div class="card cursor-pointer hover-card" onclick="openVehicleDetail(${v.id})">
          <div class="card-body">
            <div class="d-flex justify-between align-center mb-2">
              <div class="font-bold text-primary">${v.registration}</div>
              <span class="badge ${v.status==='active'?'badge-success':v.status==='maintenance'?'badge-warning':'badge-secondary'}">${v.status}</span>
            </div>
            <div class="font-medium mb-1">${v.make} ${v.model} ${v.year||''}</div>
            <div class="text-sm text-muted mb-2">${v.vehicle_type} · ${v.fuel_type} · ${v.color||''}</div>
            <div class="d-flex justify-between text-sm">
              <span class="text-muted">ODO</span>
              <span class="font-medium">${parseInt(v.current_odo||0).toLocaleString()} km</span>
            </div>
            ${Auth.can('fleet','reports') && v.cost_per_km ? `<div class="d-flex justify-between text-sm"><span class="text-muted">Cost/km</span><span>R ${parseFloat(v.cost_per_km).toFixed(2)}</span></div>` : ''}
            ${Auth.can('fleet','reports') && v.quote_rate_per_km ? `<div class="d-flex justify-between text-sm"><span class="text-muted">Quote/km</span><span class="text-primary">R ${parseFloat(v.quote_rate_per_km).toFixed(2)}</span></div>` : ''}
            ${dueCount ? `<div class="mt-2 badge badge-danger">⚠ ${dueCount} service(s) due</div>` : ''}
          </div>
        </div>`;
      }).join('')}
    </div>

    ${Auth.can('fleet','reports') ? `<div class="section-header mt-5">
      <h4>Monthly Cost Summary</h4>
      <div class="d-flex gap-2">
        <select id="fleet-month-sel" class="form-control" style="width:auto" onchange="loadFleetMonthlySummary()">
          ${Array.from({length:6}, (_,i) => {
            const d = new Date(); d.setMonth(d.getMonth()-i);
            return `<option value="${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}">${d.toLocaleDateString('en-ZA',{month:'long',year:'numeric'})}</option>`;
          }).join('')}
        </select>
      </div>
    </div>
    <div id="fleet-monthly-wrap"><div class="loading-overlay"><div class="spinner"></div></div></div>` : ''}`;

  if (Auth.can('fleet','reports')) loadFleetMonthlySummary();
}

async function loadFleetMonthlySummary() {
  const wrap = document.getElementById('fleet-monthly-wrap');
  if (!wrap) return;
  const [year, month] = (document.getElementById('fleet-month-sel')?.value || `${new Date().getFullYear()}-${new Date().getMonth()+1}`).split('-');
  wrap.innerHTML = '<div class="loading-overlay"><div class="spinner"></div></div>';
  const res = await API.post('fleet/vehicles', { action:'monthly_summary', year, month });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger">Failed.</p>'; return; }
  const rows = res.data.summary || [];
  if (!rows.length) { wrap.innerHTML = '<div class="empty-state" style="padding:1.5rem"><div class="empty-title">No costs recorded this month</div></div>'; return; }

  // Group by vehicle
  const byVehicle = {};
  rows.forEach(r => {
    const key = `${r.registration} — ${r.make} ${r.model}`;
    if (!byVehicle[key]) byVehicle[key] = { total:0, types:{} };
    byVehicle[key].types[r.cost_type] = parseFloat(r.total);
    byVehicle[key].total += parseFloat(r.total);
  });
  const allTypes = [...new Set(rows.map(r=>r.cost_type))];

  wrap.innerHTML = `
    <div class="table-wrap">
    <table class="table">
      <thead><tr><th>Vehicle</th>${allTypes.map(t=>`<th>${t}</th>`).join('')}<th>Total</th></tr></thead>
      <tbody>${Object.entries(byVehicle).map(([veh, data]) => `
        <tr>
          <td class="font-medium">${veh}</td>
          ${allTypes.map(t => `<td>R ${(data.types[t]||0).toFixed(2)}</td>`).join('')}
          <td class="font-bold">R ${data.total.toFixed(2)}</td>
        </tr>`).join('')}
      </tbody>
    </table>
    </div>`;
}

async function openVehicleDetail(id) {
  fleetState.vehicleId = id;
  const content = document.getElementById('page-content');
  content.innerHTML = '<div class="loading-overlay"><div class="spinner"></div></div>';
  const res = await API.post('fleet/vehicles', { action:'get', id });
  if (!res.success) { content.innerHTML = '<p class="text-danger p-3">Not found.</p>'; return; }
  const v = res.data.vehicle;

  content.innerHTML = `
    <div class="section-header">
      <div class="d-flex align-center gap-3">
        <button class="btn btn-ghost btn-sm" onclick="renderFleet()">← Back</button>
        <div><h3>${v.make} ${v.model} — ${v.registration}</h3>
          <div class="text-sm text-muted">${v.vehicle_type} · ${v.fuel_type} · ODO: ${parseInt(v.current_odo).toLocaleString()} km</div>
        </div>
      </div>
      <div class="d-flex gap-2">
        <span class="badge ${v.status==='active'?'badge-success':v.status==='maintenance'?'badge-warning':'badge-secondary'}">${v.status}</span>
        ${Auth.can('fleet','edit') ? `<button class="btn btn-outline btn-sm" onclick="openEditVehicleModal(${v.id})">✏️ Edit</button>` : ''}
      </div>
    </div>

    <div class="card">
      <div class="tabs-nav" id="vh-tabs">
        <button class="tab-btn active" data-tab="overview" onclick="switchTab('vh-tabs','vh-tab',this)">Overview</button>
        ${Auth.can('fleet','reports') ? `<button class="tab-btn" data-tab="costs" onclick="switchTab('vh-tabs','vh-tab',this);loadVehicleCosts(${v.id})">Costs <span class="tab-count">${v.costs?.length||0}</span></button>` : ''}
        ${Auth.can('fleet','reports') ? `<button class="tab-btn" data-tab="service" onclick="switchTab('vh-tabs','vh-tab',this);loadVehicleService(${v.id})">Service Schedule</button>` : ''}
        ${Auth.can('fleet','reports') ? `<button class="tab-btn" data-tab="travel" onclick="switchTab('vh-tabs','vh-tab',this);loadTravelLog(${v.id})">🗺️ Travel Log</button>` : ''}
        ${Auth.can('fleet','reports') ? `<button class="tab-btn" data-tab="documents" onclick="switchTab('vh-tabs','vh-tab',this);loadVehicleDocs(${v.id})">Documents <span class="tab-count">${v.documents?.length||0}</span></button>` : ''}
      </div>

      <!-- OVERVIEW -->
      <div class="card-body tab-pane active" id="vh-tab-overview">
        <div class="form-row form-row-3">
          <div><label class="form-label">Registration</label><p class="font-bold text-primary">${v.registration}</p></div>
          <div><label class="form-label">Make / Model</label><p>${v.make} ${v.model}</p></div>
          <div><label class="form-label">Year</label><p>${v.year||'—'}</p></div>
          <div><label class="form-label">VIN</label><p class="code">${v.vin||'—'}</p></div>
          <div><label class="form-label">Engine No</label><p class="code">${v.engine_no||'—'}</p></div>
          <div><label class="form-label">Color</label><p>${v.color||'—'}</p></div>
          <div><label class="form-label">Current ODO</label><p class="font-bold">${parseInt(v.current_odo).toLocaleString()} km</p></div>
          <div><label class="form-label">Cost per km</label><p>R ${parseFloat(v.cost_per_km||0).toFixed(2)}</p></div>
          <div><label class="form-label">Quote rate/km</label><p class="text-primary">R ${parseFloat(v.quote_rate_per_km||0).toFixed(2)}</p></div>
        </div>
        ${v.notes ? `<div class="mt-3"><label class="form-label">Notes</label><p>${v.notes}</p></div>` : ''}
      </div>

      <!-- COSTS -->
      <div class="card-body tab-pane" id="vh-tab-costs">
        <div class="d-flex justify-between align-center mb-3">
          <h5>Cost Log</h5>
          ${Auth.can('fleet','create') ? `<button class="btn btn-primary btn-sm" onclick="openAddCostModal(${v.id})">+ Add Cost</button>` : ''}
        </div>
        <div id="vh-costs-list"><div class="loading-overlay"><div class="spinner"></div></div></div>
      </div>

      <!-- SERVICE -->
      <div class="card-body tab-pane" id="vh-tab-service">
        <div class="d-flex justify-between align-center mb-3">
          <h5>Service Schedule</h5>
          ${Auth.can('fleet','create') ? `<button class="btn btn-primary btn-sm" onclick="openAddServiceModal(${v.id})">+ Add Schedule</button>` : ''}
        </div>
        <div id="vh-service-list"><div class="loading-overlay"><div class="spinner"></div></div></div>
        <div class="divider" style="margin:1.5rem 0"></div>
        <div class="d-flex justify-between align-center mb-3">
          <h5>Service History</h5>
        </div>
        <div id="vh-service-history"><div class="loading-overlay" style="min-height:60px"><div class="spinner"></div></div></div>
      </div>

      <!-- TRAVEL LOG -->
      <div class="card-body tab-pane" id="vh-tab-travel">
        <div class="d-flex justify-between align-center mb-3">
          <h5>🗺️ Travel Log & ODO History</h5>
          ${Auth.can('fleet','create') ? `<button class="btn btn-primary btn-sm" onclick="openAddOdoModal(${v.id})">+ Log ODO Reading</button>` : ''}
        </div>
        <div id="vh-travel-metrics"></div>
        <div id="vh-travel-wrap"><div class="loading-overlay"><div class="spinner"></div></div></div>
      </div>

      <!-- DOCUMENTS -->
      <div class="card-body tab-pane" id="vh-tab-documents">
        <div class="d-flex justify-between align-center mb-3">
          <h5>Vehicle Documents</h5>
          ${Auth.can('fleet','create') ? `<button class="btn btn-primary btn-sm" onclick="openAddDocModal(${v.id})">+ Upload Document</button>` : ''}
        </div>
        <div id="vh-docs-list"><div class="loading-overlay"><div class="spinner"></div></div></div>
      </div>
    </div>`;
}

async function loadVehicleCosts(vehicleId) {
  const wrap = document.getElementById('vh-costs-list');
  if (!wrap) return;
  const res = await API.post('fleet/costs', { action:'list', vehicle_id:vehicleId });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger">Failed.</p>'; return; }
  const costs = res.data.costs || [];
  if (!costs.length) { wrap.innerHTML = '<div class="empty-state" style="padding:1.5rem"><div class="empty-title">No costs recorded</div></div>'; return; }
  const total = costs.reduce((s,c) => s + parseFloat(c.amount||0), 0);
  wrap.innerHTML = `
    <table class="table"><thead><tr><th>Date</th><th>Type</th><th>Description</th><th>ODO</th><th>Amount</th><th>Slip</th><th>By</th><th></th></tr></thead>
    <tbody>${costs.map(c => `
      <tr>
        <td>${Fmt.date(c.cost_date)}</td>
        <td><span class="badge badge-info">${c.cost_type}</span></td>
        <td>${c.description||'—'} ${c.litres?`<span class="text-xs text-muted">(${c.litres}L)</span>`:''}</td>
        <td class="text-sm">${c.odo_reading ? parseInt(c.odo_reading).toLocaleString()+' km' : '—'}</td>
        <td class="font-medium">R ${parseFloat(c.amount).toFixed(2)}</td>
        <td>${c.slip_image_path ? `<a href="${c.slip_image_path}" target="_blank" class="btn btn-ghost btn-sm">🖼</a>` : '—'}</td>
        <td class="text-xs text-muted">${c.created_by_name||'—'}</td>
        <td>${Auth.can('fleet','delete') ? `<button class="btn btn-ghost btn-sm text-danger" onclick="deleteFleetCost(${c.id},${vehicleId})">✕</button>` : ''}</td>
      </tr>`).join('')}
    </tbody>
    <tfoot><tr><td colspan="4" class="font-medium text-right">Total</td><td class="font-bold">R ${total.toFixed(2)}</td><td colspan="3"></td></tr></tfoot>
    </table>`;
}

async function loadVehicleService(vehicleId) {
  const wrap = document.getElementById('vh-service-list');
  if (!wrap) return;
  const res = await API.post('fleet/service', { action:'list', vehicle_id:vehicleId });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger">Failed.</p>'; return; }
  const schedules = res.data.schedules || [];
  if (!schedules.length) {
    wrap.innerHTML = '<div class="empty-state" style="padding:1.5rem"><div class="empty-title">No service schedules</div><div class="empty-sub">Add service schedules to track maintenance intervals</div></div>';
  } else {
    wrap.innerHTML = schedules.map(s => {
      const kmRemaining = parseInt(s.km_remaining||0);
      const isDue = kmRemaining <= 0;
      const isWarn = kmRemaining <= parseInt(s.warn_at_km_before||500);
      return `
      <div class="card mb-3 ${isDue?'border-danger':isWarn?'border-warning':''}">
        <div class="card-body">
          <div class="d-flex justify-between align-center flex-wrap gap-2">
            <div>
              <div class="font-medium">${s.service_type}</div>
              <div class="text-sm text-muted">Every ${parseInt(s.service_interval_km).toLocaleString()} km · Last at ${parseInt(s.last_service_odo).toLocaleString()} km ${s.last_service_date ? `(${Fmt.date(s.last_service_date)})` : ''}</div>
            </div>
            <div class="text-right">
              ${isDue
                ? `<span class="badge badge-danger">⚠ SERVICE DUE NOW</span>`
                : isWarn
                ? `<span class="badge badge-warning">Due in ${kmRemaining.toLocaleString()} km</span>`
                : `<span class="badge badge-success">${kmRemaining.toLocaleString()} km remaining</span>`}
            </div>
          </div>
          <div class="d-flex gap-2 mt-3">
            <button class="btn btn-primary btn-sm" onclick="openCompleteServiceModal(${s.id},${vehicleId},'${s.service_type.replace(/'/g,"\'")}')">✅ Record Service Done</button>
            ${Auth.can('fleet','delete') ? `<button class="btn btn-ghost btn-sm text-danger" onclick="deleteServiceSchedule(${s.id},${vehicleId})">Delete</button>` : ''}
          </div>
        </div>
      </div>`;
    }).join('');
  }
  loadServiceHistory(vehicleId);
}

async function loadServiceHistory(vehicleId) {
  const wrap = document.getElementById('vh-service-history');
  if (!wrap) return;
  const res = await API.post('fleet/service', { action:'history', vehicle_id:vehicleId });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger text-sm">Failed to load history.</p>'; return; }
  const history = res.data.history || [];
  if (!history.length) {
    wrap.innerHTML = '<div class="text-muted text-sm" style="padding:.75rem 0">No service history recorded yet.</div>';
    return;
  }
  wrap.innerHTML = `<div class="table-wrap" style="border-radius:var(--radius-sm)"><table>
    <thead><tr>
      <th>Date</th><th>Service Type</th><th>ODO</th><th>Cost</th><th>Slip</th><th>Notes</th><th>Recorded By</th>
    </tr></thead>
    <tbody>${history.map(h => `
      <tr>
        <td style="white-space:nowrap">${Fmt.date(h.service_date)}</td>
        <td class="font-medium">${h.service_type}</td>
        <td>${parseInt(h.odo_reading).toLocaleString()} km</td>
        <td>${h.cost_amount ? 'R '+parseFloat(h.cost_amount).toFixed(2) : '—'}</td>
        <td>${h.slip_image_path ? `<a href="${h.slip_image_path}" target="_blank" class="btn btn-ghost btn-sm">📄 View</a>` : '<span class="text-muted text-xs">No slip</span>'}</td>
        <td class="text-sm text-muted">${h.notes||'—'}</td>
        <td class="text-sm">${h.recorded_by_name}</td>
      </tr>`).join('')}
    </tbody>
  </table></div>`;
}

async function loadVehicleDocs(vehicleId) {
  const wrap = document.getElementById('vh-docs-list');
  if (!wrap) return;
  const res = await API.post('fleet/documents', { action:'list', vehicle_id:vehicleId });
  if (!res.success) { wrap.innerHTML = '<p class="text-danger">Failed.</p>'; return; }
  const docs = res.data.documents || [];
  if (!docs.length) { wrap.innerHTML = '<div class="empty-state" style="padding:1.5rem"><div class="empty-title">No documents</div></div>'; return; }
  const today = new Date();
  wrap.innerHTML = `<div class="grid grid-3 gap-3">${docs.map(d => {
    const expiry = d.expiry_date ? new Date(d.expiry_date) : null;
    const daysLeft = expiry ? Math.floor((expiry-today)/(1000*60*60*24)) : null;
    const expired = daysLeft !== null && daysLeft < 0;
    const expiringSoon = daysLeft !== null && daysLeft >= 0 && daysLeft <= 30;
    return `
    <div class="card ${expired?'border-danger':expiringSoon?'border-warning':''}">
      <div class="card-body">
        <div class="d-flex justify-between mb-1">
          <span class="badge badge-info">${d.doc_type}</span>
          ${expired ? '<span class="badge badge-danger">EXPIRED</span>' : expiringSoon ? `<span class="badge badge-warning">Exp in ${daysLeft}d</span>` : ''}
        </div>
        <div class="font-medium">${d.label}</div>
        ${d.expiry_date ? `<div class="text-xs text-muted">Expires: ${Fmt.date(d.expiry_date)}</div>` : ''}
        ${d.notes ? `<div class="text-xs text-muted mt-1">${d.notes}</div>` : ''}
        <div class="d-flex gap-2 mt-2">
          ${d.file_path ? `<a href="${d.file_path}" target="_blank" class="btn btn-ghost btn-sm">📄 View</a>` : ''}
          <button class="btn btn-ghost btn-sm text-danger" onclick="deleteFleetDoc(${d.id},${vehicleId})">✕</button>
        </div>
      </div>
    </div>`;
  }).join('')}</div>`;
}

// ── Vehicle Modals ──────────────────────────────────────────
function openAddVehicleModal(v = {}) {
  const isEdit = !!v.id;
  Modal.open({
    id: isEdit ? 'edit-vehicle' : 'add-vehicle',
    title: isEdit ? `Edit — ${v.registration}` : 'Add Vehicle',
    size: 'modal-lg',
    body: `
      <form id="vehicle-form">
        ${isEdit ? `<input type="hidden" name="id" value="${v.id}">` : ''}
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Registration <span class="required">*</span></label>
            <input name="registration" class="form-control" value="${v.registration||''}" required placeholder="e.g. ABC 123 GP">
          </div>
          <div class="form-group"><label class="form-label">Status</label>
            <select name="status" class="form-control">
              ${['active','maintenance','decommissioned'].map(s=>`<option value="${s}" ${(v.status||'active')===s?'selected':''}>${s}</option>`).join('')}
            </select>
          </div>
          <div class="form-group"><label class="form-label">Make <span class="required">*</span></label>
            <input name="make" class="form-control" value="${v.make||''}" required placeholder="e.g. Toyota">
          </div>
          <div class="form-group"><label class="form-label">Model <span class="required">*</span></label>
            <input name="model" class="form-control" value="${v.model||''}" required placeholder="e.g. Hilux">
          </div>
          <div class="form-group"><label class="form-label">Year</label>
            <input type="number" name="year" class="form-control" value="${v.year||''}" placeholder="e.g. 2022">
          </div>
          <div class="form-group"><label class="form-label">Color</label>
            <input name="color" class="form-control" value="${v.color||''}" placeholder="e.g. White">
          </div>
          <div class="form-group"><label class="form-label">Type</label>
            <select name="vehicle_type" class="form-control">
              ${['bakkie','sedan','suv','van','truck','motorbike','other'].map(t=>`<option value="${t}" ${(v.vehicle_type||'bakkie')===t?'selected':''}>${t}</option>`).join('')}
            </select>
          </div>
          <div class="form-group"><label class="form-label">Fuel Type</label>
            <select name="fuel_type" class="form-control">
              ${['diesel','petrol','electric','hybrid'].map(t=>`<option value="${t}" ${(v.fuel_type||'diesel')===t?'selected':''}>${t}</option>`).join('')}
            </select>
          </div>
          <div class="form-group"><label class="form-label">Current ODO (km)</label>
            <input type="number" name="current_odo" class="form-control" value="${v.current_odo||0}">
          </div>
          <div class="form-group"><label class="form-label">VIN</label>
            <input name="vin" class="form-control" value="${v.vin||''}" placeholder="Chassis number">
          </div>
          <div class="form-group"><label class="form-label">Cost per km (actual)</label>
            <input type="number" step="0.01" name="cost_per_km" class="form-control" value="${v.cost_per_km||''}" placeholder="R per km">
          </div>
          <div class="form-group"><label class="form-label">Quote rate per km (to client)</label>
            <input type="number" step="0.01" name="quote_rate_per_km" class="form-control" value="${v.quote_rate_per_km||''}" placeholder="R per km">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="2">${v.notes||''}</textarea>
        </div>
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitVehicle()"><span class="btn-text">${isEdit?'Save':'Add Vehicle'}</span></button>`
  });
}

async function openEditVehicleModal(id) {
  const res = await API.post('fleet/vehicles', { action:'get', id });
  if (res.success) openAddVehicleModal(res.data.vehicle);
}

async function submitVehicle() {
  const btn = document.querySelector('[id^="modal-"] .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('vehicle-form');
  const res = await API.post('fleet/vehicles', { action:'save', ...data });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show(data.id ? 'Vehicle updated' : 'Vehicle added', 'success');
    Modal.close();
    if (data.id) openVehicleDetail(data.id);
    else loadFleetList();
  } else Toast.show(res.message,'error');
}

function openAddCostModal(vehicleId) {
  Modal.open({
    id: 'add-cost',
    title: 'Add Cost Entry',
    body: `
      <form id="cost-form">
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Cost Type</label>
            <select name="cost_type" class="form-control">
              ${['fuel','service','tyre','insurance','licence','repair','toll','other'].map(t=>`<option value="${t}">${t}</option>`).join('')}
            </select>
          </div>
          <div class="form-group"><label class="form-label">Date</label>
            <input type="date" name="cost_date" class="form-control" value="${new Date().toISOString().slice(0,10)}">
          </div>
          <div class="form-group"><label class="form-label">Amount (R) <span class="required">*</span></label>
            <input type="number" step="0.01" name="amount" class="form-control" required>
          </div>
          <div class="form-group"><label class="form-label">ODO Reading</label>
            <input type="number" name="odo_reading" class="form-control" placeholder="km at time of cost">
          </div>
          <div class="form-group"><label class="form-label">Litres (fuel)</label>
            <input type="number" step="0.01" name="litres" class="form-control">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Description</label>
          <input name="description" class="form-control" placeholder="Details...">
        </div>
        <div class="form-group"><label class="form-label">Slip Image</label>
          <input type="file" id="cost-img" accept="image/*" class="form-control">
        </div>
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitFleetCost(${vehicleId})"><span class="btn-text">Save</span></button>`
  });
}

async function submitFleetCost(vehicleId) {
  const btn = document.querySelector('#modal-add-cost .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('cost-form');
  const fd = new FormData();
  const imgFile = document.getElementById('cost-img')?.files[0];
  if (imgFile) fd.append('slip_image', imgFile);
  fd.append('vehicle_id', vehicleId);
  Object.entries(data).forEach(([k,v]) => fd.append(k, v));
  const res = await API.postForm('fleet/costs', fd);
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Cost added','success');
    Modal.close();
    loadVehicleCosts(vehicleId);
  } else Toast.show(res.message,'error');
}

async function deleteFleetCost(costId, vehicleId) {
  if (!confirm('Delete this cost entry?')) return;
  const res = await API.post('fleet/costs', { action:'delete', id:costId, vehicle_id:vehicleId });
  if (res.success) { Toast.show('Deleted','success'); loadVehicleCosts(vehicleId); }
  else Toast.show(res.message,'error');
}

function openAddServiceModal(vehicleId) {
  Modal.open({
    id: 'add-service',
    title: 'Add Service Schedule',
    body: `
      <form id="service-form">
        <div class="form-group"><label class="form-label">Service Type <span class="required">*</span></label>
          <input name="service_type" class="form-control" required placeholder="e.g. Oil & Filter, Major Service, Tyres">
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Interval (km)</label>
            <input type="number" name="service_interval_km" class="form-control" value="10000">
          </div>
          <div class="form-group"><label class="form-label">Warn before (km)</label>
            <input type="number" name="warn_at_km_before" class="form-control" value="500">
          </div>
          <div class="form-group"><label class="form-label">Last Service ODO</label>
            <input type="number" name="last_service_odo" class="form-control" value="0">
          </div>
          <div class="form-group"><label class="form-label">Last Service Date</label>
            <input type="date" name="last_service_date" class="form-control">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="2"></textarea>
        </div>
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitServiceSchedule(${vehicleId})"><span class="btn-text">Save</span></button>`
  });
}

async function submitServiceSchedule(vehicleId) {
  const btn = document.querySelector('#modal-add-service .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('service-form');
  const res = await API.post('fleet/service', { action:'save', vehicle_id:vehicleId, ...data });
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Schedule added','success');
    Modal.close();
    loadVehicleService(vehicleId);
  } else Toast.show(res.message,'error');
}

function openCompleteServiceModal(scheduleId, vehicleId, serviceType) {
  Modal.open({
    id: 'complete-service',
    title: '✅ Record Service Completed',
    size: 'modal-lg',
    body: `
      <form id="complete-service-form">
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Service Type</label>
            <input name="service_type" class="form-control" value="${serviceType||''}" placeholder="e.g. Oil & Filter">
          </div>
          <div class="form-group"><label class="form-label">Service Date <span class="required">*</span></label>
            <input type="date" name="service_date" class="form-control" value="${new Date().toISOString().slice(0,10)}" required>
          </div>
        </div>
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">ODO at Service <span class="required">*</span></label>
            <input type="number" name="odo_reading" class="form-control" required placeholder="Current km reading">
          </div>
          <div class="form-group"><label class="form-label">Cost (R)</label>
            <input type="number" step="0.01" name="amount" class="form-control" placeholder="0.00" value="0">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Notes</label>
          <textarea name="notes" class="form-control" rows="2" placeholder="Parts replaced, workshop used, etc."></textarea>
        </div>
        <div class="form-group">
          <label class="form-label">Attach Slip / Invoice <span class="text-muted text-xs">(image or PDF)</span></label>
          <input type="file" id="svc-slip-file" accept="image/*,.pdf" class="form-control">
        </div>
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitCompleteService(${scheduleId},${vehicleId})"><span class="btn-text">✅ Confirm Service Done</span></button>`
  });
}

async function submitCompleteService(scheduleId, vehicleId) {
  const btn = document.querySelector('#modal-complete-service .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('complete-service-form');
  if (!data.odo_reading) { Toast.show('ODO reading is required.','error'); if(btn)btn.classList.remove('loading'); return; }

  const fd = new FormData();
  fd.append('action', 'complete');
  fd.append('id', scheduleId);
  fd.append('vehicle_id', vehicleId);
  Object.entries(data).forEach(([k,v]) => fd.append(k, v));
  const slipFile = document.getElementById('svc-slip-file')?.files[0];
  if (slipFile) fd.append('slip', slipFile);

  const res = await API.postForm('fleet/service', fd);
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Service recorded! ✅','success');
    Modal.close();
    loadVehicleService(vehicleId);
  } else Toast.show(res.message,'error');
}

async function deleteServiceSchedule(scheduleId, vehicleId) {
  if (!confirm('Delete this service schedule?')) return;
  const res = await API.post('fleet/service', { action:'delete', id:scheduleId, vehicle_id:vehicleId });
  if (res.success) { Toast.show('Deleted','success'); loadVehicleService(vehicleId); }
  else Toast.show(res.message,'error');
}

function openAddDocModal(vehicleId) {
  Modal.open({
    id: 'add-doc',
    title: 'Upload Vehicle Document',
    body: `
      <form id="doc-form">
        <div class="form-row form-row-2">
          <div class="form-group"><label class="form-label">Document Type</label>
            <select name="doc_type" class="form-control">
              ${['licence','roadworthy','insurance','service_book','other'].map(t=>`<option value="${t}">${t}</option>`).join('')}
            </select>
          </div>
          <div class="form-group"><label class="form-label">Label <span class="required">*</span></label>
            <input name="label" class="form-control" required placeholder="e.g. Licence Disc 2026">
          </div>
          <div class="form-group"><label class="form-label">Expiry Date</label>
            <input type="date" name="expiry_date" class="form-control">
          </div>
        </div>
        <div class="form-group"><label class="form-label">Notes</label>
          <input name="notes" class="form-control" placeholder="Optional notes">
        </div>
        <div class="form-group"><label class="form-label">File (Image or PDF)</label>
          <input type="file" id="doc-file" accept="image/*,.pdf" class="form-control" required>
        </div>
      </form>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitFleetDoc(${vehicleId})"><span class="btn-text">Upload</span></button>`
  });
}

async function submitFleetDoc(vehicleId) {
  const btn = document.querySelector('#modal-add-doc .btn-primary');
  if (btn) btn.classList.add('loading');
  const data = getFormData('doc-form');
  const file = document.getElementById('doc-file')?.files[0];
  if (!file) { Toast.show('Please select a file.','error'); if(btn)btn.classList.remove('loading'); return; }
  const fd = new FormData();
  fd.append('document', file);
  fd.append('action', 'save');
  fd.append('vehicle_id', vehicleId);
  Object.entries(data).forEach(([k,v]) => fd.append(k, v));
  const res = await API.postForm('fleet/documents', fd);
  if (btn) btn.classList.remove('loading');
  if (res.success) {
    Toast.show('Document uploaded','success');
    Modal.close();
    loadVehicleDocs(vehicleId);
  } else Toast.show(res.message,'error');
}

async function deleteFleetDoc(docId, vehicleId) {
  if (!confirm('Delete this document?')) return;
  const res = await API.post('fleet/documents', { action:'delete', id:docId, vehicle_id:vehicleId });
  if (res.success) { Toast.show('Deleted','success'); loadVehicleDocs(vehicleId); }
  else Toast.show(res.message,'error');
}

// ── Travel Log ────────────────────────────────────────────────
async function loadTravelLog(vehicleId) {
  const wrap    = document.getElementById('vh-travel-wrap');
  const metrics = document.getElementById('vh-travel-metrics');
  if (!wrap) return;
  const res = await API.post('fleet/travel_log', { action:'list', vehicle_id:vehicleId });
  if (!res.success) { wrap.innerHTML=`<p class="text-danger">${res.message}</p>`; return; }
  const logs    = res.data.logs || [];
  const m       = res.data.metrics || {};
  const monthly = res.data.monthly || [];
  _travelLogLatestOdo = res.data.latest_odo || 0;

  // Source badge helper
  const sourceBadge = (src) => {
    const map = { manual: 'badge-muted', job_card: 'badge-info', fuel_slip: 'badge-warning' };
    const labels = { manual: 'Manual', job_card: 'Job Card', fuel_slip: 'Fuel Slip' };
    return `<span class="badge ${map[src]||'badge-muted'}">${labels[src]||src}</span>`;
  };

  // Metrics cards
  const totalKm = m.max_odo && m.min_odo ? m.max_odo - m.min_odo : 0;
  const days    = m.first_date && m.last_date ? Math.max(1, (new Date(m.last_date)-new Date(m.first_date))/(1000*86400)) : 1;
  const dailyAvg = totalKm / days;
  const monthlyAvg = dailyAvg * 30.44;

  if (metrics) metrics.innerHTML = `
    <div class="d-flex gap-3 mb-3 flex-wrap">
      <div class="card flex-1" style="min-width:120px"><div class="card-body text-center" style="padding:.75rem">
        <div class="font-bold text-primary" style="font-size:1.25rem">${m.max_odo?.toLocaleString()||'—'}</div>
        <div class="text-xs text-muted">Current ODO (km)</div>
      </div></div>
      <div class="card flex-1" style="min-width:120px"><div class="card-body text-center" style="padding:.75rem">
        <div class="font-bold" style="font-size:1.25rem">${totalKm.toLocaleString()}</div>
        <div class="text-xs text-muted">Total Recorded (km)</div>
      </div></div>
      <div class="card flex-1" style="min-width:120px"><div class="card-body text-center" style="padding:.75rem">
        <div class="font-bold" style="font-size:1.25rem">${Math.round(dailyAvg)}</div>
        <div class="text-xs text-muted">Avg km/day</div>
      </div></div>
      <div class="card flex-1" style="min-width:120px"><div class="card-body text-center" style="padding:.75rem">
        <div class="font-bold" style="font-size:1.25rem">${Math.round(monthlyAvg).toLocaleString()}</div>
        <div class="text-xs text-muted">Avg km/month</div>
      </div></div>
      <div class="card flex-1" style="min-width:120px"><div class="card-body text-center" style="padding:.75rem">
        <div class="font-bold" style="font-size:1.25rem">${m.reading_count||0}</div>
        <div class="text-xs text-muted">Total Readings</div>
      </div></div>
    </div>
    ${monthly.length ? `
    <div class="card mb-3">
      <div class="card-header"><h6>Monthly Distance (last 6 months)</h6></div>
      <div class="card-body" style="padding:.75rem">
        <div class="table-wrap"><table>
          <thead><tr><th>Month</th><th>Est. km</th><th>Readings</th></tr></thead>
          <tbody>${monthly.map(mn=>`<tr><td>${mn.month}</td><td class="font-medium">${parseInt(mn.km_this_month||0).toLocaleString()}</td><td>${mn.readings}</td></tr>`).join('')}</tbody>
        </table></div>
      </div>
    </div>` : ''}`;

  if (!logs.length) { wrap.innerHTML=`<div class="empty-state"><div class="empty-icon">🗺️</div><div class="empty-title">No ODO readings logged</div></div>`; return; }
  wrap.innerHTML = `
    <div class="table-wrap">
      <table><thead><tr><th>Date</th><th>ODO (km)</th><th>+/- km</th><th>Source</th><th>Reference</th><th>Recorded By</th><th></th></tr></thead>
      <tbody>${logs.map((l,i)=>{
        const prev = logs[i+1];
        const diff = prev && prev.odo_reading ? l.odo_reading - prev.odo_reading : null;
        const diffStr = diff !== null
          ? (diff > 0 ? `<span class="text-success text-sm">+${diff.toLocaleString()}</span>`
            : diff < 0 ? `<span class="text-danger text-sm">${diff.toLocaleString()}</span>`
            : '<span class="text-muted text-sm">—</span>')
          : '—';
        return `<tr>
          <td>${Fmt.date(l.reading_date)}</td>
          <td class="font-medium">${parseInt(l.odo_reading).toLocaleString()} km</td>
          <td>${diffStr}</td>
          <td>${sourceBadge(l.source)}</td>
          <td class="text-sm">${l.source_ref ? `<span class="code">${l.source_ref}</span>` : '—'}</td>
          <td class="text-sm text-muted">${l.recorded_by_name||'System'}</td>
          <td>${l.source==='manual'?`<button class="btn btn-ghost btn-sm text-danger" onclick="deleteOdoReading(${l.id},${vehicleId})">✕</button>`:''}</td>
        </tr>`;
      }).join('')}</tbody>
    </table></div>`;
}
let _travelLogLatestOdo = 0; // track latest odo for validation hints

function openAddOdoModal(vehicleId) {
  const hint = _travelLogLatestOdo > 0
    ? `<div class="text-xs text-muted mt-1">Latest recorded: <strong>${_travelLogLatestOdo.toLocaleString()} km</strong> — new reading must be ≥ this.</div>`
    : '';
  Modal.open({
    id: 'add-odo',
    title: '📍 Log ODO Reading',
    body: `
      <div class="form-group"><label class="form-label">ODO Reading (km) <span class="required">*</span></label>
        <input type="number" id="odo-val" class="form-control" placeholder="e.g. 85000" min="${_travelLogLatestOdo||0}" required>
        ${hint}</div>
      <div class="form-group"><label class="form-label">Date</label>
        <input type="date" id="odo-date" class="form-control" value="${new Date().toISOString().slice(0,10)}"></div>
      <div class="form-group"><label class="form-label">Notes</label>
        <input id="odo-notes" class="form-control" placeholder="Optional notes"></div>`,
    footer: `<button class="btn btn-ghost" onclick="Modal.close()">Cancel</button>
      <button class="btn btn-primary" onclick="submitOdoReading(${vehicleId})"><span class="btn-text">Save Reading</span></button>`
  });
}

async function submitOdoReading(vehicleId) {
  const btn = document.querySelector('#modal-add-odo .btn-primary');
  if (btn) btn.classList.add('loading');
  const val   = parseInt(document.getElementById('odo-val')?.value);
  const date  = document.getElementById('odo-date')?.value;
  const notes = document.getElementById('odo-notes')?.value;
  if (!val) { Toast.show('ODO reading required.','error'); if(btn)btn.classList.remove('loading'); return; }
  if (_travelLogLatestOdo > 0 && val < _travelLogLatestOdo) {
    Toast.show(`ODO cannot be less than the latest reading (${_travelLogLatestOdo.toLocaleString()} km).`, 'error');
    if (btn) btn.classList.remove('loading'); return;
  }
  const res = await API.post('fleet/travel_log', { action:'add', vehicle_id:vehicleId, odo_reading:val, reading_date:date, notes });
  if (btn) btn.classList.remove('loading');
  if (res.success) { Toast.show('Reading logged.','success'); Modal.close(); loadTravelLog(vehicleId); }
  else Toast.show(res.message,'error');
}

async function deleteOdoReading(id, vehicleId) {
  if (!confirm('Delete this ODO reading?')) return;
  const res = await API.post('fleet/travel_log', { action:'delete', id, vehicle_id:vehicleId });
  if (res.success) { Toast.show('Deleted.','success'); loadTravelLog(vehicleId); }
  else Toast.show(res.message,'error');
}