#!/usr/bin/env python3
"""Combine all numbered page files into a single index.html."""
import os
import re

DIR = os.path.dirname(os.path.abspath(__file__))

# Collect numbered pages, sorted numerically
page_nums = sorted(
    int(m.group(1))
    for f in os.listdir(DIR)
    if (m := re.match(r'^(\d+)\.html$', f))
)

def read_page(n):
    with open(os.path.join(DIR, f'{n}.html'), encoding='utf-8') as f:
        content = f.read()
    content = re.sub(r'[ \t]*<link[^>]+>\n?', '', content)
    return content.strip()

sections = [(n, read_page(n)) for n in page_nums]

sidebar_items = '\n      '.join(
    f'<li data-page="{n}"><button onclick="goTo({n})">'
    f'<span class="page-num">{n}</span><span>Page {n}</span></button></li>'
    for n in page_nums
)

sections_html = '\n\n    '.join(
    f'<section id="page-{n}" class="page-section">\n{content}\n    </section>'
    for n, content in sections
)

pages_js = '[' + ','.join(str(n) for n in page_nums) + ']'

html = f'''\
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fabula Ultima - Core Rules</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">
  <style>
    /* Reset body to a layout container (book-page.css targets body for page content) */
    html, body {{
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 0;
      max-width: unset;
      margin: 0;
      background-image: none;
    }}

    #layout {{
      display: flex;
      flex: 1;
      overflow: hidden;
    }}

    /* ── Sidebar ── */
    #sidebar {{
      width: 270px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-right: 1px solid var(--border-bright);
      overflow: hidden;
    }}

    #sidebar-header {{
      padding: 14px 16px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border-bright);
      flex-shrink: 0;
    }}

    #sidebar-header p {{
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--text-dim);
      margin-top: 4px;
    }}

    #page-list {{
      flex: 1;
      overflow-y: auto;
      list-style: none;
      padding: 4px 0;
    }}

    #page-list li button {{
      width: 100%;
      text-align: left;
      padding: 6px 14px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-dim);
      font-family: var(--font-body);
      font-size: 0.88rem;
      display: flex;
      gap: 10px;
      align-items: baseline;
      transition: background 0.15s, color 0.15s;
    }}

    #page-list li button:hover {{
      background: var(--surface2);
      color: var(--text);
    }}

    #page-list li.active button {{
      background: var(--surface3);
      color: var(--teal);
    }}

    .page-num {{
      flex-shrink: 0;
      min-width: 24px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--border-bright);
    }}

    li.active .page-num {{
      color: var(--teal-dim);
    }}

    /* ── Main area ── */
    #main {{
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }}

    /* ── Nav bar ── */
    #nav {{
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border-bright);
      flex-shrink: 0;
    }}

    #page-title {{
      flex: 1;
      text-align: center;
      font-family: var(--font-display);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }}

    #page-indicator {{
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--text-dim);
      white-space: nowrap;
    }}

    /* ── Scrollable content ── */
    #content {{
      flex: 1;
      overflow-y: auto;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse at 20% 10%, rgba(78,205,196,.04) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 90%, rgba(201,168,76,.04) 0%, transparent 50%);
    }}

    /* ── Page sections ── */
    .page-section {{
      max-width: 860px;
      margin: 0 auto;
      padding: 32px;
      border-bottom: 1px solid var(--border);
    }}

    .page-section:last-child {{
      border-bottom: none;
      min-height: calc(100vh - 80px);
    }}

    /* Override book-page.css header rule inside sections */
    .page-section header {{
      border-bottom: 1px solid var(--border);
      padding-bottom: 0.8em;
      margin-bottom: 1.4em;
    }}
  </style>
</head>
<body>

<header>
  <div class="logo">Core Rules</div>
  <div class="toolbar">
    <span id="page-indicator"></span>
  </div>
</header>

<div id="layout">
  <nav id="sidebar">
    <div id="sidebar-header">
      <div class="section-title" style="margin-bottom:0; border-bottom:none; padding-bottom:0;">
        <span class="icon">✦</span> Pages
      </div>
      <p>{len(page_nums)} pages</p>
    </div>
    <ul id="page-list">
      {sidebar_items}
    </ul>
  </nav>

  <div id="main">
    <div id="nav">
      <button id="btn-prev" class="tab" disabled>&#8592; Prev</button>
      <span id="page-title"></span>
      <button id="btn-next" class="tab">Next &#8594;</button>
    </div>
    <div id="content">
    {sections_html}
    </div>
  </div>
</div>

<script>
  const PAGES   = {pages_js};
  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) {{
    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' }});
    history.replaceState(null, '', '#page-' + n);
  }}

  function goTo(n, smooth) {{
    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);
  }}

  btnPrev.addEventListener('click', () => {{ if (currentIdx > 0)          goTo(PAGES[currentIdx - 1], true); }});
  btnNext.addEventListener('click', () => {{ if (currentIdx < total - 1)  goTo(PAGES[currentIdx + 1], 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); }}
    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {{ if (currentIdx < total - 1) goTo(PAGES[currentIdx + 1], true); }}
  }});

  // Track current page by scroll position
  content.addEventListener('scroll', () => {{
    const scrollTop = content.scrollTop;
    let found = 0;
    for (let i = 0; i < PAGES.length; i++) {{
      const sec = document.getElementById('page-' + PAGES[i]);
      if (sec && sec.offsetTop <= scrollTop + 40) found = i;
      else if (sec && sec.offsetTop > scrollTop + 40) break;
    }}
    if (found !== currentIdx) updateNav(found);
  }}, {{ passive: true }});

  // 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);
</script>
</body>
</html>
'''

out = os.path.join(DIR, 'index.html')
with open(out, 'w', encoding='utf-8') as f:
    f.write(html)

print(f'Generated {out} with {len(page_nums)} pages ({os.path.getsize(out) // 1024} KB)')
