// Asset preview modal - lazy-injects markup + styles, then renders video/audio/image
// for a given asset id using /api/v1/assets/:id and /api/v1/assets/:id/stream.

(function () {
  let _root = null;
  let _currentAssetId = null;

  function ensureRoot() {
    if (_root) return _root;
    const css = document.createElement('style');
    css.textContent = STYLES;
    document.head.appendChild(css);

    _root = document.createElement('div');
    _root.className = 'preview-overlay';
    _root.innerHTML = TEMPLATE;
    document.body.appendChild(_root);

    _root.addEventListener('click', (e) => {
      if (e.target === _root) closePreview();
    });
    _root.querySelector('.preview-close-btn').addEventListener('click', closePreview);
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && _root.classList.contains('open')) closePreview();
    });
    return _root;
  }

  async function openPreview(assetId) {
    if (!assetId) return;
    ensureRoot();
    _currentAssetId = assetId;
    _root.classList.add('open');

    const stage = _root.querySelector('.preview-stage');
    const titleEl = _root.querySelector('.preview-title');
    const metaEl = _root.querySelector('.preview-meta');
    const tagsEl = _root.querySelector('.preview-tags');
    const notesEl = _root.querySelector('.preview-notes');

    stage.innerHTML = '<div class="preview-empty">Loading…</div>';
    titleEl.textContent = '';
    metaEl.innerHTML = '';
    tagsEl.innerHTML = '';
    notesEl.textContent = '';

    let asset;
    try {
      const r = await fetch(`/api/v1/assets/${assetId}`, { credentials: 'include' });
      if (!r.ok) throw new Error(r.statusText);
      asset = await r.json();
    } catch (err) {
      stage.innerHTML = `<div class="preview-empty">Could not load asset (${err.message})</div>`;
      return;
    }
    if (_currentAssetId !== assetId) return;

    titleEl.textContent = asset.display_name || asset.filename || '(untitled)';
    const editBtn = _root.querySelector('[data-edit-asset]');
    if (editBtn) { const base = location.protocol + '//' + location.hostname + ':47435/'; editBtn.setAttribute('href', base + '?asset=' + encodeURIComponent(asset.id) + (asset.project_id ? '&project=' + encodeURIComponent(asset.project_id) : '')); }
    metaEl.innerHTML = buildMetaHtml(asset);
    tagsEl.innerHTML = (asset.tags || []).map(t => `<span class="preview-tag">${esc(t)}</span>`).join('') || '<span class="preview-empty" style="padding:0;font-size:var(--text-xs)">No tags</span>';
    notesEl.textContent = asset.notes || '';

    renderStage(stage, asset);
  }

  async function renderStage(stage, asset) {
    const mt = asset.media_type;
    const hasStreamableProxy = !!asset.proxy_s3_key;

    if (mt === 'video' || mt === 'audio') {
      if (!hasStreamableProxy) {
        stage.innerHTML = '<div class="preview-empty">Proxy still processing… try again in a moment.</div>';
        return;
      }
      try {
        const r = await fetch(`/api/v1/assets/${asset.id}/stream`, { credentials: 'include' });
        if (!r.ok) throw new Error(r.statusText);
        const { url } = await r.json();
        const tag = mt === 'audio' ? 'audio' : 'video';
        if (url && url.endsWith('.m3u8')) {
          stage.innerHTML = `<${tag} id="prevPlayer" controls autoplay playsinline></${tag}>`;
          const v = stage.querySelector('#prevPlayer');
          if (v.canPlayType('application/vnd.apple.mpegurl')) { v.src = url; }
          else if (window.Hls && window.Hls.isSupported()) { const h = new window.Hls(); h.loadSource(url); h.attachMedia(v); }
          else { await new Promise(r => { const sc = document.createElement('script'); sc.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5.0/dist/hls.min.js'; sc.onload = r; document.head.appendChild(sc); }); const h = new window.Hls({ liveSyncDuration: 6 }); h.loadSource(url); h.attachMedia(v); }
        } else {
          stage.innerHTML = `<${tag} controls autoplay playsinline src="${esc(url)}"></${tag}>`;
        }
      } catch (err) {
        stage.innerHTML = `<div class="preview-empty">Stream URL failed: ${esc(err.message)}</div>`;
      }
      return;
    }

    if (mt === 'image') {
      // Use thumbnail endpoint as a stand-in until /assets/:id/original is added
      try {
        const r = await fetch(`/api/v1/assets/${asset.id}/thumbnail`, { credentials: 'include' });
        if (r.ok) {
          const { url } = await r.json();
          if (url) { stage.innerHTML = `<img src="${esc(url)}" alt="">`; return; }
        }
      } catch (_) {}
      stage.innerHTML = '<div class="preview-empty">Image preview unavailable.</div>';
      return;
    }

    stage.innerHTML = `<div class="preview-empty">No preview available for media type "${esc(mt || 'unknown')}".</div>`;
  }

  function closePreview() {
    if (!_root) return;
    _currentAssetId = null;
    _root.classList.remove('open');
    // Stop any media playback to release the connection
    const stage = _root.querySelector('.preview-stage');
    if (stage) stage.innerHTML = '';
  }

  function buildMetaHtml(a) {
    const rows = [
      ['Status', a.status || ''],
      ['Type', a.media_type || ''],
      ['Codec', a.codec || ''],
      ['Resolution', a.resolution || ''],
      ['FPS', a.fps != null ? `${a.fps} fps` : ''],
      ['Duration', fmtMs(a.duration_ms)],
      ['Size', fmtBytes(a.file_size)],
      ['Created', a.created_at ? new Date(a.created_at).toLocaleString() : ''],
    ].filter(([, v]) => v !== '' && v != null);
    return rows.map(([k, v]) => `<dt>${k}</dt><dd>${esc(v)}</dd>`).join('');
  }

  function fmtMs(ms) {
    if (!ms) return '';
    const s = Math.floor(ms / 1000);
    const h = Math.floor(s / 3600);
    const m = Math.floor((s % 3600) / 60);
    const ss = s % 60;
    return h ? `${h}:${String(m).padStart(2,'0')}:${String(ss).padStart(2,'0')}` : `${m}:${String(ss).padStart(2,'0')}`;
  }
  function fmtBytes(b) {
    if (!b) return '';
    b = Number(b);
    if (b < 1024) return b + ' B';
    if (b < 1024*1024) return (b/1024).toFixed(1) + ' KB';
    if (b < 1024*1024*1024) return (b/1024/1024).toFixed(1) + ' MB';
    return (b/1024/1024/1024).toFixed(2) + ' GB';
  }
  function esc(s) {
    if (s == null) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  // Expose entry point
  window.openAssetPreview = openPreview;
  window.closeAssetPreview = closePreview;

  const TEMPLATE = `
    <div class="preview-modal" role="dialog" aria-modal="true" aria-label="Asset preview">
      <div class="preview-stage"></div>
      <aside class="preview-sidebar">
        <div class="preview-sidebar-header">
          <div class="preview-title"></div>
          <a class="preview-edit-btn" data-edit-asset href="#" target="_blank" rel="noopener" title="Open in editor" style="display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);text-decoration:none;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;font-weight:500"><svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 13l1.5-3.5L11 2l3 3-7.5 7.5L3 14zM10 3l3 3"/></svg>Edit</a>
          <button class="preview-close-btn" aria-label="Close preview">
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3l10 10M13 3L3 13"/></svg>
          </button>
        </div>
        <div class="preview-sidebar-body">
          <div>
            <div class="preview-section-title" style="margin-bottom:var(--sp-2)">Details</div>
            <dl class="preview-meta"></dl>
          </div>
          <div>
            <div class="preview-section-title" style="margin-bottom:var(--sp-2)">Tags</div>
            <div class="preview-tags"></div>
          </div>
          <div>
            <div class="preview-section-title" style="margin-bottom:var(--sp-2)">Notes</div>
            <div class="preview-notes" style="font-size:var(--text-sm);color:var(--text-secondary);white-space:pre-wrap;line-height:1.5;"></div>
          </div>
        </div>
      </aside>
    </div>`;

  const STYLES = `
.preview-overlay{position:fixed;inset:0;background:oklch(6% 0.010 250 / 0.85);display:none;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px)}
.preview-overlay.open{display:flex}
.preview-modal{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);width:min(1100px,94vw);height:min(720px,90vh);display:grid;grid-template-columns:1fr 320px;overflow:hidden;box-shadow:0 30px 80px oklch(0% 0 0 / 0.6)}
.preview-stage{background:oklch(2% 0.005 250);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.preview-stage video,.preview-stage audio,.preview-stage img{max-width:100%;max-height:100%;display:block}
.preview-stage audio{width:80%}
.preview-empty{color:var(--text-tertiary);font-size:var(--text-sm);padding:var(--sp-6);text-align:center}
.preview-sidebar{border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel)}
.preview-sidebar-header{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--sp-4);border-bottom:1px solid var(--border);gap:var(--sp-3)}
.preview-title{font-size:var(--text-md);font-weight:500;color:var(--text-primary);word-break:break-all;line-height:1.3;min-width:0}
.preview-close-btn{flex-shrink:0;width:28px;height:28px;border-radius:var(--r-md);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center}
.preview-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.preview-close-btn svg{width:16px;height:16px}
.preview-sidebar-body{flex:1;overflow-y:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-4)}
.preview-meta{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) var(--sp-3);font-size:var(--text-xs);margin:0}
.preview-meta dt{color:var(--text-tertiary);letter-spacing:0.05em;text-transform:uppercase}
.preview-meta dd{color:var(--text-primary);margin:0;word-break:break-all;font-variant-numeric:tabular-nums}
.preview-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.preview-tag{font-size:var(--text-xs);padding:2px 8px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border);color:var(--text-secondary)}
.preview-section-title{font-size:var(--text-xs);font-weight:500;color:var(--text-tertiary);letter-spacing:0.08em;text-transform:uppercase}
@media (max-width:800px){.preview-modal{grid-template-columns:1fr;grid-template-rows:1fr auto;height:95vh}.preview-sidebar{border-left:none;border-top:1px solid var(--border);max-height:40vh}}
`;
})();