{% extends "base.html" %}
{% block content %}
<div class="narrow extra-wide">
  <h1>Upload download options</h1>
  <p class="meta">Choose several files at once. Each can have its own version, operating system requirements and categories. Files are saved first; detailed metadata is checked afterwards by the background worker.</p>
  <form id="uploadForm" method="post" enctype="multipart/form-data" class="form">
    <section class="panel form">
      <h2>File group</h2>
      <label>Add to an existing file
        <select id="existingFile" name="existing_file_id"><option value="">Create new file group</option>{% for f in existing %}<option value="{{f.id}}" {% if preselect_existing|string==f.id|string %}selected{% endif %}>{{f.display_name}}</option>{% endfor %}</select>
      </label>
      <div class="twocol tight">
        <label>Display name<input id="displayName" name="display_name" placeholder="e.g. CLC Utility"></label>
        <label>Logical name<input id="logicalName" name="logical_name" placeholder="Stable internal name"></label>
      </div>
      <label>Keywords<input id="groupKeywords" name="keywords" placeholder="utility, driver, manual"></label>
      <label>Notes<textarea id="groupNotes" name="notes" rows="4"></textarea></label>
      <label>Custom file icon / image<input type="file" name="icon" accept="image/png,image/jpeg,image/webp,image/gif,image/x-icon,.ico"></label>
    </section>

    <section class="panel form">
      <h2>Files / versions</h2>
      <label>Select one or more files
        <input id="uploadFiles" type="file" multiple>
        <small>Files are uploaded in 8 MB chunks. Detailed metadata is not parsed during the upload.</small>
      </label>
      <div id="overallStatus" class="meta">No files selected.</div>
      <div id="buildRows" class="build-list"></div>
    </section>

    <input type="hidden" name="batch_json" id="batchJson">
    <button class="btn" id="saveButton" type="submit" disabled>Save download options</button>
  </form>
