'use client';

import { useState } from 'react';
import { useParams, useRouter } from 'next/navigation';
import { RaceDetailTemplate } from '@/templates/RaceDetailTemplate';
import { useRegisterForRace } from '@/hooks/race/useRegisterForRace';
import { useWithdrawFromRace } from '@/hooks/race/useWithdrawFromRace';
import { useCancelRace } from '@/hooks/race/useCancelRace';
import { useCompleteRace } from '@/hooks/race/useCompleteRace';
import { useReopenRace } from '@/hooks/race/useReopenRace';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';

// Shared state components
import { StateContainer } from '@/components/shared/state/StateContainer';
import { useRaceDetail } from '@/hooks/race/useRaceDetail';
import { Flag } from 'lucide-react';

export function RaceDetailInteractive() {
  const router = useRouter();
  const params = useParams();
  const raceId = params.id as string;
  const currentDriverId = useEffectiveDriverId();

  // Fetch data using DI + React-Query
  const { data: viewModel, isLoading, error, retry } = useRaceDetail(raceId, currentDriverId);

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

  // UI State
  const [showProtestModal, setShowProtestModal] = useState(false);
  const [showEndRaceModal, setShowEndRaceModal] = useState(false);

  // Mutations
  const registerMutation = useRegisterForRace();
  const withdrawMutation = useWithdrawFromRace();
  const cancelMutation = useCancelRace();
  const completeMutation = useCompleteRace();
  const reopenMutation = useReopenRace();

  // Determine if user is owner/admin
  const isOwnerOrAdmin = membership
    ? LeagueMembershipUtility.isOwnerOrAdmin(viewModel?.league?.id || '', currentDriverId)
    : false;

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

  const handleRegister = async () => {
    const race = viewModel?.race;
    const league = viewModel?.league;
    if (!race || !league) return;

    const confirmed = window.confirm(
      `Register for ${race.track}?\n\nYou'll be added to the entry list for this race.`,
    );

    if (!confirmed) return;

    try {
      await registerMutation.mutateAsync({ raceId: race.id, leagueId: league.id, driverId: currentDriverId });
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to register for race');
    }
  };

  const handleWithdraw = async () => {
    const race = viewModel?.race;
    const league = viewModel?.league;
    if (!race || !league) return;

    const confirmed = window.confirm(
      'Withdraw from this race?\n\nYou can register again later if you change your mind.',
    );

    if (!confirmed) return;

    try {
      await withdrawMutation.mutateAsync({ raceId: race.id, driverId: currentDriverId });
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
    }
  };

  const handleCancel = async () => {
    const race = viewModel?.race;
    if (!race || race.status !== 'scheduled') return;

    const confirmed = window.confirm(
      'Are you sure you want to cancel this race? This action cannot be undone.',
    );

    if (!confirmed) return;

    try {
      await cancelMutation.mutateAsync(race.id);
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to cancel race');
    }
  };

  const handleReopen = async () => {
    const race = viewModel?.race;
    if (!race || !viewModel?.canReopenRace) return;

    const confirmed = window.confirm(
      'Re-open this race? This will allow re-registration and re-running. Results will be archived.',
    );

    if (!confirmed) return;

    try {
      await reopenMutation.mutateAsync(race.id);
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to re-open race');
    }
  };

  const handleEndRace = async () => {
    const race = viewModel?.race;
    if (!race) return;

    setShowEndRaceModal(true);
  };

  const handleFileProtest = () => {
    setShowProtestModal(true);
  };

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

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

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

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

  // Transform data for template - handle null values
  const templateViewModel = viewModel && viewModel.race ? {
    race: {
      id: viewModel.race.id,
      track: viewModel.race.track,
      car: viewModel.race.car,
      scheduledAt: viewModel.race.scheduledAt,
      status: viewModel.race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
      sessionType: viewModel.race.sessionType,
    },
    league: viewModel.league ? {
      id: viewModel.league.id,
      name: viewModel.league.name,
      description: viewModel.league.description || undefined,
      settings: viewModel.league.settings as { maxDrivers: number; qualifyingFormat: string },
    } : undefined,
    entryList: viewModel.entryList.map(entry => ({
      id: entry.id,
      name: entry.name,
      avatarUrl: entry.avatarUrl,
      country: entry.country,
      rating: entry.rating,
      isCurrentUser: entry.isCurrentUser,
    })),
    registration: {
      isUserRegistered: viewModel.registration.isUserRegistered,
      canRegister: viewModel.registration.canRegister,
    },
    userResult: viewModel.userResult ? {
      position: viewModel.userResult.position,
      startPosition: viewModel.userResult.startPosition,
      positionChange: viewModel.userResult.positionChange,
      incidents: viewModel.userResult.incidents,
      isClean: viewModel.userResult.isClean,
      isPodium: viewModel.userResult.isPodium,
      ratingChange: viewModel.userResult.ratingChange,
    } : undefined,
    canReopenRace: viewModel.canReopenRace,
  } : undefined;

  return (
    <StateContainer
      data={viewModel}
      isLoading={isLoading}
      error={error}
      retry={retry}
      config={{
        loading: { variant: 'skeleton', message: 'Loading race details...' },
        error: { variant: 'full-screen' },
        empty: {
          icon: Flag,
          title: 'Race not found',
          description: 'The race may have been cancelled or deleted',
          action: { label: 'Back to Races', onClick: handleBack }
        }
      }}
    >
      {(raceData) => (
        <RaceDetailTemplate
          viewModel={templateViewModel}
          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}
          currentDriverId={currentDriverId}
          isOwnerOrAdmin={isOwnerOrAdmin}
          showProtestModal={showProtestModal}
          setShowProtestModal={setShowProtestModal}
          showEndRaceModal={showEndRaceModal}
          setShowEndRaceModal={setShowEndRaceModal}
          mutationLoading={{
            register: registerMutation.isPending,
            withdraw: withdrawMutation.isPending,
            cancel: cancelMutation.isPending,
            reopen: reopenMutation.isPending,
            complete: completeMutation.isPending,
          }}
        />
      )}
    </StateContainer>
  );
 }