akai-utils/web/ui/app.js

// AKAI Utils — Web UI
const API = '/api';

let eventSource = null;

// ─── Search ────────────────────────────────────────────────────────

document.getElementById('search-btn').addEventListener('click', doSearch);
document.getElementById('search-query').addEventListener('keydown', e => {
  if (e.key === 'Enter') doSearch();
});
document.getElementById('search-dl-all').addEventListener('click', downloadTop10);

async function doSearch() {
  const q = document.getElementById('search-query').value;
  const filter = document.getElementById('search-filter').value;
  const status = document.getElementById('search-status');
  const results = document.getElementById('search-results');

  status.textContent = 'Searching...';
  results.innerHTML = '';

  try {
    const params = new URLSearchParams();
    if (q) params.set('q', q);
    if (filter) params.set('filter', filter);
    params.set('limit', '50');

    const resp = await fetch(`${API}/search?${params}`);
    const data = await resp.json();
    status.textContent = `Found ${data.length} items`;
    renderResults(data);
  } catch (e) {
    status.textContent = 'Search failed: ' + e.message;
  }
}

function renderResults(items) {
  const container = document.getElementById('search-results');
  container.innerHTML = items.map(r => `
    <div class="result-card">
      <div class="title">${esc(r.title)}</div>
      <div class="meta">
        <span>${r.identifier}</span>
        <span>${r.downloads.toLocaleString()} downloads</span>
      </div>
      <div class="actions">
        <button class="btn-dl" onclick="downloadItem('${esc(r.identifier)}')">Download ISOs</button>
        <button class="btn-list" onclick="listItem('${esc(r.identifier)}')">List Files</button>
      </div>
      <div id="list-${sanitize(r.identifier)}" class="file-list"></div>
    </div>
  `).join('');
}

async function downloadTop10() {
  const q = document.getElementById('search-query').value;
  const filter = document.getElementById('search-filter').value;
  const params = new URLSearchParams();
  if (q) params.set('q', q);
  if (filter) params.set('filter', filter);
  params.set('limit', '10');

  try {
    const resp = await fetch(`${API}/search?${params}`);
    const data = await resp.json();
    for (const item of data) {
      await downloadItem(item.identifier);
    }
  } catch (e) {
    alert('Bulk download failed: ' + e.message);
  }
}

// ─── List ──────────────────────────────────────────────────────────

async function listItem(identifier) {
  const el = document.getElementById('list-' + sanitize(identifier));
  el.innerHTML = 'Loading...';

  try {
    const resp = await fetch(`${API}/list?identifier=${encodeURIComponent(identifier)}`);
    const files = await resp.json();
    if (!Array.isArray(files) || files.length === 0) {
      el.innerHTML = '<span class="no-files">No ISO files</span>';
      return;
    }
    el.innerHTML = files.map(f =>
      `<div class="file-row">${esc(f.name)} <span class="file-size">${f.size || '?'}</span></div>`
    ).join('');
  } catch (e) {
    el.innerHTML = 'Failed: ' + e.message;
  }
}

// ─── Download ──────────────────────────────────────────────────────

async function downloadItem(identifier) {
  try {
    const resp = await fetch(`${API}/download?identifier=${encodeURIComponent(identifier)}&dir=./output/isos`);
    const data = await resp.json();
    if (data.error) {
      alert(data.error);
      return;
    }
    startProgressStream();
  } catch (e) {
    alert('Download failed: ' + e.message);
  }
}

function startProgressStream() {
  if (eventSource) eventSource.close();
  eventSource = new EventSource(`${API}/progress`);

  eventSource.onmessage = function(e) {
    const jobs = JSON.parse(e.data);
    renderDownloadQueue(jobs);

    const allDone = Object.values(jobs).every(j => j.done || j.error);
    if (allDone && Object.keys(jobs).length > 0) {
      eventSource.close();
      eventSource = null;
    }
  };

  eventSource.onerror = function() {
    if (eventSource) {
      eventSource.close();
      eventSource = null;
    }
  };
}

function renderDownloadQueue(jobs) {
  const container = document.getElementById('download-queue');
  const count = document.getElementById('dl-count');
  const entries = Object.values(jobs);
  count.textContent = `(${entries.length})`;

  container.innerHTML = entries.map(j => {
    const pct = j.total_size > 0 ? Math.round(j.downloaded / j.total_size * 100) : 0;
    let cls = '';
    if (j.error) cls = 'error';
    else if (j.done) cls = 'done';

    let info = '';
    if (j.error) info = j.error;
    else if (j.done) info = formatBytes(j.total_size) + ' — complete';
    else info = formatBytes(j.downloaded) + ' / ' + formatBytes(j.total_size) +
                (j.speed > 0 ? ' — ' + formatBytes(j.speed) + '/s' : '');

    return `
      <div class="dl-item">
        <div class="dl-name">${esc(j.file_name)}</div>
        <div class="dl-bar"><div class="dl-bar-fill ${cls}" style="width:${pct}%"></div></div>
        <div class="dl-info"><span>${info}</span><span>${j.done && !j.error ? '✓' : pct + '%'}</span></div>
      </div>`;
  }).join('');
}

// ─── Extract ───────────────────────────────────────────────────────

document.getElementById('extract-btn').addEventListener('click', doExtract);

async function doExtract() {
  const isoDir = document.getElementById('extract-iso-dir').value;
  const wavDir = document.getElementById('extract-wav-dir').value;
  const status = document.getElementById('extract-status');

  status.textContent = 'Extracting... (check server console for output)';
  status.style.color = 'var(--yellow)';

  try {
    const resp = await fetch(`${API}/extract?dir=${encodeURIComponent(isoDir)}&out=${encodeURIComponent(wavDir)}`);
    const data = await resp.json();
    status.textContent = data.message || 'Extraction complete';
    status.style.color = 'var(--green)';
  } catch (e) {
    status.textContent = 'Extraction failed: ' + e.message;
    status.style.color = 'var(--accent)';
  }
}

// ─── Helpers ──────────────────────────────────────────────────────

function esc(s) {
  if (!s) return '';
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
          .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

function sanitize(s) {
  return s.replace(/[^a-zA-Z0-9_-]/g, '_');
}

function formatBytes(bytes) {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

// Initial load
doSearch();