script.js

const TRAINING_SAMPLE = [
  { id: "T-01", age: 27, viralLoad: 54000, cd4: 260, missedVisits: 3, priority: 87, needFollowUp: "Yes" },
  { id: "T-02", age: 42, viralLoad: 39000, cd4: 310, missedVisits: 2, priority: 79, needFollowUp: "Yes" },
  { id: "T-03", age: 31, viralLoad: 15000, cd4: 520, missedVisits: 1, priority: 41, needFollowUp: "No" },
  { id: "T-04", age: 49, viralLoad: 62000, cd4: 230, missedVisits: 4, priority: 93, needFollowUp: "Yes" },
  { id: "T-05", age: 36, viralLoad: 18000, cd4: 480, missedVisits: 1, priority: 46, needFollowUp: "No" },
  { id: "T-06", age: 44, viralLoad: 27000, cd4: 410, missedVisits: 2, priority: 68, needFollowUp: "Yes" },
  { id: "T-07", age: 29, viralLoad: 12000, cd4: 610, missedVisits: 0, priority: 28, needFollowUp: "No" },
  { id: "T-08", age: 53, viralLoad: 70000, cd4: 190, missedVisits: 5, priority: 97, needFollowUp: "Yes" },
  { id: "T-09", age: 33, viralLoad: 21000, cd4: 450, missedVisits: 1, priority: 52, needFollowUp: "No" },
  { id: "T-10", age: 40, viralLoad: 33000, cd4: 360, missedVisits: 2, priority: 72, needFollowUp: "Yes" }
];

const HIDDEN_PERSON = {
  id: "X",
  age: 50,
  viralLoad: 86000,
  cd4: 210,
  missedVisits: 4,
  priority: 96,
  needFollowUp: "Yes"
};

const GAME_RECORDS = [
  { id: 1, member: true, age: 29, viralLoad: 58000, cd4: 250, missedVisits: 3, district: "North", priority: 90, clueBase: 82, clueProtected: 54 },
  { id: 2, member: true, age: 45, viralLoad: 41000, cd4: 300, missedVisits: 2, district: "West", priority: 77, clueBase: 76, clueProtected: 51 },
  { id: 3, member: true, age: 34, viralLoad: 24000, cd4: 430, missedVisits: 1, district: "Central", priority: 63, clueBase: 70, clueProtected: 49 },
  { id: 4, member: true, age: 52, viralLoad: 67000, cd4: 210, missedVisits: 4, district: "South", priority: 95, clueBase: 66, clueProtected: 53 },
  { id: 5, member: false, age: 39, viralLoad: 26000, cd4: 400, missedVisits: 1, district: "North", priority: 56, clueBase: 43, clueProtected: 50 },
  { id: 6, member: false, age: 30, viralLoad: 17000, cd4: 520, missedVisits: 0, district: "East", priority: 33, clueBase: 36, clueProtected: 48 },
  { id: 7, member: false, age: 47, viralLoad: 34000, cd4: 360, missedVisits: 2, district: "West", priority: 61, clueBase: 30, clueProtected: 52 },
  { id: 8, member: false, age: 35, viralLoad: 22000, cd4: 470, missedVisits: 1, district: "Central", priority: 49, clueBase: 24, clueProtected: 47 }
];

const screens = Array.from(document.querySelectorAll(".screen"));
const stepButtons = Array.from(document.querySelectorAll(".step"));

