// DocsSessionsAbout.jsx — v0.19.0 / roadmap item #30.
//
// Renders the README.md of the public `wiggleverse/ohm-session-history`
// repo at `/docs/sessions/about`. The framework backend mediates the
// gitea fetch (see backend/app/docs_sessions.py); this component
// handles three response paths:
//
//   200 → render the markdown via MarkdownPreview
//   404 → "About not yet published" empty-state (the upstream README
//         doesn't exist yet — happens when a deployment hasn't
//         restructured its session-history repo yet, expected at
//         v0.19.0 deploy time per the CHANGELOG)
//   502 → "Couldn't reach the session-history repo" with a retry
//         button. The retry just re-invokes the fetch — no extra
//         backoff because the backend cache already smoothes
//         repeated 502s.

import { useEffect, useState, useCallback } from 'react'
import MarkdownPreview from './MarkdownPreview.jsx'
import { getSessionsAbout } from '../api.js'
import { EVENTS, track } from '../lib/analytics'

export default function DocsSessionsAbout() {
  const [body, setBody] = useState('')
  const [status, setStatus] = useState('loading') // loading | ok | notfound | error
  const [reloadTick, setReloadTick] = useState(0)

  useEffect(() => {
    track(EVENTS.DOC_VIEWED, { section: 'sessions/about' })
  }, [])

  useEffect(() => {
    let active = true
    setStatus('loading')
    getSessionsAbout()
      .then(text => {
        if (!active) return
        setBody(text || '')
        setStatus('ok')
      })
      .catch(e => {
        if (!active) return
        if (e.status === 404) {
          setStatus('notfound')
        } else {
          setStatus('error')
        }
      })
    return () => { active = false }
  }, [reloadTick])

  const retry = useCallback(() => setReloadTick(t => t + 1), [])

  return (
    <article className="docs-article">
      <h1 className="docs-article-title">About sessions</h1>
      {status === 'loading' && <p className="muted">Loading…</p>}
      {status === 'notfound' && (
        <div className="docs-empty">
          <p>
            The session-history About page isn't published yet. Sessions
            are still authored — once a few have shipped, this page will
            render the canonical introduction.
          </p>
          <p>
            In the meantime, browse the source repo directly at{' '}
            <a
              href="https://git.wiggleverse.org/wiggleverse/ohm-session-history"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Open session-history repo on gitea"
              data-amp-track-name="Docs Sessions About Repo Link"
            >
              wiggleverse/ohm-session-history
            </a>.
          </p>
        </div>
      )}
      {status === 'error' && (
        <div className="docs-error" role="alert">
          <p>Couldn't reach the session-history repo.</p>
          <button
            type="button"
            onClick={retry}
            aria-label="Retry"
            data-amp-track-name="Docs Sessions About Retry"
          >
            Try again
          </button>
        </div>
      )}
      {status === 'ok' && (
        <div className="philosophy-body">
          <MarkdownPreview content={body} />
        </div>
      )}
    </article>
  )
}