script.js

/* =====================================================================
   GitHub Profile Analyzer
   Vanilla JS. No charting libraries. All visuals hand-built (SVG/Canvas).
   ===================================================================== */

const GITHUB_API = 'https://api.github.com';
const FETCH_TIMEOUT_MS = 12000;
const MAX_REPOS_FOR_LANGUAGES = 8; // keep API usage low under the 60/hr unauth limit

// GitHub-ish language colors, with a deterministic fallback for anything else.
const LANG_COLORS = {
  JavaScript: '#F1E05A', TypeScript: '#3178C6', Python: '#3572A5', Java: '#B07219',
  'C++': '#F34B7D', C: '#555555', 'C#': '#178600', PHP: '#4F5D95', Ruby: '#701516',
  Go: '#00ADD8', Rust: '#DEA584', Swift: '#F05138', Kotlin: '#A97BFF', Dart: '#00B4AB',
  HTML: '#E34C26', CSS: '#563D7C', Shell: '#89E051', Vue: '#41B883', Scala: '#C22D40',
  Jupyter: '#DA5B0B', Lua: '#000080', Haskell: '#5E5086', Elixir: '#6E4A7E',
  'Objective-C': '#438EFF', R: '#198CE7', Perl: '#0298C3', Dockerfile: '#384D54'
};
function colorForLang(name){
  if(LANG_COLORS[name]) return LANG_COLORS[name];
  let hash = 0;
  for(let i=0;i<name.length;i++) hash = name.charCodeAt(i) + ((hash<<5)-hash);
  const hue = Math.abs(hash) % 360;
  return `hsl(${hue}, 62%, 58%)`;
}

/* ---------------------------- DOM refs ---------------------------- */
const els = {
  form: document.getElementById('searchForm'),
  input: document.getElementById('usernameInput'),
  chips: document.querySelectorAll('.chip'),
  stateIdle: document.getElementById('stateIdle'),
  stateLoading: document.getElementById('stateLoading'),
  stateError: document.getElementById('stateError'),
  stateLoaded: document.getElementById('stateLoaded'),
  stateEmptyRepos: document.getElementById('stateEmptyRepos'),
  loadingMsg: document.getElementById('loadingMsg'),
  errorTitle: document.getElementById('errorTitle'),
  errorBody: document.getElementById('errorBody'),
  rateLimitBox: document.getElementById('rateLimitBox'),
  rlCountdown: document.getElementById('rlCountdown'),
  rlBarFill: document.getElementById('rlBarFill'),
  retryBtn: document.getElementById('retryBtn'),
  avatarImg: document.getElementById('avatarImg'),
  profileName: document.getElementById('profileName'),
  profileHandle: document.getElementById('profileHandle'),
  profileBio: document.getElementById('profileBio'),
  profileLocation: document.getElementById('profileLocation'),
  profileCompany: document.getElementById('profileCompany'),
  statFollowers: document.getElementById('statFollowers'),
  statFollowing: document.getElementById('statFollowing'),
  statRepos: document.getElementById('statRepos'),
  statStars: document.getElementById('statStars'),
  orbitSvg: document.getElementById('orbitSvg'),
  orbitTopLang: document.getElementById('orbitTopLang'),
  orbitLegend: document.getElementById('orbitLegend'),
  orbitNote: document.getElementById('orbitNote'),
  repoGrid: document.getElementById('repoGrid'),
  heatmapCard: document.getElementById('heatmapCard'),
  heatmapGrid: document.getElementById('heatmapGrid'),
  themeToggle: document.getElementById('themeToggle'),
  exportBtn: document.getElementById('exportBtn'),
  exportCanvas: document.getElementById('exportCanvas'),
};

let lastQuery = '';
let rlInterval = null;

/* ---------------------------- State machine ---------------------------- */
const STATES = ['stateIdle','stateLoading','stateError','stateLoaded','stateEmptyRepos'];
function showState(name){
  STATES.forEach(s => els[s].classList.toggle('hidden', s !== name));
  if(rlInterval && name !== 'stateError'){ clearInterval(rlInterval); rlInterval = null; }
}

