{{define "content"}}
<form id="settingsForm" onsubmit="saveSettings(event)">

  <section class="panel">
    <h2>Copy Sources</h2>
    <div class="panel-body">
      <div class="form-hint">Add one or more root folders with source files. After that, expand each root and enable or disable individual nested folders with checkboxes.</div>
    </div>
    <div class="btn-row">
      <input class="form-input" type="text" id="newSourcePath" placeholder="/media/movies">
      <button type="button" class="button-primary" onclick="addSourceRoot()">Add</button>
      <button type="button" class="button-secondary button-sm" onclick="reloadAllSourceTrees()">Refresh trees</button>
    </div>
    <div class="source-list">
      <div class="source-tree" id="sourceTree">
        <div class="text-muted source-tree-empty">No source folders added yet.</div>
      </div>
    </div>
  </section>

  <section class="panel">
    <h2>Copy Settings</h2>
    <div class="form-body">

      <div class="form-group">
        <label class="form-label" for="reserveGB">Reserved free space on disk (GB)</label>
        <input class="form-input" type="number" id="reserveGB" min="0" max="1000" step="0.5" value="2">
        <span class="form-hint">Copying will stop when free space falls below this value.</span>
      </div>

      <div class="form-group">
        <label class="form-label" for="fileSelectMode">Files to copy</label>
        <select class="form-select" id="fileSelectMode" style="width:auto;max-width:420px">
          <option value="new">Only new files not copied to this disk before</option>
          <option value="all">All matching files</option>
        </select>
        <span class="form-hint">The new-only mode skips files already copied to this disk, even if they were later removed.</span>
      </div>

      <div class="form-group" id="mediaTypesGroup">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
          <label class="form-label" style="margin:0">Allowed file types</label>
          <button type="button" class="button-secondary button-sm" id="editAllowedFilesButton" onclick="toggleAllowedFilesEditor()">Edit list</button>
        </div>
        <div style="display:grid;gap:8px">
          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
            <input type="checkbox" id="mediaTypeAudio" style="width:15px;height:15px;accent-color:var(--accent)">
            <span>
              <strong>Audio</strong>
              <span class="form-hint" id="mediaTypeAudioHint" style="display:block"></span>
            </span>
          </label>
          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
            <input type="checkbox" id="mediaTypeVideo" style="width:15px;height:15px;accent-color:var(--accent)">
            <span>
              <strong>Video</strong>
              <span class="form-hint" id="mediaTypeVideoHint" style="display:block"></span>
            </span>
          </label>
          <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
            <input type="checkbox" id="mediaTypePhoto" style="width:15px;height:15px;accent-color:var(--accent)">
            <span>
              <strong>Photo</strong>
              <span class="form-hint" id="mediaTypePhotoHint" style="display:block"></span>
            </span>
          </label>
        </div>
        <span class="form-hint">Built into the app by default: audio, video, and photo. New installations start with only audio and video enabled.</span>
      </div>

      <div class="form-group" id="extensionsGroup" style="display:none">
        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
          <label class="form-label" for="allowedExtensions" style="margin:0">Allowed extensions</label>
          <button type="button" class="button-secondary button-sm" onclick="toggleAllowedFilesEditor()">Use media types</button>
        </div>
        <textarea class="form-input" id="allowedExtensions" rows="5" placeholder=".mp3, .flac, .mp4"></textarea>
        <span class="form-hint">One extension per line or separated by commas. You can write <code>mp3</code> or <code>.mp3</code>.</span>
      </div>

      <div class="form-group">
        <label class="form-label" for="destFolder">Destination folder on disk</label>
        <input class="form-input" type="text" id="destFolder" placeholder="media" style="width:200px">
        <span class="form-hint">Files will be copied into this subfolder while preserving the selected source structure. The disk root and <code>.jukebox</code> are never allowed here.</span>
      </div>

      <div class="form-group">
        <label class="form-label" for="overwriteMode">Default write mode</label>
        <select class="form-select" id="overwriteMode" style="width:auto;max-width:420px">
          <option value="skip">Keep existing files</option>
          <option value="delete">Replace destination folder contents</option>
        </select>
        <span class="form-hint">This is used for automatic copy runs. Manual dashboard actions can override it.</span>
      </div>

    </div>
  </section>

  <section class="panel">
    <h2>Automation</h2>
    <div class="form-body">
      <div class="form-group">
        <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
          <input type="checkbox" id="autoCopy" style="width:15px;height:15px;accent-color:var(--accent)">
          <span class="form-label" style="margin:0">Automatic copy</span>
        </label>
        <span class="form-hint">Start copying automatically when a known disk is detected.</span>
      </div>
    </div>
  </section>

  <div style="display:flex;gap:8px;margin-bottom:24px">
    <button type="submit" class="button-primary">Save settings</button>
    <button type="button" class="button-secondary" onclick="loadSettings()">Reset</button>
  </div>

