results.js

// TrendScope Results Page Script
// Full-page data viewer for browsing scraped repos

let allRepos = [];
let currentSort = 'rank';
let prompt = '';

document.addEventListener('DOMContentLoaded', init);

async function init() {
  await loadData();
  setupEventListeners();
  renderRepos();
}

// Load data from storage
async function loadData() {
  const data = await chrome.storage.local.get(['repos', 'prompt', 'trendingPeriod', 'lastRun']);
  allRepos = data.repos || [];
  prompt = data.prompt || '';

  // Update stats bar
  const statsBar = document.getElementById('stats-bar');
  const period = data.trendingPeriod || 'weekly';
  const lastRun = data.lastRun ? new Date(data.lastRun).toLocaleDateString() : 'Unknown';
  const tokens = Math.round(prompt.length / 4 / 1000);

  statsBar.textContent = `${allRepos.length} repos • ${period} trending • ~${tokens}K tokens • ${lastRun}`;

  // Update prompt content
  document.getElementById('prompt-content').textContent = prompt;
}

// Setup event listeners
function setupEventListeners() {
  // Search
  document.getElementById('search').addEventListener('input', (e) => {
    renderRepos(e.target.value);
  });

  // Sort buttons
  document.querySelectorAll('.sort-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentSort = btn.dataset.sort;
      renderRepos(document.getElementById('search').value);
    });
  });

  // Copy prompt
  document.getElementById('copy-btn').addEventListener('click', async () => {
    await navigator.clipboard.writeText(prompt);
    showToast('Prompt copied to clipboard!');
  });

  // Open in Claude
  document.getElementById('claude-btn').addEventListener('click', async () => {
    await navigator.clipboard.writeText(prompt);
    window.open('https://claude.ai/new', '_blank');
    showToast('Prompt copied! Paste it in Claude (Ctrl+V)');
  });

  // Toggle prompt view
  document.getElementById('toggle-prompt').addEventListener('click', () => {
    const container = document.getElementById('prompt-container');
    const btn = document.getElementById('toggle-prompt');
    container.classList.toggle('hidden');
    btn.classList.toggle('expanded');
  });
}

// Render repo cards
function renderRepos(searchTerm = '') {
  const container = document.getElementById('repos-container');
  let repos = [...allRepos];

  // Filter by search
  if (searchTerm) {
    const term = searchTerm.toLowerCase();
    repos = repos.filter(repo =>
      repo.fullName?.toLowerCase().includes(term) ||
      repo.description?.toLowerCase().includes(term) ||
      repo.language?.toLowerCase().includes(term) ||
      repo.topics?.some(t => t.toLowerCase().includes(term))
    );
  }

  // Sort
  repos.sort((a, b) => {
    switch (currentSort) {
      case 'rank': return a.rank - b.rank;
      case 'starsWeek': return (b.starsThisWeek || 0) - (a.starsThisWeek || 0);
      case 'starsTotal': return (b.starsTotal || 0) - (a.starsTotal || 0);
      case 'name': return (a.fullName || '').localeCompare(b.fullName || '');
      case 'language': return (a.language || 'zzz').localeCompare(b.language || 'zzz');
      default: return 0;
    }
  });

  // Render
  container.innerHTML = repos.map(repo => renderRepoCard(repo)).join('');

  // Add expand listeners
  container.querySelectorAll('.readme-toggle').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const card = e.target.closest('.repo-card');
      const readme = card.querySelector('.readme-content');
      readme.classList.toggle('hidden');
      btn.textContent = readme.classList.contains('hidden') ? 'Show README' : 'Hide README';
    });
  });
}

// Render single repo card
function renderRepoCard(repo) {
  const languageColor = getLanguageColor(repo.language);
  const topics = repo.topics?.slice(0, 5).map(t => `<span class="topic">${t}</span>`).join('') || '';

  return `
    <article class="repo-card">
      <div class="repo-header">
        <div class="repo-title">
          <a href="${repo.url}" target="_blank" class="repo-name">${repo.fullName}</a>
          ${repo.language ? `<span class="language-badge" style="--lang-color: ${languageColor}">${repo.language}</span>` : ''}
          <span class="stars-badge">+${formatNumber(repo.starsThisWeek)} stars</span>
        </div>
      </div>
      <p class="repo-description">${repo.description || 'No description'}</p>
      ${topics ? `<div class="topics">${topics}</div>` : ''}
      <div class="repo-meta">
        <span>Total: ${formatNumber(repo.starsTotal)}</span>
        <span>Forks: ${formatNumber(repo.forks)}</span>
        <span>Issues: ${formatNumber(repo.openIssues)}</span>
        <span>License: ${repo.license || 'Unknown'}</span>
        ${repo.createdAt ? `<span>Created: ${repo.createdAt.split('T')[0]}</span>` : ''}
      </div>
      <div class="readme-section">
        <button class="readme-toggle">Show README</button>
        <pre class="readme-content hidden">${escapeHtml(repo.readme || 'README unavailable')}</pre>
      </div>
    </article>
  `;
}

// Format number with K/M suffix
function formatNumber(num) {
  if (num == null) return 'N/A';
  if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
  if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
  return num.toString();
}

// Escape HTML
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

// Get color for language
function getLanguageColor(language) {
  const colors = {
    JavaScript: '#f1e05a',
    TypeScript: '#3178c6',
    Python: '#3572A5',
    Rust: '#dea584',
    Go: '#00ADD8',
    Java: '#b07219',
    'C++': '#f34b7d',
    C: '#555555',
    Ruby: '#701516',
    PHP: '#4F5D95',
    Swift: '#F05138',
    Kotlin: '#A97BFF',
    Dart: '#00B4AB',
    Shell: '#89e051',
    HTML: '#e34c26',
    CSS: '#563d7c',
    Vue: '#41b883',
    Svelte: '#ff3e00'
  };
  return colors[language] || '#8b949e';
}

// Show toast notification
function showToast(message) {
  const toast = document.getElementById('toast');
  toast.textContent = message;
  toast.classList.remove('hidden');
  setTimeout(() => toast.classList.add('hidden'), 3000);
}