/* ---------------------------- Fetch helper with timeout ---------------------------- */
async function fetchJSON(url){
  const controller = new AbortController();
  const t = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
  try{
    const res = await fetch(url, { signal: controller.signal, headers: { Accept: 'application/vnd.github+json' } });
    clearTimeout(t);
    return res;
  }catch(err){
    clearTimeout(t);
    if(err.name === 'AbortError'){
      const e = new Error('timeout'); e.kind = 'timeout'; throw e;
    }
    const e = new Error('network'); e.kind = 'network'; throw e;
  }
}

async function githubGet(path){
  const res = await fetchJSON(`${GITHUB_API}${path}`);
  const remaining = res.headers.get('x-ratelimit-remaining');
  const reset = res.headers.get('x-ratelimit-reset');

  if(res.status === 403 && remaining === '0'){
    const e = new Error('rate-limit'); e.kind = 'rate-limit'; e.reset = parseInt(reset,10)*1000;
    throw e;
  }
  if(res.status === 404){
    const e = new Error('not-found'); e.kind = 'not-found';
    throw e;
  }
  if(!res.ok){
    const e = new Error('api-error'); e.kind = 'api-error'; e.status = res.status;
    throw e;
  }
  return res.json();
}

/* ---------------------------- Error rendering ---------------------------- */
function renderError(err, username){
  showState('stateError');
  els.rateLimitBox.classList.add('hidden');

  if(err.kind === 'not-found'){
    els.errorTitle.textContent = `"${username}" doesn't exist on GitHub.`;
    els.errorBody.textContent = 'Double-check the username — GitHub handles are case-insensitive but must be exact.';
  } else if(err.kind === 'rate-limit'){
    els.errorTitle.textContent = 'GitHub API rate limit hit.';
    els.errorBody.textContent = 'Unauthenticated requests are capped at 60/hour. The trace will unlock automatically when it resets.';
    startRateLimitCountdown(err.reset);
  } else if(err.kind === 'timeout'){
    els.errorTitle.textContent = 'The request took too long.';
    els.errorBody.textContent = 'GitHub may be slow to respond right now. Check your connection and try again.';
  } else if(err.kind === 'network'){
    els.errorTitle.textContent = 'Network request failed.';
    els.errorBody.textContent = 'You might be offline, or a browser extension is blocking the request.';
  } else {
    els.errorTitle.textContent = 'Unexpected response from GitHub.';
    els.errorBody.textContent = `The API returned an error${err.status ? ` (status ${err.status})` : ''}. Please try again.`;
  }
}

function startRateLimitCountdown(resetMs){
  els.rateLimitBox.classList.remove('hidden');
  const total = Math.max(resetMs - Date.now(), 1000);
  const startTotal = total;
  if(rlInterval) clearInterval(rlInterval);
  function tick(){
    const remaining = Math.max(resetMs - Date.now(), 0);
    const mins = Math.floor(remaining/60000);
    const secs = Math.floor((remaining%60000)/1000);
    els.rlCountdown.textContent = `${String(mins).padStart(2,'0')}:${String(secs).padStart(2,'0')}`;
    els.rlBarFill.style.width = `${Math.max((remaining/startTotal)*100, 0)}%`;
    if(remaining <= 0){
      clearInterval(rlInterval); rlInterval = null;
      els.rlCountdown.textContent = 'ready';
    }
  }
  tick();
  rlInterval = setInterval(tick, 1000);
}