</form>

<script>
const sourceTree = new Map();
const expandedNodes = new Set();
const loadingNodes = new Set();
const builtInMediaTypes = {
  audio: ['.aac', '.aif', '.aiff', '.alac', '.ape', '.flac', '.m4a', '.mp2', '.mp3', '.ogg', '.opus', '.wav', '.wma'],
  video: ['.3gp', '.avi', '.m2ts', '.m4v', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.mts', '.ts', '.webm', '.wmv'],
  photo: ['.bmp', '.gif', '.heic', '.heif', '.jpeg', '.jpg', '.png', '.tif', '.tiff', '.webp'],
};
let sourceRoots = [];
let sourceConfig = {};
let allowedFilesMode = 'media_types';

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

function pathSegments(path) {
  return String(path || '').split(/[\\/]+/).filter(Boolean);
}

function nodeName(path) {
  const parts = pathSegments(path);
  return parts.length ? parts[parts.length - 1] : path;
}

function normalizeComparePath(path) {
  return String(path || '').replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase();
}

function isSamePath(a, b) {
  return normalizeComparePath(a) === normalizeComparePath(b);
}

function isPathWithin(base, candidate) {
  const baseNorm = normalizeComparePath(base);
  const candidateNorm = normalizeComparePath(candidate);
  return candidateNorm === baseNorm || candidateNorm.startsWith(baseNorm + '/');
}

function parentPath(path) {
  const value = String(path || '').replace(/[\\/]+$/, '');
  const slash = Math.max(value.lastIndexOf('/'), value.lastIndexOf('\\'));
  if (slash < 0) return '';
  if (slash === 2 && /^[A-Za-z]:/.test(value)) return value.slice(0, slash + 1);
  if (slash === 0) return value.slice(0, 1);
  return value.slice(0, slash);
}

function relativeDepth(root, path) {
  if (isSamePath(root, path)) return 0;
  const rootParts = pathSegments(root);
  const pathParts = pathSegments(path);
  return Math.max(0, pathParts.length - rootParts.length);
}

function effectiveSourceState(path) {
  let current = path;
  while (true) {
    if (Object.prototype.hasOwnProperty.call(sourceConfig, current)) {
      return sourceConfig[current];
    }
    current = parentPath(current);
    if (!current) return true;
  }
}

function collectSourcesForSave() {
  const items = [];
  const seen = new Set();

  sourceRoots.forEach((root) => {
    items.push({ path: root, enabled: effectiveSourceState(root), root: true });
    seen.add(normalizeComparePath(root));
  });

  Object.entries(sourceConfig).forEach(([path, enabled]) => {
    const key = normalizeComparePath(path);
    if (seen.has(key)) return;
    items.push({ path, enabled, root: false });
  });

  return items.sort((a, b) => a.path.localeCompare(b.path));
}

async function loadSourceChildren(path) {
  if (!path || loadingNodes.has(path)) return;
  loadingNodes.add(path);
  renderSources();

  try {
    const response = await fetch('/api/sources?path=' + encodeURIComponent(path));
    if (!response.ok) return;
    const payload = await response.json();
    sourceTree.set(path, payload.items || []);
  } catch (error) {
  } finally {
    loadingNodes.delete(path);
    renderSources();
  }
}

async function ensureExpanded(path) {
  expandedNodes.add(path);
  if (!sourceTree.has(path)) {
    await loadSourceChildren(path);
    return;
  }
  renderSources();
}

function toggleSource(path, checked) {
  sourceConfig[path] = checked;
  renderSources();
}

function removeRoot(path) {
  sourceRoots = sourceRoots.filter((root) => !isSamePath(root, path));
  sourceTree.delete(path);
  expandedNodes.delete(path);
  loadingNodes.delete(path);

  Object.keys(sourceConfig).forEach((key) => {
    if (isPathWithin(path, key)) {
      delete sourceConfig[key];
    }
  });

  renderSources();
}

async function addSourceRoot() {
  const input = document.getElementById('newSourcePath');
  const path = (input?.value || '').trim();
  if (!path) return;
  if (sourceRoots.some((root) => isSamePath(root, path))) {
    toast('This source folder is already added', 'error');
    return;
  }
  sourceRoots.push(path);
  sourceRoots.sort((a, b) => a.localeCompare(b));
  sourceConfig[path] = true;
  expandedNodes.add(path);
  if (input) input.value = '';
  await loadSourceChildren(path);
}

async function reloadAllSourceTrees() {
  const roots = [...sourceRoots];
  sourceTree.clear();
  for (const root of roots) {
    if (expandedNodes.has(root)) {
      await loadSourceChildren(root);
    }
  }
  renderSources();
}

function renderSourceNodes(root, parentPathValue) {
  const items = sourceTree.get(parentPathValue) || [];
  return items.map((item) => {
    const checked = effectiveSourceState(item.path);
    const expanded = expandedNodes.has(item.path);
    const childrenKnown = sourceTree.has(item.path);
    const children = childrenKnown ? sourceTree.get(item.path) : [];
    const hasChildren = !childrenKnown || children.length > 0;
    const pad = 16 + (relativeDepth(root, item.path) + 1) * 20;

    return `
      <div class="source-node">
        <div class="source-row" style="padding-left:${pad}px">
          <button
            type="button"
            class="source-toggle ${hasChildren ? '' : 'source-toggle-empty'}"
            data-action="toggle-expand"
            data-path="${escapeHTML(item.path)}"
            ${hasChildren ? '' : 'tabindex="-1" aria-hidden="true"'}
          >${expanded ? '▾' : '▸'}</button>
          <input class="source-check" type="checkbox" data-action="toggle-check" data-path="${escapeHTML(item.path)}" ${checked ? 'checked' : ''}>
          <div class="source-label">
            <span class="source-item-name">${escapeHTML(item.name)}</span>
            <span class="source-item-path">${escapeHTML(item.path)}</span>
          </div>
        </div>
        ${expanded && loadingNodes.has(item.path) ? '<div class="source-loading">Loading...</div>' : ''}
        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(root, item.path)}</div>` : ''}
      </div>
    `;
  }).join('');
}

function renderSources() {
  const el = document.getElementById('sourceTree');
  if (!sourceRoots.length) {
    el.innerHTML = '<div class="text-muted source-tree-empty">No source folders added yet.</div>';
    return;
  }

  el.innerHTML = sourceRoots.map((root) => {
    const checked = effectiveSourceState(root);
    const expanded = expandedNodes.has(root);
    const childrenKnown = sourceTree.has(root);
    const children = childrenKnown ? sourceTree.get(root) : [];
    const hasChildren = !childrenKnown || children.length > 0;

    return `
      <div class="source-root-card">
        <div class="source-row source-root-row">
          <button
            type="button"
            class="source-toggle ${hasChildren ? '' : 'source-toggle-empty'}"
            data-action="toggle-expand"
            data-path="${escapeHTML(root)}"
            ${hasChildren ? '' : 'tabindex="-1" aria-hidden="true"'}
          >${expanded ? '▾' : '▸'}</button>
          <input class="source-check" type="checkbox" data-action="toggle-check" data-path="${escapeHTML(root)}" ${checked ? 'checked' : ''}>
          <div class="source-label">
            <div class="source-root-title">
              <span class="source-item-name">${escapeHTML(nodeName(root))}</span>
              <span class="source-root-badge">Root</span>
            </div>
            <span class="source-item-path">${escapeHTML(root)}</span>
          </div>
          <button type="button" class="button-secondary button-sm" data-action="remove-root" data-path="${escapeHTML(root)}">Remove</button>
        </div>
        ${expanded && loadingNodes.has(root) ? '<div class="source-loading">Loading...</div>' : ''}
        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(root, root)}</div>` : ''}
      </div>
    `;
  }).join('');
}

