{% extends "app/logged_in_base.html" %}
{% load i18n %}

{% block content %}
<style>
  .oe-page { padding: 15px 16px 30px; }
  .oe-header { margin-bottom: 13px; }
  .oe-title { margin: 0; color: #2c3e50; font-size: 18px; font-weight: 600; }
  .oe-title .fa { margin-right: 7px; }
  .oe-help { margin: 4px 0 0; color: #778899; font-size: 13px; }
  .oe-status { color: #778899; font-size: 12px; margin-right: 8px; }
  .oe-list { background: #fff; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
  .oe-row { padding: 13px 15px; border-bottom: 1px solid #e5e5e5; }
  .oe-row:last-child { border-bottom: 0; }
  .oe-row-table { display: table; width: 100%; }
  .oe-main { display: table-cell; vertical-align: middle; }
  .oe-actions { display: table-cell; vertical-align: middle; width: 1%; white-space: nowrap; text-align: right; }
  .oe-project-title { color: #2c3e50; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
  .oe-project-meta, .oe-task-meta { color: #7d8b99; font-size: 12px; }
  .oe-project-meta .fa, .oe-task-meta .fa { color: #2c3e50; margin-right: 4px; }
  .oe-task-title { color: #2c3e50; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
  .oe-labels .label { margin-right: 4px; }
  .oe-backbar { margin-bottom: 10px; }
  .oe-selected-project { margin-left: 8px; color: #2c3e50; font-weight: 600; }
  .oe-options { display: none; margin: 12px -15px -13px; padding: 13px 15px 15px; background: #f7f9fa; border-top: 1px solid #e6e9eb; }
  .oe-options.active { display: block; }
  .oe-option-grid { display: table; width: 100%; }
  .oe-option-main { display: table-cell; vertical-align: top; }
  .oe-option-side { display: table-cell; vertical-align: top; width: 310px; padding-left: 24px; }
  .oe-check { display: block; font-weight: 400; margin-bottom: 8px; cursor: pointer; }
  .oe-check input { margin-right: 6px; vertical-align: -1px; }
  .oe-check.disabled { color: #888; cursor: default; }
  .oe-pc-quality { margin: 4px 0 10px 22px; color: #667786; font-size: 12px; }
  .oe-pc-quality select { display: inline-block; width: auto; margin-left: 5px; padding: 3px 6px; height: 29px; }
  .oe-size-box { border-left: 3px solid #9ba9b4; padding-left: 10px; margin-top: 7px; color: #667786; font-size: 12px; line-height: 1.45; }
  .oe-size-value { color: #2c3e50; font-size: 16px; font-weight: 700; }
  .oe-size-note { margin-top: 3px; }
  .oe-export-btn { background: #2c3e50; border-color: #2c3e50; color: #fff !important; }
  .oe-export-btn:hover, .oe-export-btn:focus { background: #1f2d3a; border-color: #1f2d3a; color: #fff !important; }
  .oe-progress-wrap { display: none; margin-top: 13px; }
  .oe-progress-wrap.active { display: block; }
  .oe-progress-head { display: table; width: 100%; margin-bottom: 5px; color: #607080; font-size: 12px; }
  .oe-progress-text { display: table-cell; }
  .oe-progress-percent { display: table-cell; width: 1%; text-align: right; font-weight: 700; color: #2c3e50; }
  .oe-progress { margin: 0; height: 12px; background: #e0e5e8; }
  .oe-progress .progress-bar { min-width: 0; transition: width .3s ease; }
  .oe-empty, .oe-loading { padding: 22px 15px; text-align: center; color: #777; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
  .oe-project-row { cursor: pointer; }
  .oe-project-row:hover { background: #fbfcfc; }
  .oe-task-row.selected { box-shadow: inset 3px 0 0 #2c3e50; }
  .oe-disabled-note { color: #999; font-size: 12px; }
  .oe-source { margin-top: 4px; color: #8b98a4; font-size: 11px; }
  @media (max-width: 850px){
    .oe-row-table, .oe-main, .oe-actions, .oe-option-grid, .oe-option-main, .oe-option-side { display: block; width: auto; }
    .oe-actions { text-align: left; margin-top: 10px; }
    .oe-option-side { padding-left: 0; margin-top: 12px; }
  }
</style>

<div class="oe-page">
  <div class="oe-header clearfix">
    <div class="pull-left">
      <h3 class="oe-title"><i class="fa fa-download"></i>Offline-Export-Module</h3>
      <p class="oe-help">Projekt öffnen, Aufgabe auswählen und den Offline-Player vorbereiten.</p>
    </div>
    <div class="pull-right">
      <span id="globalStatus" class="oe-status"></span>
      <button id="refresh" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i> Aktualisieren</button>
    </div>
  </div>

  <div id="messages"></div>
  <div id="projectView"></div>
  <div id="taskView" style="display:none"></div>
</div>

<script>
(function(){
  'use strict';
  var COMPLETED = 40;
  var projectView = document.getElementById('projectView');
  var taskView = document.getElementById('taskView');
  var statusEl = document.getElementById('globalStatus');
  var messagesEl = document.getElementById('messages');
  var activeProject = null;
  var activeTaskId = null;

  function esc(value){
    return String(value == null ? '' : value)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }
  function apiGet(url){
    return fetch(url, {credentials:'same-origin'}).then(function(resp){
      if (!resp.ok){
        return resp.text().then(function(txt){
          txt = (txt || '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
          throw new Error(resp.status + ' ' + resp.statusText + (txt ? ' · ' + txt.slice(0, 240) : ''));
        });
      }
      return resp.json();
    });
  }
  function normalize(data){
    if (Array.isArray(data)) return data;
    if (data && Array.isArray(data.results)) return data.results;
    return [];
  }
  function showMessage(kind, text){
    var cls = kind === 'error' ? 'alert-danger' : 'alert-success';
    var icon = kind === 'error' ? 'fa-exclamation-triangle' : 'fa-check-circle';
    messagesEl.innerHTML = '<div class="alert ' + cls + '"><i class="fa ' + icon + '"></i> ' + esc(text) + '</div>';
  }
  function clearMessage(){ messagesEl.innerHTML = ''; }
  function taskStatus(task){ var n = Number(task.status); return isNaN(n) ? task.status : n; }
  function isCompleted(task){ return taskStatus(task) === COMPLETED; }
  function analyzeAssets(task){
    var assets = Array.isArray(task.available_assets) ? task.available_assets : [];
    var text = assets.join(' ').toLowerCase();
    return {
      assets: assets,
      hasMbtiles: text.indexOf('mbtiles') !== -1,
      hasGeoTiff: text.indexOf('orthophoto.tif') !== -1 || text.indexOf('.tif') !== -1 || text.indexOf('.tiff') !== -1,
      hasTiles: text.indexOf('tiles') !== -1,
      hasMesh: text.indexOf('textured_model') !== -1 || text.indexOf('.obj') !== -1,
      hasPointCloud: text.indexOf('georeferenced_model.ply') !== -1 || text.indexOf('.ply') !== -1
    };
  }
  function labels(task){
    var a = analyzeAssets(task), out = [];
    if (isCompleted(task)) out.push('<span class="label label-success"><i class="fa fa-check"></i> fertig</span>');
    else out.push('<span class="label label-warning">Status ' + esc(taskStatus(task)) + '</span>');
    if (a.hasMbtiles) out.push('<span class="label label-info">MBTiles</span>');
    else if (a.hasTiles) out.push('<span class="label label-info">Tiles</span>');
    else if (a.hasGeoTiff) out.push('<span class="label label-default">GeoTIFF</span>');
    if (a.hasMesh) out.push('<span class="label label-primary"><i class="fa fa-cube"></i> Textured Model</span>');
    if (a.hasPointCloud) out.push('<span class="label label-primary"><i class="fa fa-dot-circle-o"></i> Punktwolke</span>');
    return out.join(' ');
  }
  function formatSize(bytes){
    if (!bytes) return 'nicht verfügbar';
    var units=['B','KB','MB','GB','TB'], i=0, n=Number(bytes);
    while(n>=1024 && i<units.length-1){ n/=1024; i++; }
    return (n>=100 ? n.toFixed(0) : n>=10 ? n.toFixed(1) : n.toFixed(2)) + ' ' + units[i];
  }

  function loadProjects(){
    clearMessage();
    activeProject = null;
    activeTaskId = null;
    taskView.style.display = 'none';
    projectView.style.display = 'block';
    projectView.innerHTML = '<div class="oe-loading"><i class="fa fa-spinner fa-spin"></i> Projekte werden geladen…</div>';
    statusEl.textContent = 'Lade Projekte…';
    apiGet('/api/projects/?ordering=-created_at').then(function(data){
      var projects = normalize(data);
      statusEl.textContent = projects.length + ' Projekt(e)';
      if (!projects.length){ projectView.innerHTML = '<div class="oe-empty">Keine Projekte gefunden.</div>'; return; }
      var html = '<div class="oe-list">';
      projects.forEach(function(project, idx){
        html += '<div class="oe-row oe-project-row" data-project="' + idx + '">' +
          '<div class="oe-row-table"><div class="oe-main">' +
            '<div class="oe-project-title">' + esc(project.name || ('Projekt ' + project.id)) + '</div>' +
            '<div class="oe-project-meta"><i class="fa fa-folder-open-o"></i>Projekt-ID ' + esc(project.id) + '</div>' +
          '</div><div class="oe-actions">' +
            '<button class="btn btn-default btn-sm oe-open"><i class="fa fa-folder-open"></i> Öffnen</button>' +
          '</div></div></div>';
      });
      html += '</div>';
      projectView.innerHTML = html;
      projects.forEach(function(project, idx){
        var row = projectView.querySelector('[data-project="' + idx + '"]');
        if (!row) return;
        row.addEventListener('click', function(e){
          if (e.target && e.target.closest && e.target.closest('button')) e.preventDefault();
          openProject(project);
        });
      });
    }).catch(function(err){
      statusEl.textContent = 'Fehler';
      projectView.innerHTML = '';
      showMessage('error', err.message || String(err));
    });
  }

  function openProject(project){
    clearMessage();
    activeProject = project;
    activeTaskId = null;
    projectView.style.display = 'none';
    taskView.style.display = 'block';
    statusEl.textContent = 'Lade Aufgaben…';
    taskView.innerHTML = '<div class="oe-backbar"><button id="backProjects" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i> Projekte</button><span class="oe-selected-project">' + esc(project.name || ('Projekt ' + project.id)) + '</span></div>' +
      '<div class="oe-loading"><i class="fa fa-spinner fa-spin"></i> Aufgaben werden geladen…</div>';
    document.getElementById('backProjects').addEventListener('click', loadProjects);
    apiGet('/api/projects/' + encodeURIComponent(project.id) + '/tasks/?ordering=-created_at').catch(function(){
      return apiGet('/api/projects/' + encodeURIComponent(project.id) + '/tasks/');
    }).then(function(data){
      renderTasks(project, normalize(data));
    }).catch(function(err){
      statusEl.textContent = 'Fehler';
      showMessage('error', err.message || String(err));
    });
  }

  function renderTasks(project, tasks){
    statusEl.textContent = tasks.length + ' Aufgabe(n)';
    var html = '<div class="oe-backbar"><button id="backProjects" class="btn btn-default btn-sm"><i class="fa fa-chevron-left"></i> Projekte</button><span class="oe-selected-project">' + esc(project.name || ('Projekt ' + project.id)) + '</span></div>';
    if (!tasks.length){ html += '<div class="oe-empty">Keine Aufgaben in diesem Projekt gefunden.</div>'; taskView.innerHTML = html; bindBack(); return; }
    html += '<div class="oe-list">';
    tasks.forEach(function(task, idx){
      var ready = isCompleted(task), assets = analyzeAssets(task);
      html += '<div class="oe-row oe-task-row" data-task="' + idx + '">' +
        '<div class="oe-row-table"><div class="oe-main">' +
          '<div class="oe-task-title"><i class="fa fa-map-o"></i> ' + esc(task.name || ('Aufgabe ' + task.id)) + '</div>' +
          '<div class="oe-task-meta oe-labels">' + labels(task) + '</div>' +
        '</div><div class="oe-actions">' +
          (ready ? '<button class="btn btn-default btn-sm oe-select"><i class="fa fa-chevron-down"></i> Auswählen</button>' : '<span class="oe-disabled-note">noch nicht exportbereit</span>') +
        '</div></div>' +
        (ready ? '<div class="oe-options">' +
          '<div class="oe-option-grid"><div class="oe-option-main">' +
            '<strong>Inhalt</strong>' +
            '<label class="oe-check disabled"><input type="checkbox" checked disabled> 2D Orthophoto <span class="text-muted">(erforderlich)</span></label>' +
            (assets.hasMesh ? '<label class="oe-check"><input class="oe-include3d" type="checkbox" checked> Textured Model einschließen</label>' : '<label class="oe-check disabled"><input type="checkbox" disabled> Textured Model <span class="text-muted">(nicht erkannt)</span></label>') +
            (assets.hasPointCloud ? '<label class="oe-check"><input class="oe-includepointcloud" type="checkbox" checked> 3D-Punktwolke einschließen</label>' +
              '<div class="oe-pc-quality">Punktwolken-Qualität <select class="form-control input-sm oe-pointcloud-points"><option value="500000">Schnell · 0,5 Mio. Punkte</option><option value="1000000">Mittel · 1 Mio. Punkte</option><option value="2000000" selected>Hoch · 2 Mio. Punkte</option><option value="5000000">Sehr hoch · 5 Mio. Punkte</option></select></div>' :
              '<label class="oe-check disabled"><input type="checkbox" disabled> 3D-Punktwolke <span class="text-muted">(nicht erkannt)</span></label>') +
            '<div class="oe-size-box"><div>Geschätzte Downloadgröße</div><div class="oe-size-value">wird berechnet…</div><div class="oe-size-note"></div><div class="oe-source"></div></div>' +
          '</div><div class="oe-option-side">' +
            '<button class="btn btn-primary oe-export-btn"><i class="fa fa-download"></i> Download vorbereiten</button>' +
            '<div class="oe-progress-wrap"><div class="oe-progress-head"><span class="oe-progress-text">Vorbereitung…</span><span class="oe-progress-percent">0%</span></div>' +
              '<div class="progress oe-progress"><div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0%"></div></div></div>' +
          '</div></div>' +
        '</div>' : '') +
      '</div>';
    });
    html += '</div>';
    taskView.innerHTML = html;
    bindBack();

    tasks.forEach(function(task, idx){
      var row = taskView.querySelector('[data-task="' + idx + '"]');
      if (!row || !isCompleted(task)) return;
      var selectBtn = row.querySelector('.oe-select');
      var options = row.querySelector('.oe-options');
      var include3d = row.querySelector('.oe-include3d');
      var includePointCloud = row.querySelector('.oe-includepointcloud');
      var pointCloudPoints = row.querySelector('.oe-pointcloud-points');
      var exportBtn = row.querySelector('.oe-export-btn');
      selectBtn.addEventListener('click', function(){
        var already = options.classList.contains('active');
        closeAllTaskOptions();
        if (!already){
          options.classList.add('active'); row.classList.add('selected'); activeTaskId = task.id;
          selectBtn.innerHTML = '<i class="fa fa-chevron-up"></i> Schließen';
          updateEstimate(task, row);
        }
      });
      if (include3d) include3d.addEventListener('change', function(){ updateEstimate(task, row); });
      if (includePointCloud) includePointCloud.addEventListener('change', function(){
        if(pointCloudPoints) pointCloudPoints.disabled = !includePointCloud.checked;
        updateEstimate(task, row);
      });
      if (pointCloudPoints) pointCloudPoints.addEventListener('change', function(){ updateEstimate(task, row); });
      exportBtn.addEventListener('click', function(){ startExport(task, row); });
    });
  }

  function bindBack(){
    var btn = document.getElementById('backProjects');
    if (btn) btn.addEventListener('click', loadProjects);
  }
  function closeAllTaskOptions(){
    var rows = taskView.querySelectorAll('.oe-task-row');
    Array.prototype.forEach.call(rows, function(row){
      row.classList.remove('selected');
      var o=row.querySelector('.oe-options'), b=row.querySelector('.oe-select');
      if(o) o.classList.remove('active');
      if(b) b.innerHTML='<i class="fa fa-chevron-down"></i> Auswählen';
    });
    activeTaskId = null;
  }
  function include3dForRow(row){
    var cb = row.querySelector('.oe-include3d');
    return !!(cb && cb.checked);
  }
  function includePointCloudForRow(row){
    var cb = row.querySelector('.oe-includepointcloud');
    return !!(cb && cb.checked);
  }
  function pointCloudPointsForRow(row){
    var sel = row.querySelector('.oe-pointcloud-points');
    return sel ? String(sel.value || '2000000') : '2000000';
  }

  function updateEstimate(task, row){
    var value = row.querySelector('.oe-size-value');
    var note = row.querySelector('.oe-size-note');
    var source = row.querySelector('.oe-source');
    if(value) value.textContent = 'wird berechnet…';
    if(note) note.textContent = '';
    if(source) source.textContent = '';
    var include3d = include3dForRow(row) ? '1' : '0';
    var includePointCloud = includePointCloudForRow(row) ? '1' : '0';
    var pointCloudPoints = pointCloudPointsForRow(row);
    apiGet('/api/plugins/offline_export/task/' + encodeURIComponent(task.id) + '/offline-export/estimate?include_3d=' + include3d + '&include_pointcloud=' + includePointCloud + '&pointcloud_points=' + encodeURIComponent(pointCloudPoints)).then(function(result){
      if (!result.has_estimate){
        value.textContent = 'nicht verfügbar';
        note.textContent = 'Die Größe kann erst während der Vorbereitung bestimmt werden.';
        return;
      }
      value.textContent = 'ca. ' + (result.estimated_label || formatSize(result.estimated_bytes));
      note.textContent = result.accuracy === 'good' ? 'Gute Näherung auf Basis vorhandener Kacheldaten.' : 'Grobe Schätzung; die endgültige ZIP-Größe kann deutlich abweichen.';
      var parts=[];
      if(result.source) parts.push('2D: ' + result.source);
      if(result.estimated_3d_bytes) parts.push('Textured Model: ca. ' + formatSize(result.estimated_3d_bytes));
      if(result.estimated_pointcloud_bytes) parts.push('Punktwolke: ca. ' + formatSize(result.estimated_pointcloud_bytes) + ' (' + Number(result.pointcloud_export_vertices || 0).toLocaleString('de-DE') + ' Punkte)');
      source.textContent = parts.join(' · ');
    }).catch(function(){
      value.textContent = 'nicht verfügbar';
      note.textContent = 'Schätzung konnte nicht berechnet werden.';
    });
  }

  function setProgress(row, text, percent){
    var wrap=row.querySelector('.oe-progress-wrap'), bar=row.querySelector('.progress-bar'), textEl=row.querySelector('.oe-progress-text'), pctEl=row.querySelector('.oe-progress-percent');
    var p=Math.max(0,Math.min(100,Number(percent)||0));
    wrap.classList.add('active');
    if(textEl) textEl.textContent=text || 'Vorbereitung…';
    if(pctEl) pctEl.textContent=Math.round(p)+'%';
    if(bar){ bar.style.width=p+'%'; bar.setAttribute('aria-valuenow', String(p)); }
  }

  function extractWorkerError(result){
    if(!result) return null;
    if(result.error) return result.error;
    var candidates = [result.result, result.value, result.output, result.data];
    for(var i=0;i<candidates.length;i++){
      var c = candidates[i];
      if(c && typeof c === 'object' && c.error) return c.error;
      if(c && typeof c === 'object' && c.traceback) return c.traceback;
    }
    return null;
  }

  function waitForWorker(id, row, done){
    var retries=0;
    function tick(){
      apiGet('/api/workers/check/' + encodeURIComponent(id)).then(function(result){
        var workerError = extractWorkerError(result);
        if(workerError){ setProgress(row,'Fehler',100); showMessage('error', String(workerError)); done(false); return; }
        if(result.ready){ setProgress(row,'Fertig – Download startet…',100); done(true); return; }
        var p = result.progress !== undefined && result.progress !== null ? Number(result.progress) : 10;
        var text = result.status !== undefined && result.status !== null ? String(result.status) : 'Offline-Datei wird vorbereitet…';
        setProgress(row,text,p);
        window.setTimeout(tick,1200);
      }).catch(function(err){
        retries++;
        if(retries<3){ setProgress(row,'Warte auf Worker…',10); window.setTimeout(tick,1800); }
        else { setProgress(row,'Statusfehler',100); showMessage('error','Der WebODM-Worker hat mit einem Serverfehler geantwortet: ' + (err.message||String(err)) + '. Bitte app.log prüfen, falls der Fehler erneut auftritt.'); done(false); }
      });
    }
    tick();
  }

  function startExport(task,row){
    clearMessage();
    var btn=row.querySelector('.oe-export-btn');
    var include3d=include3dForRow(row) ? '1' : '0';
    var includePointCloud=includePointCloudForRow(row) ? '1' : '0';
    var pointCloudPoints=pointCloudPointsForRow(row);
    btn.disabled=true;
    btn.innerHTML='<i class="fa fa-spinner fa-spin"></i> Vorbereitung läuft';
    setProgress(row,'Starte Export…',2);
    apiGet('/api/plugins/offline_export/task/' + encodeURIComponent(task.id) + '/offline-export/start?include_3d=' + include3d + '&include_pointcloud=' + includePointCloud + '&pointcloud_points=' + encodeURIComponent(pointCloudPoints)).then(function(result){
      if(result.error){ throw new Error(result.error); }
      if(!result.celery_task_id){ throw new Error('Der Export hat keine Worker-ID zurückgegeben.'); }
      waitForWorker(result.celery_task_id,row,function(ok){
        btn.disabled=false;
        btn.innerHTML='<i class="fa fa-download"></i> Download vorbereiten';
        if(ok){
          var filename=encodeURIComponent(result.filename || 'webodm-offline-viewer.zip');
          window.location.href='/api/workers/get/' + encodeURIComponent(result.celery_task_id) + '?filename=' + filename;
        }
      });
    }).catch(function(err){
      btn.disabled=false;
      btn.innerHTML='<i class="fa fa-download"></i> Download vorbereiten';
      setProgress(row,'Fehler',100);
      showMessage('error',err.message||String(err));
    });
  }

  document.getElementById('refresh').addEventListener('click', function(){
    if(activeProject) openProject(activeProject); else loadProjects();
  });
  loadProjects();
})();
</script>
{% endblock %}