gridpilot.gg/apps/website/app/leagues/[id]/stewarding/StewardingPageClient.tsx

'use client';

import { StewardingQueuePanel } from '@/components/leagues/StewardingQueuePanel';
import { PenaltyFAB } from '@/components/races/PenaltyFAB';
import { QuickPenaltyModal } from '@/components/leagues/QuickPenaltyModal';
import { ReviewProtestModal } from '@/components/leagues/ReviewProtestModal';
import { StewardingStats } from '@/components/leagues/StewardingStats';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { useLeagueStewardingMutations } from "@/hooks/league/useLeagueStewardingMutations";
import { useMemo, useState } from 'react';
import { PenaltyHistoryList } from '@/components/leagues/PenaltyHistoryList';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import type { StewardingViewData } from '@/lib/view-data/leagues/StewardingViewData';
import { ProtestViewModel } from '@/lib/view-models/ProtestViewModel';
import { RaceViewModel } from '@/lib/view-models/RaceViewModel';
import { DriverViewModel } from '@/lib/view-models/DriverViewModel';

interface StewardingTemplateProps {
  data: StewardingViewData;
  leagueId: string;
  currentDriverId: string;
  onRefetch: () => void;
}

export function StewardingPageClient({ data, currentDriverId, onRefetch }: StewardingTemplateProps) {
  const [activeTab, setActiveTab] = useState<'pending' | 'history'>('pending');
  const [selectedProtest, setSelectedProtest] = useState<ProtestViewModel | null>(null);
  const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);

  // Mutations using domain hook
  const { acceptProtestMutation, rejectProtestMutation } = useLeagueStewardingMutations(onRefetch);

  // Flatten protests for the specialized list components
  const allPendingProtests = useMemo(() => {
    return data.races.flatMap(r => r.pendingProtests.map(p => ({
      id: p.id,
      raceName: r.track || 'Unknown Track',
      protestingDriver: data.drivers.find(d => d.id === p.protestingDriverId)?.name || 'Unknown',
      accusedDriver: data.drivers.find(d => d.id === p.accusedDriverId)?.name || 'Unknown',
      description: p.incident.description,
      submittedAt: p.filedAt,
      status: p.status as 'pending' | 'under_review' | 'resolved' | 'rejected',
    })));
  }, [data.races, data.drivers]);

  const allResolvedProtests = useMemo(() => {
    return data.races.flatMap(r => r.resolvedProtests.map(p => new ProtestViewModel({
      id: p.id,
      protestingDriverId: p.protestingDriverId,
      accusedDriverId: p.accusedDriverId,
      description: p.incident.description,
      submittedAt: p.filedAt,
      status: p.status,
      raceId: r.id,
      incident: p.incident,
      proofVideoUrl: p.proofVideoUrl,
      decisionNotes: p.decisionNotes,
    } as never)));
  }, [data.races]);

  const racesMap = useMemo(() => {
    const map: Record<string, RaceViewModel> = {};
    data.races.forEach(r => {
      map[r.id] = new RaceViewModel({
        id: r.id,
        name: '',
        date: r.scheduledAt,
        track: r.track,
      } as never);
    });
    return map;
  }, [data.races]);

  const driverMap = useMemo(() => {
    const map: Record<string, DriverViewModel> = {};
    data.drivers.forEach(d => {
      map[d.id] = new DriverViewModel({
        id: d.id,
        name: d.name,
        iracingId: '',
        country: '',
        joinedAt: '',
        avatarUrl: null,
      });
    });
    return map;
  }, [data.drivers]);

  const handleAcceptProtest = async (
    protestId: string,
    penaltyType: string,
    penaltyValue: number,
    stewardNotes: string
  ) => {
    // Find the protest to get details for penalty
    let foundProtest: { raceId: string; accusedDriverId: string; incident: { description: string } } | undefined;
    data.races.forEach((raceData) => {
      const p = raceData.pendingProtests.find((pr) => pr.id === protestId) ||
                raceData.resolvedProtests.find((pr) => pr.id === protestId);
      if (p) foundProtest = { 
        raceId: raceData.id, 
        accusedDriverId: p.accusedDriverId,
        incident: { description: p.incident.description }
      };
    });

    if (foundProtest) {
      acceptProtestMutation.mutate({
        protestId,
        penaltyType,
        penaltyValue,
        stewardNotes,
        raceId: foundProtest.raceId,
        accusedDriverId: foundProtest.accusedDriverId,
        reason: foundProtest.incident.description,
      });
    }
  };

  const handleRejectProtest = async (protestId: string, stewardNotes: string) => {
    rejectProtestMutation.mutate({
      protestId,
      stewardNotes,
    });
  };

  const handleReviewProtest = (id: string) => {
    // Find the protest in the data
    let foundProtest: ProtestViewModel | null = null;
    data.races.forEach(r => {
      const p = r.pendingProtests.find(p => p.id === id);
      if (p) {
        foundProtest = new ProtestViewModel({
          id: p.id,
          protestingDriverId: p.protestingDriverId,
          accusedDriverId: p.accusedDriverId,
          description: p.incident.description,
          submittedAt: p.filedAt,
          status: p.status,
          raceId: r.id,
          incident: p.incident,
          proofVideoUrl: p.proofVideoUrl,
          decisionNotes: p.decisionNotes,
        } as never);
      }
    });
    if (foundProtest) setSelectedProtest(foundProtest);
  };

  return (
    <Stack gap={6}>
      <StewardingStats
        totalPending={data.totalPending}
        totalResolved={data.totalResolved}
        totalPenalties={data.totalPenalties}
      />

      {/* Tab navigation */}
      <Box borderBottom borderColor="border-charcoal-outline">
        <Stack direction="row" gap={4}>
          <Box 
            borderBottom={activeTab === 'pending'} 
            borderColor={activeTab === 'pending' ? 'border-primary-blue' : undefined}
          >
            <Button
              variant="ghost"
              onClick={() => setActiveTab('pending')}
              rounded="none"
            >
              <Stack direction="row" align="center" gap={2}>
                <Text weight="medium" color={activeTab === 'pending' ? 'text-primary-blue' : undefined}>Pending Protests</Text>
                {data.totalPending > 0 && (
                  <Box px={2} py={0.5} fontSize="0.75rem" bg="bg-warning-amber/20" color="text-warning-amber" rounded="full">
                    {data.totalPending}
                  </Box>
                )}
              </Stack>
            </Button>
          </Box>
          <Box 
            borderBottom={activeTab === 'history'} 
            borderColor={activeTab === 'history' ? 'border-primary-blue' : undefined}
          >
            <Button
              variant="ghost"
              onClick={() => setActiveTab('history')}
              rounded="none"
            >
              <Text weight="medium" color={activeTab === 'history' ? 'text-primary-blue' : undefined}>History</Text>
            </Button>
          </Box>
        </Stack>
      </Box>

      {/* Content */}
      {activeTab === 'pending' ? (
        <StewardingQueuePanel 
          protests={allPendingProtests}
          onReview={handleReviewProtest}
        />
      ) : (
        <Card>
          <Box p={6}>
            <PenaltyHistoryList 
              protests={allResolvedProtests}
              races={racesMap}
              drivers={driverMap}
            />
          </Box>
        </Card>
      )}

      {activeTab === 'history' && (
        <PenaltyFAB onClick={() => setShowQuickPenaltyModal(true)} />
      )}

      {selectedProtest && (
        <ReviewProtestModal
          protest={selectedProtest}
          onClose={() => setSelectedProtest(null)}
          onAccept={handleAcceptProtest}
          onReject={handleRejectProtest}
        />
      )}

      {showQuickPenaltyModal && (
        <QuickPenaltyModal
          drivers={data.drivers.map(d => new DriverViewModel({
            id: d.id,
            name: d.name,
            iracingId: '',
            country: '',
            joinedAt: '',
            avatarUrl: null,
          }))}
          onClose={() => setShowQuickPenaltyModal(false)}
          adminId={currentDriverId || ''}
          races={data.races.map(r => ({ id: r.id, track: r.track, scheduledAt: new Date(r.scheduledAt) }))}
        />
      )}
    </Stack>
  );
}