{{define "content"}}

<section class="panel">
  <h2>Mounted Disk</h2>
  <div class="panel-body">
    <div class="path-input-row">
      <input class="form-input" type="text" id="mountPath" placeholder="/Volumes/JUKEBOX or E:\\">
      <button type="button" class="button-primary" onclick="pickMountPath()">+</button>
      <button type="button" class="button-secondary" onclick="refreshSelectedDisk()">Refresh</button>
    </div>
    <div class="form-hint">Choose the directory where the removable disk is mounted. The app works with one selected disk at a time in standalone mode.</div>
  </div>
</section>

<div id="diskState"></div>

<script>
const selectedDisk = { info: null };
const taskState = new Map();
const taskPollers = new Map();

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

function badgeClass(state) {
  return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
}

function badgeLabel(state) {
  return ({ absent: 'Directory unavailable', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
}

function fmtSpeed(bps) {
  if (!bps) return '';
  if (bps >= 1e9) return (bps / 1e9).toFixed(1) + ' GB/s';
  if (bps >= 1e6) return (bps / 1e6).toFixed(1) + ' MB/s';
  if (bps >= 1e3) return (bps / 1e3).toFixed(0) + ' KB/s';
  return bps + ' B/s';
}

function fmtETA(sec) {
  if (!sec || sec <= 0) return '';
  if (sec >= 3600) return Math.floor(sec / 3600) + ' h ' + Math.floor((sec % 3600) / 60) + ' min';
  if (sec >= 60) return Math.floor(sec / 60) + ' min';
  return sec + ' s';
}

function fmtDateTime(value) {
  if (!value) return 'Never';
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleString('en-US', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
}

function taskMeta(task) {
  if (!task) return '';
  return [fmtSpeed(task.speed_bps), task.eta_sec ? 'ETA: ' + fmtETA(task.eta_sec) : ''].filter(Boolean).join(' · ');
}

function renderDisk() {
  const root = document.getElementById('diskState');
  const disk = selectedDisk.info;
  if (!disk) {
    root.innerHTML = `
      <section class="panel">
        <div class="panel-body text-muted">Choose a mounted disk directory to inspect it.</div>
      </section>
    `;
    return;
  }

  const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
  const progress = activeTask ? activeTask.progress : 0;
  const message = activeTask ? (activeTask.message || 'Preparing...') : '';
  const meta = activeTask ? taskMeta(activeTask) : '';
  const isKnown = disk.state === 'known';
  const isForeign = disk.state === 'foreign';
  const hasCapacity = disk.state !== 'absent';

  root.innerHTML = `
    <section class="panel disk-card">
      <h2>${escapeHTML(disk.mount_path)}</h2>
      <table class="kv-table">
        <tbody>
          <tr>
            <th>Status</th>
            <td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
          </tr>
          <tr>
            <th>Disk ID</th>
            <td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td>
          </tr>
          <tr>
            <th>Total capacity</th>
            <td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
          </tr>
          <tr>
            <th>Free space</th>
            <td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td>
          </tr>
          <tr>
            <th>Last copied</th>
            <td>${fmtDateTime(disk.last_copied_at)}</td>
          </tr>
        </tbody>
      </table>
      ${activeTask ? `
        <div class="panel-body progress-wrap">
          <div class="progress-bar-bg">
            <div class="progress-bar-fill" style="width:${progress}%"></div>
          </div>
          <div class="progress-label">${escapeHTML(message)}</div>
          <div class="progress-label">${escapeHTML(meta)}</div>
        </div>
      ` : ''}
      <div class="btn-row">
        ${isKnown ? `
          <button class="button-danger" data-action="start-copy" data-mode="replace" ${activeTask ? 'disabled' : ''}>Replace media</button>
          <button class="button-primary" data-action="start-copy" data-mode="add" ${activeTask ? 'disabled' : ''}>Add media</button>
          <button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy">Cancel</button>
        ` : ''}
        ${isForeign ? `
          <button class="button-secondary" data-action="init-disk">Initialize disk</button>
        ` : ''}
      </div>
    </section>
  `;
}

function stopTaskPoll(taskID) {
  if (!taskPollers.has(taskID)) return;
  clearInterval(taskPollers.get(taskID));
  taskPollers.delete(taskID);
}

function startTaskPoll(taskID) {
  if (!taskID || taskPollers.has(taskID)) return;
  taskPollers.set(taskID, setInterval(() => pollTask(taskID), 1500));
  pollTask(taskID);
}

async function pickFolder() {
  const response = await fetch('/api/system/pick-folder', { method: 'POST' });
  const payload = await response.json();
  if (!response.ok) {
    throw new Error(payload.error || 'Failed to choose folder');
  }
  return payload.path || '';
}

async function pickMountPath() {
  try {
    const path = await pickFolder();
    if (!path) return;
    document.getElementById('mountPath').value = path;
    localStorage.setItem('jukebox.selectedMountPath', path);
    await refreshSelectedDisk();
  } catch (error) {
    toast(error.message || 'Failed to choose folder', 'error');
  }
}

async function refreshSelectedDisk() {
  const mountPath = document.getElementById('mountPath').value.trim();
  if (!mountPath) {
    selectedDisk.info = null;
    renderDisk();
    return;
  }

  localStorage.setItem('jukebox.selectedMountPath', mountPath);
  try {
    const response = await fetch('/api/disks/probe?mount_path=' + encodeURIComponent(mountPath));
    const payload = await response.json();
    if (!response.ok) {
      toast(payload.error || 'Failed to inspect directory', 'error');
      return;
    }
    selectedDisk.info = payload;
    renderDisk();

    if (payload.active_task_id) {
      for (const taskID of Array.from(taskPollers.keys())) {
        if (taskID !== payload.active_task_id) {
          stopTaskPoll(taskID);
          taskState.delete(taskID);
        }
      }
      startTaskPoll(payload.active_task_id);
    } else {
      for (const taskID of Array.from(taskPollers.keys())) {
        stopTaskPoll(taskID);
        taskState.delete(taskID);
      }
    }
  } catch (error) {
    toast('Network error', 'error');
  }
}

async function pollTask(taskID) {
  try {
    const response = await fetch('/api/tasks/' + taskID);
    if (!response.ok) return;
    const task = await response.json();
    taskState.set(taskID, task);
    renderDisk();

    if (['success', 'failed', 'canceled'].includes(task.status)) {
      stopTaskPoll(taskID);
      taskState.delete(taskID);
      if (task.status === 'success') toast(task.message || 'Done', 'ok');
      if (task.status === 'failed') toast('Error: ' + task.error, 'error');
      if (task.status === 'canceled') toast('Copy canceled', 'error');
      refreshSelectedDisk();
    }
  } catch (error) {}
}

async function startCopy(mode) {
  const mountPath = document.getElementById('mountPath').value.trim();
  if (!mountPath) return;
  try {
    const response = await fetch('/api/disks/copy/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mount_path: mountPath, mode })
    });
    const payload = await response.json();
    if (!response.ok) {
      toast(payload.error || 'Failed to start copy', 'error');
      return;
    }
    startTaskPoll(payload.task_id);
    refreshSelectedDisk();
  } catch (error) {
    toast('Network error', 'error');
  }
}

async function cancelCopy() {
  if (!selectedDisk.info || !selectedDisk.info.disk_id) return;
  try {
    await fetch('/api/disks/' + encodeURIComponent(selectedDisk.info.disk_id) + '/copy/cancel', { method: 'POST' });
    toast('Canceling...', 'ok');
  } catch (error) {
    toast('Network error', 'error');
  }
}

async function initDisk() {
  const mountPath = document.getElementById('mountPath').value.trim();
  if (!mountPath) return;
  try {
    const response = await fetch('/api/disks/init', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ mount_path: mountPath })
    });
    const payload = await response.json();
    if (!response.ok) {
      toast(payload.error || 'Failed to initialize disk', 'error');
      return;
    }
    toast('Disk initialized', 'ok');
    refreshSelectedDisk();
  } catch (error) {
    toast('Network error', 'error');
  }
}

document.getElementById('diskState').addEventListener('click', (event) => {
  const button = event.target.closest('button[data-action]');
  if (!button) return;

  const action = button.dataset.action;
  if (action === 'start-copy') startCopy(button.dataset.mode || 'add');
  if (action === 'cancel-copy') cancelCopy();
  if (action === 'init-disk') initDisk();
});

const savedMountPath = localStorage.getItem('jukebox.selectedMountPath');
if (savedMountPath) {
  document.getElementById('mountPath').value = savedMountPath;
  refreshSelectedDisk();
} else {
  renderDisk();
}
</script>
{{end}}