school_compare/nextjs-app/components/SecondarySchoolRow.tsx

/**
 * SecondarySchoolRow Component
 * Four-line row for secondary school search results
 *
 * Line 1: School name · Ofsted badge
 * Line 2: Phase · Type · Age range · the school page's flags (lib/schoolFacts)
 * Line 3: Attainment 8 (large) · ±LA avg delta · Pupils
 * Line 4: LA name · distance
 */

'use client';

import type { School } from '@/lib/types';
import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange, isProposedToClose, isSpecialSchool } from '@/lib/utils';
import { schoolFlags, schoolTypeLabel } from '@/lib/schoolFacts';
import styles from './SecondarySchoolRow.module.css';

interface SecondarySchoolRowProps {
  school: School;
  isLocationSearch?: boolean;
  isInCompare?: boolean;
  onAddToCompare?: (school: School) => void;
  onRemoveFromCompare?: (urn: number) => void;
  laAvgAttainment8?: number | null;
}

export function SecondarySchoolRow({
  school,
  isLocationSearch,
  isInCompare = false,
  onAddToCompare,
  onRemoveFromCompare,
  laAvgAttainment8,
}: SecondarySchoolRowProps) {
  const handleCompareClick = () => {
    if (isInCompare) {
      onRemoveFromCompare?.(school.urn);
    } else {
      onAddToCompare?.(school);
    }
  };

  const ofstedBadge = buildOfstedListBadge(school);
  const phase = getPhaseStyle(school.phase);
  const att8 = school.attainment_8_score;
  // The school's own Attainment 8 is a same-school figure — shown whenever it
  // exists (special schools included; their type tag on line 2 gives context).
  // Only the vs-LA-average delta, a benchmark comparison, is dropped for
  // special schools / PRUs / AP, whose pupils aren't measured against it fairly.
  const laDelta =
    att8 != null && !isSpecialSchool(school) && laAvgAttainment8 != null
      ? att8 - laAvgAttainment8
      : null;

  const typeLabel = schoolTypeLabel(school);
  const flags = schoolFlags(school);

  return (
    <div className={`${styles.row} ${phase.key ? styles[`phase${phase.key}`] : ''} ${isInCompare ? styles.rowInCompare : ''}`}>
      {/* Left: four content lines */}
      <div className={styles.rowContent}>

        {/* Line 1: School name + Ofsted badge */}
        <div className={styles.line1}>
          <a href={schoolUrl(school.urn, school.school_name)} className={styles.schoolName}>
            {school.school_name}
          </a>
          <span className={`${styles.ofstedBadge} ${styles[ofstedBadge.cssClass]}`}>
            {ofstedBadge.label}
          </span>
        </div>

        {/* Line 2: Context tags */}
        <div className={styles.line2}>
          {phase.label && (
            <span className={`${styles.phaseLabel} ${styles[`phaseLabel${phase.key}`]}`}>
              {phase.label}
            </span>
          )}
          {typeLabel && <span className={styles.attr}>{typeLabel}</span>}
          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
          {flags.map((flag) => (
            <span
              key={flag.label}
              className={flag.kind === 'condition' ? styles.conditionTag : styles.provisionTag}
            >
              {flag.label}
            </span>
          ))}
          {isProposedToClose(school) && (
            <span className={`${styles.provisionTag} ${styles.closingTag}`}>⚠ Proposed to close</span>
          )}
        </div>

        {/* Line 3: KS4 stats */}
        <div className={styles.line3}>
          <span className={styles.stat}>
            <strong className={styles.statValueLarge}>
              {att8 != null ? att8.toFixed(1) : '—'}
            </strong>
            <span className={styles.statLabel}>Attainment 8</span>
          </span>

          {laDelta != null && (
            <span className={`${styles.delta} ${laDelta >= 0 ? styles.deltaPositive : styles.deltaNegative}`}>
              {laDelta >= 0 ? '+' : ''}{laDelta.toFixed(1)} vs LA avg
            </span>
          )}

          {school.total_pupils != null && (
            <span className={styles.stat}>
              <strong className={styles.statValue}>
                {school.total_pupils.toLocaleString()}
              </strong>
              <span className={styles.statLabel}>pupils</span>
            </span>
          )}
        </div>

        {/* Line 4: Location + distance */}
        <div className={styles.line4}>
          {school.local_authority && (
            <span>{school.local_authority}</span>
          )}
          {isLocationSearch && school.distance != null && (
            <span className={styles.distanceBadge}>
              {school.distance.toFixed(1)} mi
            </span>
          )}
        </div>

      </div>

      {/* Right: actions */}
      <div className={styles.rowActions}>
        <a href={schoolUrl(school.urn, school.school_name)} className="btn btn-tertiary btn-sm">
          View
        </a>
        {(onAddToCompare || onRemoveFromCompare) && (
          <button
            onClick={handleCompareClick}
            className={isInCompare ? 'btn btn-active btn-sm' : 'btn btn-secondary btn-sm'}
          >
            {isInCompare ? '✓ Comparing' : '+ Compare'}
          </button>
        )}
      </div>
    </div>
  );
}