function deriveRootsFromSources(sources) {
  const explicitRoots = sources.filter((source) => source.root).map((source) => source.path);
  if (explicitRoots.length) {
    return explicitRoots;
  }

  return sources
    .map((source) => source.path)
    .filter((path, index, all) => !all.some((other, otherIndex) => otherIndex !== index && isPathWithin(other, path) && !isSamePath(other, path)));
}

function defaultAllowedExtensions() {
  return [...builtInMediaTypes.audio, ...builtInMediaTypes.video];
}

function parseExtensionsInput(value) {
  const items = String(value || '')
    .split(/[\n,]+/)
    .map((item) => item.trim())
    .filter(Boolean);

  const result = [];
  const seen = new Set();
  items.forEach((item) => {
    let value = item.toLowerCase().replace(/^\*/, '');
    if (!value.startsWith('.')) value = '.' + value;
    if (!/^\.[a-z0-9]+$/.test(value)) return;
    if (seen.has(value)) return;
    seen.add(value);
    result.push(value);
  });
  return result;
}

function formatExtensionsInput(items) {
  return (items || []).join('\n');
}

function selectedMediaTypes() {
  return ['audio', 'video', 'photo'].filter((name) => {
    const id = 'mediaType' + name.charAt(0).toUpperCase() + name.slice(1);
    return document.getElementById(id).checked;
  });
}