/* ---------------------------- Main search flow ---------------------------- */
async function runSearch(usernameRaw){
  const username = usernameRaw.trim();
  if(!username) return;
  lastQuery = username;
  showState('stateLoading');
  els.loadingMsg.textContent = 'Reaching into the graph…';

  try{
    const user = await githubGet(`/users/${encodeURIComponent(username)}`);

    els.loadingMsg.textContent = 'Pulling repositories…';
    let repos = await githubGet(`/users/${encodeURIComponent(username)}/repos?per_page=100&sort=updated`);
    if(!Array.isArray(repos)) repos = [];

    if(repos.length === 0){
      renderProfile(user, [], {});
      renderEmptyRepoNotice();
      showState('stateLoaded');
      els.stateEmptyRepos.classList.remove('hidden'); // shown alongside profile
      return;
    }

    els.loadingMsg.textContent = 'Reading language signatures…';
    const langTotals = await gatherLanguages(username, repos);

    renderProfile(user, repos, langTotals);
    showState('stateLoaded');

    els.loadingMsg.textContent = 'Charting contribution rhythm…';
    loadHeatmap(username); // best-effort, non-blocking failure

  }catch(err){
    renderError(err, username);
  }
}

async function gatherLanguages(username, repos){
  const nonForks = repos.filter(r => !r.fork);
  const candidates = [...nonForks].sort((a,b) => b.stargazers_count - a.stargazers_count).slice(0, MAX_REPOS_FOR_LANGUAGES);
  const totals = {};

  for(const repo of candidates){
    try{
      const langs = await githubGet(`/repos/${username}/${repo.name}/languages`);
      for(const [lang, bytes] of Object.entries(langs)){
        totals[lang] = (totals[lang] || 0) + bytes;
      }
    }catch(e){
      // Skip a repo's language data silently rather than failing the whole trace —
      // partial language data is far better than no profile at all.
      if(repo.language){
        totals[repo.language] = (totals[repo.language] || 0) + 1000; // rough fallback weight
      }
    }
  }
  return totals;
}

/* ---------------------------- Rendering: profile ---------------------------- */
function renderProfile(user, repos, langTotals){
  els.avatarImg.src = user.avatar_url;
  els.profileName.textContent = user.name || user.login;
  els.profileHandle.textContent = `@${user.login}`;
  typeBio(user.bio || 'This developer keeps their bio as mysterious as a merge conflict.');

  toggleMetaPill(els.profileLocation, user.location);
  toggleMetaPill(els.profileCompany, user.company);

  animateCount(els.statFollowers, user.followers);
  animateCount(els.statFollowing, user.following);
  animateCount(els.statRepos, user.public_repos);
  const totalStars = repos.reduce((sum, r) => sum + (r.stargazers_count || 0), 0);
  animateCount(els.statStars, totalStars);

  renderOrbit(langTotals, repos.length > MAX_REPOS_FOR_LANGUAGES);
  renderRepoCards(repos);
}

function toggleMetaPill(el, value){
  if(value){
    el.classList.remove('hidden');
    el.querySelector('em').textContent = value;
  } else {
    el.classList.add('hidden');
  }
}

function typeBio(text){
  els.profileBio.textContent = '';
  const cursor = document.createElement('span');
  cursor.className = 'cursor';
  cursor.textContent = '\u00A0';
  let i = 0;
  els.profileBio.appendChild(document.createTextNode(''));
  const speed = Math.max(8, Math.min(28, 900 / Math.max(text.length,1)));
  function step(){
    els.profileBio.textContent = text.slice(0, i);
    els.profileBio.appendChild(cursor);
    i++;
    if(i <= text.length) setTimeout(step, speed);
    else setTimeout(() => cursor.remove(), 900);
  }
  step();
}