const els = {
  featureTableBody: document.getElementById("featureTableBody"),
  aggregateCards: document.getElementById("aggregateCards"),
  compareStateLabel: document.getElementById("compareStateLabel"),
  toggleHiddenBtn: document.getElementById("toggleHiddenBtn"),

  startBtn: document.getElementById("startBtn"),
  toAttackBtn: document.getElementById("toAttackBtn"),
  toDefenseBtn: document.getElementById("toDefenseBtn"),
  prevBtn: document.getElementById("prevBtn"),
  nextBtn: document.getElementById("nextBtn"),
  navHint: document.getElementById("navHint"),

  attackCards: document.getElementById("attackCards"),
  attackTau: document.getElementById("attackTau"),
  attackRevealBtn: document.getElementById("attackRevealBtn"),
  attackResult: document.getElementById("attackResult"),

  shieldSlider: document.getElementById("shieldSlider"),
  shieldLabel: document.getElementById("shieldLabel"),
  riskEase: document.getElementById("riskEase"),
  reductionValue: document.getElementById("reductionValue"),
  qualityValue: document.getElementById("qualityValue"),
  baseDistChart: document.getElementById("baseDistChart"),
  dpDistChart: document.getElementById("dpDistChart"),
  distCaption: document.getElementById("distCaption"),

  defenseCards: document.getElementById("defenseCards"),
  defenseTau: document.getElementById("defenseTau"),
  defenseRevealBtn: document.getElementById("defenseRevealBtn"),
  defenseResult: document.getElementById("defenseResult"),

  finalAttackScore: document.getElementById("finalAttackScore"),
  finalDefenseScore: document.getElementById("finalDefenseScore"),
  finalDrop: document.getElementById("finalDrop"),
  finalText: document.getElementById("finalText"),
  restartBtn: document.getElementById("restartBtn"),
  backDefenseBtn: document.getElementById("backDefenseBtn")
};

const state = {
  currentScreen: 0,
  hiddenJoined: false,
  attack: { guesses: {}, revealed: false, score: null },
  defense: { guesses: {}, revealed: false, score: null },
  completedAttack: false,
  completedDefense: false
};

function clamp(value, min, max) {
  return Math.min(max, Math.max(min, value));
}

function pct(value) {
  return `${Math.round(value * 100)}%`;
}

function mean(values) {
  if (!values.length) return 0;
  return values.reduce((acc, v) => acc + v, 0) / values.length;
}

function std(values, mu) {
  if (values.length < 2) return 1;
  const variance = values.reduce((acc, v) => acc + (v - mu) ** 2, 0) / values.length;
  return Math.sqrt(variance);
}

function gaussianPdf(x, mu, sigma) {
  const s = Math.max(0.001, sigma);
  return Math.exp(-0.5 * ((x - mu) / s) ** 2) / (s * Math.sqrt(2 * Math.PI));
}

function normalCdf(z) {
  const sign = z < 0 ? -1 : 1;
  const x = Math.abs(z) / Math.sqrt(2);
  const t = 1 / (1 + 0.3275911 * x);
  const a1 = 0.254829592;
  const a2 = -0.284496736;
  const a3 = 1.421413741;
  const a4 = -1.453152027;
  const a5 = 1.061405429;
  const erfApprox =
    1 -
    (((((a5 * t + a4) * t + a3) * t + a2) * t + a1) * t) *
      Math.exp(-x * x);
  return 0.5 * (1 + sign * erfApprox);
}

function protectionStrength() {
  return Number(els.shieldSlider.value) / 100;
}

function protectionLabel() {
  const s = Number(els.shieldSlider.value);
  if (s < 34) return "Low";
  if (s < 67) return "Balanced";
  return "High";
}

function shownClue(record, withProtection) {
  if (!withProtection) return record.clueBase;
  const p = protectionStrength();
  return clamp(record.clueBase * (1 - p) + record.clueProtected * p, 0, 100);
}

function tableRows() {
  return state.hiddenJoined ? [...TRAINING_SAMPLE, HIDDEN_PERSON] : TRAINING_SAMPLE;
}

function computeAggregateStats(rows) {
  return {
    meanViralLoad: mean(rows.map((r) => r.viralLoad)),
    meanCd4: mean(rows.map((r) => r.cd4)),
    highPriorityCount: rows.filter((r) => r.priority >= 70).length,
    meanMissedVisits: mean(rows.map((r) => r.missedVisits))
  };
}

const BASE_STATS = computeAggregateStats(TRAINING_SAMPLE);

