export function recoveryView(state = {}) {
  const blocked = state.blocked?.[0]?.reason ?? null;
  const status = state.status ?? "idle";
  return {
    status,
    message: blocked ?? (state.half_commits?.length ? "half_commit_ignored" : status),
    state_hash: state.state_hash ?? null,
    applied: state.applied?.length ?? 0,
    half_commits: state.half_commits?.length ?? 0,
    actions: status === "blocked" ? ["retry", "abort"] : status === "recovered" ? ["continue"] : status === "network_required" ? ["retry_online"] : [],
  };
}

export function renderRecoveryPanel(document, state = {}, actions = {}) {
  const view = recoveryView(state);
  const section = document.createElement("section");
  section.className = "panel recovery-panel";
  const title = document.createElement("h2");
  title.className = "panel-title";
  title.textContent = "Project recovery";
  section.append(title);
  const body = document.createElement("p");
  body.className = "recovery-status";
  body.textContent = `${view.status}: ${view.message}`;
  section.append(body);
  const meta = document.createElement("small");
  meta.textContent = `commits ${view.applied} | half-commits ${view.half_commits}`;
  section.append(meta);
  if (view.actions.length > 0) {
    const controls = document.createElement("div"); controls.className = "recovery-actions";
    for (const action of view.actions) {
      const button = document.createElement("button"); button.type = "button"; button.className = "control-button"; button.textContent = action;
      button.addEventListener?.("click", () => actions[action]?.());
      controls.append(button);
    }
    section.append(controls);
  }
  return section;
}