</div>
{% endblock %}
{% block scripts %}
<script>
const filesInput=document.getElementById('uploadFiles');
const rows=document.getElementById('buildRows');
const overall=document.getElementById('overallStatus');
const saveButton=document.getElementById('saveButton');
const batchJson=document.getElementById('batchJson');
const CHUNK_SIZE=8*1024*1024;
const CATEGORY_OPTIONS=[{% for c in categories %}{id:{{c.id}},name:{{c.name|tojson}}},{% endfor %}];
const EXISTING_FILES = {
{% for f in existing %}
{{f.id|tojson}}: {display_name:{{f.display_name|tojson}},logical_name:{{f.logical_name|tojson}},notes:{{f.notes|tojson}},keywords:{{f.keywords|tojson}}}{% if not loop.last %},{% endif %}
{% endfor %}
};
let staged=[];
function pct(done,total){return total?Math.min(100,Math.round(done*100/total)):0;}
function esc(s){return String(s??'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]));}
function categoriesHtml(){return CATEGORY_OPTIONS.map(c=>`<option value="${c.id}">${esc(c.name)}</option>`).join('');}
function applyExisting(){const id=document.getElementById('existingFile').value;const f=EXISTING_FILES[id];if(!f)return;document.getElementById('displayName').value=f.display_name||'';document.getElementById('logicalName').value=f.logical_name||'';document.getElementById('groupNotes').value=f.notes||'';document.getElementById('groupKeywords').value=f.keywords||'';}
document.getElementById('existingFile').addEventListener('change',applyExisting);
if(document.getElementById('existingFile').value)applyExisting();
function renderRow(item,index){
  const s=item.suggestions||{};
  const card=document.createElement('div'); card.className='build-card'; card.dataset.index=index;
  card.innerHTML=`
    <div class="build-head"><div><strong>${esc(item.original_name)}</strong><div class="meta">${(item.size_bytes/1048576).toFixed(1)} MB · metadata queued after save</div></div><label class="check"><input type="radio" name="latestChoice" ${index===0?'checked':''}> Latest/default</label></div>
    <div class="twocol tight"><label>Version label<input class="v-label" value="${esc(s.version_label||'')}"></label><label>Categories<select class="v-categories" multiple size="4">${categoriesHtml()}</select></label></div>
    <div class="platform-editor"><h3>Operating system</h3>
      <div class="platform-row"><label class="check"><input class="v-win" type="checkbox" ${s.windows_supported?'checked':''}> Windows</label><input class="v-winver" placeholder="e.g. Windows 11 x64"></div>
      <div class="platform-row"><label class="check"><input class="v-mac" type="checkbox" ${s.mac_supported?'checked':''}> macOS</label><input class="v-macver" placeholder="e.g. macOS 14+"></div>
      <div class="platform-row"><label class="check"><input class="v-linux" type="checkbox" ${s.linux_supported?'checked':''}> Linux</label><input class="v-linuxver" placeholder="e.g. Ubuntu 24.04+"></div>
    </div>`;
  rows.appendChild(card);
}
async function stageFile(file,fileIndex,totalFiles){
  overall.textContent=`Uploading ${fileIndex+1} of ${totalFiles}: ${file.name}`;
  let r=await fetch('{{url_for("start_inspection")}}',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({filename:file.name,client_modified:file.lastModified?new Date(file.lastModified).toISOString():''})});
  let data=await r.json(); if(!r.ok||!data.ok)throw new Error(data.error||'Could not start upload');
  const token=data.token,totalChunks=Math.ceil(file.size/CHUNK_SIZE)||1;
  for(let i=0;i<totalChunks;i++){
    const start=i*CHUNK_SIZE,end=Math.min(file.size,start+CHUNK_SIZE),fd=new FormData();
    fd.append('index',String(i)); fd.append('chunk',file.slice(start,end),'chunk.bin');
    overall.textContent=`Uploading ${fileIndex+1} of ${totalFiles}: ${file.name} — ${pct(end,file.size)}%`;
    r=await fetch(`/admin/upload-chunk/${token}`,{method:'POST',body:fd}); data=await r.json();
    if(!r.ok||!data.ok)throw new Error(data.error||`Chunk ${i+1} failed`);
  }
  r=await fetch(`/admin/finish-inspection/${token}`,{method:'POST'}); data=await r.json();
  if(!r.ok||!data.ok)throw new Error(data.error||'Could not finish upload');
  return {token,original_name:file.name,size_bytes:file.size,suggestions:data.suggestions||{}};
}
filesInput.addEventListener('change',async()=>{
  staged=[]; rows.innerHTML=''; saveButton.disabled=true;
  const files=[...filesInput.files]; if(!files.length){overall.textContent='No files selected.';return;}
  try{
    for(let i=0;i<files.length;i++){
      const item=await stageFile(files[i],i,files.length); staged.push(item); renderRow(item,staged.length-1);
      if(i===0){const s=item.suggestions||{}; if(!document.getElementById('displayName').value)document.getElementById('displayName').value=s.group_display_name||''; if(!document.getElementById('logicalName').value)document.getElementById('logicalName').value=s.logical_name||'';}
    }
    overall.textContent=`${staged.length} file(s) uploaded and ready to save. Detailed metadata will run in the background.`;
    saveButton.disabled=false;
  }catch(e){overall.textContent='Upload failed: '+e.message; saveButton.disabled=staged.length===0;}
});
document.getElementById('uploadForm').addEventListener('submit',e=>{
  if(!staged.length){e.preventDefault();alert('Choose and upload at least one file.');return;}
  const cards=[...document.querySelectorAll('.build-card')];
  const payload=cards.map((card,i)=>({
    token:staged[i].token,
    version_label:card.querySelector('.v-label').value.trim(),
    windows_supported:card.querySelector('.v-win').checked,windows_version:card.querySelector('.v-winver').value.trim(),
    mac_supported:card.querySelector('.v-mac').checked,mac_version:card.querySelector('.v-macver').value.trim(),
    linux_supported:card.querySelector('.v-linux').checked,linux_version:card.querySelector('.v-linuxver').value.trim(),
    category_ids:[...card.querySelector('.v-categories').selectedOptions].map(o=>Number(o.value)),
    is_latest:card.querySelector('input[type=radio]').checked
  }));
  batchJson.value=JSON.stringify(payload); saveButton.disabled=true; saveButton.textContent='Saving…';
});
</script>
{% endblock %}