import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { RaceDetailTemplate } from '@/templates/RaceDetailTemplate';
import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';

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

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

  // Execute PageQuery
  const result = await RaceDetailPageQuery.execute({ raceId, driverId: '' });
  
  if (result.isErr()) {
    const error = result.getError();
    
    switch (error) {
      case 'notFound':
        notFound();
      case 'redirect':
        notFound();
      default:
        // Pass error to template via PageWrapper
        return (
          <PageWrapper
            data={null}
            Template={({ data: _data }) => (
              <RaceDetailTemplate
                viewData={undefined}
                isLoading={false}
                error={new Error('Failed to load race details')}
                onBack={() => {}}
                onRegister={() => {}}
                onWithdraw={() => {}}
                onCancel={() => {}}
                onReopen={() => {}}
                onEndRace={() => {}}
                onFileProtest={() => {}}
                onResultsClick={() => {}}
                onStewardingClick={() => {}}
                onLeagueClick={() => {}}
                onDriverClick={() => {}}
                isOwnerOrAdmin={false}
                animatedRatingChange={0}
                mutationLoading={{
                  register: false,
                  withdraw: false,
                  cancel: false,
                  reopen: false,
                  complete: false,
                }}
              />
            )}
            loading={{ variant: 'skeleton', message: 'Loading race details...' }}
            errorConfig={{ variant: 'full-screen' }}
            empty={{
              icon: require('lucide-react').Flag,
              title: 'Race not found',
              description: 'The race may have been cancelled or deleted',
              action: { label: 'Back to Races', onClick: () => {} }
            }}
          />
        );
    }
  }
  
  const viewData = result.unwrap();
  
  return (
    <PageWrapper
      data={viewData}
      Template={({ data: _data }) => (
        <RaceDetailTemplate
          viewData={viewData}
          isLoading={false}
          error={null}
          onBack={() => {}}
          onRegister={() => {}}
          onWithdraw={() => {}}
          onCancel={() => {}}
          onReopen={() => {}}
          onEndRace={() => {}}
          onFileProtest={() => {}}
          onResultsClick={() => {}}
          onStewardingClick={() => {}}
          onLeagueClick={() => {}}
          onDriverClick={() => {}}
          isOwnerOrAdmin={false}
          animatedRatingChange={0}
          mutationLoading={{
            register: false,
            withdraw: false,
            cancel: false,
            reopen: false,
            complete: false,
          }}
        />
      )}
      loading={{ variant: 'skeleton', message: 'Loading race details...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: require('lucide-react').Flag,
        title: 'Race not found',
        description: 'The race may have been cancelled or deleted',
        action: { label: 'Back to Races', onClick: () => {} }
      }}
    />
  );
}