import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
import { LeagueDetailPresenter } from '@/lib/presenters/LeagueDetailPresenter';
import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';

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

export default async function Page({ params }: Props) {
  // Validate params
  if (!params.id) {
    notFound();
  }

  // Execute the PageQuery
  const result = await LeagueDetailPageQuery.execute(params.id);
  
  // Handle different result types
  if (result.isErr()) {
    const error = result.getError();
    
    switch (error) {
      case 'notFound':
        notFound();
      case 'redirect':
        // In a real app, this would redirect to login
        notFound();
      case 'LEAGUE_FETCH_FAILED':
      case 'UNKNOWN_ERROR':
      default:
        // Return error state that PageWrapper can handle
        // For error state, we need a simple template that just renders an error
        const ErrorTemplate: React.ComponentType<{ data: any }> = ({ data }) => (
          <div>Error state</div>
        );
        return (
          <PageWrapper
            data={undefined}
            error={new Error('Failed to fetch league')}
            Template={ErrorTemplate}
            errorConfig={{ variant: 'full-screen' }}
          />
        );
    }
  }
  
  const data = result.unwrap();
  
  // Convert the API DTO to ViewModel using the existing presenter
  // This maintains compatibility with the existing template
  const viewModel = data.apiDto as unknown as LeagueDetailPageViewModel;
  
  // Create a wrapper component that passes ViewData to the template
  const TemplateWrapper: React.ComponentType<{ data: typeof data }> = ({ data }) => {
    // Convert ViewModel to ViewData using Presenter
    const viewData = LeagueDetailPresenter.createViewData(viewModel, params.id, false);
    
    return (
      <LeagueDetailTemplate
        viewData={viewData}
        leagueId={params.id}
        isSponsor={false}
        membership={null}
        onMembershipChange={() => {}}
        onEndRaceModalOpen={() => {}}
        onLiveRaceClick={() => {}}
      />
    );
  };

  return (
    <PageWrapper
      data={data}
      Template={TemplateWrapper}
      loading={{ variant: 'skeleton', message: 'Loading league details...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        title: 'League not found',
        description: 'The league you are looking for does not exist or has been removed.',
      }}
    />
  );
}