// Drag-drop wrapper for /api/capture/upload. Pre-fills space_id from
// localStorage.last_space_id (set when the space view renders).

export function attachDropzone(target) {
  function highlight(on) {
    target.style.outline = on ? '2px dashed var(--accent)' : '';
    target.style.outlineOffset = on ? '-6px' : '';
  }
  let counter = 0;   // dragenter/leave on children would otherwise toggle
  target.addEventListener('dragenter', e => { e.preventDefault(); counter++; if (counter === 1) highlight(true); });
  target.addEventListener('dragleave', () => { counter = Math.max(0, counter - 1); if (counter === 0) highlight(false); });
  target.addEventListener('dragover', e => { e.preventDefault(); });
  target.addEventListener('drop', async e => {
    e.preventDefault();
    counter = 0;
    highlight(false);
    const files = [...(e.dataTransfer?.files || [])];
    if (!files.length) return;
    const space_id = localStorage.getItem('last_space_id');
    if (!space_id) {
      alert('Open a space first so we know where to drop these.');
      return;
    }
    const token = localStorage.getItem('void_token') || '';
    let ok = 0, fail = 0;
    for (const f of files) {
      const fd = new FormData();
      fd.append('file', f);
      fd.append('space_id', space_id);
      try {
        const res = await fetch('/api/capture/upload', {
          method: 'POST',
          headers: { Authorization: 'Bearer ' + token },
          body: fd
        });
        if (res.ok) ok++; else fail++;
      } catch { fail++; }
    }
    const msg = `${ok} file${ok === 1 ? '' : 's'} queued` + (fail ? ` (${fail} failed)` : '');
    console.log(msg);
  });
}