// One arc (EVENTS.md §I, Phase 14a).
//
// **The arc is the thing the tooling this replaces could not express at all.**
// A WordPress calendar plugin has no series field, so "Royal Spy Mission → Risky
// Partner → Message From the Void" existed only in a GM's head and in whatever
// the forum post said. This page is that continuity, in the order an editor
// arranged it — which is why the events are numbered rather than dated: an arc
// has an order, and its parts may be months apart or run out of sequence.

import { useParams, Link } from 'react-router-dom'
import PublicLayout from '../../components/PublicLayout.jsx'
import PageHeader from '../../components/PageHeader.jsx'
import { Loading, ErrorState } from '../../components/PageState.jsx'
import { useAsync } from '../../lib/useAsync.js'
import { api } from '../../api/client.js'

export default function EventSeries() {
  const { slug } = useParams()
  const { loading, error, data } = useAsync(() => api.publicEventSeries(slug), [slug])

  // Error first, then loading — the order Phase 13 had to fix on the admin
  // editor, where a failed load sat behind a spinner that never stopped.
  if (error) {
    return (
      <PublicLayout section="website">
        <div className="shell-mid page-body">
          <ErrorState message="That series could not be found." />
          <p style={{ marginTop: 16 }}>
            <Link to="/site/events">Back to the calendar</Link>
          </p>
        </div>
      </PublicLayout>
    )
  }
  if (loading || !data) {
    return (
      <PublicLayout section="website">
        <div className="shell-mid page-body">
          <Loading />
        </div>
      </PublicLayout>
    )
  }

  const series = data.series
  return (
    <PublicLayout section="website">
      <div className="shell-mid page-body">
        <PageHeader eyebrow="Series" title={series.name} lead={series.description || ''} />
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
          {series.events.map((e, i) => (
            <li key={e.slug}>
              <Link to={`/site/events/${e.slug}`} style={{ textDecoration: 'none' }}>
                <div className="panel" style={{ padding: '18px 22px', display: 'flex', gap: 18 }}>
                  <span
                    className="display"
                    style={{ color: 'var(--accent)', fontSize: '1.4rem', minWidth: 36, textAlign: 'right' }}
                  >
                    {i + 1}
                  </span>
                  <span>
                    <span className="display" style={{ fontSize: '1.15rem', color: 'var(--head)' }}>
                      {e.title}
                    </span>
                    {e.summary && <p style={{ margin: '6px 0 0', color: 'var(--text)' }}>{e.summary}</p>}
                  </span>
                </div>
              </Link>
            </li>
          ))}
        </ol>
        <p className="sans" style={{ marginTop: 24 }}>
          <Link to="/site/events">Back to the calendar</Link>
        </p>
      </div>
    </PublicLayout>
  )
}