import { renderBodyHtml } from './md.js';
import { bookCss } from './css.js';
function escapeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}
/** Screen palette for the preview surface. Light = cream paper; dark reuses the
 *  app's neutral dark tokens (never blue). Only the in-app preview uses dark. */
function palette(mode) {
    if (mode === 'dark') {
        return {
            bg: '#1a1a1a', // app --bg-primary (dark)
            text: '#d4d2cb',
            heading: '#f0f0f0',
            byline: '#9b9b95',
            blockquote: '#b3b1a8',
            hr: '#3a3a3a',
            pre: '#242424',
            footnote: '#a9a79f',
            footnoteBorder: '#3a3a3a',
            // App scrollbar tokens (data-mode="dark") — colors-base.css.
            scrollThumb: 'rgba(255, 255, 255, 0.15)',
            scrollThumbHover: 'rgba(255, 255, 255, 0.25)',
        };
    }
    return {
        bg: '#faf9f6',
        text: '#1a1a1a',
        heading: '#1a1a1a',
        byline: '#666',
        blockquote: '#444',
        hr: '#bbb',
        pre: '#f5f5f5',
        footnote: '#444',
        footnoteBorder: '#ccc',
        // App scrollbar tokens (light) — colors-base.css.
        scrollThumb: 'rgba(0, 0, 0, 0.2)',
        scrollThumbHover: 'rgba(0, 0, 0, 0.35)',
    };
}
/** Full standalone HTML document for the whole manuscript (preview / PDF). */
export function renderBookHtml(markdown, meta, mode = 'light') {
    const body = renderBodyHtml(markdown, false);
    const title = meta.title || 'Untitled';
    const byline = meta.author ? `<p class="book-byline">${escapeHtml(meta.author)}</p>` : '';
    const c = palette(mode);
    return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${escapeHtml(title)}</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: ${c.bg}; color: ${c.text}; }
/* Match the app's scrollbar convention (App.css) — thin, 8px, token-colored.
   Track is the page bg (not transparent) so the iframe element behind it never
   shows through as a white sliver. */
* { scrollbar-width: thin; scrollbar-color: ${c.scrollThumb} ${c.bg}; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: ${c.bg}; }
::-webkit-scrollbar-thumb { background: ${c.scrollThumb}; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: ${c.scrollThumbHover}; }
.book-page {
  max-width: 38em; margin: 0 auto; padding: 3em 1.5em 6em;
}
.book-title { text-align: center; font-size: 2em; margin: 1em 0 0.3em; page-break-before: avoid; color: ${c.heading}; }
.book-byline { text-align: center; color: ${c.byline}; font-style: italic; margin: 0 0 3.5em; }
/* Title page → first chapter needs real separation. The byline (when present)
   supplies the bottom gap; with no byline the title sits right on the chapter
   heading, so give that first heading its own top air. */
.book-title + h1 { margin-top: 3em; }
${bookCss(meta.paragraphStyle)}
body { color: ${c.text}; }
h1, h2, h3, h4, h5, h6 { color: ${c.heading}; }
blockquote { color: ${c.blockquote}; }
hr { border-top-color: ${c.hr}; }
pre { background: ${c.pre}; }
.footnotes { color: ${c.footnote}; border-top-color: ${c.footnoteBorder}; }
.book-page h1:first-of-type { page-break-before: avoid; }
</style>
</head>
<body>
<div class="book-page">
<h1 class="book-title">${escapeHtml(title)}</h1>
${byline}
${body}
</div>
</body>
</html>`;
}
