// The shared .m files, shown read-only.  The editable script in each lab is
// the filter itself; these are the pieces every lab is allowed to assume.
import { useState } from 'react'

const raw = import.meta.glob('../matlab/*.m', { query: '?raw', import: 'default', eager: true }) as Record<
  string,
  string
>

const FILES = Object.entries(raw)
  .map(([path, content]) => ({ name: path.slice(path.lastIndexOf('/') + 1), content }))
  .sort((a, b) => a.name.localeCompare(b.name))

export default function LibraryView() {
  const [open, setOpen] = useState<string | null>(FILES[0]?.name ?? null)
  return (
    <article className="chapter">
      <header className="chapter-head">
        <div className="chapter-part">Reference</div>
        <h2>The shared MATLAB library</h2>
        <p className="chapter-blurb">
          Every lab boots with these function files in its session, alongside the editable script and a driver that
          reads the controls, computes the exact answer, measures the method against it, and writes the figures and
          the sound. They are the pieces that would otherwise be repeated in every chapter: reading and writing the
          page's data, packing a signal for the audio player, the spectral estimates, the Bessel zeros, and the one
          routine that every measured frequency in the tutorial comes from.
        </p>
      </header>
      <div className="lib-list">
        {FILES.map((f) => (
          <div className="lib-file" key={f.name}>
            <button className="lib-name" onClick={() => setOpen(open === f.name ? null : f.name)}>
              {open === f.name ? '▾' : '▸'} {f.name}
            </button>
            {open === f.name && <pre className="lib-src">{f.content}</pre>}
          </div>
        ))}
      </div>
    </article>
  )
}