import { useCallback, useEffect, useState } from 'react'
import ChapterView from './ui/ChapterView.tsx'
import LibraryView from './ui/LibraryView.tsx'
import { CHAPTERS } from './chapters/index.ts'

const PARTS = ['Introduction', 'One dimension', 'Two dimensions', 'Beyond the square'] as const

/** The introduction is front matter, so the chapter numbers start after it. */
const NUMBERED = CHAPTERS.filter((c) => c.part !== 'Introduction')

function readHash(): string {
  const h = window.location.hash.replace(/^#\/?/, '')
  return h === '' ? CHAPTERS[0].id : h
}

export default function App() {
  const [route, setRoute] = useState(readHash)
  useEffect(() => {
    const on = () => setRoute(readHash())
    window.addEventListener('hashchange', on)
    return () => window.removeEventListener('hashchange', on)
  }, [])

  const go = useCallback((id: string) => {
    window.location.hash = `/${id}`
    window.scrollTo({ top: 0 })
  }, [])

  const chapter = CHAPTERS.find((c) => c.id === route)
  const index = CHAPTERS.findIndex((c) => c.id === route)

  return (
    <div className="app">
      <nav className="sidebar">
        <div className="brand">
          <div className="brand-title">The Dirichlet problem</div>
          <div className="brand-sub">accuracy against cost, in the browser</div>
        </div>
        {PARTS.map((part) => (
          <div className="nav-part" key={part}>
            <div className="nav-part-title">{part}</div>
            <ol>
              {CHAPTERS.filter((c) => c.part === part).map((c) => (
                <li key={c.id}>
                  <button className={c.id === route ? 'nav-item active' : 'nav-item'} onClick={() => go(c.id)}>
                    <span className="nav-num">{NUMBERED.indexOf(c) + 1 || ''}</span>
                    {c.nav}
                  </button>
                </li>
              ))}
            </ol>
          </div>
        ))}
        <div className="nav-part">
          <div className="nav-part-title">Reference</div>
          <ol>
            <li>
              <button className={route === 'library' ? 'nav-item active' : 'nav-item'} onClick={() => go('library')}>
                <span className="nav-num" />
                shared MATLAB library
              </button>
            </li>
          </ol>
        </div>
        <div className="nav-foot">
          MATLAB syntax runs in your browser through <a href="https://numbl.org">numbl</a>. Nothing is installed and
          nothing is sent anywhere.
        </div>
      </nav>

      <main className="main">
        {route === 'library' ? (
          <LibraryView />
        ) : chapter ? (
          <>
            <ChapterView chapter={chapter} />
            <nav className="pager">
              {index > 0 && (
                <button onClick={() => go(CHAPTERS[index - 1].id)}>
                  &larr; {CHAPTERS[index - 1].nav}
                </button>
              )}
              <span className="lab-bar-gap" />
              {index < CHAPTERS.length - 1 && (
                <button onClick={() => go(CHAPTERS[index + 1].id)}>{CHAPTERS[index + 1].nav} &rarr;</button>
              )}
            </nav>
          </>
        ) : (
          <p className="lab-error">no such chapter: {route}</p>
        )}
      </main>
    </div>
  )
}