function renderFeatureTable() {
  const rows = TRAINING_SAMPLE.map((row) => `
    <tr>
      <td>${row.id}</td>
      <td>${row.age}</td>
      <td>${row.viralLoad.toLocaleString()}</td>
      <td>${row.cd4}</td>
      <td>${row.missedVisits}</td>
      <td>${row.priority}</td>
      <td>${row.needFollowUp}</td>
    </tr>
  `).join("");

  const hiddenRow = state.hiddenJoined
    ? `
      <tr class="hidden-row">
        <td>x</td>
        <td>private</td>
        <td>private</td>
        <td>private</td>
        <td>private</td>
        <td>private</td>
        <td>private</td>
      </tr>
    `
    : "";

  els.featureTableBody.innerHTML = rows + hiddenRow;
}

function renderAggregateCards() {
  const currentStats = computeAggregateStats(tableRows());

  const defs = [
    {
      key: "meanViralLoad",
      title: "Mean Viral Load",
      format: (v) => `${Math.round(v).toLocaleString()}`
    },
    {
      key: "meanCd4",
      title: "Mean CD4",
      format: (v) => `${Math.round(v)}`
    },
    {
      key: "highPriorityCount",
      title: "High Priority Cases",
      format: (v) => `${Math.round(v)}`
    },
    {
      key: "meanMissedVisits",
      title: "Mean Missed Visits",
      format: (v) => `${v.toFixed(2)}`
    }
  ];

  els.aggregateCards.innerHTML = defs.map((def) => {
    const base = BASE_STATS[def.key];
    const current = currentStats[def.key];
    const delta = current - base;
    const changed = state.hiddenJoined && Math.abs(delta) > 1e-6;
    const deltaSign = delta >= 0 ? "+" : "-";

    return `
      <article class="aggregate-card ${changed ? "changed" : ""}">
        <span>${def.title}</span>
        <strong>${def.format(current)}</strong>
        ${changed ? `<p>${deltaSign}${def.format(Math.abs(delta))}</p>` : `<p>no change</p>`}
      </article>
    `;
  }).join("");

  els.compareStateLabel.textContent = state.hiddenJoined
    ? "Dataset view: after one hidden person is added"
    : "Dataset view: before hidden person";

  els.toggleHiddenBtn.textContent = state.hiddenJoined
    ? "Hide hidden person"
    : "+ Add hidden person";
}

function getDistributions(withProtection) {
  const member = GAME_RECORDS.filter((r) => r.member).map((r) => shownClue(r, withProtection));
  const non = GAME_RECORDS.filter((r) => !r.member).map((r) => shownClue(r, withProtection));

  const memberMu = mean(member);
  const nonMu = mean(non);
  const baseSpread = withProtection ? 6 + protectionStrength() * 5 : 6;
  const memberSigma = Math.max(baseSpread, std(member, memberMu));
  const nonSigma = Math.max(baseSpread, std(non, nonMu));

  const denominator = Math.sqrt(memberSigma ** 2 + nonSigma ** 2);
  const sep = denominator < 1e-6 ? 0.5 : clamp(normalCdf((memberMu - nonMu) / denominator), 0, 1);

  return { memberMu, memberSigma, nonMu, nonSigma, sep };
}

