gpx-vis/gpx-vis-frontend/js/browser.js

const Browser = (() => {
  let currentDirId = null; // null = root
  let dirStack = []; // breadcrumb stack: [{id, name}]
  let allDirs = []; // flat list for move dialog

  async function init() {
    document.getElementById('new-dir-btn').addEventListener('click', createDirPrompt);
    document.getElementById('upload-btn').addEventListener('click', () => {
      document.getElementById('file-input').click();
    });
    document.getElementById('file-input').addEventListener('change', handleFileUpload);

    // Drop zone on map
    setupDropZone();

    await loadDir(null);
  }

  async function loadDir(dirId) {
    currentDirId = dirId;
    renderBreadcrumb();

    try {
      let dirs, tracks;
      if (dirId === null) {
        dirs = await API.getDirs();
        const allTracks = await API.getTracks('');
        tracks = allTracks;
      } else {
        const data = await API.getDir(dirId);
        dirs = data.children || [];
        tracks = data.tracks || [];
      }
      renderList(dirs, tracks);
    } catch (e) {
      showToast('Error loading directory: ' + e.message, 'error');
      renderList([], []);
    }
  }

  function renderBreadcrumb() {
    const bc = document.getElementById('breadcrumb');
    let html = '<span class="bc-item" data-id="null">Root</span>';
    dirStack.forEach((item) => {
      html += ' <span class="bc-sep">›</span> ';
      html += `<span class="bc-item" data-id="${item.id}">${escHtml(item.name)}</span>`;
    });
    bc.innerHTML = html;
    bc.querySelectorAll('.bc-item').forEach(el => {
      el.addEventListener('click', () => {
        const id = el.dataset.id === 'null' ? null : parseInt(el.dataset.id);
        if (id === null) {
          dirStack = [];
        } else {
          const idx = dirStack.findIndex(d => d.id === id);
          if (idx >= 0) dirStack = dirStack.slice(0, idx + 1);
        }
        loadDir(id);
      });
    });
  }

  function renderList(dirs, tracks) {
    const list = document.getElementById('browser-list');
    let html = '';

    if (dirs.length === 0 && tracks.length === 0) {
      html = '<div class="empty-list">No files here. Upload a GPX or create a folder.</div>';
    }

    for (const dir of dirs) {
      html += `<div class="dir-item" data-id="${dir.id}">
        <span class="item-icon">📁</span>
        <span class="item-name">${escHtml(dir.name)}</span>
        <span class="item-date">${formatDate(dir.updatedAt)}</span>
        <span class="item-actions">
          <button class="item-btn rename-dir-btn" data-id="${dir.id}" data-name="${escAttr(dir.name)}" title="Rename">✏️</button>
          <button class="item-btn delete-dir-btn" data-id="${dir.id}" data-name="${escAttr(dir.name)}" title="Delete">🗑️</button>
        </span>
      </div>`;
    }

    for (const track of tracks) {
      const dist = track.totalDistance ? formatDistance(track.totalDistance) : '';
      html += `<div class="track-item" data-id="${track.id}">
        <span class="item-icon">🗺️</span>
        <span class="item-name">${escHtml(track.name)}</span>
        <span class="item-meta">${dist}</span>
        <span class="item-date">${formatDate(track.trackDate || track.uploadDate)}</span>
        <span class="item-actions">
          <button class="item-btn view-track-btn" data-id="${track.id}" title="View on map">👁️</button>
          <button class="item-btn share-track-btn" data-id="${track.id}" title="Share">🔗</button>
          <button class="item-btn move-track-btn" data-id="${track.id}" data-name="${escAttr(track.name)}" title="Move">📂</button>
          <button class="item-btn delete-track-btn" data-id="${track.id}" data-name="${escAttr(track.name)}" title="Delete">🗑️</button>
        </span>
      </div>`;
    }

    list.innerHTML = html;

    // Bind directory click (navigate into)
    list.querySelectorAll('.dir-item').forEach(el => {
      el.addEventListener('click', (e) => {
        if (e.target.closest('.item-actions')) return;
        const id = parseInt(el.dataset.id);
        const name = el.querySelector('.item-name').textContent;
        dirStack.push({ id, name });
        loadDir(id);
      });
    });

    list.querySelectorAll('.rename-dir-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        renameDir(parseInt(btn.dataset.id), btn.dataset.name);
      });
    });

    list.querySelectorAll('.delete-dir-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        confirmDelete('directory', btn.dataset.name, () => deleteDir(parseInt(btn.dataset.id)));
      });
    });

    // Bind track click (open on map)
    list.querySelectorAll('.track-item').forEach(el => {
      el.addEventListener('click', (e) => {
        if (e.target.closest('.item-actions')) return;
        openTrack(parseInt(el.dataset.id));
      });
    });

    list.querySelectorAll('.view-track-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        openTrack(parseInt(btn.dataset.id));
      });
    });

    list.querySelectorAll('.share-track-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        shareTrack(parseInt(btn.dataset.id));
      });
    });

    list.querySelectorAll('.move-track-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        showMoveDialog(parseInt(btn.dataset.id), btn.dataset.name);
      });
    });

    list.querySelectorAll('.delete-track-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.stopPropagation();
        confirmDelete('track', btn.dataset.name, () => deleteTrack(parseInt(btn.dataset.id)));
      });
    });
  }

  async function openTrack(trackId) {
    try {
      if (MapView.hasTrack(trackId)) {
        // Toggle off
        MapView.removeTrack(trackId);
        MapView.setCurrentTrack(null);
        document.getElementById('track-info-panel').style.display = 'none';
        return;
      }
      const data = await API.getTrackPoints(trackId);
      MapView.addTrack(data, trackId);
      MapView.fitTrack(trackId);
      MapView.setCurrentTrack(trackId);
      showTrackInfo(data.meta);
    } catch (e) {
      showToast('Error loading track: ' + e.message, 'error');
    }
  }

  function showTrackInfo(meta) {
    if (!meta) return;
    const panel = document.getElementById('track-info-panel');
    document.getElementById('track-info-content').innerHTML = `
      <h3>${escHtml(meta.name || 'Track')}</h3>
      <div class="info-row"><label>Distance</label><span>${formatDistance(meta.totalDistance)}</span></div>
      <div class="info-row"><label>Points</label><span>${meta.pointCount || 0}</span></div>
      ${meta.trackDate ? `<div class="info-row"><label>Date</label><span>${formatDate(meta.trackDate)}</span></div>` : ''}
    `;
    panel.style.display = 'block';
    document.getElementById('track-info-close').onclick = () => { panel.style.display = 'none'; };
  }

  async function createDirPrompt() {
    const name = prompt('Folder name:');
    if (!name || !name.trim()) return;
    try {
      await API.createDir(name.trim(), currentDirId);
      await loadDir(currentDirId);
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function renameDir(id, currentName) {
    const name = prompt('New name:', currentName);
    if (!name || !name.trim() || name.trim() === currentName) return;
    try {
      await API.renameDir(id, name.trim());
      await loadDir(currentDirId);
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function deleteDir(id) {
    try {
      await API.deleteDir(id);
      await loadDir(currentDirId);
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function deleteTrack(id) {
    try {
      MapView.removeTrack(id);
      await API.deleteTrack(id);
      await loadDir(currentDirId);
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function handleFileUpload(e) {
    const files = Array.from(e.target.files);
    if (files.length === 0) return;
    e.target.value = '';

    for (const file of files) {
      showUploadToast(`Uploading ${file.name}...`);
      try {
        await API.uploadTrack(file, currentDirId, null);
        showToast(`Uploaded: ${file.name}`, 'success');
      } catch (err) {
        showToast(`Error uploading ${file.name}: ${err.message}`, 'error');
      }
    }
    hideUploadToast();
    await loadDir(currentDirId);
  }

  function setupDropZone() {
    const mapContainer = document.getElementById('map-container');
    mapContainer.addEventListener('dragover', (e) => {
      e.preventDefault();
      mapContainer.classList.add('drag-over');
    });
    mapContainer.addEventListener('dragleave', (e) => {
      if (!mapContainer.contains(e.relatedTarget)) {
        mapContainer.classList.remove('drag-over');
      }
    });
    mapContainer.addEventListener('drop', async (e) => {
      e.preventDefault();
      mapContainer.classList.remove('drag-over');
      const files = Array.from(e.dataTransfer.files).filter(f => f.name.toLowerCase().endsWith('.gpx'));
      if (files.length === 0) {
        showToast('No GPX files found in drop', 'error');
        return;
      }
      for (const file of files) {
        showUploadToast(`Uploading ${file.name}...`);
        try {
          await API.uploadTrack(file, currentDirId, null);
          showToast(`Uploaded: ${file.name}`, 'success');
        } catch (err) {
          showToast(`Error: ${err.message}`, 'error');
        }
      }
      hideUploadToast();
      await loadDir(currentDirId);
    });
  }

  async function shareTrack(trackId) {
    try {
      const track = await API.getTrack(trackId);
      const modal = document.getElementById('share-modal');
      const content = document.getElementById('share-content');

      const existingCode = track.ShareLink?.code || track.shareCode;

      if (existingCode) {
        const shareUrl = buildShareUrl(existingCode);
        content.innerHTML = `
          <p>Share link:</p>
          <div class="share-url-box">
            <input type="text" id="share-url-input" value="${escAttr(shareUrl)}" readonly>
            <button id="copy-share-btn">Copy</button>
          </div>
          <div style="margin-top:12px">
            <button id="share-revoke-btn" class="btn-danger">Revoke link</button>
          </div>
        `;
        content.querySelector('#copy-share-btn').addEventListener('click', () => {
          navigator.clipboard.writeText(shareUrl).then(() => showToast('Copied!', 'success')).catch(() => {
            document.getElementById('share-url-input').select();
            document.execCommand('copy');
            showToast('Copied!', 'success');
          });
        });
        content.querySelector('#share-revoke-btn').addEventListener('click', async () => {
          try {
            await API.deleteShare(trackId);
            modal.style.display = 'none';
            showToast('Share link revoked', 'success');
          } catch (err) {
            showToast('Error: ' + err.message, 'error');
          }
        });
      } else {
        content.innerHTML = `
          <p>No share link yet.</p>
          <button id="share-create-btn" class="btn-primary">Create share link</button>
        `;
        content.querySelector('#share-create-btn').addEventListener('click', async () => {
          try {
            const res = await API.createShare(trackId);
            const shareUrl = buildShareUrl(res.code);
            content.innerHTML = `
              <p>Share link created:</p>
              <div class="share-url-box">
                <input type="text" id="share-url-input-new" value="${escAttr(shareUrl)}" readonly>
                <button id="copy-share-new-btn">Copy</button>
              </div>
            `;
            content.querySelector('#copy-share-new-btn').addEventListener('click', () => {
              navigator.clipboard.writeText(shareUrl).then(() => showToast('Copied!', 'success')).catch(() => {
                document.getElementById('share-url-input-new').select();
                document.execCommand('copy');
                showToast('Copied!', 'success');
              });
            });
          } catch (err) {
            showToast('Error: ' + err.message, 'error');
          }
        });
      }

      modal.style.display = 'flex';
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  function buildShareUrl(code) {
    const base = window.location.origin + window.location.pathname;
    // Ensure we link to share/CODE relative to the app root
    const appRoot = base.replace(/\/[^/]*$/, '/');
    return appRoot + 'share/' + code;
  }

  async function showMoveDialog(trackId, trackName) {
    try {
      allDirs = await loadAllDirs();
      const list = document.getElementById('move-dir-list');
      let html = '<div class="move-dir-item" data-id=""><span>📁</span> (Root)</div>';
      for (const dir of allDirs) {
        html += `<div class="move-dir-item" data-id="${dir.id}"><span>📁</span> ${escHtml(dir.path)}</div>`;
      }
      list.innerHTML = html;

      let selectedDirId = null;
      list.querySelectorAll('.move-dir-item').forEach(el => {
        el.addEventListener('click', () => {
          list.querySelectorAll('.move-dir-item').forEach(e => e.classList.remove('selected'));
          el.classList.add('selected');
          selectedDirId = el.dataset.id || null;
        });
      });

      document.getElementById('move-confirm-btn').onclick = async () => {
        try {
          await API.updateTrack(trackId, { directoryId: selectedDirId || null });
          document.getElementById('move-modal').style.display = 'none';
          await loadDir(currentDirId);
          showToast('Track moved', 'success');
        } catch (e) {
          showToast('Error: ' + e.message, 'error');
        }
      };

      document.getElementById('move-modal').style.display = 'flex';
    } catch (e) {
      showToast('Error: ' + e.message, 'error');
    }
  }

  async function loadAllDirs(parentId, prefix) {
    const result = [];
    let dirs;
    try {
      if (parentId !== undefined && parentId !== null) {
        const data = await API.getDir(parentId);
        dirs = data.children || [];
      } else {
        dirs = await API.getDirs();
      }
    } catch (e) {
      return result;
    }
    for (const d of dirs) {
      const path = (prefix ? prefix + ' / ' : '') + d.name;
      result.push({ id: d.id, name: d.name, path });
      const sub = await loadAllDirs(d.id, path);
      result.push(...sub);
    }
    return result;
  }

  function confirmDelete(type, name, onConfirm) {
    document.getElementById('confirm-title').textContent = `Delete ${type}`;
    document.getElementById('confirm-message').textContent = `Are you sure you want to delete "${name}"? This cannot be undone.`;
    const modal = document.getElementById('confirm-modal');
    modal.style.display = 'flex';
    document.getElementById('confirm-ok-btn').onclick = () => {
      modal.style.display = 'none';
      onConfirm();
    };
  }

  function getCurrentDirId() { return currentDirId; }
  function refresh() { return loadDir(currentDirId); }

  return { init, loadDir, getCurrentDirId, refresh };
})();