school_compare/nextjs-app/components/school/CutoffMapPanel.tsx

'use client';

/**
 * CutoffMapPanel — "How far away are you?"
 *
 * Measures a postcode against the one cut-off we publish, and will draw that
 * cut-off as a ring around the school on request.
 *
 * It used to compare against every published year and show a set of shrinking
 * rings. Earlier years are now held back as a paid feature and no longer leave
 * the API, so this answers one question about one year — which makes the
 * verdict sharper to state, and puts more weight on qualifying it properly,
 * since there is no run of years left to soften a single close call.
 *
 * The map is not rendered until asked for: before a postcode is entered it is a
 * circle drawn round a school, and it costs a Leaflet bundle and 240px of
 * height to say that. A successful check opens it automatically, because that
 * is the point at which it starts answering something.
 *
 * The postcode never leaves the browser except to postcodes.io for a lat/long,
 * and nothing is stored — this is a client-side measurement, not a lookup
 * against the family.
 */

import { useState, type FormEvent } from 'react';
import dynamic from 'next/dynamic';
import type { School, SchoolAdmissionDistance } from '@/lib/types';
import { geocodePostcode, calculateDistance } from '@/lib/api';
import { isValidPostcode } from '@/lib/utils';
import {
  compareToCutoff, CUTOFF_CHECK_CAVEAT,
  type CutoffCheckResult, type CutoffVerdict,
} from './lastDistanceOffered';
import styles from './schoolSections.module.css';

const CutoffMap = dynamic(() => import('../LeafletCutoffMapInner'), {
  ssr: false,
  loading: () => <div className={styles.cutoffMapSkeleton} aria-hidden="true" />,
});

// Written out rather than composed from the verdict string. A computed
// `styles[...]` key silently yields undefined when a class is renamed, and an
// unstyled "outside" result would look exactly like an "inside" one.
const VERDICT_CLASS: Record<CutoffVerdict, string> = {
  inside: styles.cutoffResultInside,
  outside: styles.cutoffResultOutside,
  'too-close': styles.cutoffResultTooClose,
};

export function CutoffMapPanel({
  schoolInfo,
  cutoff,
}: {
  schoolInfo: School;
  cutoff: SchoolAdmissionDistance;
}) {
  const [postcode, setPostcode] = useState('');
  const [home, setHome] = useState<{ lat: number; lng: number } | null>(null);
  const [result, setResult] = useState<CutoffCheckResult | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const [mapOpen, setMapOpen] = useState(false);

  const lat = schoolInfo.latitude;
  const lng = schoolInfo.longitude;
  const cutoffM = cutoff.distance_m;

  // Without coordinates there is nothing to measure against and nothing to draw.
  if (lat == null || lng == null || cutoffM == null) return null;

  const onCheck = async (e: FormEvent) => {
    e.preventDefault();
    const value = postcode.trim();
    if (!value) return;

    if (!isValidPostcode(value)) {
      setError('That does not look like a UK postcode. Try one like SE23 3NA.');
      setResult(null);
      setHome(null);
      return;
    }

    setBusy(true);
    setError(null);
    try {
      const point = await geocodePostcode(value);
      if (!point) {
        setError('We could not find that postcode. Check it and try again.');
        setResult(null);
        setHome(null);
        return;
      }
      setHome({ lat: point.latitude, lng: point.longitude });
      setMapOpen(true);
      // calculateDistance returns kilometres; everything here is metres.
      const metres = calculateDistance(point.latitude, point.longitude, lat, lng) * 1000;
      setResult(compareToCutoff(metres, cutoffM, cutoff.year));
    } catch {
      setError('Something went wrong looking up that postcode. Try again in a moment.');
      setResult(null);
      setHome(null);
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className={styles.cutoffCheck}>
      <p className={styles.cutoffCheckSub}>
        Straight-line distance from your postcode, compared with the September{' '}
        {cutoff.year} cut-off. Not stored.
      </p>

      <form className={styles.cutoffCheckForm} onSubmit={onCheck}>
        <label className={styles.srOnly} htmlFor="cutoff-postcode">Your postcode</label>
        <input
          id="cutoff-postcode"
          type="text"
          inputMode="text"
          autoComplete="postal-code"
          spellCheck={false}
          placeholder="e.g. SE23 3NA"
          value={postcode}
          onChange={(e) => setPostcode(e.target.value)}
          className={styles.cutoffCheckInput}
        />
        <button type="submit" className={styles.cutoffCheckButton} disabled={busy}>
          {busy ? 'Checking…' : 'Check'}
        </button>
      </form>

      {error && <p className={styles.cutoffCheckError} role="alert">{error}</p>}

      {result && (
        <div
          className={`${styles.cutoffCheckResult} ${VERDICT_CLASS[result.verdict]}`}
          role="status"
        >
          <p className={styles.cutoffCheckHeadline}>{result.headline}</p>
          {result.detail && <p className={styles.cutoffCheckDetail}>{result.detail}</p>}
        </div>
      )}

      {mapOpen ? (
        <div className={styles.cutoffMapReveal}>
          <div className={styles.cutoffMapFigure}>
            <CutoffMap
              lat={lat}
              lng={lng}
              rings={[{ year: cutoff.year, radiusM: cutoffM, latest: true }]}
              home={home}
              interactive={false}
            />
          </div>
          <ul className={styles.cutoffMapLegend}>
            <li>
              <span className={`${styles.cutoffSwatch} ${styles.cutoffSwatchNow}`} aria-hidden="true" />
              September {cutoff.year} cut-off
            </li>
            {home && (
              <li>
                <span className={`${styles.cutoffSwatch} ${styles.cutoffSwatchHome}`} aria-hidden="true" />
                Your postcode
              </li>
            )}
          </ul>
        </div>
      ) : (
        <button
          type="button"
          className={styles.cutoffMapToggle}
          onClick={() => setMapOpen(true)}
        >
          Show this distance on a map
        </button>
      )}

      <p className={styles.cutoffCheckCaveat}>{CUTOFF_CHECK_CAVEAT}</p>
    </div>
  );
}