import { notFound } from 'next/navigation';
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
import { Trophy } from 'lucide-react';

interface RaceResultsPageProps {
  params: {
    id: string;
  };
}

export default async function RaceResultsPage({ params }: RaceResultsPageProps) {
  const raceId = params.id;
  
  if (!raceId) {
    notFound();
  }

  // Execute PageQuery
  const result = await RaceResultsPageQuery.execute({ raceId });
  
  if (result.isErr()) {
    const error = result.getError();
    
    switch (error) {
      case 'notFound':
        notFound();
      case 'redirect':
        notFound();
      default:
        // Pass error to template via StatefulPageWrapper
        return (
          <StatefulPageWrapper
            data={null}
            isLoading={false}
            error={new Error('Failed to load race results')}
            retry={() => Promise.resolve()}
            Template={({ data: _data }) => (
              <RaceResultsTemplate
                raceTrack={undefined}
                raceScheduledAt={undefined}
                totalDrivers={undefined}
                leagueName={undefined}
                raceSOF={null}
                results={[]}
                penalties={[]}
                pointsSystem={{}}
                fastestLapTime={0}
                currentDriverId={''}
                isAdmin={false}
                isLoading={false}
                error={null}
                onBack={() => {}}
                onImportResults={() => Promise.resolve()}
                onPenaltyClick={() => {}}
                importing={false}
                importSuccess={false}
                importError={null}
                showImportForm={false}
                setShowImportForm={() => {}}
              />
            )}
            loading={{ variant: 'skeleton', message: 'Loading race results...' }}
            errorConfig={{ variant: 'full-screen' }}
            empty={{
              icon: Trophy,
              title: 'No results available',
              description: 'Race results will appear here once the race is completed',
              action: { label: 'Back to Race', onClick: () => {} }
            }}
          />
        );
    }
  }
  
  const viewData = result.unwrap();

  return (
    <StatefulPageWrapper
      data={viewData}
      isLoading={false}
      error={null}
      retry={() => Promise.resolve()}
      Template={({ data: _data }) => (
        <RaceResultsTemplate
          raceTrack={viewData.raceTrack}
          raceScheduledAt={viewData.raceScheduledAt}
          totalDrivers={viewData.totalDrivers}
          leagueName={viewData.leagueName}
          raceSOF={viewData.raceSOF}
          results={viewData.results}
          penalties={viewData.penalties}
          pointsSystem={viewData.pointsSystem}
          fastestLapTime={viewData.fastestLapTime}
          currentDriverId={''}
          isAdmin={false}
          isLoading={false}
          error={null}
          onBack={() => {}}
          onImportResults={() => Promise.resolve()}
          onPenaltyClick={() => {}}
          importing={false}
          importSuccess={false}
          importError={null}
          showImportForm={false}
          setShowImportForm={() => {}}
        />
      )}
      loading={{ variant: 'skeleton', message: 'Loading race results...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: Trophy,
        title: 'No results available',
        description: 'Race results will appear here once the race is completed',
        action: { label: 'Back to Race', onClick: () => {} }
      }}
    />
  );
}