script.js

const YEAR = new Date().getFullYear();

const METRICS = [
  {
    id: "posts",
    title: "Posts",
    get: u => Number(u.posts || 0),
    line: v => `You posted ${fmt(v)} times this year.`
  },
  {
    id: "likes",
    title: "Likes",
    get: u => Number(u.likes || 0),
    line: v => `You received ${fmt(v)} likes.`
  },
  {
    id: "views",
    title: "Views",
    get: u => Number(u.views || 0),
    line: v => `You got ${fmt(v)} views.`
  },
  {
    id: "retweets_plus_comments",
    title: "RT + Comments",
    get: u => Number(u.retweets_plus_comments || 0),
    line: v => `${fmt(v)} retweets and comments — nice.`
  }
];

const $ = (id) => document.getElementById(id);

// screens
const screenInput = $("screenInput");
const screenRecap = $("screenRecap");

// input
const twInput = $("twInput");
const startBtn = $("startBtn");
const err = $("err");

// header
$("yearLabel").textContent = YEAR;
const userSub = $("userSub");
const pill = $("pill");
const changeUserBtn = $("changeUserBtn");

// identity
const pfp = $("pfp");
const nameEl = $("name");
const twEl = $("tw");
const dcEl = $("dc");

// modes
const slideMode = $("slideMode");
const finalMode = $("finalMode");

// slide elements
const metricTitle = $("metricTitle");
const metricValue = $("metricValue");
const metricLine = $("metricLine");
const ringFg = $("ringFg");
const topLabel = $("topLabel");
const betterLabel = $("betterLabel");
const boxDesc = $("boxDesc");
const rankEl = $("rank");
const bestEl = $("best");
const avgEl = $("avg");
const smallLine = $("smallLine");

// final elements
const finalSubtitle = $("finalSubtitle");
const sumPosts = $("sumPosts");
const sumLikes = $("sumLikes");
const sumViews = $("sumViews");
const sumRTC = $("sumRTC");
const sumPostsTop = $("sumPostsTop");
const sumLikesTop = $("sumLikesTop");
const sumViewsTop = $("sumViewsTop");
const sumRTCTop = $("sumRTCTop");
const finalLine = $("finalLine");

const sum_posts = $("sum_posts");
const sum_likes = $("sum_likes");
const sum_views = $("sum_views");
const sum_rtc = $("sum_rtc");

// under-card buttons
const prevBtn = $("prevBtn");
const nextBtn = $("nextBtn");

// state
let users = [];
let selected = null;
let slideIdx = 0;
let inFinal = false;

// used to cancel in-flight animations when user clicks prev/next
let runId = 0;

// helpers
function normNick(s){ return String(s||"").trim().replace(/^@/,"").toLowerCase(); }
function fmt(n){ return Number(n||0).toLocaleString("en-US"); }
function mean(arr){ return arr.length ? arr.reduce((a,b)=>a+b,0)/arr.length : 0; }


function upgradeTwitterPfp(url){
  const u = String(url || "");
  if (!u) return u;
  if (u.includes("_normal.")) return u.replace("_normal.", "_400x400.");
  if (u.includes("_normal")) return u.replace("_normal", "_400x400");
  return u;
}


function calcPlacement(values, v){
  const N = values.length || 1;
  const higher = values.filter(x => x > v).length;
  const lower  = values.filter(x => x < v).length;
  const rank = higher + 1;
  const betterThan = Math.floor((lower / N) * 100);
  const topPercent = Math.max(1, 100 - betterThan);
  const best = Math.max(...values, 0);
  const avg = mean(values);
  return {N, rank, betterThan, topPercent, best, avg};
}

function setRingByTop(topPercent){
  const circ = 302;
  const fill = Math.max(0, Math.min(100, 100 - topPercent));
  const offset = circ * (1 - fill/100);
  ringFg.style.strokeDasharray = circ;
  ringFg.style.strokeDashoffset = offset;
}

function showInput(){
  screenInput.classList.add("active");
  screenRecap.classList.remove("active");
}

