script-volume-auto/public/app.js

const API = '/api/runs';
const app = document.getElementById('app');
let pollTimer = null;

function stopPolling() {
  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
}

async function api(path, opts) {
  const res = await fetch(path, opts);
  if (!res.ok) {
    let msg = res.statusText;
    try { const j = await res.json(); msg = j.message || j.error || msg; } catch {}
    throw new Error(msg);
  }
  return res.json();
}

function fmt(n, digits = 4) {
  if (n === null || n === undefined) return '-';
  if (typeof n !== 'number') return String(n);
  return n.toLocaleString('fr-FR', { maximumFractionDigits: digits });
}

function roleLabel(role) {
  return role === 'top' ? 'haut' : role === 'bottom' ? 'bas' : '';
}

function statusBadge(status) {
  const map = {
    pending: 'bg-slate-700 text-slate-200',
    running: 'bg-blue-600/30 text-blue-300',
    done: 'bg-emerald-600/30 text-emerald-300',
    error: 'bg-red-600/30 text-red-300',
  };
  return `<span class="badge ${map[status] || 'bg-slate-700'}">${status}</span>`;
}

function router() {
  const hash = location.hash || '#/';
  stopPolling();
  if (hash === '#/' || hash === '') return renderList();
  if (hash === '#/new') return renderNew();
  const m = hash.match(/^#\/runs\/([^/]+)$/);
  if (m) return renderDetail(m[1]);
  app.innerHTML = '<p class="text-slate-400">Page introuvable.</p>';
}
window.addEventListener('hashchange', router);
window.addEventListener('DOMContentLoaded', router);

// ---------------- Liste des runs ----------------
async function renderList() {
  app.innerHTML = '<p class="text-slate-400">Chargement...</p>';
  const runs = await api(API);
  if (runs.length === 0) {
    app.innerHTML = `
      <div class="text-center py-20">
        <p class="text-slate-400 mb-4">Aucun run pour le moment.</p>
        <a href="#/new" class="inline-block bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-medium">Lancer un nouveau run</a>
      </div>`;
    return;
  }
  const rows = runs.map((r) => `
    <tr class="border-b border-slate-800 hover:bg-slate-900/50 cursor-pointer" onclick="location.hash='#/runs/${r.id}'">
      <td class="py-2 px-3 font-mono text-xs text-slate-400">${r.id.slice(0, 8)}</td>
      <td class="py-2 px-3">${escapeHtml(r.originalFilename)}</td>
      <td class="py-2 px-3">${statusBadge(r.status)}</td>
      <td class="py-2 px-3 text-sm text-slate-400">${new Date(r.createdAt).toLocaleString('fr-FR')}</td>
      <td class="py-2 px-3 text-sm">${r.summary ? `${r.summary.levelsOk}/${r.summary.levelsTotal} niveaux` : '-'}</td>
      <td class="py-2 px-3 text-sm">${r.summary && r.summary.volumeDeltaPct !== null ? fmt(r.summary.volumeDeltaPct, 2) + ' %' : '-'}</td>
    </tr>`).join('');

  app.innerHTML = `
    <div class="flex items-center justify-between mb-6">
      <h1 class="text-xl font-semibold">Runs</h1>
      <a href="#/new" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-medium text-sm">+ Nouveau run</a>
    </div>
    <div class="overflow-x-auto border border-slate-800 rounded-lg">
      <table class="w-full text-left">
        <thead class="bg-slate-900 text-slate-400 text-xs uppercase">
          <tr>
            <th class="py-2 px-3">ID</th><th class="py-2 px-3">Fichier</th><th class="py-2 px-3">Statut</th>
            <th class="py-2 px-3">Cree le</th><th class="py-2 px-3">Niveaux OK</th><th class="py-2 px-3">Ecart volume (L0 -> dernier)</th>
          </tr>
        </thead>
        <tbody>${rows}</tbody>
      </table>
    </div>`;
}

// ---------------- Nouveau run ----------------
function renderNew() {
  app.innerHTML = `
    <h1 class="text-xl font-semibold mb-6">Nouveau run</h1>
    <form id="upload-form" class="space-y-5 max-w-xl">
      <div>
        <label class="block text-sm font-medium mb-2">Type de comparaison</label>
        <div class="flex gap-4 text-sm">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="mode" value="const_height" checked />
            Plan de reference Z constant
          </label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="radio" name="mode" value="cloud_compare" />
            Comparaison a un second nuage
          </label>
        </div>
      </div>

      <div id="mode-const-height">
        <label class="block text-sm font-medium mb-1">Nuage de points (.las, .laz, .copc.laz, .bin)</label>
        <input type="file" name="file" accept=".las,.laz,.bin"
          class="block w-full text-sm text-slate-300 border border-slate-700 rounded-lg cursor-pointer bg-slate-900 focus:outline-none p-2" />
        <p class="text-xs text-slate-500 mt-1">Le volume est calcule entre le nuage et un plan horizontal (altitude min par defaut).</p>
      </div>

      <div id="mode-cloud-compare" class="hidden space-y-4">
        <div>
          <label class="block text-sm font-medium mb-1">Surface superieure (sommet de l'amas)</label>
          <input type="file" name="fileTop" accept=".las,.laz,.bin"
            class="block w-full text-sm text-slate-300 border border-slate-700 rounded-lg cursor-pointer bg-slate-900 focus:outline-none p-2" />
        </div>
        <div>
          <label class="block text-sm font-medium mb-1">Limite inferieure (base / socle de l'amas)</label>
          <input type="file" name="fileBottom" accept=".las,.laz,.bin"
            class="block w-full text-sm text-slate-300 border border-slate-700 rounded-lg cursor-pointer bg-slate-900 focus:outline-none p-2" />
        </div>
        <p class="text-xs text-slate-500">Les densites des deux nuages sont d'abord appariees (le plus dense est decime pour matcher l'autre), puis les deux sont decimes ensemble a chaque etape.</p>
      </div>

      <details class="border border-slate-800 rounded-lg p-3">
        <summary class="cursor-pointer text-sm text-slate-400">Options avancees (optionnel)</summary>
        <div class="mt-3 space-y-3">
          <div id="zref-override-wrap">
            <label class="block text-sm mb-1">Plan de reference Z (override, mode Z constant uniquement)</label>
            <input type="number" step="any" name="zrefOverride" placeholder="auto = Zmin de l'echantillon"
              class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-sm" />
          </div>
          <div>
            <label class="block text-sm mb-1">Pas spatial initial en metres (override)</label>
            <input type="number" step="any" name="initialStepOverride" placeholder="auto = distance mediane au plus proche voisin"
              class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-sm" />
          </div>
          <div>
            <label class="block text-sm mb-1">Distance max de remplissage des trous en metres (override)</label>
            <input type="number" step="any" name="maxEdgeLengthOverride" placeholder="auto = grille du niveau x3"
              class="w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-sm" />
            <p class="text-xs text-slate-500 mt-1">Trop grand = comble aussi les creux du contour de l'amas (a eviter). Trop petit = les trous de scan restent vides.</p>
          </div>
        </div>
      </details>
      <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded-lg font-medium">Lancer le run</button>
      <p id="upload-error" class="text-red-400 text-sm hidden"></p>
    </form>`;

  const form = document.getElementById('upload-form');
  const constDiv = document.getElementById('mode-const-height');
  const compareDiv = document.getElementById('mode-cloud-compare');
  const zrefWrap = document.getElementById('zref-override-wrap');
  const constFileInput = form.querySelector('input[name=file]');
  const topFileInput = form.querySelector('input[name=fileTop]');
  const bottomFileInput = form.querySelector('input[name=fileBottom]');

  form.querySelectorAll('input[name=mode]').forEach((radio) => {
    radio.addEventListener('change', () => {
      const isCompare = form.mode.value === 'cloud_compare';
      constDiv.classList.toggle('hidden', isCompare);
      compareDiv.classList.toggle('hidden', !isCompare);
      zrefWrap.classList.toggle('hidden', isCompare);
      constFileInput.required = !isCompare;
      topFileInput.required = isCompare;
      bottomFileInput.required = isCompare;
    });
  });
  constFileInput.required = true;

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const fd = new FormData(form);
    const errEl = document.getElementById('upload-error');
    errEl.classList.add('hidden');
    const btn = form.querySelector('button[type=submit]');
    btn.disabled = true;
    btn.textContent = 'Envoi...';
    try {
      const res = await fetch(API, { method: 'POST', body: fd });
      const json = await res.json();
      if (!res.ok) throw new Error(json.message || 'Echec de l\'envoi');
      location.hash = `#/runs/${json.id}`;
    } catch (err) {
      errEl.textContent = err.message;
      errEl.classList.remove('hidden');
      btn.disabled = false;
      btn.textContent = 'Lancer le run';
    }
  });
}

