static/js/predict.js

// ─────────────────────────────────────────────
// predict.js — live penalty preview + progress
// ─────────────────────────────────────────────

const PENALTIES = {
  body_damage_severity: { 0: 0, 1: 4, 2: 12, 3: 28 },
  paint_condition:      { excellent: 0, good: 2, fair: 6, poor: 13 },
  interior_condition:   { excellent: 0, good: 2, fair: 7, poor: 15 },
  accident_history:     { none: 0, minor: 8, moderate: 20, major: 40 },
  flood_damage:         { none: 0, minor: 20, severe: 50 },
  engine_condition:     { excellent: 0, good: 3, fair: 10, poor: 30 },
  tire_condition:       { good: 0, worn: 3, bald: 5 },
  service_history:      { complete: -3, partial: 0, none: 6 },
  modification_status:  { stock: 0, cosmetic_minor: 2, cosmetic_major: 5, performance: 4, non_reversible: 8 },
};

function calcPenalty() {
  let total = 0;

  // Body damage severity
  const sev = parseInt(document.querySelector('[name=body_damage_severity]')?.value || 0);
  total += PENALTIES.body_damage_severity[sev] || 0;

  // Dent count extra
  const dents = parseInt(document.querySelector('[name=dent_count]')?.value || 0);
  total += Math.min(dents * 2, 15);

  // Other dropdowns
  const fields = ['paint_condition','interior_condition','accident_history',
                  'flood_damage','engine_condition','tire_condition',
                  'service_history','modification_status'];
  fields.forEach(f => {
    const el = document.querySelector(`[name=${f}]`);
    if (el) total += PENALTIES[f][el.value] || 0;
  });

  return Math.max(-5, Math.min(90, total));
}

function updatePenaltyPreview() {
  const pct = calcPenalty();
  document.getElementById('penaltyPct').textContent = (pct >= 0 ? '−' : '+') + Math.abs(pct) + '%';
  document.getElementById('penaltyFill').style.width = Math.abs(pct) + '%';
  const fill = document.getElementById('penaltyFill');
  fill.style.background = pct > 20 ? '#DC2626' : pct > 10 ? '#D97706' : '#16A34A';
}

// ── Progress tracker ──
function updateProgress() {
  const brand  = document.querySelector('[name=brand]')?.value.trim();
  const model  = document.querySelector('[name=model]')?.value.trim();
  const year   = document.querySelector('[name=year]')?.value;
  const km     = document.querySelector('[name=mileage]')?.value;
  const fuel   = document.querySelector('[name=fuel_type]')?.value;

  const checks = {
    'cl-make': !!(brand && model),
    'cl-age':  !!(year && km),
    'cl-spec': !!(fuel),
    'cl-cond': calcPenalty() !== 5,  // user touched condition section
  };

  let done = 0;
  Object.entries(checks).forEach(([id, ok]) => {
    const el = document.getElementById(id);
    if (el) { el.classList.toggle('done', ok); if (ok) done++; }
  });

  const pct = 14 + Math.round((done / 4) * 86);
  document.getElementById('progressFill').style.width = pct + '%';
  document.getElementById('progressPct').textContent  = pct + '%';
}

// ── Event Listeners ──
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('predictForm')?.addEventListener('input', () => {
    updatePenaltyPreview();
    updateProgress();
  });
  updatePenaltyPreview();
  updateProgress();
});