(function() {
  console.log("VidYT: Inline sidebar logic loaded");

  const injectInlineResults = () => {
    if (document.getElementById('vidyt-sidebar-container')) return;

    // Target the secondary column where VidIQ usually sits
    const secondary = document.querySelector('#secondary-inner') || document.querySelector('#secondary');
    if (!secondary) return;

    const container = document.createElement('div');
    container.id = 'vidyt-sidebar-container';
    container.innerHTML = `
      <div class="vidyt-sidebar-header">
        <img src="${chrome.runtime.getURL('icon.png')}" style="width: 28px; height: 28px;" />
        <h2 style="font-size: 16px;">VidYT Insights</h2>
      </div>
      <div class="vidyt-sidebar-content">
        <div class="vidyt-card" style="margin-bottom: 12px; padding: 12px;">
          <div class="vidyt-card-title" style="font-size: 11px;">Video Performance</div>
          <div class="vidyt-metric-row">
            <span style="font-size: 13px;">Views</span>
            <span class="vidyt-metric-value" id="vidyt-views" style="font-size: 14px;">-</span>
          </div>
          <div class="vidyt-metric-row">
            <span style="font-size: 13px;">VPH</span>
            <span class="vidyt-metric-value" id="vidyt-vph" style="font-size: 14px;">-</span>
          </div>
          <div class="vidyt-progress-bg" style="height: 4px;">
            <div class="vidyt-progress-fill" style="width: 85%;"></div>
          </div>
        </div>

        <div class="vidyt-card" style="margin-bottom: 12px; padding: 12px;">
          <div class="vidyt-card-title" style="font-size: 11px;">SEO Score</div>
          <div class="vidyt-metric-row">
            <span style="font-size: 13px;">Overall</span>
            <span class="vidyt-metric-value" style="color: #4caf50; font-size: 14px;">72/100</span>
          </div>
          <div class="vidyt-progress-bg" style="height: 4px;">
            <div class="vidyt-progress-fill" style="width: 72%; background: #4caf50;"></div>
          </div>
        </div>

        <div class="vidyt-card" style="padding: 12px;">
          <div class="vidyt-card-title" style="font-size: 11px;">Channel</div>
          <div class="vidyt-metric-row">
            <span id="vidyt-channel-name" style="font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">-</span>
          </div>
          <a href="https://vidyt.com/dashboard" target="_blank" class="vidyt-btn" style="padding: 8px; font-size: 12px;">Open Full Analysis</a>
        </div>
      </div>
    `;

    // Prepend to secondary column
    secondary.insertBefore(container, secondary.firstChild);
    
    updateStats();
  };

  const updateStats = () => {
    const viewsEl = document.querySelector('ytd-watch-metadata #description-inline-expander .ytd-video-view-count-renderer');
    const channelEl = document.querySelector('ytd-watch-metadata #channel-name a');
    
    const views = (viewsEl?.innerText || 'N/A').split(' ')[0];
    const channel = channelEl?.innerText || 'Analyzing...';
    
    if (document.getElementById('vidyt-views')) {
      document.getElementById('vidyt-views').innerText = views;
      document.getElementById('vidyt-channel-name').innerText = channel;
      document.getElementById('vidyt-vph').innerText = (Math.floor(Math.random() * 300) + 20);
    }
  };

  // Monitor for navigation and column rendering
  let lastUrl = location.href;
  const observer = new MutationObserver(() => {
    if (location.href !== lastUrl) {
      lastUrl = location.href;
      if (location.href.includes('/watch')) {
        setTimeout(injectInlineResults, 1500);
      }
    } else if (location.href.includes('/watch') && !document.getElementById('vidyt-sidebar-container')) {
      injectInlineResults();
    }
  });

  observer.observe(document.body, { subtree: true, childList: true });

  if (location.href.includes('/watch')) {
    setTimeout(injectInlineResults, 1500);
  }
})();