function buildDistributionSvg(params) {
  const W = 520;
  const H = 170;
  const PAD = { l: 36, r: 14, t: 12, b: 26 };
  const xMin = 0;
  const xMax = 100;
  const chartW = W - PAD.l - PAD.r;
  const chartH = H - PAD.t - PAD.b;
  const baseY = PAD.t + chartH;

  const xToSvg = (x) => PAD.l + ((x - xMin) / (xMax - xMin)) * chartW;

  const peakM = gaussianPdf(params.memberMu, params.memberMu, params.memberSigma);
  const peakN = gaussianPdf(params.nonMu, params.nonMu, params.nonSigma);
  const maxY = Math.max(peakM, peakN) * 1.2;
  const yToSvg = (y) => PAD.t + chartH - (y / maxY) * chartH;

  function pathFor(mu, sigma) {
    const samples = 100;
    const parts = [];
    for (let i = 0; i <= samples; i += 1) {
      const x = xMin + (i / samples) * (xMax - xMin);
      const y = gaussianPdf(x, mu, sigma);
      parts.push(`${i === 0 ? "M" : "L"}${xToSvg(x).toFixed(2)},${yToSvg(y).toFixed(2)}`);
    }
    return parts.join(" ");
  }

  const mPath = pathFor(params.memberMu, params.memberSigma);
  const nPath = pathFor(params.nonMu, params.nonSigma);
  const ticks = [0, 25, 50, 75, 100];

  const tickMarks = ticks
    .map((t) => {
      const x = xToSvg(t).toFixed(2);
      return `<line x1="${x}" y1="${baseY}" x2="${x}" y2="${baseY + 4}" stroke="#445670" stroke-width="1" />
              <text x="${x}" y="${baseY + 14}" text-anchor="middle" font-size="8" fill="#6c7e9b">${t}</text>`;
    })
    .join("");

  return `
    <line x1="${PAD.l}" y1="${baseY}" x2="${W - PAD.r}" y2="${baseY}" stroke="#445670" stroke-width="1" />
    ${tickMarks}
    <text x="${PAD.l + chartW / 2}" y="${H - 2}" text-anchor="middle" font-size="8" fill="#6c7e9b">public clue value</text>
    <path d="${mPath} L${xToSvg(xMax)},${baseY} L${xToSvg(xMin)},${baseY} Z" fill="rgba(127,216,255,0.16)" />
    <path d="${mPath}" stroke="#88e0ff" stroke-width="2" fill="none" />
    <path d="${nPath} L${xToSvg(xMax)},${baseY} L${xToSvg(xMin)},${baseY} Z" fill="rgba(243,138,138,0.14)" />
    <path d="${nPath}" stroke="#f39a9a" stroke-width="2" fill="none" />
  `;
}

function updateThresholdHint(mode) {
  const withProtection = mode === "defense";
  const stats = getDistributions(withProtection);
  const tau = ((stats.memberMu + stats.nonMu) / 2).toFixed(0);
  const text = `Simple rule: clue above ${tau} -> guess \"seen in training\".`;
  if (withProtection) {
    els.defenseTau.textContent = text;
  } else {
    els.attackTau.textContent = text;
  }
}

function canAccessScreen(index) {
  if (index <= 2) return true;
  if (index === 3) return state.completedAttack;
  if (index === 4) return state.completedAttack;
  if (index === 5) return state.completedDefense;
  return false;
}

function setNavHint(text) {
  els.navHint.textContent = text;
}

function updateNavButtons() {
  els.prevBtn.disabled = state.currentScreen === 0;
  els.nextBtn.disabled = state.currentScreen === screens.length - 1;
}

function updateStepper() {
  stepButtons.forEach((button) => {
    const idx = Number(button.dataset.step);
    button.classList.toggle("active", idx === state.currentScreen);
    button.classList.toggle("done", idx < state.currentScreen);
    button.disabled = idx !== state.currentScreen && !canAccessScreen(idx);
  });
}

function gotoScreen(index, { force = false } = {}) {
  const target = clamp(index, 0, screens.length - 1);
  if (!force && !canAccessScreen(target)) {
    setNavHint("Complete the current step before moving on.");
    return;
  }

  state.currentScreen = target;
  screens.forEach((screen, screenIndex) => {
    screen.classList.toggle("active", screenIndex === target);
  });
  updateStepper();
  updateNavButtons();
}

function handleNext() {
  if (state.currentScreen === 2 && !state.completedAttack) {
    setNavHint("Reveal Quiz 1 score first.");
    return;
  }
  if (state.currentScreen === 4 && !state.completedDefense) {
    setNavHint("Reveal Quiz 2 score first.");
    return;
  }
  gotoScreen(state.currentScreen + 1);
}

function selectGuess(mode, recordId, value) {
  const bucket = state[mode];
  if (bucket.revealed) return;
  bucket.guesses[recordId] = value;
  renderCards(mode);
}

function computeScore(mode) {
  let correct = 0;
  const guesses = state[mode].guesses;
  GAME_RECORDS.forEach((record) => {
    const guess = guesses[record.id];
    if (!guess) return;
    if ((guess === "member") === record.member) correct += 1;
  });
  return correct;
}

