popup.js

// Utility functions
function formatDuration(ms) {
  if (!ms) return 'Unknown';
  const seconds = Math.floor(ms / 1000);
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`;
}

function sanitizeFilename(name) {
  return name.replace(/[<>:"/\\|?*]/g, '_').substring(0, 100);
}

function showToast(message) {
  const toast = document.getElementById('toast');
  toast.textContent = message;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 2000);
}

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showToast('Copied to clipboard!');
  } catch (err) {
    console.error('Failed to copy:', err);
    showToast('Failed to copy');
  }
}

// Main function to extract video info
async function extractVideoInfo() {
  return new Promise((resolve) => {
    chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
      const tab = tabs[0];
      
      if (!tab.url.includes('skool.com')) {
        resolve({ error: 'not_skool' });
        return;
      }

      try {
        const results = await chrome.scripting.executeScript({
          target: { tabId: tab.id },
          func: () => {
            // Try to find __NEXT_DATA__ script
            const nextDataScript = document.getElementById('__NEXT_DATA__');
            if (!nextDataScript) {
              return { error: 'no_next_data' };
            }

            try {
              const data = JSON.parse(nextDataScript.textContent);
              const pageProps = data?.props?.pageProps;
              
              // Check for video in different locations
              let videoData = null;
              let moduleData = null;
              
              // Direct video property
              if (pageProps?.video) {
                videoData = pageProps.video;
              }
              
              // Check renderData
              if (pageProps?.renderData?.video) {
                videoData = pageProps.renderData.video;
              }

              // Get module/lesson info
              const selectedModule = pageProps?.selectedModule;
              const course = pageProps?.course || pageProps?.renderData?.course;
              
              if (course?.children) {
                // Search through course children for the selected module
                const findModule = (items, targetId) => {
                  for (const item of items) {
                    if (item.course?.id === targetId) {
                      return item.course;
                    }
                    if (item.children) {
                      const found = findModule(item.children, targetId);
                      if (found) return found;
                    }
                  }
                  return null;
                };
                
                moduleData = findModule(course.children, selectedModule);
              }

              // Also check for Loom/YouTube links in module metadata
              let externalVideoLink = null;
              if (moduleData?.metadata) {
                const meta = typeof moduleData.metadata === 'string' 
                  ? JSON.parse(moduleData.metadata) 
                  : moduleData.metadata;
                if (meta.videoLink) {
                  externalVideoLink = meta.videoLink;
                }
              }

              if (!videoData && !externalVideoLink) {
                return { error: 'no_video' };
              }

              return {
                video: videoData,
                module: moduleData,
                externalVideoLink,
                courseName: course?.course?.metadata?.title || 'Unknown Course',
                pageUrl: window.location.href
              };
            } catch (e) {
              return { error: 'parse_error', message: e.message };
            }
          }
        });

        resolve(results[0]?.result || { error: 'no_result' });
      } catch (err) {
        resolve({ error: 'script_error', message: err.message });
      }
    });
  });
}

// Render the UI based on video info
function renderContent(info) {
  const content = document.getElementById('content');

  if (info.error) {
    let errorMessage = '';
    switch (info.error) {
      case 'not_skool':
        errorMessage = 'Please navigate to a Skool.com classroom page with a video.';
        break;
      case 'no_video':
        errorMessage = 'No video found on this page. Make sure you\'re on a lesson page with a video.';
        break;
      default:
        errorMessage = `Error: ${info.message || info.error}`;
    }

    content.innerHTML = `
      <div class="no-video">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
        </svg>
        <p>${errorMessage}</p>
      </div>
    `;
    return;
  }

  const video = info.video;
  const module = info.module;
  const metadata = module?.metadata || {};
  
  // Parse metadata if it's a string
  const meta = typeof metadata === 'string' ? JSON.parse(metadata) : metadata;
  
  const title = meta.title || 'Unknown Video';
  const duration = video?.duration || meta.videoLenMs;
  
  // Build video URLs
  let muxUrl = '';
  let m3u8Url = '';
  let playbackToken = '';
  
  if (video?.playbackId) {
    muxUrl = `https://stream.mux.com/${video.playbackId}.m3u8`;
    if (video.playbackToken) {
      m3u8Url = `${muxUrl}?token=${video.playbackToken}`;
      playbackToken = video.playbackToken;
    } else {
      m3u8Url = muxUrl;
    }
  }

  // Generate yt-dlp commands with proper headers
  const safeTitle = sanitizeFilename(title);
  const referer = 'https://www.skool.com/';
  const origin = 'https://www.skool.com';
  
  const ytdlpCommand = m3u8Url 
    ? `yt-dlp "${m3u8Url}" --referer "${referer}" --add-header "Origin:${origin}" -o "${safeTitle}.mp4"`
    : '';
  
  const ytdlpCommandBest = m3u8Url 
    ? `yt-dlp -f "bestvideo+bestaudio/best" "${m3u8Url}" --referer "${referer}" --add-header "Origin:${origin}" -o "${safeTitle}.mp4" --merge-output-format mp4`
    : '';

  // Check for external video links (Loom, YouTube)
  const externalLink = info.externalVideoLink || meta.videoLink;
  let externalCommand = '';
  if (externalLink) {
    externalCommand = `yt-dlp "${externalLink}" -o "${safeTitle}.mp4"`;
  }

  content.innerHTML = `
    <div class="status success">✓ Video detected on this page</div>
    
    <div class="video-info">
      <h2>Video Information</h2>
      <div class="info-row">
        <span class="label">Title</span>
        <span class="value" title="${title}">${title}</span>
      </div>
      <div class="info-row">
        <span class="label">Duration</span>
        <span class="value">${formatDuration(duration)}</span>
      </div>
      <div class="info-row">
        <span class="label">Course</span>
        <span class="value" title="${info.courseName}">${info.courseName}</span>
      </div>
      ${video?.aspectRatio ? `
      <div class="info-row">
        <span class="label">Aspect Ratio</span>
        <span class="value">${video.aspectRatio}</span>
      </div>
      ` : ''}
      <div class="info-row">
        <span class="label">Platform</span>
        <span class="value">${video?.playbackId ? 'Mux' : externalLink?.includes('loom') ? 'Loom' : externalLink?.includes('youtube') || externalLink?.includes('youtu.be') ? 'YouTube' : 'Unknown'}</span>
      </div>
    </div>

    ${m3u8Url ? `
    <div class="video-info">
      <h2>Stream URL (M3U8)</h2>
      <div class="url-box" id="streamUrl">${m3u8Url}</div>
      <div class="buttons">
        <button class="btn-primary" id="copyUrl">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
          </svg>
          Copy Stream URL
        </button>
      </div>
    </div>
    ` : ''}

    ${externalLink ? `
    <div class="video-info">
      <h2>External Video Link</h2>
      <div class="url-box" id="externalUrl">${externalLink}</div>
      <div class="buttons">
        <button class="btn-secondary" id="copyExternal">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
          </svg>
          Copy External Link
        </button>
      </div>
    </div>
    ` : ''}

    <div class="video-info">
      <h2>yt-dlp Commands</h2>
      ${ytdlpCommand ? `
      <div class="yt-dlp-command">
        <span class="label">Basic Command (Mux Stream):</span>
        <code id="cmd1">${ytdlpCommand}</code>
      </div>
      <div style="margin-top: 8px;">
        <button class="btn-secondary" id="copyCmd1" style="width: 100%;">Copy Basic Command</button>
      </div>
      
      <div class="yt-dlp-command" style="margin-top: 12px;">
        <span class="label">Best Quality Command:</span>
        <code id="cmd2">${ytdlpCommandBest}</code>
      </div>
      <div style="margin-top: 8px;">
        <button class="btn-secondary" id="copyCmd2" style="width: 100%;">Copy Best Quality Command</button>
      </div>
      ` : ''}
      
      ${externalCommand ? `
      <div class="yt-dlp-command" style="margin-top: 12px;">
        <span class="label">External Video Command:</span>
        <code id="cmdExt">${externalCommand}</code>
      </div>
      <div style="margin-top: 8px;">
        <button class="btn-primary" id="copyCmdExt" style="width: 100%;">
          <svg viewBox="0 0 24 24" fill="currentColor" style="width: 16px; height: 16px;">
            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
          </svg>
          Copy External Video Command
        </button>
      </div>
      ` : ''}
    </div>

    <div class="status info" style="margin-top: 16px; font-size: 12px;">
      💡 Run the yt-dlp command in your terminal to download the video. Make sure yt-dlp is installed.
    </div>
  `;

  // Add event listeners
  const copyUrlBtn = document.getElementById('copyUrl');
  if (copyUrlBtn) {
    copyUrlBtn.addEventListener('click', () => copyToClipboard(m3u8Url));
  }

  const copyExternalBtn = document.getElementById('copyExternal');
  if (copyExternalBtn) {
    copyExternalBtn.addEventListener('click', () => copyToClipboard(externalLink));
  }

  const copyCmd1Btn = document.getElementById('copyCmd1');
  if (copyCmd1Btn) {
    copyCmd1Btn.addEventListener('click', () => copyToClipboard(ytdlpCommand));
  }

  const copyCmd2Btn = document.getElementById('copyCmd2');
  if (copyCmd2Btn) {
    copyCmd2Btn.addEventListener('click', () => copyToClipboard(ytdlpCommandBest));
  }

  const copyCmdExtBtn = document.getElementById('copyCmdExt');
  if (copyCmdExtBtn) {
    copyCmdExtBtn.addEventListener('click', () => copyToClipboard(externalCommand));
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', async () => {
  const info = await extractVideoInfo();
  renderContent(info);
});