// ---------------- Detail d'un run ----------------
async function renderDetail(id) {
  app.innerHTML = '<p class="text-slate-400">Chargement...</p>';
  await loadDetail(id);
  pollTimer = setInterval(async () => {
    const run = await api(`${API}/${id}`);
    if (run.status === 'pending' || run.status === 'running') {
      paintDetail(run);
    } else {
      stopPolling();
      paintDetail(run);
    }
  }, 2000);
}

async function loadDetail(id) {
  const run = await api(`${API}/${id}`);
  paintDetail(run);
}

function pointsCell(l) {
  if (l.status !== 'ok') return '-';
  return l.clouds.map((c) => {
    const label = c.role === 'unique' ? '' : `${roleLabel(c.role)}: `;
    return `${label}${c.pointCount.toLocaleString('fr-FR')} (${fmt(c.pointRatio * 100, 1)}%)`;
  }).join('<br/>');
}

function stepCell(l) {
  const c = l.clouds[0];
  if (!c || c.spatialStep === null) return 'complet';
  return fmt(c.spatialStep, 5) + ' m';
}

function levelRow(l) {
  const warnCls = l.status === 'error' ? 'bg-red-950/40' : l.warn ? 'bg-amber-950/30' : '';
  const statusTxt = l.status === 'ok' ? '' : `<div class="text-xs text-slate-400 mt-0.5">${escapeHtml(l.message || '')}</div>`;
  return `
    <tr class="border-b border-slate-800 ${warnCls}">
      <td class="py-2 px-3 font-medium">${l.level}</td>
      <td class="py-2 px-3">${stepCell(l)}</td>
      <td class="py-2 px-3">${l.gridStep !== null ? fmt(l.gridStep, 5) + ' m' : '-'}</td>
      <td class="py-2 px-3">${l.maxEdgeLength !== null ? fmt(l.maxEdgeLength, 5) + ' m' : '-'}</td>
      <td class="py-2 px-3">${pointsCell(l)}</td>
      <td class="py-2 px-3">${l.status === 'ok' ? fmt(l.volume, 4) + ' m3' : '-'}</td>
      <td class="py-2 px-3">${l.status === 'ok' ? fmt(l.surface, 3) + ' m2' : '-'}</td>
      <td class="py-2 px-3">${l.status === 'ok' ? fmt(l.matchingCellsPct, 1) + ' %' : '-'}</td>
      <td class="py-2 px-3">${statusBadge(l.status)} ${l.warn && l.status === 'ok' ? '<span class="badge bg-amber-600/30 text-amber-300 ml-1">a verifier</span>' : ''}${statusTxt}</td>
    </tr>`;
}

