'use client';

import React, { useState, useCallback } from 'react';
import { RaceDetailTemplate, RaceDetailViewData } from '@/templates/RaceDetailTemplate';
import { useRouter } from 'next/navigation';

interface Props {
  data: RaceDetailViewData;
}

export default function RaceDetailPageClient({ data: viewData }: Props) {
  const router = useRouter();
  const [animatedRatingChange] = useState(0);

  const handleBack = useCallback(() => {
    router.back();
  }, [router]);

  const handleRegister = useCallback(() => {
    console.log('Register');
  }, []);

  const handleWithdraw = useCallback(() => {
    console.log('Withdraw');
  }, []);

  const handleCancel = useCallback(() => {
    console.log('Cancel');
  }, []);

  const handleReopen = useCallback(() => {
    console.log('Reopen');
  }, []);

  const handleEndRace = useCallback(() => {
    console.log('End Race');
  }, []);

  const handleFileProtest = useCallback(() => {
    console.log('File Protest');
  }, []);

  const handleResultsClick = useCallback(() => {
    router.push(`/races/${viewData.race.id}/results`);
  }, [router, viewData.race.id]);

  const handleStewardingClick = useCallback(() => {
    router.push(`/races/${viewData.race.id}/stewarding`);
  }, [router, viewData.race.id]);

  const handleLeagueClick = useCallback((leagueId: string) => {
    router.push(`/leagues/${leagueId}`);
  }, [router]);

  const handleDriverClick = useCallback((driverId: string) => {
    router.push(`/drivers/${driverId}`);
  }, [router]);

  return (
    <RaceDetailTemplate
      viewData={viewData}
      isLoading={false}
      error={null}
      onBack={handleBack}
      onRegister={handleRegister}
      onWithdraw={handleWithdraw}
      onCancel={handleCancel}
      onReopen={handleReopen}
      onEndRace={handleEndRace}
      onFileProtest={handleFileProtest}
      onResultsClick={handleResultsClick}
      onStewardingClick={handleStewardingClick}
      onLeagueClick={handleLeagueClick}
      onDriverClick={handleDriverClick}
      animatedRatingChange={animatedRatingChange}
      mutationLoading={{}}
    />
  );
}