import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
import { RaceStewardingPageQuery } from '@/lib/page-queries/races/RaceStewardingPageQuery';
import { Gavel } from 'lucide-react';
import { useState } from 'react';

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

export default function RaceStewardingPage({ params }: RaceStewardingPageProps) {
  const raceId = params.id;
  const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
  
  if (!raceId) {
    notFound();
  }

  // Data state
  const [pageData, setPageData] = useState<any>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  // Fetch function
  const fetchData = async () => {
    setIsLoading(true);
    setError(null);
    
    try {
      const result = await RaceStewardingPageQuery.execute({ raceId });
      
      if (result.isErr()) {
        throw new Error('Failed to fetch stewarding data');
      }
      
      setPageData(result.unwrap());
    } catch (err) {
      setError(err instanceof Error ? err : new Error('Unknown error'));
    } finally {
      setIsLoading(false);
    }
  };

  // Transform data for template
  const templateData = pageData ? {
    race: pageData.race,
    league: pageData.league,
    pendingProtests: pageData.pendingProtests,
    resolvedProtests: pageData.resolvedProtests,
    penalties: pageData.penalties,
    driverMap: pageData.driverMap,
    pendingCount: pageData.pendingCount,
    resolvedCount: pageData.resolvedCount,
    penaltiesCount: pageData.penaltiesCount,
  } : undefined;

  // Actions
  const handleBack = () => {
    window.history.back();
  };

  const handleReviewProtest = (protestId: string) => {
    if (templateData?.league?.id) {
      window.location.href = `/leagues/${templateData.league.id}/stewarding/protests/${protestId}`;
    }
  };

  return (
    <PageWrapper
      data={pageData}
      isLoading={isLoading}
      error={error}
      retry={fetchData}
      Template={({ data: _data }) => (
        <RaceStewardingTemplate
          stewardingData={templateData}
          isLoading={false}
          error={null}
          onBack={handleBack}
          onReviewProtest={handleReviewProtest}
          isAdmin={false}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
        />
      )}
      loading={{ variant: 'skeleton', message: 'Loading stewarding data...' }}
      errorConfig={{ variant: 'full-screen' }}
      empty={{
        icon: Gavel,
        title: 'No stewarding data',
        description: 'No protests or penalties for this race',
        action: { label: 'Back to Race', onClick: handleBack }
      }}
    />
  );
}