import { chromium } from 'playwright'
import { resolve } from 'path'

const browser = await chromium.launch()
const page = await browser.newPage()
await page.goto('http://localhost:8080/my-book.html', { waitUntil: 'networkidle' })

// Load Folio (includes Pretext — no separate script needed)
await page.addScriptTag({
  path: resolve('node_modules/@monotykamary/folio/vendor/folio.bundle.js')
})

// One-call: measure, paginate, inject CSS, fragment code blocks
await page.evaluate(() => window.Folio.paginate(window.FolioConfig))

// Generate the PDF
await page.emulateMedia({ media: 'print' })
await page.pdf({
  path: 'my-book.pdf',
  width: '7in', height: '10in',
  printBackground: true,
  preferCSSPageSize: true,
  displayHeaderFooter: true,
  margin: { top: '0', bottom: '0', left: '0', right: '0' },
  headerTemplate: '<div></div>',
  footerTemplate: `
    <div style="font-size:9px; font-family:sans-serif; color:#666;
                width:100%; text-align:center; padding-top:4px;">
      <span class="pageNumber"></span>
    </div>`,
})

await browser.close()

const config = {
  pageWidth: '7in',
  pageHeight: '10in',

  // Named page types — each can have its own margins, header/footer
  pageSpecs: {
    cover:     { width: 672, height: 960, marginTop: 0, ...rest: 0, hasHeader: false, hasFooter: false },
    chapter:  { width: 672, height: 960, marginTop: 72, marginBottom: 96, marginLeft: 84, marginRight: 84, hasHeader: true, hasFooter: true },
    default:  { width: 672, height: 960, marginTop: 72, marginBottom: 96, marginLeft: 84, marginRight: 84, hasHeader: true, hasFooter: true },
  },

  // How Folio recognizes and measures your HTML elements
  elementTypes: [
    // Standard HTML — Folio measures these with Pretext
    { selector: 'h1', breakInside: 'avoid', measureAs: 'heading',
      font: { font: '600 22px Georgia, serif', fontSize: 22, lineHeight: 28.6 } },
    { selector: 'p', breakInside: 'auto', measureAs: 'text',
      font: { font: '10px Georgia, serif', fontSize: 10, lineHeight: 14.7 } },
    { selector: 'figure', breakInside: 'avoid', measureAs: 'image' },

    // Named pages — elements that define a page's layout
    { selector: '.cover', pageName: 'cover', isFullPage: true, measureAs: 'fixed', fixedHeight: 960 },
    { selector: '.chapter', pageName: 'chapter' },

    // Custom elements with their own measurement rules
    { selector: '.callout', breakInside: 'avoid', measureAs: 'text',
      font: { font: '9.5px Georgia, serif', fontSize: 9.5, lineHeight: 13.8 },
      contentWidth: 540, heightPadding: 24 },
  ],

  // Full-bleed pages (zero margins)
  fullPageClasses: ['cover'],

  // Structural containers — Folio walks into these, doesn't measure as a block
  containerSelectors: ['.chapter-content'],

  // Frontmatter gets roman numerals (i, ii, iii...)
  romanPageTypes: ['frontmatter'],

  // Fallback fonts for unlabeled elements
  fonts: {
    body:    { font: '10px Georgia, serif', fontSize: 10, lineHeight: 14.7 },
    heading: { font: '600 14px Georgia, serif', fontSize: 14, lineHeight: 18.2 },
    code:    { font: '8px monospace', fontSize: 8, lineHeight: 12 },
  },
}

const result = await window.Folio.paginate(config)
console.log(`Estimated ${result.pagination.pages.length} pages`)
console.log(`  ${result.pagination.totalRoman} roman, ${result.pagination.totalArabic} arabic`)

const { collectContentBlocks, measureAllBlocks, breakPages,
        injectPaginatedDOM, fragmentCodeBlocks } = window.Folio

const blocks = collectContentBlocks(document.body, config)
measureAllBlocks(blocks, config)
const result = breakPages(blocks, config)
injectPaginatedDOM(result, config)
fragmentCodeBlocks()

import { pageSpecFromInches } from '@monotykamary/folio'

pageSpecFromInches({
  widthIn: 7, heightIn: 10,
  marginTopIn: 0.75, marginBottomIn: 1,
  marginLeftIn: 0.875, marginRightIn: 0.875,
  hasHeader: true, hasFooter: true,
})

await page.evaluate(() => {
  const result = window.Folio.fragmentCodeBlocks()
  console.log(`Fragmented ${result.fragmentedCount} blocks into ${result.totalLines} lines`)
})

// In your config:
elementTypes: [
  { selector: '.cover', pageName: 'cover', isFullPage: true,
    measureAs: 'fixed', fixedHeight: 960 },
  { selector: '.fullpage-illustration', pageName: 'fullpage-image',
    isFullPage: true, measureAs: 'fixed', fixedHeight: 960 },
],
fullPageClasses: ['cover', 'fullpage-illustration'],

romanPageTypes: ['frontmatter'],

await page.pdf({
  displayHeaderFooter: true,
  footerTemplate: `
    <div style="font-size:9px; font-family:sans-serif; color:#666;
                width:100%; text-align:center; padding-top:4px;">
      <span class="pageNumber"></span>
    </div>`,
  // ...
})

const result = await window.Folio.paginate(config)
result.pagination.pages.length  // estimated page count
result.fragmentation             // { fragmentedCount, totalLines } or null
result.injected                  // whether CSS was injected

// paginate(config) does all of this:
const blocks = collectContentBlocks(root, config)
measureAllBlocks(blocks, config)
const pagination = breakPages(blocks, config)
injectPaginatedDOM(pagination, config)
const fragmentation = fragmentCodeBlocks()

// With defaults:
window.Folio.fragmentCodeBlocks()

// Custom thresholds and class names:
window.Folio.fragmentCodeBlocks({
  minLinesToFragment: 4,
  containerClass: 'my-code',
  lineClass: 'my-line',
  lineDataAttr: 'data-line',
})

const blocks = window.Folio.collectContentBlocks(document.body, config)
// blocks[i] = { element, pageName, breakInside, measuredHeightPx, isFullPage, ... }

window.Folio.measureAllBlocks(blocks, config)
// blocks[0].measuredHeightPx → 42.5

const result = window.Folio.breakPages(blocks, config)
result.pages        // Page[] — page assignments
result.totalArabic  // Number of body pages
result.totalRoman   // Number of frontmatter pages

window.Folio.injectPaginatedDOM(result, config)

const { imageCount, loadedImages } = await window.Folio.waitForAssetsReady()

window.Folio.splitHighlightedHTML('<span class="hljs-keyword">SELECT</span> id\nFROM users')
// → ['<span class="hljs-keyword">SELECT</span> id</span>',
//    '<span class="hljs-keyword">FROM</span> users']