import React from 'react';

function buildScript(pageNums) {
  return `
const PAGES   = [${pageNums.join(',')}];
const total   = PAGES.length;
let currentIdx = 0;

const content   = document.getElementById('content');
const btnPrev   = document.getElementById('btn-prev');
const btnNext   = document.getElementById('btn-next');
const indicator = document.getElementById('page-indicator');
const titleEl   = document.getElementById('page-title');

function updateNav(idx, push) {
  if (idx === currentIdx && indicator.textContent) return;
  currentIdx = idx;
  const n = PAGES[idx];
  indicator.textContent = (idx + 1) + ' / ' + total;
  titleEl.textContent   = 'Page ' + n;
  btnPrev.disabled = idx === 0;
  btnNext.disabled = idx === total - 1;
  document.querySelectorAll('#page-list li').forEach(li => {
    li.classList.toggle('active', Number(li.dataset.page) === n);
  });
  document.querySelector('#page-list li[data-page="' + n + '"]')
    ?.scrollIntoView({ block: 'nearest' });
  if (push) history.pushState(null, '', '#page-' + n);
  else      history.replaceState(null, '', '#page-' + n);
}

function goTo(n, smooth, push) {
  const idx = PAGES.indexOf(n);
  if (idx === -1) return;
  const sec = document.getElementById('page-' + n);
  if (!sec) return;
  sec.scrollIntoView({ behavior: smooth ? 'smooth' : 'instant', block: 'start' });
  updateNav(idx, push);
}

btnPrev.addEventListener('click', () => { if (currentIdx > 0)          goTo(PAGES[currentIdx - 1], true, true); });
btnNext.addEventListener('click', () => { if (currentIdx < total - 1)  goTo(PAGES[currentIdx + 1], true, true); });

document.getElementById('page-list').addEventListener('click', e => {
  const li = e.target.closest('li[data-page]');
  if (li) goTo(Number(li.dataset.page), false, true);
});

document.addEventListener('keydown', e => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
  if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')   { if (currentIdx > 0)         goTo(PAGES[currentIdx - 1], true, true); }
  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { if (currentIdx < total - 1) goTo(PAGES[currentIdx + 1], true, true); }
});

// Track current page by scroll position (replaceState — no new history entry)
content.addEventListener('scroll', () => {
  const containerTop = content.getBoundingClientRect().top;
  let found = 0;
  for (let i = 0; i < PAGES.length; i++) {
    const sec = document.getElementById('page-' + PAGES[i]);
    if (sec && sec.getBoundingClientRect().top - containerTop <= 40) found = i;
    else break;
  }
  if (found !== currentIdx) updateNav(found, false);
}, { passive: true });

// Browser back/forward
window.addEventListener('popstate', () => {
  const pm = location.hash.match(/^#page-(\\d+)$/);
  if (pm) {
    const n = parseInt(pm[1], 10);
    if (PAGES.includes(n)) goTo(n, false, false);
  }
});

// Initial navigation from URL hash
const m = location.hash.match(/^#page-(\\d+)$/);
const startPage = m ? parseInt(m[1], 10) : PAGES[0];
goTo(PAGES.includes(startPage) ? startPage : PAGES[0], false, false);
`;
}

export default function BookIndex({ title, logoText, pages }) {
  const pageNums = pages.map(p => p.n);

  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>{title}</title>
        <link
          href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap"
          rel="stylesheet"
        />
        <link rel="stylesheet" href="/css/book-page.css" />
        <link rel="stylesheet" href="/css/book-layout.css" />
      </head>
      <body>
        <header>
          <div className="logo">{logoText}</div>
          <div className="toolbar">
            <span id="page-indicator"></span>
          </div>
        </header>

        <div id="layout">
          <nav id="sidebar">
            <div id="sidebar-header">
              <div
                className="section-title"
                style={{ marginBottom: 0, borderBottom: 'none', paddingBottom: 0 }}
              >
                <span className="icon">✦</span> Pages
              </div>
              <p>{pages.length} pages</p>
            </div>
            <ul id="page-list">
              {pages.map(({ n }) => (
                <li key={n} data-page={n}>
                  <button>
                    <span className="page-num">{n}</span>
                    <span>Page {n}</span>
                  </button>
                </li>
              ))}
            </ul>
          </nav>

          <div id="main">
            <div id="nav">
              <button id="btn-prev" className="tab" disabled>&#8592; Prev</button>
              <span id="page-title"></span>
              <button id="btn-next" className="tab">Next &#8594;</button>
            </div>
            <div id="content">
              {pages.map(({ n, content }) => (
                <section
                  key={n}
                  id={`page-${n}`}
                  className="page-section"
                  dangerouslySetInnerHTML={{ __html: content }}
                />
              ))}
            </div>
          </div>
        </div>

        <script dangerouslySetInnerHTML={{ __html: buildScript(pageNums) }} />
      </body>
    </html>
  );
}
