school_compare/nextjs-app/app/compare/page.tsx

/**
 * Compare Page (SSR)
 * Side-by-side comparison of schools with metrics
 */

import { fetchComparison, fetchMetrics } from '@/lib/api';
import { ComparisonView } from '@/components/ComparisonView';
import type { Metadata } from 'next';

interface ComparePageProps {
  searchParams: Promise<{
    urns?: string;
    metric?: string;
  }>;
}

export const metadata: Metadata = {
  title: 'Compare Schools',
  description: 'Compare KS2 performance across multiple primary schools in England',
  keywords: 'school comparison, compare schools, KS2 comparison, primary school performance',
};

// Force dynamic rendering
export const dynamic = 'force-dynamic';

export default async function ComparePage({ searchParams }: ComparePageProps) {
  const { urns: urnsParam, metric: metricParam } = await searchParams;

  const urns = urnsParam?.split(',').map(Number).filter(Boolean) || [];
  const selectedMetric = metricParam || 'rwm_expected_pct';

  try {
    // Fetch comparison data if URNs provided
    let comparisonData = null;
    if (urns.length > 0) {
      try {
        const response = await fetchComparison(urnsParam!);
        comparisonData = response.comparison;
      } catch (error) {
        console.error('Failed to fetch comparison:', error);
      }
    }

    // Fetch available metrics
    const metricsResponse = await fetchMetrics();

    // Convert metrics object to array
    const metricsArray = Object.values(metricsResponse?.metrics || {});

    return (
      <ComparisonView
        initialData={comparisonData}
        initialUrns={urns}
        metrics={metricsArray}
        selectedMetric={selectedMetric}
      />
    );
  } catch (error) {
    console.error('Error fetching data for compare page:', error);

    // Return error state with empty metrics
    return (
      <ComparisonView
        initialData={null}
        initialUrns={urns}
        metrics={[]}
        selectedMetric={selectedMetric}
      />
    );
  }
}