// ===== CONFIG =====
// Edit these counts when you add more content.
const VOLUMES = {
  1: { title: "Volume 1", chapters: 3 },
  2: { title: "Volume 2", chapters: 2 }
};

// ===== CONTENT (MVP placeholders) =====
// Replace these bodies with your real chapter text later.
// Structure: content[volume][chapter]
const content = {
  1: {
    1: {
      title: "Chapter 1 — Entry",
      body: `
        <p><b>Placeholder.</b> This is the first chapter content area.</p>
        <p>Replace this HTML with your real chapter text or image-based panels later.</p>
        <p>Keep it grounded: cognition expressed as simulation; no flashy “powers.”</p>
      `
    },
    2: {
      title: "Chapter 2 — Signal",
      body: `<p>Placeholder for Chapter 2.</p>`
    },
    3: {
      title: "Chapter 3 — Constraint",
      body: `<p>Placeholder for Chapter 3.</p>`
    }
  },
  2: {
    1: {
      title: "Chapter 1 — Transition",
      body: `<p>Placeholder for Volume 2 Chapter 1.</p>`
    },
    2: {
      title: "Chapter 2 — Drift",
      body: `<p>Placeholder for Volume 2 Chapter 2.</p>`
    }
  }
};

// ===== HELPERS =====
function getParam(name, fallback) {
  const url = new URL(window.location.href);
  return url.searchParams.get(name) || fallback;
}

function setParams(v, c) {
  const url = new URL(window.location.href);
  url.searchParams.set("v", String(v));
  url.searchParams.set("c", String(c));
  window.location.href = url.toString();
}

// ===== INIT UI =====
const volumeSelect = document.getElementById("volumeSelect");
const chapterSelect = document.getElementById("chapterSelect");
const heading = document.getElementById("chapterHeading");
const meta = document.getElementById("chapterMeta");
const body = document.getElementById("chapterBody");
const goBtn = document.getElementById("goBtn");

function populateVolumes(selectedV) {
  volumeSelect.innerHTML = "";
  Object.keys(VOLUMES).forEach((vStr) => {
    const v = Number(vStr);
    const opt = document.createElement("option");
    opt.value = String(v);
    opt.textContent = VOLUMES[v].title;
    if (v === selectedV) opt.selected = true;
    volumeSelect.appendChild(opt);
  });
}

function populateChapters(volume, selectedC) {
  chapterSelect.innerHTML = "";
  const max = VOLUMES[volume].chapters;
  for (let c = 1; c <= max; c++) {
    const opt = document.createElement("option");
    opt.value = String(c);
    opt.textContent = `Chapter ${c}`;
    if (c === selectedC) opt.selected = true;
    chapterSelect.appendChild(opt);
  }
}

function render(volume, chapter) {
  const v = Number(volume);
  const c = Number(chapter);

  const chapterData = content?.[v]?.[c];

  if (!chapterData) {
    heading.textContent = `Volume ${v} — Chapter ${c}`;
    meta.textContent = "No content found for this chapter yet.";
    body.innerHTML = `<p>Placeholder. Add content in <code>lae_chapter.js</code> under content[${v}][${c}].</p>`;
    return;
  }

  heading.textContent = chapterData.title;
  meta.textContent = `${VOLUMES[v].title} • Chapter ${c}`;
  body.innerHTML = chapterData.body;
}

// ===== BOOT =====
(function boot() {
  let v = Number(getParam("v", "1"));
  let c = Number(getParam("c", "1"));

  if (!VOLUMES[v]) v = 1;
  const maxCh = VOLUMES[v].chapters;
  if (c < 1 || c > maxCh) c = 1;

  populateVolumes(v);
  populateChapters(v, c);
  render(v, c);

  // When volume changes, re-populate chapters (keep chapter = 1)
  volumeSelect.addEventListener("change", () => {
    const newV = Number(volumeSelect.value);
    populateChapters(newV, 1);
    render(newV, 1);
  });

  // Go button updates URL (so it’s shareable/bookmarkable)
  goBtn.addEventListener("click", () => {
    const newV = Number(volumeSelect.value);
    const newC = Number(chapterSelect.value);
    setParams(newV, newC);
  });
})();