function updateAllowedFilesModeUI() {
  document.getElementById('mediaTypesGroup').style.display = allowedFilesMode === 'media_types' ? '' : 'none';
  document.getElementById('extensionsGroup').style.display = allowedFilesMode === 'extensions' ? '' : 'none';
}

function toggleAllowedFilesEditor() {
  allowedFilesMode = allowedFilesMode === 'extensions' ? 'media_types' : 'extensions';
  updateAllowedFilesModeUI();
}

function renderMediaTypeHints() {
  document.getElementById('mediaTypeAudioHint').textContent = builtInMediaTypes.audio.join(', ');
  document.getElementById('mediaTypeVideoHint').textContent = builtInMediaTypes.video.join(', ');
  document.getElementById('mediaTypePhotoHint').textContent = builtInMediaTypes.photo.join(', ');
}

async function loadSettings() {
  try {
    const r = await fetch('/api/config');
    if (!r.ok) return;
    const cfg = await r.json();
    document.getElementById('reserveGB').value      = cfg.reserve_free_gb ?? 2;
    document.getElementById('destFolder').value     = cfg.dest_folder || 'media';
    document.getElementById('fileSelectMode').value = cfg.file_select_mode || 'new';
    document.getElementById('overwriteMode').value  = cfg.overwrite_mode || 'skip';
    document.getElementById('autoCopy').checked     = !!cfg.auto_copy;
    allowedFilesMode = cfg.allowed_files_mode || 'media_types';
    document.getElementById('mediaTypeAudio').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('audio');
    document.getElementById('mediaTypeVideo').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('video');
    document.getElementById('mediaTypePhoto').checked = (cfg.enabled_media_types || []).includes('photo');
    document.getElementById('allowedExtensions').value = formatExtensionsInput((cfg.allowed_extensions || []).length ? cfg.allowed_extensions : defaultAllowedExtensions());
    updateAllowedFilesModeUI();

    sourceConfig = {};
    (cfg.sources || []).forEach((source) => {
      sourceConfig[source.path] = !!source.enabled;
    });
    sourceRoots = deriveRootsFromSources(cfg.sources || []).sort((a, b) => a.localeCompare(b));
    expandedNodes.clear();
    sourceTree.clear();
    await reloadAllSourceTrees();
  } catch (error) {}
}

async function saveSettings(event) {
  event.preventDefault();

  const body = {
    reserve_free_gb:   parseFloat(document.getElementById('reserveGB').value) || 2,
    dest_folder:       document.getElementById('destFolder').value.trim() || 'media',
    file_select_mode:  document.getElementById('fileSelectMode').value,
    allowed_files_mode: allowedFilesMode,
    enabled_media_types: selectedMediaTypes(),
    allowed_extensions: parseExtensionsInput(document.getElementById('allowedExtensions').value),
    overwrite_mode:    document.getElementById('overwriteMode').value,
    auto_copy:         document.getElementById('autoCopy').checked,
    sources:           collectSourcesForSave(),
  };

  try {
    const response = await fetch('/api/config', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    if (response.ok) {
      toast('Settings saved', 'ok');
      await loadSettings();
      return;
    }
    const payload = await response.json();
    toast(payload.error || 'Failed to save settings', 'error');
  } catch (error) {
    toast('Network error', 'error');
  }
}

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

  const action = button.dataset.action;
  const path = button.dataset.path;
  if (action === 'toggle-expand') {
    if (expandedNodes.has(path)) {
      expandedNodes.delete(path);
      renderSources();
      return;
    }
    await ensureExpanded(path);
  }
  if (action === 'remove-root') {
    removeRoot(path);
  }
});

document.getElementById('sourceTree').addEventListener('change', (event) => {
  const checkbox = event.target.closest('[data-action="toggle-check"]');
  if (!checkbox) return;
  toggleSource(checkbox.dataset.path, checkbox.checked);
});

renderMediaTypeHints();
loadSettings();
</script>
{{end}}