'use client';

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

interface RaceStewardingPageProps {
  params: Promise<{
    id: string;
  }>;
}

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

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

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

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // Actions
  const handleBack = useCallback(() => {
    window.history.back();
  }, []);

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

  return (
    <PageWrapper
      data={pageData}
      isLoading={isLoading}
      error={error}
      retry={fetchData}
      Template={({ data }) => (
        <RaceStewardingTemplate
          viewData={data as RaceStewardingViewData}
          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 }
      }}
    />
  );
}