function allGuessed(mode) {
  return Object.keys(state[mode].guesses).length === GAME_RECORDS.length;
}

function renderCards(mode) {
  const withProtection = mode === "defense";
  const bucket = state[mode];
  const container = withProtection ? els.defenseCards : els.attackCards;

  container.innerHTML = GAME_RECORDS.map((record) => {
    const clue = shownClue(record, withProtection);
    const guess = bucket.guesses[record.id] || null;

    const guessSeenClass = [
      "guess-btn",
      guess === "member" ? "selected" : "",
      bucket.revealed && record.member ? "correct" : "",
      bucket.revealed && !record.member && guess === "member" ? "wrong" : ""
    ].join(" ").trim();

    const guessNotClass = [
      "guess-btn",
      guess === "out" ? "selected" : "",
      bucket.revealed && !record.member ? "correct" : "",
      bucket.revealed && record.member && guess === "out" ? "wrong" : ""
    ].join(" ").trim();

    const truth = bucket.revealed
      ? (guess === (record.member ? "member" : "out")
          ? "Correct"
          : `Wrong · true label: ${record.member ? "seen in training" : "not seen"}`)
      : "";

    return `
      <article class="sample-card">
        <div class="sample-head">
          <p class="sample-id">Profile #${record.id}</p>
          <p class="sample-score">${clue.toFixed(0)}</p>
        </div>
        <div class="clue-meter"><span style="width:${clue}%"></span></div>
        <p class="sample-text">
          Age ${record.age} · Viral load ${record.viralLoad.toLocaleString()} · CD4 ${record.cd4}
          · Missed visits ${record.missedVisits} · District ${record.district}
        </p>
        <p class="sample-text">AI follow-up priority: ${record.priority}/100 · Public clue: ${clue.toFixed(0)}</p>
        <div class="sample-guess">
          <button class="${guessSeenClass}" data-mode="${mode}" data-id="${record.id}" data-value="member" ${bucket.revealed ? "disabled" : ""}>Seen in training</button>
          <button class="${guessNotClass}" data-mode="${mode}" data-id="${record.id}" data-value="out" ${bucket.revealed ? "disabled" : ""}>Not seen</button>
        </div>
        <p class="sample-truth">${truth}</p>
      </article>
    `;
  }).join("");

  Array.from(container.querySelectorAll("button[data-mode]")).forEach((button) => {
    button.addEventListener("click", () => {
      selectGuess(button.dataset.mode, Number(button.dataset.id), button.dataset.value);
    });
  });

  if (withProtection) {
    els.defenseRevealBtn.disabled = !allGuessed("defense") || bucket.revealed;
  } else {
    els.attackRevealBtn.disabled = !allGuessed("attack") || bucket.revealed;
  }

  updateThresholdHint(mode);
}

function reveal(mode) {
  if (!allGuessed(mode)) return;

  const bucket = state[mode];
  bucket.revealed = true;
  bucket.score = computeScore(mode);
  renderCards(mode);

  const scoreText = `${bucket.score} / ${GAME_RECORDS.length}`;
  const ratio = bucket.score / GAME_RECORDS.length;

  if (mode === "attack") {
    state.completedAttack = true;
    els.attackResult.textContent = ratio >= 0.75
      ? `Quiz 1 score: ${scoreText}. Attack is strong without protection.`
      : `Quiz 1 score: ${scoreText}. Attack still beats random.`;
    setNavHint("Quiz 1 complete. Continue to Add Protection.");
  } else {
    state.completedDefense = true;
    els.defenseResult.textContent = ratio <= 0.5
      ? `Quiz 2 score: ${scoreText}. Protection pushed attack near random.`
      : `Quiz 2 score: ${scoreText}. Some leakage remains.`;
    setNavHint("Quiz 2 complete. Open Results.");
  }

  updateStepper();
  updateDebrief();
}

function resetDefenseQuizOnProtectionChange() {
  state.defense.guesses = {};
  state.defense.revealed = false;
  state.defense.score = null;
  state.completedDefense = false;
  els.defenseResult.textContent = "";
  updateStepper();
}

