/**
 * ─────────────────────────────────────────────
 *  SPB Drive — Personal Cloud Drive
 * ─────────────────────────────────────────────
 *  Author  : Simon-Pierre Boucher
 *  Contact : contact@spboucher.ai
 *  File    : src/web/assets/js/viewer.js
 *  Purpose : Universal preview renderers + full-screen viewer overlay
 *  License : MIT © Simon-Pierre Boucher
 * ─────────────────────────────────────────────
 */

import { h, fmtSize, fmtDuration, copyText } from './ui.js';
import { fileIcon, UI } from './icons.js';

/**
 * Render a preview into `stage` for a descriptor from GET …/preview.
 * @param {HTMLElement} stage
 * @param {object} desc  preview descriptor (strategy, base, …)
 * @param {{stream: string, dl: string|null}} urls  media URLs for this node
 */
export async function renderPreview(stage, desc, urls) {
  stage.innerHTML = '';
  const render = RENDERERS[desc.strategy] ?? RENDERERS.fallback;
  try {
    await render(stage, desc, urls);
  } catch (err) {
    console.error('preview failed', err);
    RENDERERS.fallback(stage, desc, urls);
  }
}

const processing = (label) =>
  h('div.pv-processing', {},
    h('div', {}, label),
    h('div.bar', {}, h('i')));

const panel = (...kids) => {
  const scroll = h('div.pv-scroll');
  const el = h('div.pv-panel', {}, ...kids, scroll);
  return { el, scroll };
};

// ── Images ───────────────────────────────────────────────────────────
async function renderImage(stage, desc, urls, srcOverride) {
  const img = h('img', { src: srcOverride ?? urls.stream, alt: desc.name, draggable: false });
  const wrap = h('div.pv-img-wrap', {}, img);
  let scale = 1; let rot = 0; let tx = 0; let ty = 0; let fit = true;
  const apply = () => {
    img.style.transform = `translate(${tx}px, ${ty}px) rotate(${rot}deg) scale(${scale})`;
    zoomLabel.textContent = fit ? 'Fit' : `${Math.round(scale * 100)}%`;
  };
  const setZoom = (z, keepFit = false) => { scale = Math.min(Math.max(z, 0.1), 12); fit = keepFit; apply(); };

  wrap.addEventListener('wheel', (e) => {
    e.preventDefault();
    setZoom(scale * (e.deltaY < 0 ? 1.15 : 0.87));
  }, { passive: false });

  let drag = null;
  wrap.addEventListener('pointerdown', (e) => {
    drag = { x: e.clientX - tx, y: e.clientY - ty };
    wrap.setPointerCapture(e.pointerId);
    wrap.style.cursor = 'grabbing';
  });
  wrap.addEventListener('pointermove', (e) => {
    if (!drag) return;
    tx = e.clientX - drag.x; ty = e.clientY - drag.y; apply();
  });
  wrap.addEventListener('pointerup', () => { drag = null; wrap.style.cursor = 'grab'; });
  img.addEventListener('dblclick', () => { tx = 0; ty = 0; setZoom(scale === 1 ? 2 : 1, scale !== 1); });

  const zoomLabel = h('span.zoom-label', {}, 'Fit');
  const bar = h('div.pv-toolbar', {},
    h('button.btn', { title: 'Zoom out', html: UI.zoomOut, onclick: () => setZoom(scale * 0.8) }),
    zoomLabel,
    h('button.btn', { title: 'Zoom in', html: UI.zoomIn, onclick: () => setZoom(scale * 1.25) }),
    h('button.btn', { title: '1:1', onclick: () => { tx = 0; ty = 0; setZoom(1); } }, '1:1'),
    h('button.btn', { title: 'Rotate', html: UI.rotate, onclick: () => { rot = (rot + 90) % 360; apply(); } }),
    h('button.btn', { title: 'Image info', html: UI.info, onclick: () => showExif(desc) }),
  );
  stage.append(wrap, bar);
}

async function showExif(desc) {
  const { modal } = await import('./ui.js');
  let data = {};
  try { data = await (await fetch(`${desc.base}/exif`, { credentials: 'same-origin' })).json(); } catch {}
  const dl = h('dl.kv');
  const add = (k, v) => { if (v !== null && v !== undefined && v !== '') { dl.append(h('dt', {}, k), h('dd', {}, String(v))); } };
  add('Dimensions', data.width ? `${data.width} × ${data.height}` : null);
  add('Format', data.format);
  add('Camera', data.camera);
  add('Lens', data.lens);
  add('ISO', data.iso);
  add('Exposure', data.exposure ? `1/${Math.round(1 / data.exposure)}s` : null);
  add('Aperture', data.fnumber ? `ƒ/${data.fnumber}` : null);
  add('Focal length', data.focal ? `${data.focal} mm` : null);
  add('Taken', data.taken ? new Date(data.taken).toLocaleString() : null);
  const body = h('div', {}, dl.children.length ? dl : h('p.muted', {}, 'No metadata available.'));
  if (data.gps) {
    body.append(h('a.btn', {
      href: `https://www.openstreetmap.org/?mlat=${data.gps.lat}&mlon=${data.gps.lon}#map=15/${data.gps.lat}/${data.gps.lon}`,
      target: '_blank', rel: 'noopener',
    }, 'Open map location'));
  }
  modal({ title: 'Image details', body, actions: [{ label: 'Close', primary: true, onClick: () => {} }] });
}