function showRecap(){
  screenRecap.classList.add("active");
  screenInput.classList.remove("active");
}

function setNextEnabled(enabled){
  nextBtn.disabled = !enabled;
}

function showSlideMode(){
  inFinal = false;
  slideMode.classList.add("mode--active");
  finalMode.classList.remove("mode--active");
  pill.textContent = "RECAP";
  setNextEnabled(true);
}

function showFinalMode(){
  inFinal = true;
  finalMode.classList.add("mode--active");
  slideMode.classList.remove("mode--active");
  pill.textContent = "FINAL";
  setNextEnabled(false);
}

function resetSlideUI(){
  metricValue.textContent = "0";
  metricLine.textContent = "—";
  topLabel.textContent = "TOP —%";
  betterLabel.textContent = "better than —%";
  topLabel.classList.remove("show");
  betterLabel.classList.remove("show");
  ringFg.style.strokeDashoffset = 302;

  boxDesc.textContent = "—";
  rankEl.textContent = "#—";
  bestEl.textContent = "—";
  avgEl.textContent = "—";
}

function animateCountCancellable(el, to, duration, myRunId){
  const from = Number(String(el.textContent).replace(/[^0-9.-]/g,"")) || 0;
  const start = performance.now();
  const target = Number(to||0);

  return new Promise(resolve => {
    function tick(now){
      if (myRunId !== runId) return resolve(false); // cancelled

      const t = Math.min(1, (now-start)/duration);
      const eased = 1 - Math.pow(1-t, 3);
      const value = from + (target-from)*eased;
      el.textContent = fmt(Math.round(value));

      if(t<1) requestAnimationFrame(tick);
      else resolve(true);
    }
    requestAnimationFrame(tick);
  });
}

function waitCancellable(ms, myRunId){
  return new Promise(resolve => {
    const t = setTimeout(() => resolve(true), ms);
    const check = () => {
      if (myRunId !== runId) {
        clearTimeout(t);
        return resolve(false);
      }
      requestAnimationFrame(check);
    };
    requestAnimationFrame(check);
  });
}

function metricValues(metric){ return users.map(u => metric.get(u)); }

function fillUser(u){
  const dc = String(u.discord_nickname || "—");
  const name = dc.includes("#") ? dc.split("#")[0] : dc;

  userSub.textContent = `@${u.twitter_nickname} • ${YEAR}`;
  nameEl.textContent = name;
  twEl.textContent = "@"+(u.twitter_nickname || "—");
  dcEl.textContent = dc;

  // upgraded pfp
  pfp.src = upgradeTwitterPfp(u.pfp);
  pfp.onerror = () => {
    // fallback: if 400x400 fails, try stripping "_normal"
    const raw = String(u.pfp || "");
    if (raw.includes("_normal")) pfp.src = raw.replace("_normal", "");
  };

  smallLine.textContent = `user: @${u.twitter_nickname} • slides: ${METRICS.length}`;
}

async function playSlide(i){
  if(!selected) return;

  runId++;                 
  const myRunId = runId;

  showSlideMode();
  slideIdx = Math.max(0, Math.min(METRICS.length-1, i));
  const metric = METRICS[slideIdx];

  metricTitle.textContent = metric.title;
  resetSlideUI();

  const v = metric.get(selected);
  const values = metricValues(metric);
  const place = calcPlacement(values, v);

 
  const ok1 = await animateCountCancellable(metricValue, v, 950, myRunId);
  if(!ok1) return;


  const ok2 = await waitCancellable(200, myRunId);
  if(!ok2) return;
  metricLine.textContent = metric.line(v);


  const ok3 = await waitCancellable(220, myRunId);
  if(!ok3) return;
  topLabel.textContent = `TOP ${place.topPercent}%`;
  betterLabel.textContent = `better than ${place.betterThan}%`;
  topLabel.classList.add("show");
  betterLabel.classList.add("show");


  const ok4 = await waitCancellable(160, myRunId);
  if(!ok4) return;
  setRingByTop(place.topPercent);


  const ok5 = await waitCancellable(220, myRunId);
  if(!ok5) return;
  rankEl.textContent = "#"+place.rank;
  bestEl.textContent = fmt(Math.round(place.best));
  avgEl.textContent = fmt(Math.round(place.avg));
  boxDesc.textContent = `You are in the top ${place.topPercent}% for “${metric.title}” out of ${place.N} users.`;
}

