src/render.js

import { constraintsFor, getArtifact, getConstraint } from "./catalog.js";
import { historyPreorder, MAX_VOTES_PER_OUTCOME } from "./domain.js";

const button = (label, className, action, dataset = {}) => {
  const element = document.createElement("button");
  element.type = "button";
  element.className = className;
  element.textContent = label;
  Object.assign(element.dataset, dataset);
  element.addEventListener("click", action);
  return element;
};

const setFocusKey = (element, key) => {
  element.dataset.focusKey = key;
  return element;
};

export function voteCountLabel(count) {
  return `${count} ${count === 1 ? "vote" : "votes"}`;
}

export function historyNodeMetadata(node, artifactTitle, parentTitle, isLineage, selected) {
  const status = node.status === "not-selected"
    ? "Non-selected sibling"
    : node.status[0].toUpperCase() + node.status.slice(1);
  const labels = [
    node.depth === 0 ? "Seed origin" : `Round ${node.depth}`,
    node.depth === 0 ? null : status,
    isLineage ? "Active lineage" : null,
    selected ? "Currently inspected" : null
  ].filter(Boolean);
  const relationship = node.depth === 0 ? "no parent" : `parent ${parentTitle}`;
  return {
    accessibleName: `${artifactTitle}, ${labels[0]}, ${relationship}${labels.slice(1).map((label) => `, ${label.toLowerCase()}`).join("")}`,
    visibleText: labels.join(" · ")
  };
}

export function renderRound(container, state, source, actions) {
  container.replaceChildren();
  const phase = document.createElement("p");
  phase.className = "phase-status";
  phase.textContent = state.phase === "choose"
    ? "Current phase: choose a constraint. Next: reveal two fixed outcomes."
    : state.phase === "compare"
      ? "Current phase: compare both outcomes. Next: record at least one vote."
      : state.phase === "vote"
        ? "Current phase: operator records participant preferences. Next: resolve the vote."
        : state.phase === "resolved"
          ? "Current phase: decision recorded. Next: continue from the winner."
          : "Current phase: branch complete. Next: explore any runnable history node.";
  container.append(phase);
  const kicker = document.createElement("p");
  kicker.className = "section-kicker";
  kicker.textContent = state.phase === "choose" ? "Shape the next fork" : `Round ${Object.keys(state.roundsById).length}`;
  container.append(kicker);

  if (state.phase === "choose") {
    const heading = document.createElement("h2");
    heading.id = "round-heading";
    heading.tabIndex = -1;
    heading.textContent = state.activeNodeId === state.seedNodeId ? "Choose a constraint" : "Continue the winning branch";
    container.append(heading);
    const intro = document.createElement("p");
    intro.textContent = "Select one curated rule, then reveal its two fixed interpretations.";
    container.append(intro);
    const group = document.createElement("fieldset");
    const legend = document.createElement("legend");
    legend.textContent = "Available constraints";
    group.append(legend);
    for (const constraint of constraintsFor(source, state.nodesById[state.activeNodeId].artifactId)) {
      const label = document.createElement("label");
      label.className = "constraint-card";
      const radio = document.createElement("input");
      radio.type = "radio";
      radio.name = "constraint";
      radio.value = constraint.id;
      setFocusKey(radio, `constraint-${constraint.id}`);
      radio.checked = state.selectedConstraintId === constraint.id;
      radio.addEventListener("change", () => actions.selectConstraint(constraint.id));
      const copy = document.createElement("span");
      const name = document.createElement("strong");
      name.textContent = constraint.title;
      const detail = document.createElement("small");
      detail.textContent = constraint.description;
      copy.append(name, detail);
      label.append(radio, copy);
      group.append(label);
    }
    container.append(group);
    const reveal = button("Reveal outcomes", "primary-button", actions.reveal);
    setFocusKey(reveal, "reveal-outcomes");
    reveal.disabled = !state.selectedConstraintId;
    container.append(reveal);
    return;
  }

  if (state.phase === "complete") {
    const heading = document.createElement("h2");
    heading.id = "round-heading";
    heading.tabIndex = -1;
    heading.textContent = "Branch complete";
    container.append(heading);
    const end = document.createElement("p");
    end.className = "end-card";
    end.textContent = "This pre-authored branch ends here in the local MVP.";
    container.append(end);
    return;
  }

  const round = state.roundsById[state.currentRoundId];
  const recipe = source.recipes.find((item) => item.id === round.recipeId);
  const constraint = getConstraint(source, recipe.constraintId);
  const heading = document.createElement("h2");
  heading.id = state.phase === "resolved" ? "result-heading" : "comparison-heading";
  heading.tabIndex = -1;
  heading.textContent = state.phase === "resolved" ? "The branch is decided" : `Compare: ${constraint.title}`;
  container.append(heading);
  const local = document.createElement("p");
  local.className = "context-disclosure";
  local.textContent = "These two outcomes were selected from a pre-authored local catalog for this artifact and constraint. The same choices always produce the same results.";
  container.append(local);
  const cards = document.createElement("div");
  cards.className = "outcome-grid";
  recipe.outcomes.forEach((outcome) => {
    const artifact = getArtifact(source, outcome.artifactId);
    const card = document.createElement("article");
    const selected = state.compareSelection === outcome.slot;
    card.className = `outcome-card branch-${outcome.slot}${selected ? " is-selected" : ""}`;
    const title = document.createElement("h3");
    title.textContent = `${outcome.slot.toUpperCase()} — ${artifact.title}`;
    const summary = document.createElement("p");
    summary.textContent = artifact.summary;
    const divergence = document.createElement("p");
    divergence.className = "divergence-note";
    const divergenceLabel = document.createElement("strong");
    divergenceLabel.textContent = "Meaningful split: ";
    divergence.append(divergenceLabel);
    divergence.append(outcome.divergenceNote);
    const play = button(selected ? "Playing this outcome" : "Play this outcome", "compare-button", () => actions.compare(outcome.slot));
    setFocusKey(play, `compare-${outcome.slot}`);
    play.setAttribute("aria-pressed", String(selected));
    if (selected) {
      play.disabled = true;
    }
    card.append(title, summary, divergence, play);
    cards.append(card);
  });
  container.append(cards);

  if (state.phase === "resolved") {
    const winnerArtifact = getArtifact(source, state.nodesById[state.activeNodeId].artifactId);
    const result = document.createElement("p");
    result.className = "result-card";
    result.textContent = `${round.winnerSlot.toUpperCase()} wins: ${winnerArtifact.title}. ${round.resolution === "authored-tie-rule" ? "The displayed authored tie rule decided this round." : "The higher recorded vote total decided this round."}`;
    const continueButton = button("Continue from winner", "primary-button", actions.continue);
    setFocusKey(continueButton, "continue-winner");
    container.append(result, continueButton);
    return;
  }

  const voting = document.createElement("section");
  voting.className = "voting";
  voting.setAttribute("aria-labelledby", "voting-heading");
  const voteHeading = document.createElement("h3");
  voteHeading.id = "voting-heading";
  voteHeading.textContent = "Operator-recorded voting";
  const disclosure = document.createElement("p");
  disclosure.className = "vote-disclosure";
  disclosure.textContent = "Votes are entered by the local operator in this browser on this device. Participant devices are not connected.";
  const tie = document.createElement("p");
  tie.textContent = `Tie rule, shown before resolution: outcome ${recipe.tieWinnerSlot.toUpperCase()} wins an equal total.`;
  voting.append(voteHeading, disclosure, tie);
  for (const slot of ["a", "b"]) {
    const row = document.createElement("div");
    row.className = "vote-row";
    const name = document.createElement("strong");
    name.textContent = `Outcome ${slot.toUpperCase()}: ${voteCountLabel(round.votes[slot])}`;
    const subtract = button("−", "vote-button", () => {
      if (round.votes[slot] > 0) actions.vote(slot, -1);
    });
    setFocusKey(subtract, `vote-${slot}-subtract`);
    subtract.setAttribute("aria-label", `Remove one vote from outcome ${slot.toUpperCase()}`);
    subtract.disabled = round.votes[slot] === 0;
    const add = button("+", "vote-button", () => actions.vote(slot, 1));
    setFocusKey(add, `vote-${slot}-add`);
    add.setAttribute("aria-label", `Add one vote to outcome ${slot.toUpperCase()}`);
    add.disabled = round.votes[slot] >= MAX_VOTES_PER_OUTCOME;
    row.append(name, subtract, add);
    voting.append(row);
  }
  const resolve = button("Resolve vote", "primary-button", actions.resolve);
  setFocusKey(resolve, "resolve-vote");
  resolve.disabled = state.phase !== "vote";
  voting.append(resolve);
  container.append(voting);
}