// ── Video ────────────────────────────────────────────────────────────
async function renderVideo(stage, desc, urls) {
  const attach = (src) => {
    const video = h('video.pv-video', {
      src, controls: true, autoplay: true, playsinline: true,
    });
    // Keyboard: space handled natively when focused; add speed + pip controls.
    const bar = h('div.pv-toolbar', {},
      ...[0.5, 1, 1.5, 2].map((rate) =>
        h('button.btn', { onclick: () => { video.playbackRate = rate; } }, `${rate}×`)),
      'pictureInPictureEnabled' in document
        ? h('button.btn', { title: 'Picture in picture', onclick: () => video.requestPictureInPicture().catch(() => {}) }, 'PiP')
        : null,
      h('button.btn', { title: 'Fullscreen', html: UI.expand, onclick: () => video.requestFullscreen?.() }),
    );
    stage.append(video, bar);
    video.focus();
  };

  if (desc.webSafe) { attach(urls.stream); return; }

  stage.append(processing('Optimizing for playback…'));
  const poll = async () => {
    try {
      const res = await fetch(`${desc.base}/video`, { credentials: 'same-origin' });
      const { state } = await res.json();
      if (state === 'ready') { stage.innerHTML = ''; attach(`${desc.base}/video/file`); return; }
      if (state === 'unavailable') {
        stage.innerHTML = '';
        RENDERERS.fallback(stage, { ...desc, note: 'This codec can\'t be optimized on the server.' }, urls);
        return;
      }
    } catch { /* keep polling */ }
    if (stage.isConnected) setTimeout(poll, 2500);
  };
  poll();
}

// ── Audio (waveform + ID3) ───────────────────────────────────────────
async function renderAudio(stage, desc, urls) {
  const art = h('div.art', { html: fileIcon('audio') });
  const title = h('div.t', {}, desc.name);
  const artist = h('div.a', {}, desc.probe?.duration ? fmtDuration(desc.probe.duration) : '');
  const wave = h('div', { id: 'waveform' });
  const playBtn = h('button.btn.primary', {}, '▶ Play');
  const time = h('span.time', {}, '0:00');
  const box = h('div.pv-audio', {},
    h('div.top', {}, art, h('div.tt', {}, title, artist)),
    wave,
    h('div.audio-controls', {},
      playBtn,
      ...[1, 1.5, 2].map((r) => h('button.btn', { onclick: () => ws?.setPlaybackRate(r) }, `${r}×`)),
      h('button.btn', { id: 'loopBtn', onclick: (e) => { loop = !loop; e.currentTarget.classList.toggle('primary', loop); } }, 'Loop'),
      time),
  );
  stage.append(box);

  // Best-effort ID3v2 read for title/artist/cover (first 256 KB).
  readId3(urls.stream).then((tags) => {
    if (tags?.title) title.textContent = tags.title;
    if (tags?.artist) artist.textContent = tags.artist + (artist.textContent ? ` · ${artist.textContent}` : '');
    if (tags?.cover) { art.innerHTML = ''; art.append(h('img', { src: tags.cover })); }
  }).catch(() => {});

  let ws = null; let loop = false;
  try {
    const { default: WaveSurfer } = await import('/vendor/wavesurfer/wavesurfer.esm.js');
    let peaks = null;
    try {
      const res = await fetch(`${desc.base}/peaks`, { credentials: 'same-origin' });
      peaks = (await res.json()).peaks;
      if (!peaks?.length) peaks = null;
    } catch {}
    ws = WaveSurfer.create({
      container: wave,
      url: urls.stream,
      peaks: peaks ? [peaks] : undefined,
      duration: peaks ? desc.probe?.duration : undefined,
      height: 72,
      waveColor: 'rgba(139, 147, 163, 0.55)',
      progressColor: '#4f8cff',
      cursorColor: '#22d3aa',
      barWidth: 2, barGap: 1, barRadius: 2,
    });
    ws.on('timeupdate', (t) => { time.textContent = `${fmtDuration(t)} / ${fmtDuration(ws.getDuration())}`; });
    ws.on('finish', () => { if (loop) { ws.seekTo(0); ws.play(); } else playBtn.textContent = '▶ Play'; });
    playBtn.onclick = () => {
      ws.playPause();
      playBtn.textContent = ws.isPlaying() ? '⏸ Pause' : '▶ Play';
    };
  } catch {
    // Wavesurfer unavailable → native audio element.
    wave.replaceWith(h('audio', { src: urls.stream, controls: true, style: { width: '100%' } }));
    playBtn.style.display = 'none';
  }
}

/** Minimal ID3v2 parser: TIT2/TPE1 + APIC cover. */
async function readId3(url) {
  const res = await fetch(url, { headers: { range: 'bytes=0-262143' }, credentials: 'same-origin' });
  const buf = new Uint8Array(await res.arrayBuffer());
  if (buf[0] !== 0x49 || buf[1] !== 0x44 || buf[2] !== 0x33) return null; // "ID3"
  const synch = (o) => (buf[o] << 21) | (buf[o + 1] << 14) | (buf[o + 2] << 7) | buf[o + 3];
  const tagSize = Math.min(synch(6) + 10, buf.length);
  const td = new TextDecoder('utf-8'); const tl = new TextDecoder('latin1');
  const out = {};
  let off = 10;
  while (off + 10 < tagSize) {
    const id = tl.decode(buf.slice(off, off + 4));
    if (!/^[A-Z0-9]{4}$/.test(id)) break;
    const size = buf[10] >= 4 ? synch(off + 4)
      : (buf[off + 4] << 24) | (buf[off + 5] << 16) | (buf[off + 6] << 8) | buf[off + 7];
    const body = buf.slice(off + 10, off + 10 + size);
    if ((id === 'TIT2' || id === 'TPE1') && body.length > 1) {
      const enc = body[0];
      const text = enc === 1 || enc === 2
        ? new TextDecoder('utf-16').decode(body.slice(1))
        : (enc === 3 ? td : tl).decode(body.slice(1));
      out[id === 'TIT2' ? 'title' : 'artist'] = text.replace(/\0+$/, '').replace(/^\uFEFF/, '');
    }
    if (id === 'APIC' && body.length > 10) {
      let p = 1;
      while (p < body.length && body[p] !== 0) p += 1; // mime
      const mimeStr = tl.decode(body.slice(1, p));
      p += 2; // skip null + picture type
      while (p < body.length && body[p] !== 0) p += 1; // description
      p += 1;
      if (p < body.length) {
        out.cover = URL.createObjectURL(new Blob([body.slice(p)], { type: mimeStr || 'image/jpeg' }));
      }
    }
    off += 10 + size;
  }
  return out;
}

