/**
 * FinancesSection — shared between the primary and secondary detail pages
 * (the two versions were 91% identical).
 *
 * Server component.
 */

import type { SchoolFinance } from '@/lib/types';
import { formatAcademicYear } from '@/lib/utils';
import { Section, sectionStyles as styles } from './sectionShared';

export function FinancesSection({
  finance,
  showPremises = false,
}: {
  finance: SchoolFinance;
  /**
   * The secondary page shows a premises-cost card the primary page never had.
   * Gated rather than enabled everywhere so this refactor makes no visible
   * change; enabling it for primary is a one-line follow-up.
   */
  showPremises?: boolean;
}) {
  return (
    <Section id="finances">
      <h2 className={styles.sectionTitle}>School Finances ({formatAcademicYear(finance.year)})</h2>
      <p className={styles.sectionSubtitle}>
        Per-pupil spending shows how much the school has to spend on each child&apos;s education.
      </p>
      <div className={styles.metricsGrid}>
        <div className={styles.metricCard}>
          <div className={styles.metricLabel}>Total spend per pupil per year</div>
          <div className={styles.metricValue}>£{Math.round(finance.per_pupil_spend!).toLocaleString()}</div>
          <div className={styles.metricHint}>How much the school has to spend on each pupil annually</div>
        </div>
        {finance.teacher_cost_pct != null && (
          <div className={styles.metricCard}>
            <div className={styles.metricLabel}>Share of budget spent on teachers</div>
            <div className={styles.metricValue}>{finance.teacher_cost_pct.toFixed(1)}%</div>
          </div>
        )}
        {finance.staff_cost_pct != null && (
          <div className={styles.metricCard}>
            <div className={styles.metricLabel}>Share of budget spent on all staff</div>
            <div className={styles.metricValue}>{finance.staff_cost_pct.toFixed(1)}%</div>
          </div>
        )}
        {showPremises && finance.premises_cost_pct != null && (
          <div className={styles.metricCard}>
            <div className={styles.metricLabel}>Share of budget spent on premises</div>
            <div className={styles.metricValue}>{finance.premises_cost_pct.toFixed(1)}%</div>
          </div>
        )}
      </div>
    </Section>
  );
}