export function renderHistory(container, state, source, inspect) {
  const nodes = historyPreorder(state);
  const activeLineage = new Set();
  for (let id = state.activeNodeId; id; id = state.nodesById[id].parentNodeId) activeLineage.add(id);
  const children = new Map();
  for (const node of nodes) {
    const key = node.parentNodeId ?? "root";
    children.set(key, [...(children.get(key) ?? []), node]);
  }
  const build = (parent) => {
    const list = document.createElement("ul");
    for (const node of children.get(parent) ?? []) {
      const item = document.createElement("li");
      const selected = state.inspectedNodeId === node.nodeId;
      item.className = `history-node status-${node.status}${activeLineage.has(node.nodeId) ? " is-lineage" : ""}${selected ? " is-inspected" : ""}`;
      const artifact = getArtifact(source, node.artifactId);
      const parentTitle = node.parentNodeId ? getArtifact(source, state.nodesById[node.parentNodeId].artifactId).title : "none";
      const control = button(artifact.title, "history-button", () => inspect(node.nodeId));
      setFocusKey(control, `history-${node.nodeId}`);
      const metadata = historyNodeMetadata(node, artifact.title, parentTitle, activeLineage.has(node.nodeId), selected);
      control.setAttribute("aria-label", metadata.accessibleName);
      if (selected) control.setAttribute("aria-current", "true");
      control.setAttribute("aria-pressed", String(selected));
      const row = document.createElement("div");
      row.className = "history-node-row";
      const meta = document.createElement("span");
      meta.className = "node-meta";
      meta.textContent = metadata.visibleText;
      row.append(control, meta);
      item.append(row);
      if (children.has(node.nodeId)) item.append(build(node.nodeId));
      list.append(item);
    }
    return list;
  };
  container.replaceChildren(build("root"));
}