// A chapter: prose with its labs and figures dropped in where the text calls
// for them.
//
// The prose is one markdown file per chapter, with a line
//
//     <!--lab:convergence-->
//     <!--fig:five-point-->
//
// wherever a lab or a static figure belongs.  Splitting on those markers keeps
// the writing in one readable file instead of scattered through JSX.
import { useMemo } from 'react'
import Markdown from './Markdown.tsx'
import Lab from './Lab.tsx'
import type { Chapter } from './types.ts'
import { FIGURES } from '../figures/index.ts'

const MARKER = /<!--\s*(lab|fig):([a-z0-9_-]+)\s*-->/gi

export default function ChapterView({ chapter }: { chapter: Chapter }) {
  const pieces = useMemo(() => {
    const out: ({ md: string } | { labId: string } | { figId: string })[] = []
    let last = 0
    MARKER.lastIndex = 0
    let m: RegExpExecArray | null
    while ((m = MARKER.exec(chapter.text)) !== null) {
      out.push({ md: chapter.text.slice(last, m.index) })
      out.push(m[1] === 'fig' ? { figId: m[2] } : { labId: m[2] })
      last = m.index + m[0].length
    }
    out.push({ md: chapter.text.slice(last) })
    return out
  }, [chapter.text])

  return (
    <article className="chapter">
      <header className="chapter-head">
        <div className="chapter-part">{chapter.part}</div>
        <h2>{chapter.title}</h2>
        <p className="chapter-blurb">{chapter.blurb}</p>
      </header>
      {pieces.map((p, i) => {
        if ('md' in p) return p.md.trim() === '' ? null : <Markdown key={i} src={p.md} />
        if ('figId' in p) {
          const Fig = FIGURES[p.figId]
          if (!Fig) return <p key={i} className="lab-error">missing figure: {p.figId}</p>
          return <Fig key={`${chapter.id}-fig-${p.figId}`} />
        }
        const lab = chapter.labs.find((l) => l.id === p.labId)
        if (!lab) return <p key={i} className="lab-error">missing lab: {p.labId}</p>
        return <Lab key={`${chapter.id}-${lab.id}`} spec={lab} />
      })}
    </article>
  )
}