function animateCount(el, target){
  target = target || 0;
  const duration = 700;
  const start = performance.now();
  function frame(now){
    const p = Math.min((now - start) / duration, 1);
    const eased = 1 - Math.pow(1 - p, 3);
    el.textContent = formatCompact(Math.round(target * eased));
    if(p < 1) requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}
function formatCompact(n){
  if(n >= 1_000_000) return (n/1_000_000).toFixed(1).replace(/\.0$/,'') + 'M';
  if(n >= 1000) return (n/1000).toFixed(1).replace(/\.0$/,'') + 'k';
  return String(n);
}

/* ---------------------------- Hand-built radial "orbit" chart (SVG) ---------------------------- */
function renderOrbit(langTotals, truncatedNote){
  els.orbitSvg.innerHTML = '';
  els.orbitLegend.innerHTML = '';
  els.orbitNote.textContent = truncatedNote ? `(top ${MAX_REPOS_FOR_LANGUAGES} repos by stars)` : '';

  const entries = Object.entries(langTotals).sort((a,b) => b[1]-a[1]).slice(0, 6);
  const total = entries.reduce((s,[,v]) => s+v, 0);

  if(entries.length === 0){
    els.orbitTopLang.textContent = '—';
    const svgns = 'http://www.w3.org/2000/svg';
    const t = document.createElementNS(svgns,'text');
    t.setAttribute('x','210'); t.setAttribute('y','215'); t.setAttribute('text-anchor','middle');
    t.setAttribute('fill','var(--muted)'); t.setAttribute('font-size','13'); t.setAttribute('font-family','var(--mono)');
    t.textContent = 'no language data available';
    els.orbitSvg.appendChild(t);
    return;
  }

  els.orbitTopLang.textContent = entries[0][0];

  const svgns = 'http://www.w3.org/2000/svg';
  const cx = 210, cy = 210;
  const baseRadius = 60;
  const ringGap = 22;

  entries.forEach(([lang, bytes], idx) => {
    const pct = bytes / total;
    const radius = baseRadius + idx * ringGap;
    const circumference = 2 * Math.PI * radius;
    const dash = Math.max(pct * circumference, 2);
    const color = colorForLang(lang);

    // track (faint full ring)
    const track = document.createElementNS(svgns, 'circle');
    track.setAttribute('cx', cx); track.setAttribute('cy', cy); track.setAttribute('r', radius);
    track.setAttribute('fill', 'none');
    track.setAttribute('stroke', 'var(--border)');
    track.setAttribute('stroke-width', '10');
    els.orbitSvg.appendChild(track);

    // arc (animated draw-in)
    const arc = document.createElementNS(svgns, 'circle');
    arc.setAttribute('cx', cx); arc.setAttribute('cy', cy); arc.setAttribute('r', radius);
    arc.setAttribute('fill', 'none');
    arc.setAttribute('stroke', color);
    arc.setAttribute('stroke-width', '10');
    arc.setAttribute('stroke-linecap', 'round');
    arc.setAttribute('stroke-dasharray', `${circumference}`);
    arc.setAttribute('stroke-dashoffset', `${circumference}`);
    arc.setAttribute('transform', `rotate(-90 ${cx} ${cy})`);
    arc.style.transition = `stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1) ${idx * 0.12}s`;
    els.orbitSvg.appendChild(arc);

    requestAnimationFrame(() => requestAnimationFrame(() => {
      arc.setAttribute('stroke-dashoffset', `${circumference - dash}`);
    }));

    const legendItem = document.createElement('div');
    legendItem.className = 'legend-item';
    legendItem.innerHTML = `<span class="legend-dot" style="background:${color}"></span>${lang} · ${(pct*100).toFixed(1)}%`;
    els.orbitLegend.appendChild(legendItem);
  });
}

/* ---------------------------- Repo cards ---------------------------- */
function renderRepoCards(repos){
  els.repoGrid.innerHTML = '';
  const top = [...repos]
    .filter(r => !r.fork)
    .sort((a,b) => (b.stargazers_count - a.stargazers_count) || (new Date(b.pushed_at) - new Date(a.pushed_at)))
    .slice(0, 6);

  const source = top.length ? top : [...repos].sort((a,b) => new Date(b.pushed_at) - new Date(a.pushed_at)).slice(0,6);

  source.forEach((repo, idx) => {
    const card = document.createElement('a');
    card.href = repo.html_url;
    card.target = '_blank';
    card.rel = 'noopener noreferrer';
    card.className = 'repo-card';
    card.style.animationDelay = `${idx * 0.07}s`;
    const lang = repo.language;
    const color = lang ? colorForLang(lang) : 'var(--muted)';
    card.innerHTML = `
      <div class="repo-name">${escapeHTML(repo.name)}</div>
      <div class="repo-desc">${escapeHTML(repo.description || 'No description provided.')}</div>
      <div class="repo-foot">
        <span>★ ${formatCompact(repo.stargazers_count)}</span>
        <span>⑂ ${formatCompact(repo.forks_count)}</span>
        ${lang ? `<span><span class="lang-dot" style="background:${color}"></span>${escapeHTML(lang)}</span>` : ''}
      </div>
    `;
    els.repoGrid.appendChild(card);
  });
}

function renderEmptyRepoNotice(){
  els.repoGrid.innerHTML = '';
  els.stateEmptyRepos.innerHTML = `
    <span class="big-glyph">◌</span>
    <p>This developer has zero public repositories — a clean slate, not an error.</p>
  `;
  els.orbitLegend.innerHTML = '';
  renderOrbit({}, false);
}

function escapeHTML(str){
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}

/* ---------------------------- Contribution heatmap (stretch, best-effort) ---------------------------- */
async function loadHeatmap(username){
  els.heatmapCard.classList.remove('hidden');
  els.heatmapGrid.innerHTML = '<p style="color:var(--muted); font-size:.8rem; font-family:var(--mono);">loading…</p>';
  try{
    const res = await fetchJSON(`https://github-contributions-api.jogruber.de/v4/${encodeURIComponent(username)}?y=last`);
    if(!res.ok) throw new Error('heatmap-unavailable');
    const data = await res.json();
    const days = (data.contributions || []).slice(-140); // ~20 weeks, keeps it compact
    els.heatmapGrid.innerHTML = '';
    days.forEach((d, idx) => {
      const cell = document.createElement('div');
      cell.className = 'hm-cell';
      const level = d.level ?? Math.min(4, Math.floor((d.count||0)/3));
      if(level > 0){
        cell.style.background = `color-mix(in srgb, var(--accent-3) ${20 + level*20}%, var(--surface-2))`;
      }
      cell.title = `${d.date}: ${d.count} contribution${d.count===1?'':'s'}`;
      cell.style.animationDelay = `${idx*2}ms`;
      els.heatmapGrid.appendChild(cell);
    });
  }catch(e){
    // Non-critical feature — fail quietly rather than breaking the whole page.
    els.heatmapCard.classList.add('hidden');
  }
}

/* ---------------------------- Ambient starfield ---------------------------- */
function initStarfield(){
  const canvas = document.getElementById('starfield');
  const ctx = canvas.getContext('2d');
  let stars = [];
  function resize(){
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const count = Math.floor((canvas.width * canvas.height) / 9000);
    stars = Array.from({length: count}, () => ({
      x: Math.random()*canvas.width,
      y: Math.random()*canvas.height,
      r: Math.random()*1.2 + 0.2,
      phase: Math.random()*Math.PI*2,
      speed: Math.random()*0.02 + 0.005,
    }));
  }
  let t = 0;
  function draw(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.fillStyle = getComputedStyle(document.body).getPropertyValue('--text') || '#fff';
    stars.forEach(s => {
      const twinkle = 0.4 + 0.6 * Math.abs(Math.sin(t*s.speed + s.phase));
      ctx.globalAlpha = twinkle * 0.7;
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
      ctx.fill();
    });
    ctx.globalAlpha = 1;
    t++;
    requestAnimationFrame(draw);
  }
  window.addEventListener('resize', resize);
  resize();
  draw();
}

/* ---------------------------- Theme toggle ---------------------------- */
function initTheme(){
  const saved = localStorageSafeGet('gh-analyzer-theme') || 'dark';
  document.body.dataset.theme = saved;
  els.themeToggle.querySelector('.toggle-icon').textContent = saved === 'dark' ? '☾' : '☀';
  els.themeToggle.addEventListener('click', () => {
    const next = document.body.dataset.theme === 'dark' ? 'light' : 'dark';
    document.body.dataset.theme = next;
    els.themeToggle.querySelector('.toggle-icon').textContent = next === 'dark' ? '☾' : '☀';
    localStorageSafeSet('gh-analyzer-theme', next);
  });
}
// Artifact-safe localStorage wrapper (falls back to in-memory if unavailable)
const memoryStore = {};
function localStorageSafeGet(key){
  try{ return window.localStorage.getItem(key) ?? memoryStore[key]; }catch(e){ return memoryStore[key]; }
}
function localStorageSafeSet(key, val){
  try{ window.localStorage.setItem(key, val); }catch(e){ memoryStore[key] = val; }
}

/* ---------------------------- PNG export ---------------------------- */
function exportCard(){
  const canvas = els.exportCanvas;
  const ctx = canvas.getContext('2d');
  const isDark = document.body.dataset.theme === 'dark';
  ctx.fillStyle = isDark ? '#0B0E14' : '#F5F3EE';
  ctx.fillRect(0,0,canvas.width, canvas.height);

  ctx.fillStyle = isDark ? '#E7E9EE' : '#221F1A';
  ctx.font = '700 30px "JetBrains Mono", monospace';
  ctx.fillText(els.profileName.textContent, 40, 70);

  ctx.fillStyle = '#7C83FD';
  ctx.font = '500 18px "JetBrains Mono", monospace';
  ctx.fillText(els.profileHandle.textContent, 40, 100);

  ctx.fillStyle = isDark ? '#8A93A6' : '#756F62';
  ctx.font = '400 15px Inter, sans-serif';
  wrapText(ctx, els.profileBio.textContent.replace(/\u00A0/g,''), 40, 135, 500, 22);

  const stats = [
    ['followers', els.statFollowers.textContent],
    ['following', els.statFollowing.textContent],
    ['repos', els.statRepos.textContent],
    ['stars', els.statStars.textContent],
  ];
  stats.forEach(([label, val], i) => {
    const x = 40 + i*150;
    ctx.fillStyle = '#F2C14E';
    ctx.font = '700 22px "JetBrains Mono", monospace';
    ctx.fillText(val, x, 220);
    ctx.fillStyle = isDark ? '#8A93A6' : '#756F62';
    ctx.font = '400 12px Inter, sans-serif';
    ctx.fillText(label.toUpperCase(), x, 240);
  });

  ctx.fillStyle = isDark ? '#8A93A6' : '#756F62';
  ctx.font = '400 12px "JetBrains Mono", monospace';
  ctx.fillText('generated with GitHub Profile Analyzer', 40, 470);

  const link = document.createElement('a');
  link.download = `${els.profileHandle.textContent.replace('@','')}-profile-card.png`;
  link.href = canvas.toDataURL('image/png');
  link.click();
}
function wrapText(ctx, text, x, y, maxWidth, lineHeight){
  const words = text.split(' ');
  let line = '', cy = y;
  for(const word of words){
    const test = line + word + ' ';
    if(ctx.measureText(test).width > maxWidth && line){
      ctx.fillText(line, x, cy);
      line = word + ' '; cy += lineHeight;
    } else line = test;
  }
  ctx.fillText(line, x, cy);
}

/* ---------------------------- Wire up events ---------------------------- */
els.form.addEventListener('submit', (e) => {
  e.preventDefault();
  runSearch(els.input.value);
});
els.chips.forEach(chip => chip.addEventListener('click', () => {
  els.input.value = chip.dataset.user;
  runSearch(chip.dataset.user);
}));
els.retryBtn.addEventListener('click', () => runSearch(lastQuery || els.input.value));
els.exportBtn.addEventListener('click', exportCard);

initTheme();
initStarfield();
showState('stateIdle');