import PageShell from "../components/PageShell";
import HistoryTimeline from "./sections/history/HistoryTimeline";
import { HISTORY_DECADES } from "../data/historyDecades";
import { useHistory } from "../lib/useHistory";

/**
 * Year the program starts. Decades ending before this render with the
 * pre-program treatment, so the gap moves if the founding date is ever
 * corrected — no hardcoded 2000 anywhere in the components.
 */
const PROGRAM_START_YEAR = 2000;

const ACCENT = "#138ba0";
const BACKGROUND = "#ffffff";

export default function History() {
  const { items, loading, error, reload } = useHistory();

  // Section renders `content` outside its own max-width wrapper, so the
  // container lives here. The custom properties bind the timeline to
  // this section's accent and background — --tl-surface must match
  // `background` or the rail will show through the year dots.
  const wrap = (children: React.ReactNode) => (
    <div
      className="max-w-6xl mx-auto px-6"
      style={{ "--tl-accent": ACCENT, "--tl-surface": BACKGROUND } as React.CSSProperties}
    >
      {children}
    </div>
  );

  let content: React.ReactNode;

  if (loading) {
    content = wrap(
      <p className="py-12 text-[#4a6b72]" role="status">
        Loading the timeline…
      </p>,
    );
  } else if (error) {
    // Say what failed and offer the one action that might fix it.
    // A history page that silently renders nothing looks like an
    // organization with no history.
    content = wrap(
      <div className="py-12">
        <p className="text-[#b3261e]">Couldn’t load the timeline. {error}</p>
        <button
          type="button"
          onClick={reload}
          className="mt-3 rounded-full border border-[#138ba0] px-4 py-1.5 text-sm font-medium text-[#138ba0] transition-colors hover:bg-[#eef9fb]"
        >
          Try again
        </button>
      </div>,
    );
  } else {
    content = wrap(
      <HistoryTimeline
        items={items}
        decades={HISTORY_DECADES}
        direction="desc"
        programStartYear={PROGRAM_START_YEAR}
      />,
    );
  }

  return (
    <PageShell
      title="History"
      intro="A near-complete timeline of Next Generation of Unity (NGU), and other Unity Young Adult programs."
      sections={[
        {
          id: "timeline",
          title: "NGU Timeline",
          blurb:
            "Open a year to see what happened.",
          accent: ACCENT,
          background: BACKGROUND,
          content,
        },
      ]}
    />
  );
}