/**
 * CutoffYearTable — the last distance offered, year by year.
 *
 * The table is where the chart's gaps get explained. Each year says which of
 * the three things happened, in words, because "no figure" alone is the least
 * useful thing we could tell a parent about a year.
 *
 * Server component: it is static markup over data the page already holds.
 */

import type { CutoffYearRow, CutoffYearStatus } from './lastDistanceOffered';
import { sectionStyles as styles } from './sectionShared';

const STATUS_LABEL: Record<CutoffYearStatus, string> = {
  published: 'Oversubscribed',
  // Precisely what the EES field supports, and no more: first preferences did
  // not exceed places. It does not establish that every applicant was offered
  // a place, so it must not be worded as though it did.
  'not-oversubscribed': 'Places available on first preferences',
  'not-published': 'Not published',
};

const STATUS_CLASS: Record<CutoffYearStatus, string> = {
  published: styles.cutoffPillOver,
  'not-oversubscribed': styles.cutoffPillOk,
  'not-published': styles.cutoffPillNa,
};

const DISTANCE_TEXT: Record<CutoffYearStatus, string> = {
  published: '',
  'not-oversubscribed': 'No cut-off needed',
  'not-published': '—',
};

export function CutoffYearTable({ rows }: { rows: CutoffYearRow[] }) {
  if (rows.length === 0) return null;

  const showPlaces = rows.some((r) => r.placesOffered != null);

  return (
    <div className={styles.cutoffTableWrap}>
      <table className={styles.cutoffTable}>
        <caption className={styles.srOnly}>
          Last distance offered by year, with the reason where no figure was published
        </caption>
        <thead>
          <tr>
            <th scope="col">Year</th>
            <th scope="col">Last distance</th>
            {showPlaces && <th scope="col">Places</th>}
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r.year} className={i === 0 ? styles.cutoffRowLatest : undefined}>
              <th scope="row">{r.year}</th>
              <td className={r.status === 'published' ? undefined : styles.cutoffCellMissing}>
                {r.status === 'published' ? r.figure : DISTANCE_TEXT[r.status]}
                {r.status === 'published' && (r.routeCount ?? 1) > 1 && (
                  <span className={styles.cutoffRouteFlag}>
                    {' '}furthest of {r.routeCount}
                  </span>
                )}
              </td>
              {showPlaces && (
                <td className={r.placesOffered == null ? styles.cutoffCellMissing : undefined}>
                  {r.placesOffered ?? '—'}
                </td>
              )}
              <td>
                <span className={`${styles.cutoffPill} ${STATUS_CLASS[r.status]}`}>
                  {STATUS_LABEL[r.status]}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}