function clearBestHighlights(){
  [sum_posts, sum_likes, sum_views, sum_rtc].forEach(el => el.classList.remove("best"));
}

function showFinal(){
  if(!selected) return;

  runId++; 
  showFinalMode();
  clearBestHighlights();

  const placements = {};
  for (const m of METRICS) {
    const v = m.get(selected);
    const values = metricValues(m);
    placements[m.id] = { v, ...calcPlacement(values, v) };
  }

  sumPosts.textContent = fmt(placements.posts.v);
  sumLikes.textContent = fmt(placements.likes.v);
  sumViews.textContent = fmt(placements.views.v);
  sumRTC.textContent   = fmt(placements.retweets_plus_comments.v);

  sumPostsTop.textContent = `TOP ${placements.posts.topPercent}%`;
  sumLikesTop.textContent = `TOP ${placements.likes.topPercent}%`;
  sumViewsTop.textContent = `TOP ${placements.views.topPercent}%`;
  sumRTCTop.textContent   = `TOP ${placements.retweets_plus_comments.topPercent}%`;

  finalSubtitle.textContent = `All metrics for ${YEAR}`;

  const best = Object.entries(placements)
    .map(([id, p]) => ({ id, top: p.topPercent }))
    .sort((a,b)=> a.top - b.top)[0];

  const titleMap = {
    posts: "Posts",
    likes: "Likes",
    views: "Views",
    retweets_plus_comments: "RT + Comments"
  };
  const cardMap = {
    posts: sum_posts,
    likes: sum_likes,
    views: sum_views,
    retweets_plus_comments: sum_rtc
  };

  cardMap[best.id]?.classList.add("best");
  finalLine.textContent = `Best metric: ${titleMap[best.id]} — TOP ${best.top}%`;
}


function goNext(){
  if(!selected) return;

  if(inFinal){
    return; 
  }

  if(slideIdx < METRICS.length - 1){
    playSlide(slideIdx + 1);
  } else {
    showFinal();
  }
}

function goPrev(){
  if(!selected) return;

  if(inFinal){

    playSlide(METRICS.length - 1);
    return;
  }

  if(slideIdx > 0){
    playSlide(slideIdx - 1);
  }
}


fetch("./users_stats.json")
  .then(r => r.json())
  .then(data => {
    users = Array.isArray(data) ? data : (data.users_stats || []);
    if(!users.length){
      err.textContent = "users_stats.json is empty or not an array";
      return;
    }
    twInput.focus();
  })
  .catch(() => {
    err.textContent = "Failed to load users_stats.json (use a local server / correct path)";
  });

function findUser(nick){
  const n = normNick(nick);
  return users.find(u => normNick(u.twitter_nickname) === n) || null;
}

function startRecap(){
  err.textContent = "";
  const u = findUser(twInput.value);
  if(!u){
    err.textContent = "User not found in users_stats.json";
    return;
  }

  selected = u;
  slideIdx = 0;
  inFinal = false;
  setNextEnabled(true);

  fillUser(u);
  showRecap();
  playSlide(0);
}


startBtn.addEventListener("click", startRecap);
twInput.addEventListener("keydown", (e) => { if(e.key === "Enter") startRecap(); });

changeUserBtn.addEventListener("click", () => {
  selected = null;
  inFinal = false;
  runId++; 
  showInput();
  twInput.focus();
});

prevBtn.addEventListener("click", goPrev);
nextBtn.addEventListener("click", goNext);

document.addEventListener("keydown", (e) => {
  if(!screenRecap.classList.contains("active")) return;
  if(e.key === "ArrowRight") goNext();
  if(e.key === "ArrowLeft") goPrev();
});