/**
 * viewer.js — Goon Viewer page logic.
 * Reads video URLs from chrome.storage and renders them in a 2x2 grid.
 */

const params = new URLSearchParams(location.search);
const id = params.get('id');
const panelsEl = document.getElementById('panels');

// Fetch stored video URLs and render panels
async function init() {
  console.log('[goon-viewer] init called, id:', id, 'url:', location.href);

  if (!id) {
    panelsEl.innerHTML = '<div style="padding:20px;color:#64748b">No viewer ID provided</div>';
    return;
  }

  const data = await chrome.storage.local.get([id]);
  console.log('[goon-viewer] raw storage:', data);
  const videoUrls = data[id] || [];
  console.log('[goon-viewer] video URLs to render:', videoUrls, '(count:', videoUrls.length, ')');

  const overlay = document.createElement('div');
  overlay.id = 'viewer-status';
  overlay.style.cssText = 'position:absolute;top:0;left:0;right:0;background:rgba(0,0,0,0.85);color:#fff;padding:8px 16px;font-family:sans-serif;font-size:14px;z-index:999;';
  document.body.style.position = 'relative';
  document.body.insertBefore(overlay, document.body.firstChild);

  overlay.textContent = `Found ${videoUrls.length} video URL(s)`;
  console.log('[goon-viewer]', overlay.textContent);

  // Create exactly 4 panels
  for (let i = 0; i < 4; i++) {
    const panel = document.createElement('div');
    panel.classList.add('panel');

    if (i < videoUrls.length && videoUrls[i]) {
      const video = document.createElement('video');
      video.src = videoUrls[i];
      video.autoplay = true;
      video.muted = true;
      video.playsInline = true;
      console.log('[goon-viewer] panel', i + '/4:', videoUrls[i]);
      panel.appendChild(video);
    } else {
      panel.classList.add('empty');
    }

    panelsEl.appendChild(panel);
  }
}

// Clean up storage entry when the viewer is closed
window.addEventListener('unload', async () => {
  if (id) {
    await chrome.storage.local.remove([id]);
  }
});

init();