function paintDetail(run) {
  const r = run.report;
  const isCompare = r && r.mode === 'cloud_compare';

  const levelsTable = r ? `
    <div class="overflow-x-auto border border-slate-800 rounded-lg mt-4">
      <table class="w-full text-left text-sm">
        <thead class="bg-slate-900 text-slate-400 text-xs uppercase">
          <tr>
            <th class="py-2 px-3">Niveau</th><th class="py-2 px-3">Pas spatial</th><th class="py-2 px-3">Grille volume</th>
            <th class="py-2 px-3">Max edge (remplissage)</th><th class="py-2 px-3">Points</th>
            <th class="py-2 px-3">Volume</th><th class="py-2 px-3">Surface</th>
            <th class="py-2 px-3">Matching cells</th><th class="py-2 px-3">Statut</th>
          </tr>
        </thead>
        <tbody>${r.levels.map((l) => levelRow(l)).join('')}</tbody>
      </table>
    </div>` : '';

  const densityBlock = r && r.params.densityMatch ? `
    <div class="bg-slate-900 border border-slate-800 rounded-lg p-3 text-sm mt-4">
      <p class="text-slate-400 text-xs mb-1">Appariement de densite (niveau 0)</p>
      <p>Pas haut: ${fmt(r.params.densityMatch.topSpacing, 5)} m &middot; Pas bas: ${fmt(r.params.densityMatch.bottomSpacing, 5)} m
        &middot; Pas apparie: ${fmt(r.params.densityMatch.matchedSpacing, 5)} m
        (${r.params.densityMatch.preDecimatedRole === 'none' ? 'aucun nuage decime, deja comparables' : `nuage ${roleLabel(r.params.densityMatch.preDecimatedRole)} decime pour matcher`})</p>
    </div>` : '';

  const params = r ? `
    <dl class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm mt-4">
      ${!isCompare ? `<div class="bg-slate-900 border border-slate-800 rounded-lg p-3"><dt class="text-slate-400 text-xs">Zref</dt><dd>${fmt(r.params.zref, 4)} (${r.params.zrefSource})</dd></div>` : ''}
      <div class="bg-slate-900 border border-slate-800 rounded-lg p-3"><dt class="text-slate-400 text-xs">Pas initial</dt><dd>${fmt(r.params.initialStep, 5)} m (${r.params.initialStepSource})</dd></div>
      <div class="bg-slate-900 border border-slate-800 rounded-lg p-3"><dt class="text-slate-400 text-xs">Grille volume</dt><dd>x${r.params.gridStepMultiplier} le pas spatial, adaptee a chaque niveau</dd></div>
      <div class="bg-slate-900 border border-slate-800 rounded-lg p-3"><dt class="text-slate-400 text-xs">Remplissage trous</dt><dd>x${r.params.maxEdgeLengthMultiplier} la grille (${r.params.maxEdgeLengthSource})</dd></div>
      <div class="bg-slate-900 border border-slate-800 rounded-lg p-3"><dt class="text-slate-400 text-xs">Facteur / etapes</dt><dd>x${r.params.factor} sur ${r.params.steps}</dd></div>
    </dl>
    ${densityBlock}` : '';

  const heightmaps = r ? r.levels.flatMap((l) => l.clouds.filter((c) => c.imageFile).map((c) => ({ level: l.level, c }))).map(({ level, c }) => `
    <div class="bg-slate-900 border border-slate-800 rounded-lg p-2">
      <img src="${API}/${run.id}/images/${c.imageFile.split('/').pop()}" class="w-full rounded" loading="lazy" />
      <p class="text-xs text-slate-400 text-center mt-1">Niveau ${level}${c.role !== 'unique' ? ' - ' + roleLabel(c.role) : ''}</p>
    </div>`).join('') : '';

  const summaryCharts = run.status === 'done' ? ['volume_vs_level.png', 'points_vs_level.png', 'robustness_vs_level.png'].map((f) => `
    <div class="bg-slate-900 border border-slate-800 rounded-lg p-2">
      <img src="${API}/${run.id}/images/${f}" class="w-full rounded" loading="lazy" onerror="this.parentElement.style.display='none'" />
    </div>`).join('') : '';

  const downloads = run.status === 'done' ? `
    <div class="flex flex-wrap gap-2 mt-4">
      <a href="${API}/${run.id}/download/bin" class="bg-slate-800 hover:bg-slate-700 px-3 py-2 rounded-lg text-sm">Nuages assembles (.bin)</a>
      <a href="${API}/${run.id}/download/csv" class="bg-slate-800 hover:bg-slate-700 px-3 py-2 rounded-lg text-sm">Rapport (.csv)</a>
      <a href="${API}/${run.id}/download/zip" class="bg-slate-800 hover:bg-slate-700 px-3 py-2 rounded-lg text-sm">Dossier complet (.zip)</a>
    </div>` : '';

  const errorBlock = run.error ? `<div class="bg-red-950/40 border border-red-900 rounded-lg p-3 text-sm text-red-300 mt-4">${escapeHtml(run.error)}</div>` : '';

  app.innerHTML = `
    <div class="flex items-center justify-between mb-2">
      <h1 class="text-xl font-semibold">${escapeHtml(run.originalFilename)}</h1>
      ${statusBadge(run.status)}
    </div>
    <p class="text-slate-400 text-sm mb-4">
      ${r ? (isCompare ? 'Mode : comparaison a un second nuage' : 'Mode : plan de reference Z constant') : ''}
      &middot; Cree le ${new Date(run.createdAt).toLocaleString('fr-FR')}${run.finishedAt ? ' - termine le ' + new Date(run.finishedAt).toLocaleString('fr-FR') : ''}
    </p>
    ${errorBlock}
    ${params}
    ${levelsTable}
    ${downloads}
    ${heightmaps ? `<h2 class="text-lg font-semibold mt-8 mb-3">Cartes de hauteur par niveau</h2><div class="grid grid-cols-2 md:grid-cols-3 gap-3">${heightmaps}</div>` : ''}
    ${summaryCharts ? `<h2 class="text-lg font-semibold mt-8 mb-3">Graphiques de synthese</h2><div class="grid grid-cols-1 md:grid-cols-3 gap-3">${summaryCharts}</div>` : ''}
    <h2 class="text-lg font-semibold mt-8 mb-2">Journal</h2>
    <pre class="bg-black/60 border border-slate-800 rounded-lg p-3 text-xs text-slate-300 overflow-x-auto max-h-64 overflow-y-auto">${escapeHtml(run.log || '')}</pre>
  `;
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}