// ── PDF (pdf.js) ─────────────────────────────────────────────────────
async function renderPdf(stage, desc, urls, srcOverride, note) {
  const pdfjs = await import('/vendor/pdfjs/pdf.min.mjs');
  pdfjs.GlobalWorkerOptions.workerSrc = '/vendor/pdfjs/pdf.worker.min.mjs';

  const rail = h('div.pdf-rail');
  const main = h('div.pdf-main');
  const pageInput = h('input', { type: 'number', min: 1, value: 1, style: { width: '58px', textAlign: 'center' } });
  const searchInput = h('input', { type: 'search', placeholder: 'Search in document…', style: { width: '190px' } });
  const searchInfo = h('span.muted');
  let zoom = 1.2;
  const strip = h('div.pv-toolstrip', {},
    note ? h('span.chip', {}, note) : null,
    pageInput, h('span.muted', { id: 'pageCount' }),
    h('button.btn.icon.ghost', { html: UI.zoomOut, title: 'Zoom out', onclick: () => rescale(zoom * 0.85) }),
    h('button.btn.icon.ghost', { html: UI.zoomIn, title: 'Zoom in', onclick: () => rescale(zoom * 1.2) }),
    searchInput, searchInfo,
    h('button.btn.icon.ghost', { title: 'Print', onclick: () => window.print() }, '🖨'),
  );
  const viewer = h('div.pv-pdf', {}, rail, h('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 } }, strip, main));
  stage.append(viewer);

  const doc = await pdfjs.getDocument({ url: srcOverride ?? urls.stream, withCredentials: true }).promise;
  strip.querySelector('#pageCount').textContent = `/ ${doc.numPages}`;
  pageInput.max = doc.numPages;

  const pages = [];
  for (let i = 1; i <= doc.numPages; i += 1) {
    const holder = h('div.pdf-page', { dataset: { page: i } });
    main.append(holder);
    pages.push({ holder, rendered: false, i });
  }

  const renderPage = async (entry, scale = zoom) => {
    const page = await doc.getPage(entry.i);
    const viewport = page.getViewport({ scale: scale * (window.devicePixelRatio > 1 ? 1.5 : 1) });
    const canvas = h('canvas');
    canvas.width = viewport.width; canvas.height = viewport.height;
    canvas.style.width = `${viewport.width / (window.devicePixelRatio > 1 ? 1.5 : 1)}px`;
    await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
    const text = await page.getTextContent();
    const textLayer = h('div.textLayer', { style: { width: canvas.style.width, height: `${parseFloat(canvas.style.width) * (viewport.height / viewport.width)}px` } });
    // Lightweight text layer for selection + search highlighting.
    const cssScale = parseFloat(canvas.style.width) / page.getViewport({ scale: 1 }).width;
    for (const item of text.items) {
      if (!item.str) continue;
      const [a, b, , , e, f] = item.transform;
      const span = h('span', {
        style: {
          left: `${e * cssScale}px`,
          bottom: `${f * cssScale}px`,
          fontSize: `${Math.hypot(a, b) * cssScale}px`,
          fontFamily: 'sans-serif',
        },
      }, item.str);
      span.dataset.txt = item.str.toLowerCase();
      textLayer.append(span);
    }
    entry.holder.innerHTML = '';
    entry.holder.append(canvas, textLayer);
    entry.rendered = true;
  };

  // Lazy render on scroll.
  const io = new IntersectionObserver((entries) => {
    for (const it of entries) {
      if (!it.isIntersecting) continue;
      const entry = pages[Number(it.target.dataset.page) - 1];
      if (!entry.rendered) renderPage(entry);
      pageInput.value = entry.i;
      rail.querySelectorAll('.cur').forEach((n) => n.classList.remove('cur'));
      rail.querySelector(`[data-rp="${entry.i}"]`)?.classList.add('cur');
    }
  }, { root: main, threshold: 0.15 });
  pages.forEach((p) => io.observe(p.holder));
  renderPage(pages[0]);

  // Thumbnail rail.
  (async () => {
    for (let i = 1; i <= Math.min(doc.numPages, 60); i += 1) {
      const page = await doc.getPage(i);
      const vp = page.getViewport({ scale: 110 / page.getViewport({ scale: 1 }).width });
      const canvas = h('canvas');
      canvas.width = vp.width; canvas.height = vp.height;
      await page.render({ canvasContext: canvas.getContext('2d'), viewport: vp }).promise;
      const cell = h('div', { dataset: { rp: i }, onclick: () => pages[i - 1].holder.scrollIntoView() },
        canvas, h('div.pn', {}, String(i)));
      rail.append(cell);
    }
  })();

  const rescale = (z) => {
    zoom = Math.min(Math.max(z, 0.4), 4);
    pages.forEach((p) => { p.rendered = false; p.holder.innerHTML = ''; });
    const visible = Number(pageInput.value) - 1;
    renderPage(pages[visible]);
  };

  pageInput.addEventListener('change', () => {
    const target = pages[Math.min(Math.max(Number(pageInput.value), 1), doc.numPages) - 1];
    target.holder.scrollIntoView();
  });

  searchInput.addEventListener('keydown', async (e) => {
    if (e.key !== 'Enter') return;
    const q = searchInput.value.trim().toLowerCase();
    main.querySelectorAll('.hl').forEach((n) => n.classList.remove('hl'));
    if (!q) { searchInfo.textContent = ''; return; }
    let hits = 0; let first = null;
    for (const entry of pages) {
      if (!entry.rendered) {
        const page = await doc.getPage(entry.i);
        const text = await page.getTextContent();
        if (!text.items.some((it) => it.str?.toLowerCase().includes(q))) continue;
        await renderPage(entry);
      }
      entry.holder.querySelectorAll('.textLayer span').forEach((span) => {
        if (span.dataset.txt?.includes(q)) {
          span.classList.add('hl');
          hits += 1;
          first ??= span;
        }
      });
    }
    searchInfo.textContent = hits ? `${hits} match${hits > 1 ? 'es' : ''}` : 'No matches';
    first?.scrollIntoView({ block: 'center' });
  });
}

// ── Office → PDF ─────────────────────────────────────────────────────
async function renderOffice(stage, desc, urls) {
  if (desc.office === 'unsupported') {
    RENDERERS.fallback(stage, { ...desc, note: 'Office preview needs LibreOffice on the server.' }, urls);
    return;
  }
  const isSheet = /^(xlsx|xls|ods|csv)$/.test(desc.ext);
  if (desc.office === 'ready') {
    await renderPdf(stage, desc, urls, `${desc.base}/pdf`, 'Converted preview — download for original');
    if (isSheet) addSheetToggle(stage, desc, urls);
    return;
  }
  if (isSheet) {
    // Fast path: render the workbook natively right away.
    await renderSheet(stage, desc, urls);
    return;
  }
  stage.append(processing('Converting document…'));
  const poll = async () => {
    try {
      const res = await fetch(`${desc.base}/pdf`, { method: 'HEAD', credentials: 'same-origin' });
      if (res.ok) {
        stage.innerHTML = '';
        await renderPdf(stage, desc, urls, `${desc.base}/pdf`, 'Converted preview — download for original');
        return;
      }
      if (res.status === 422) {
        stage.innerHTML = '';
        RENDERERS.fallback(stage, { ...desc, note: 'Conversion unavailable on this server.' }, urls);
        return;
      }
    } catch {}
    if (stage.isConnected) setTimeout(poll, 3000);
  };
  setTimeout(poll, 2500);
}

function addSheetToggle(stage, desc, urls) {
  const strip = stage.querySelector('.pv-toolstrip');
  strip?.append(h('button.btn', {
    onclick: async () => { stage.innerHTML = ''; await renderSheet(stage, desc, urls); },
  }, 'Table view'));
}

async function renderSheet(stage, desc, urls) {
  await loadScript('/vendor/xlsx/xlsx.full.min.js');
  const buf = await (await fetch(urls.stream.replace('/stream/', '/dl/').includes('/dl/') ? urls.dl ?? urls.stream : urls.stream, { credentials: 'same-origin' })).arrayBuffer();
  const wb = globalThis.XLSX.read(buf, { type: 'array' });
  const { el, scroll } = panel();
  const strip = h('div.pv-toolstrip');
  el.prepend(strip);
  const show = (name) => {
    scroll.innerHTML = '';
    const html = globalThis.XLSX.utils.sheet_to_html(wb.Sheets[name], { header: '', footer: '' });
    const wrap = h('div.csv-wrap', { html });
    wrap.querySelector('table')?.classList.add('csv-table');
    scroll.append(wrap);
    strip.querySelectorAll('.chip').forEach((c) => c.classList.toggle('active', c.textContent === name));
  };
  for (const name of wb.SheetNames) {
    strip.append(h('button.chip', { onclick: () => show(name) }, name));
  }
  stage.append(el);
  show(wb.SheetNames[0]);
}

const loadedScripts = new Set();
function loadScript(src) {
  if (loadedScripts.has(src)) return Promise.resolve();
  return new Promise((resolve, reject) => {
    const s = h('script', { src });
    s.onload = () => { loadedScripts.add(src); resolve(); };
    s.onerror = reject;
    document.head.append(s);
  });
}

// ── Code / text ──────────────────────────────────────────────────────
async function renderCode(stage, desc, urls) {
  const res = await fetch(`${desc.base}/text`, { credentials: 'same-origin' });
  if (!res.ok) { RENDERERS.fallback(stage, desc, urls); return; }
  const { html, lang, clipped, raw } = await res.json();
  const { el, scroll } = panel();
  const code = h('div.pv-code.linenums', { html });
  scroll.append(code);
  const strip = h('div.pv-toolstrip', {},
    h('span.chip', {}, lang),
    clipped ? h('span.chip', {}, 'truncated preview') : null,
    h('button.btn', {
      onclick: (e) => {
        code.classList.toggle('wrap');
        e.currentTarget.classList.toggle('primary');
      },
    }, 'Wrap'),
    raw !== null ? h('button.btn', { onclick: () => copyText(raw, 'Source copied') }, 'Copy') : null,
  );
  el.prepend(strip);
  stage.append(el);
}

// ── Markdown ─────────────────────────────────────────────────────────
async function renderMarkdownFile(stage, desc, urls) {
  const res = await fetch(`${desc.base}/markdown`, { credentials: 'same-origin' });
  if (!res.ok) { RENDERERS.fallback(stage, desc, urls); return; }
  const { html, raw } = await res.json();
  const { el, scroll } = panel();
  const rendered = h('div.md-body', { html });
  const source = h('pre.pv-code', { style: { display: 'none', font: '12.5px/1.6 var(--font-mono)', whiteSpace: 'pre-wrap', margin: 0 } }, raw);
  scroll.append(rendered, source);
  el.prepend(h('div.pv-toolstrip', {},
    h('button.btn.primary', {
      onclick: (e) => {
        const showSrc = source.style.display === 'none';
        source.style.display = showSrc ? '' : 'none';
        rendered.style.display = showSrc ? 'none' : '';
        e.currentTarget.textContent = showSrc ? 'Rendered' : 'Source';
      },
    }, 'Source'),
  ));
  stage.append(el);
}

// ── CSV / TSV ────────────────────────────────────────────────────────
function parseCsv(text, delim) {
  const rows = [];
  let row = []; let cell = ''; let quoted = false;
  for (let i = 0; i < text.length; i += 1) {
    const ch = text[i];
    if (quoted) {
      if (ch === '"') {
        if (text[i + 1] === '"') { cell += '"'; i += 1; } else quoted = false;
      } else cell += ch;
    } else if (ch === '"') quoted = true;
    else if (ch === delim) { row.push(cell); cell = ''; }
    else if (ch === '\n' || ch === '\r') {
      if (ch === '\r' && text[i + 1] === '\n') i += 1;
      row.push(cell); cell = '';
      if (row.length > 1 || row[0] !== '') rows.push(row);
      row = [];
    } else cell += ch;
  }
  if (cell !== '' || row.length) { row.push(cell); rows.push(row); }
  return rows;
}

async function renderCsv(stage, desc, urls) {
  const res = await fetch(`${desc.base}/raw`, { credentials: 'same-origin' });
  if (!res.ok) { RENDERERS.fallback(stage, desc, urls); return; }
  const text = await res.text();
  const firstLine = text.slice(0, text.indexOf('\n'));
  const delim = desc.ext === 'tsv' ? '\t'
    : [',', ';', '\t', '|'].reduce((best, d) =>
      firstLine.split(d).length > firstLine.split(best).length ? d : best, ',');
  const all = parseCsv(text, delim);
  const header = all[0] ?? [];
  let rows = all.slice(1);
  const original = rows;

  const { el, scroll } = panel();
  const wrap = h('div.csv-wrap');
  scroll.style.padding = '0';
  scroll.append(wrap);

  const CHUNK = 300;
  let shown = 0;
  let tbody;
  const table = h('table.csv-table');

  const renderHead = () => {
    const tr = h('tr');
    header.forEach((name, ci) => {
      let dir = 1;
      tr.append(h('th', {
        title: 'Click to sort',
        onclick: () => {
          rows = [...rows].sort((a, b) => {
            const x = a[ci] ?? ''; const y = b[ci] ?? '';
            const nx = parseFloat(x); const ny = parseFloat(y);
            const cmp = !Number.isNaN(nx) && !Number.isNaN(ny) ? nx - ny : x.localeCompare(y);
            return cmp * dir;
          });
          dir *= -1;
          reset();
        },
      }, name));
    });
    table.append(h('thead', {}, tr));
  };

  const appendChunk = () => {
    const frag = document.createDocumentFragment();
    for (const row of rows.slice(shown, shown + CHUNK)) {
      const tr = h('tr');
      for (let c = 0; c < header.length; c += 1) tr.append(h('td', {}, row[c] ?? ''));
      frag.append(tr);
    }
    shown = Math.min(shown + CHUNK, rows.length);
    tbody.append(frag);
    counter.textContent = `${rows.length.toLocaleString()} rows · delimiter "${delim === '\t' ? '\\t' : delim}"`;
  };

  const reset = () => {
    table.innerHTML = '';
    renderHead();
    tbody = h('tbody');
    table.append(tbody);
    shown = 0;
    appendChunk();
  };

  wrap.append(table);
  wrap.addEventListener('scroll', () => {
    if (wrap.scrollTop + wrap.clientHeight > wrap.scrollHeight - 600 && shown < rows.length) appendChunk();
  });

  const counter = h('span.muted');
  const search = h('input', {
    type: 'search', placeholder: 'Filter cells…', style: { width: '190px' },
    oninput: () => {
      const q = search.value.toLowerCase();
      rows = q ? original.filter((r) => r.some((c) => c?.toLowerCase().includes(q))) : original;
      reset();
    },
  });
  el.prepend(h('div.pv-toolstrip', {}, search, counter));
  stage.append(el);
  reset();
}

// ── Structured (json/yaml/toml/xml) ──────────────────────────────────
function jsonTree(value, key) {
  const label = key !== undefined ? h('span.json-key', {}, `${JSON.stringify(key)}: `) : '';
  if (value === null) return h('div', {}, label, h('span.json-null', {}, 'null'));
  if (typeof value === 'string') return h('div', {}, label, h('span.json-str', {}, JSON.stringify(value)));
  if (typeof value === 'number') return h('div', {}, label, h('span.json-num', {}, String(value)));
  if (typeof value === 'boolean') return h('div', {}, label, h('span.json-bool', {}, String(value)));
  const isArr = Array.isArray(value);
  const entries = isArr ? value.map((v, i) => [i, v]) : Object.entries(value);
  const det = h('details', { open: entries.length <= 24 },
    h('summary', {}, label, h('span.muted', {}, isArr ? `Array(${entries.length})` : `Object {${entries.length}}`)));
  for (const [k, v] of entries.slice(0, 2000)) det.append(jsonTree(v, isArr ? undefined : k));
  if (entries.length > 2000) det.append(h('div.muted', {}, `… ${entries.length - 2000} more`));
  return det;
}

async function renderStructured(stage, desc, urls) {
  if (desc.ext === 'json') {
    try {
      const text = await (await fetch(`${desc.base}/raw`, { credentials: 'same-origin' })).text();
      const value = JSON.parse(text);
      const { el, scroll } = panel();
      const pretty = h('div.pv-code.linenums', { style: { display: 'none' } });
      const tree = h('div.json-tree', {}, jsonTree(value));
      scroll.append(tree, pretty);
      let prettyLoaded = false;
      el.prepend(h('div.pv-toolstrip', {},
        h('button.btn.primary', {
          onclick: async (e) => {
            const showPretty = pretty.style.display === 'none';
            if (showPretty && !prettyLoaded) {
              const res = await fetch(`${desc.base}/text`, { credentials: 'same-origin' });
              pretty.innerHTML = (await res.json()).html;
              prettyLoaded = true;
            }
            pretty.style.display = showPretty ? '' : 'none';
            tree.style.display = showPretty ? 'none' : '';
            e.currentTarget.textContent = showPretty ? 'Tree' : 'Source';
          },
        }, 'Source'),
        h('button.btn', { onclick: () => copyText(text, 'JSON copied') }, 'Copy'),
      ));
      stage.append(el);
      return;
    } catch { /* fall through to highlighted source */ }
  }
  await renderCode(stage, desc, urls);
}

// ── Notebook (ipynb) ─────────────────────────────────────────────────
function miniMd(text) {
  const escd = text.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
  return escd
    .replace(/^###### (.*)$/gm, '<h6>$1</h6>').replace(/^##### (.*)$/gm, '<h5>$1</h5>')
    .replace(/^#### (.*)$/gm, '<h4>$1</h4>').replace(/^### (.*)$/gm, '<h3>$1</h3>')
    .replace(/^## (.*)$/gm, '<h2>$1</h2>').replace(/^# (.*)$/gm, '<h1>$1</h1>')
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    .replace(/\n\n/g, '<br><br>');
}

async function renderNotebook(stage, desc, urls) {
  const res = await fetch(`${desc.base}/raw`, { credentials: 'same-origin' });
  if (!res.ok) { RENDERERS.fallback(stage, desc, urls); return; }
  let nb;
  try { nb = JSON.parse(await res.text()); } catch { RENDERERS.fallback(stage, desc, urls); return; }
  const { el, scroll } = panel();
  const lang = nb.metadata?.kernelspec?.language ?? 'python';
  el.prepend(h('div.pv-toolstrip', {},
    h('span.chip', {}, `${nb.cells?.length ?? 0} cells`),
    h('span.chip', {}, nb.metadata?.kernelspec?.display_name ?? lang)));
  for (const cell of nb.cells ?? []) {
    const src = Array.isArray(cell.source) ? cell.source.join('') : cell.source ?? '';
    if (cell.cell_type === 'markdown') {
      scroll.append(h('div.md-body', { html: miniMd(src), style: { marginBottom: '14px' } }));
    } else if (cell.cell_type === 'code') {
      scroll.append(h('pre.code-fence', {
        style: {
          background: 'var(--surface-2)', border: '1px solid var(--border)',
          borderRadius: '7px', padding: '11px 14px', overflowX: 'auto',
          font: '12.5px/1.6 var(--font-mono)', margin: '0 0 8px',
        },
      }, src));
      for (const out of cell.outputs ?? []) {
        const imgB64 = out.data?.['image/png'];
        if (imgB64) {
          scroll.append(h('img', {
            src: `data:image/png;base64,${Array.isArray(imgB64) ? imgB64.join('') : imgB64}`,
            style: { maxWidth: '100%', marginBottom: '14px', borderRadius: '7px' },
          }));
        } else {
          const txt = out.text ?? out.data?.['text/plain'];
          if (txt) {
            scroll.append(h('pre', {
              style: { font: '12px/1.5 var(--font-mono)', color: 'var(--muted)', whiteSpace: 'pre-wrap', margin: '0 0 14px', paddingLeft: '12px', borderLeft: '2px solid var(--border)' },
            }, Array.isArray(txt) ? txt.join('') : String(txt)));
          }
        }
      }
    }
  }
  stage.append(el);
}

// ── Archives ─────────────────────────────────────────────────────────
async function renderArchive(stage, desc, urls) {
  const res = await fetch(`${desc.base}/archive`, { credentials: 'same-origin' });
  if (!res.ok) {
    RENDERERS.fallback(stage, { ...desc, note: 'Listing this archive needs the 7z tool on the server.' }, urls);
    return;
  }
  const { entries, truncated } = await res.json();
  const { el, scroll } = panel();
  el.prepend(h('div.pv-toolstrip', {},
    h('span.chip', {}, `${entries.length}${truncated ? '+' : ''} entries`)));
  const list = h('div.arc-list');
  scroll.append(list);

  const previewable = (p) => /\.(png|jpe?g|gif|webp|txt|md|json|js|mjs|ts|py|csv|html|css|xml|yml|yaml|log|sh)$/i.test(p);
  for (const entry of entries) {
    if (entry.dir) continue;
    const row = h('div.arc-row', {
      onclick: () => {
        if (!previewable(entry.path)) {
          location.href = `${desc.base}/archive/member?path=${encodeURIComponent(entry.path)}&download=1`;
          return;
        }
        showMember(desc, entry);
      },
    },
    h('span', { html: fileIcon(/\.(png|jpe?g|gif|webp)$/i.test(entry.path) ? 'image' : 'text'), style: { display: 'contents' } }),
    h('span', {}, entry.path),
    h('span.sz', {}, fmtSize(entry.size)));
    list.append(row);
  }
  stage.append(el);
}

async function showMember(desc, entry) {
  const { modal } = await import('./ui.js');
  const url = `${desc.base}/archive/member?path=${encodeURIComponent(entry.path)}`;
  const body = h('div', { style: { maxHeight: '60vh', overflow: 'auto' } });
  if (/\.(png|jpe?g|gif|webp)$/i.test(entry.path)) {
    body.append(h('img', { src: url, style: { maxWidth: '100%' } }));
  } else {
    const text = await (await fetch(url, { credentials: 'same-origin' })).text();
    body.append(h('pre', { style: { font: '12px/1.55 var(--font-mono)', whiteSpace: 'pre-wrap' } }, text.slice(0, 400_000)));
  }
  modal({
    title: entry.path.split('/').pop(),
    body,
    wide: true,
    actions: [
      { label: 'Download', onClick: () => { location.href = `${url}&download=1`; return false; } },
      { label: 'Close', primary: true, onClick: () => {} },
    ],
  });
}

// ── Fonts ────────────────────────────────────────────────────────────
async function renderFont(stage, desc, urls) {
  const family = `pv-font-${desc.id}`;
  const face = new FontFace(family, `url(${urls.stream})`);
  await face.load();
  document.fonts.add(face);
  const { el, scroll } = panel();
  const sizeInput = h('input', { type: 'range', min: 10, max: 96, value: 34, style: { width: '180px' } });
  el.prepend(h('div.pv-toolstrip', {}, h('span.chip', {}, desc.ext.toUpperCase()), 'Size', sizeInput));
  const spec = h('div.font-specimen', { style: { fontFamily: `'${family}'` } },
    h('h2', {}, desc.name.replace(/\.[^.]+$/, '')),
    h('div.alpha', {}, 'ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &@%$#!?'),
    ...[
      'The quick brown fox jumps over the lazy dog.',
      'Portez ce vieux whisky au juge blond qui fume. 0123456789',
      'Sphinx of black quartz, judge my vow — «SPB Drive».',
    ].map((s) => h('p.pangram', { style: { fontSize: '21px' } }, s)));
  sizeInput.addEventListener('input', () => {
    spec.querySelectorAll('.pangram').forEach((p) => { p.style.fontSize = `${sizeInput.value}px`; });
  });
  scroll.append(spec);
  stage.append(el);
}

// ── Email (eml) ──────────────────────────────────────────────────────
function decodeQP(text) {
  return text.replace(/=\r?\n/g, '').replace(/=([0-9A-F]{2})/gi, (_, hx) => String.fromCharCode(parseInt(hx, 16)));
}

async function renderEmail(stage, desc, urls) {
  const res = await fetch(`${desc.base}/raw`, { credentials: 'same-origin' });
  if (!res.ok) { RENDERERS.fallback(stage, desc, urls); return; }
  const raw = await res.text();
  const headEnd = raw.search(/\r?\n\r?\n/);
  const headText = raw.slice(0, headEnd).replace(/\r?\n[ \t]+/g, ' ');
  const headers = {};
  for (const line of headText.split(/\r?\n/)) {
    const m = line.match(/^([\w-]+):\s*(.*)$/);
    if (m) headers[m[1].toLowerCase()] = m[2];
  }
  let body = raw.slice(headEnd).trim();
  const attachments = [];
  const ctype = headers['content-type'] ?? '';
  const boundary = ctype.match(/boundary="?([^";]+)"?/)?.[1];
  if (boundary) {
    const parts = body.split(`--${boundary}`).slice(1, -1);
    let best = '';
    for (const part of parts) {
      const pEnd = part.search(/\r?\n\r?\n/);
      const pHead = part.slice(0, pEnd).toLowerCase();
      const pBody = part.slice(pEnd).trim();
      const fname = pHead.match(/filename="?([^";\r\n]+)"?/)?.[1];
      if (fname) { attachments.push(fname); continue; }
      if (pHead.includes('text/plain') && !best) {
        best = pHead.includes('quoted-printable') ? decodeQP(pBody)
          : pHead.includes('base64') ? atob(pBody.replace(/\s/g, '')) : pBody;
      }
    }
    body = best || '(no plain-text body)';
  } else if ((headers['content-transfer-encoding'] ?? '').includes('quoted-printable')) {
    body = decodeQP(body);
  }
  const decodeHdr = (s) => (s ?? '').replace(/=\?utf-8\?([qb])\?([^?]+)\?=/gi, (_, enc, val) =>
    enc.toLowerCase() === 'b' ? decodeURIComponent(escape(atob(val))) : decodeQP(val.replace(/_/g, ' ')));
  const { el, scroll } = panel();
  const kv = h('dl.kv');
  for (const key of ['from', 'to', 'cc', 'date', 'subject']) {
    if (headers[key]) kv.append(h('dt', {}, key[0].toUpperCase() + key.slice(1)), h('dd', {}, decodeHdr(headers[key])));
  }
  scroll.append(kv);
  if (attachments.length) {
    scroll.append(h('div.pv-toolstrip', { style: { border: 'none', padding: '0 0 10px' } },
      ...attachments.map((a) => h('span.chip', {}, `📎 ${a}`))));
  }
  scroll.append(h('pre', { style: { font: '13px/1.6 var(--font-sans)', whiteSpace: 'pre-wrap', borderTop: '1px solid var(--border)', paddingTop: '14px' } }, body));
  stage.append(el);
}

// ── SVG / HEIC ───────────────────────────────────────────────────────
async function renderSvg(stage, desc, urls) {
  await renderImage(stage, desc, urls); // /stream serves it sandboxed inline
}

async function renderHeic(stage, desc, urls) {
  if (desc.heicSupported) {
    await renderImage(stage, desc, urls, `${desc.base}/heic`);
    return;
  }
  RENDERERS.fallback(stage, { ...desc, note: 'HEIC decoding not available on this server.' }, urls);
}

// ── Fallback card ────────────────────────────────────────────────────
function renderFallback(stage, desc, urls) {
  stage.append(h('div.fallback-card', {},
    h('div', { html: fileIcon(desc.icon ?? 'file') }),
    h('h3', {}, desc.name),
    h('div.fm', {}, `${fmtSize(desc.size)} · ${desc.mime ?? 'unknown type'}`),
    desc.note ? h('div.fm', { style: { color: 'var(--warning)' } }, desc.note) : null,
    desc.sha ? h('div.sha', {}, `sha256 ${desc.sha}`) : null,
    urls.dl ? h('a.btn.primary', { href: urls.dl, download: '' },
      h('span', { html: UI.download, style: { display: 'contents' } }), 'Download') : null,
  ));
}

const RENDERERS = {
  image: renderImage,
  svg: renderSvg,
  heic: renderHeic,
  video: renderVideo,
  audio: renderAudio,
  pdf: (s, d, u) => renderPdf(s, d, u),
  office: renderOffice,
  code: renderCode,
  markdown: renderMarkdownFile,
  csv: renderCsv,
  structured: renderStructured,
  notebook: renderNotebook,
  archive: renderArchive,
  font: renderFont,
  email: renderEmail,
  epub: renderFallback,
  model3d: renderFallback,
  fallback: renderFallback,
};

// ── Full-screen viewer overlay (app + folder shares) ─────────────────
export class Viewer {
  /**
   * @param {object[]} items sibling file list
   * @param {number} index starting position
   * @param {{descUrl(n), streamUrl(n), dlUrl(n), actions?: Array}} opts
   */
  constructor(items, index, opts) {
    this.items = items.filter((n) => n.type === 'file');
    this.index = Math.max(0, this.items.findIndex((n) => n.id === items[index]?.id));
    this.opts = opts;
    this.build();
    this.show();
  }

  build() {
    this.overlay = h('div.preview-overlay', { role: 'dialog', 'aria-label': 'Preview' });
    this.title = h('span.title');
    this.sizeEl = h('span.size');
    const actions = h('div.p-actions');
    this.actionsHost = actions;
    this.stage = h('div.preview-stage');
    this.count = h('div.preview-count');
    this.body = h('div.preview-body', {},
      h('button.preview-nav.prev', { html: UI.chevronL, 'aria-label': 'Previous', onclick: () => this.nav(-1) }),
      this.stage,
      h('button.preview-nav.next', { html: UI.chevron, 'aria-label': 'Next', onclick: () => this.nav(1) }),
      this.count);
    this.overlay.append(h('div.preview-head', {}, this.title, this.sizeEl, actions), this.body);
    this.onKey = (e) => {
      if (e.target.matches('input, textarea')) return;
      if (e.key === 'Escape') this.close();
      if (e.key === 'ArrowLeft' && !e.target.matches('video')) this.nav(-1);
      if (e.key === 'ArrowRight' && !e.target.matches('video')) this.nav(1);
    };
    document.addEventListener('keydown', this.onKey);
    document.body.append(this.overlay);
  }

  /** Rebuild header actions for the current node (honors action.visible). */
  renderActions(node) {
    this.actionsHost.innerHTML = '';
    for (const action of this.opts.actions ?? []) {
      if (action.visible && !action.visible(node)) continue;
      this.actionsHost.append(h('button.btn.icon', {
        title: action.title, html: action.icon,
        onclick: () => action.onClick(this.items[this.index], this),
      }));
    }
    this.actionsHost.append(h('button.btn.icon', { title: 'Close (Esc)', html: UI.close, onclick: () => this.close() }));
  }

  async show() {
    const node = this.items[this.index];
    if (!node) { this.close(); return; }
    this.renderActions(node);
    this.title.textContent = node.name;
    this.sizeEl.textContent = fmtSize(node.size);
    this.count.textContent = this.items.length > 1 ? `${this.index + 1} / ${this.items.length}` : '';
    this.stage.innerHTML = '';
    this.stage.append(processing('Loading…'));
    try {
      const res = await fetch(this.opts.descUrl(node), { credentials: 'same-origin' });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const desc = await res.json();
      desc.icon = node.icon;
      if (this.items[this.index] !== node) return; // user already navigated
      this.stage.innerHTML = '';
      await renderPreview(this.stage, desc, {
        stream: this.opts.streamUrl(node),
        dl: this.opts.dlUrl ? this.opts.dlUrl(node) : null,
      });
    } catch {
      this.stage.innerHTML = '';
      renderFallback(this.stage, { name: node.name, size: node.size, mime: node.mime, icon: node.icon }, { dl: this.opts.dlUrl?.(node) ?? null });
    }
  }

  nav(delta) {
    if (this.items.length < 2) return;
    this.index = (this.index + delta + this.items.length) % this.items.length;
    this.show();
  }

  refreshCurrent() { this.show(); }

  close() {
    document.removeEventListener('keydown', this.onKey);
    this.overlay.remove();
    this.opts.onClose?.();
  }
}