'use client';

import { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';

// Shared state components
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useServices } from '@/lib/services/ServiceProvider';
import { Gavel } from 'lucide-react';

export function RaceStewardingInteractive() {
  const router = useRouter();
  const params = useParams();
  const raceId = params.id as string;
  const currentDriverId = useEffectiveDriverId();
  const { raceStewardingService } = useServices();

  // Fetch data using new hook
  const { data: stewardingData, isLoading, error, retry } = useDataFetching({
    queryKey: ['raceStewardingData', raceId, currentDriverId],
    queryFn: () => raceStewardingService.getRaceStewardingData(raceId, currentDriverId),
  });

  // Fetch membership
  const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);

  // UI State
  const [activeTab, setActiveTab] = useState<StewardingTab>('pending');

  const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;

  // Actions
  const handleBack = () => {
    router.push(`/races/${raceId}`);
  };

  const handleReviewProtest = (protestId: string) => {
    // Navigate to protest review page
    router.push(`/leagues/${stewardingData?.league?.id}/stewarding/protests/${protestId}`);
  };

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

  return (
    <StateContainer
      data={stewardingData}
      isLoading={isLoading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'skeleton', message: 'Loading stewarding data...' },
        error: { 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 }
        }
      }}
    >
      {(stewardingData) => (
        <RaceStewardingTemplate
          stewardingData={templateData}
          isLoading={false}
          error={null}
          onBack={handleBack}
          onReviewProtest={handleReviewProtest}
          isAdmin={isAdmin}
          activeTab={activeTab}
          setActiveTab={setActiveTab}
        />
      )}
    </StateContainer>
  );
 }