function easeLabel(sep) {
  if (sep >= 0.82) return "Very Easy";
  if (sep >= 0.72) return "Easy";
  if (sep >= 0.62) return "Medium";
  return "Hard";
}

function renderProtectionMetrics() {
  const baseStats = getDistributions(false);
  const protectedStats = getDistributions(true);

  const reduction = clamp((baseStats.sep - protectedStats.sep) / Math.max(baseStats.sep, 0.0001), 0, 1);
  const quality = Math.round(100 - protectionStrength() * 24);

  els.shieldLabel.textContent = protectionLabel();
  els.riskEase.textContent = easeLabel(protectedStats.sep);
  els.reductionValue.textContent = pct(reduction);
  els.qualityValue.textContent = `${quality}%`;

  els.baseDistChart.innerHTML = buildDistributionSvg(baseStats);
  els.dpDistChart.innerHTML = buildDistributionSvg(protectedStats);
  els.distCaption.textContent = "More overlap between curves means attack becomes harder.";
}

function updateDebrief() {
  const a = state.attack.score;
  const d = state.defense.score;

  els.finalAttackScore.textContent = a == null ? "--" : `${a}/${GAME_RECORDS.length}`;
  els.finalDefenseScore.textContent = d == null ? "--" : `${d}/${GAME_RECORDS.length}`;

  if (a == null || d == null) {
    els.finalDrop.textContent = "--";
    els.finalText.textContent = "Complete both quizzes to compare before and after protection.";
    return;
  }

  const drop = a / GAME_RECORDS.length - d / GAME_RECORDS.length;
  els.finalDrop.textContent = pct(drop);

  if (drop >= 0.25) {
    els.finalText.textContent = "Protection strongly reduced privacy leakage.";
  } else if (drop >= 0.12) {
    els.finalText.textContent = "Protection helped, but some leakage remains.";
  } else {
    els.finalText.textContent = "Current protection is weak. Increase it and run Quiz 2 again.";
  }
}

function resetAll() {
  state.currentScreen = 0;
  state.hiddenJoined = false;
  state.attack = { guesses: {}, revealed: false, score: null };
  state.defense = { guesses: {}, revealed: false, score: null };
  state.completedAttack = false;
  state.completedDefense = false;

  els.shieldSlider.value = "55";
  els.attackResult.textContent = "";
  els.defenseResult.textContent = "";
  setNavHint("Complete the current step to move forward.");

  renderFeatureTable();
  renderAggregateCards();
  renderCards("attack");
  renderCards("defense");
  renderProtectionMetrics();
  updateDebrief();
  gotoScreen(0, { force: true });
}

stepButtons.forEach((button) => {
  button.addEventListener("click", () => gotoScreen(Number(button.dataset.step)));
});

els.prevBtn.addEventListener("click", () => gotoScreen(state.currentScreen - 1, { force: true }));
els.nextBtn.addEventListener("click", handleNext);

els.startBtn.addEventListener("click", () => gotoScreen(1, { force: true }));
els.toAttackBtn.addEventListener("click", () => gotoScreen(2, { force: true }));
els.toDefenseBtn.addEventListener("click", () => gotoScreen(4, { force: true }));

els.toggleHiddenBtn.addEventListener("click", () => {
  state.hiddenJoined = !state.hiddenJoined;
  renderFeatureTable();
  renderAggregateCards();
});

els.attackRevealBtn.addEventListener("click", () => reveal("attack"));
els.defenseRevealBtn.addEventListener("click", () => reveal("defense"));

els.shieldSlider.addEventListener("input", () => {
  resetDefenseQuizOnProtectionChange();
  renderCards("defense");
  renderProtectionMetrics();
  updateDebrief();
});

els.restartBtn.addEventListener("click", resetAll);
els.backDefenseBtn.addEventListener("click", () => gotoScreen(4, { force: true }));

renderFeatureTable();
renderAggregateCards();
renderCards("attack");
renderCards("defense");
renderProtectionMetrics();
updateDebrief();
gotoScreen(0, { force: true });