requireOnboarding();

const character = getCharacter();
document.getElementById("tierReadout").textContent = TIERS[character.tier].label;

function getFollowing(){
  const raw = localStorage.getItem("sf_following");
  return raw ? JSON.parse(raw) : [];
}
function saveFollowing(list){
  localStorage.setItem("sf_following", JSON.stringify(list));
}

function renderRow(entity, following){
  const row = document.createElement("div");
  row.className = "list-row";
  row.innerHTML = `
    <div class="avatar">${initials(entity.name)}</div>
    <div class="meta">
      <div class="name">${entity.name}${entity.retired ? " · retired" : ""}</div>
      <div class="sub">@${entity.handle}</div>
      <div class="desc">${entity.role}</div>
    </div>
    <button class="btn ${following.includes(entity.handle) ? "ghost" : ""}" data-handle="${entity.handle}">
      ${following.includes(entity.handle) ? "Following" : "Follow"}
    </button>
  `;
  row.querySelector("button").addEventListener("click", (e) => {
    const handle = e.target.dataset.handle;
    let list = getFollowing();
    if (list.includes(handle)){
      list = list.filter(h => h !== handle);
      e.target.textContent = "Follow";
      e.target.classList.remove("ghost");
    } else {
      list.push(handle);
      e.target.textContent = "Following";
      e.target.classList.add("ghost");
    }
    saveFollowing(list);
  });
  return row;
}

function render(){
  const following = getFollowing();
  const npcList = document.getElementById("npcList");
  const newsList = document.getElementById("newsList");
  npcList.innerHTML = "";
  newsList.innerHTML = "";

  NPCS.forEach(n => npcList.appendChild(renderRow(n, following)));
  NEWS_CHANNELS.forEach(n => newsList.appendChild(renderRow(n, following)));
}

render();