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: School type · Age range · Gender · Sixth form · Admissions tag
 * 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 } from '@/lib/utils';
import styles from './SecondarySchoolRow.module.css';

function detectAdmissionsTag(school: School): string | null {
  const policy = school.admissions_policy?.toLowerCase() ?? '';
  if (policy.includes('selective')) return 'Selective';
  const denom = school.religious_denomination ?? '';
  if (denom && denom !== 'Does not apply') return 'Faith priority';
  return null;
}

function hasSixthForm(school: School): boolean {
  return school.age_range?.includes('18') ?? false;
}

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;
  const laDelta =
    att8 != null && laAvgAttainment8 != null ? att8 - laAvgAttainment8 : null;

  const admissionsTag = detectAdmissionsTag(school);
  const sixthForm = hasSixthForm(school);
  const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';

  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>
          )}
          {school.school_type && <span className={styles.attr}>{school.school_type}</span>}
          {school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
          {showGender && (
            <span className={styles.provisionTag}>{school.gender}</span>
          )}
          {sixthForm && (
            <span className={styles.provisionTag}>Sixth form</span>
          )}
          {admissionsTag && (
            <span className={`${styles.provisionTag} ${admissionsTag === 'Selective' ? styles.selectiveTag : ''}`}>
              {admissionsTag}
            </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>
  );
}