/**
 * CutoffDistanceDetail — the full year-by-year cut-off story.
 *
 * Chart, table, map and postcode check, in that order: the shape of the trend,
 * then what happened in each year, then the same numbers over real streets,
 * then the reader's own address measured against them.
 *
 * Shared by both templates because the content is identical, but placed
 * differently by each. The primary page has a segmented control and gives this
 * its own "Distance" tab; the secondary page is one flat panel by design, so it
 * renders inline beneath the metric cards. Extracting it keeps the caveats and
 * the ordering from drifting apart between the two.
 *
 * Server component — the map and postcode form are the only client parts, and
 * they carry their own boundary.
 */

import type { School } from '@/lib/types';
import { sectionStyles as styles } from './sectionShared';
import { CutoffTrendChart } from './charts';
import { CutoffYearTable } from './CutoffYearTable';
import { CutoffMapPanel } from './CutoffMapPanel';
import {
  cutoffTrendSummary, cutoffCoverageNote,
  CUTOFF_NOTE, CUTOFF_MEASUREMENT_NOTE,
  type CutoffYearRow,
} from './lastDistanceOffered';

export function CutoffDistanceDetail({
  rows,
  schoolInfo,
  /** Repeat the "not a catchment" caveat here. On the primary page this view is
   *  behind a tab, so a reader can reach it without ever seeing the tile that
   *  carries the caveat; on the secondary page the caveat is already directly
   *  above, and repeating it verbatim reads as a stutter. */
  showCaveat = true,
}: {
  rows: CutoffYearRow[];
  schoolInfo: School;
  showCaveat?: boolean;
}) {
  const publishedYears = rows.filter((r) => r.status === 'published').length;
  if (publishedYears < 2) return null;

  const trendSummary = cutoffTrendSummary(rows);
  const coverageNote = cutoffCoverageNote(rows);

  return (
    <>
      <div className={styles.admissionsChartCap}>Last distance offered, by year</div>
      <CutoffTrendChart rows={rows} />
      <p className={styles.cutoffChartKey}>
        The line breaks where no figure was published — it is never drawn across
        a gap. The table below says what happened in each of those years.
      </p>
      {trendSummary && <p className={styles.admissionsTrendSummary}>{trendSummary}</p>}

      <CutoffYearTable rows={rows} />
      {coverageNote && <p className={styles.cutoffChartKey}>{coverageNote}</p>}

      <CutoffMapPanel schoolInfo={schoolInfo} rows={rows} />

      {showCaveat && (
        <p className={styles.admissionsDistanceNote}>
          {CUTOFF_NOTE} {CUTOFF_MEASUREMENT_NOTE}
        </p>
      )}
    </>
  );
}