'use client';

import { useState, useEffect } from 'react';
import { useRouter, useParams } from 'next/navigation';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import FeatureLimitationTooltip from '@/components/alpha/FeatureLimitationTooltip';
import type { Race } from '@gridpilot/racing/domain/entities/Race';
import type { League } from '@gridpilot/racing/domain/entities/League';
import type { Driver } from '@gridpilot/racing/domain/entities/Driver';
import {
  getRaceRepository,
  getLeagueRepository,
  getDriverRepository,
  getGetRaceRegistrationsQuery,
  getIsDriverRegisteredForRaceQuery,
  getRegisterForRaceUseCase,
  getWithdrawFromRaceUseCase,
} from '@/lib/di-container';
import { getMembership } from '@/lib/leagueMembership';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import CompanionStatus from '@/components/alpha/CompanionStatus';
import CompanionInstructions from '@/components/alpha/CompanionInstructions';

export default function LeagueRaceDetailPage() {
  const router = useRouter();
  const params = useParams();
  const leagueId = params.id as string;
  const raceId = params.raceId as string;

  const [race, setRace] = useState<Race | null>(null);
  const [league, setLeague] = useState<League | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [cancelling, setCancelling] = useState(false);
  const [registering, setRegistering] = useState(false);
  const [entryList, setEntryList] = useState<Driver[]>([]);
  const [isUserRegistered, setIsUserRegistered] = useState(false);
  const [canRegister, setCanRegister] = useState(false);

  const currentDriverId = useEffectiveDriverId();

  const loadRaceData = async () => {
    try {
      const raceRepo = getRaceRepository();
      const leagueRepo = getLeagueRepository();

      const raceData = await raceRepo.findById(raceId);

      if (!raceData) {
        setError('Race not found');
        setLoading(false);
        return;
      }

      setRace(raceData);

      const leagueData = await leagueRepo.findById(raceData.leagueId);
      setLeague(leagueData);

      await loadEntryList(raceData.id, raceData.leagueId);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Failed to load race');
    } finally {
      setLoading(false);
    }
  };

  const loadEntryList = async (raceIdValue: string, leagueIdValue: string) => {
    try {
      const driverRepo = getDriverRepository();
      const raceRegistrationsQuery = getGetRaceRegistrationsQuery();
      const registeredDriverIds = await raceRegistrationsQuery.execute({ raceId: raceIdValue });

      const drivers = await Promise.all(
        registeredDriverIds.map((id: string) => driverRepo.findById(id)),
      );
      setEntryList(drivers.filter((d: Driver | null): d is Driver => d !== null));

      const isRegisteredQuery = getIsDriverRegisteredForRaceQuery();
      const userIsRegistered = await isRegisteredQuery.execute({
        raceId: raceIdValue,
        driverId: currentDriverId,
      });
      setIsUserRegistered(userIsRegistered);

      const membership = getMembership(leagueIdValue, currentDriverId);
      const isUpcoming = race?.status === 'scheduled';
      setCanRegister(!!membership && membership.status === 'active' && !!isUpcoming);
    } catch (err) {
      console.error('Failed to load entry list:', err);
    }
  };

  useEffect(() => {
    loadRaceData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [raceId]);

  const handleCancelRace = async () => {
    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;

    setCancelling(true);
    try {
      const raceRepo = getRaceRepository();
      const cancelledRace = race.cancel();
      await raceRepo.update(cancelledRace);
      setRace(cancelledRace);
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to cancel race');
    } finally {
      setCancelling(false);
    }
  };

  const handleRegister = async () => {
    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;

    setRegistering(true);
    try {
      const useCase = getRegisterForRaceUseCase();
      await useCase.execute({
        raceId: race.id,
        leagueId: league.id,
        driverId: currentDriverId,
      });
      await loadEntryList(race.id, league.id);
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to register for race');
    } finally {
      setRegistering(false);
    }
  };

  const handleWithdraw = async () => {
    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;

    setRegistering(true);
    try {
      const useCase = getWithdrawFromRaceUseCase();
      await useCase.execute({
        raceId: race.id,
        driverId: currentDriverId,
      });
      await loadEntryList(race.id, league.id);
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to withdraw from race');
    } finally {
      setRegistering(false);
    }
  };

  const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    });
  };

  const formatTime = (date: Date) => {
    return new Date(date).toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short',
    });
  };

  const formatDateTime = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short',
    });
  };

  const statusColors = {
    scheduled: 'bg-primary-blue/20 text-primary-blue border-primary-blue/30',
    completed: 'bg-green-500/20 text-green-400 border-green-500/30',
    cancelled: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
  } as const;

  if (loading) {
    return (
      <div className="text-center text-gray-400">Loading race details...</div>
    );
  }

  if (error || !race) {
    return (
      <Card className="text-center py-12">
        <div className="text-warning-amber mb-4">
          {error || 'Race not found'}
        </div>
        <Button
          variant="secondary"
          onClick={() => router.push(`/leagues/${leagueId}`)}
        >
          Back to League
        </Button>
      </Card>
    );
  }

  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-6">
        <button
          onClick={() => router.push(`/leagues/${leagueId}`)}
          className="text-gray-400 hover:text-primary-blue transition-colors text-sm flex items-center gap-2"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
          Back to League
        </button>
      </div>

      <FeatureLimitationTooltip message="Companion automation available in production">
        <div className="mb-6">
          <CompanionStatus />
        </div>
      </FeatureLimitationTooltip>

      <div className="mb-8">
        <div className="flex items-start justify-between mb-4">
          <div>
            <h1 className="text-3xl font-bold text-white mb-2">{race.track}</h1>
            {league && (
              <p className="text-gray-400">{league.name}</p>
            )}
          </div>
          <span
            className={`px-3 py-1 text-sm font-medium rounded border ${
              statusColors[race.status as keyof typeof statusColors]
            }`}
          >
            {race.status.charAt(0).toUpperCase() + race.status.slice(1)}
          </span>
        </div>
      </div>

      {race.status === 'scheduled' && (
        <div className="mb-6">
          <CompanionInstructions race={race} leagueName={league?.name} />
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <Card className="lg:col-span-2">
          <h2 className="text-xl font-semibold text-white mb-6">Race Details</h2>

          <div className="space-y-6">
            <div>
              <label className="text-sm text-gray-500 block mb-1">Scheduled Date & Time</label>
              <p className="text-white text-lg font-medium">
                {formatDateTime(race.scheduledAt)}
              </p>
              <div className="flex gap-4 mt-2 text-sm">
                <span className="text-gray-400">{formatDate(race.scheduledAt)}</span>
                <span className="text-gray-400">{formatTime(race.scheduledAt)}</span>
              </div>
            </div>

            <div className="pt-4 border-t border-charcoal-outline">
              <label className="text-sm text-gray-500 block mb-1">Track</label>
              <p className="text-white">{race.track}</p>
            </div>

            <div>
              <label className="text-sm text-gray-500 block mb-1">Car</label>
              <p className="text-white">{race.car}</p>
            </div>

            <div>
              <label className="text-sm text-gray-500 block mb-1">Session Type</label>
              <p className="text-white capitalize">{race.sessionType}</p>
            </div>
          </div>
        </Card>

        <Card>
          <h2 className="text-xl font-semibold text-white mb-4">Actions</h2>

          <div className="space-y-3">
            {race.status === 'scheduled' && canRegister && !isUserRegistered && (
              <Button
                variant="primary"
                className="w-full"
                onClick={handleRegister}
                disabled={registering}
              >
                {registering ? 'Registering...' : 'Register for Race'}
              </Button>
            )}

            {race.status === 'scheduled' && isUserRegistered && (
              <div className="space-y-2">
                <div className="px-3 py-2 bg-green-500/10 border border-green-500/30 rounded text-green-400 text-sm text-center">
                  ✓ Registered
                </div>
                <Button
                  variant="secondary"
                  className="w-full"
                  onClick={handleWithdraw}
                  disabled={registering}
                >
                  {registering ? 'Withdrawing...' : 'Withdraw'}
                </Button>
              </div>
            )}

            {race.status === 'completed' && (
              <Button
                variant="primary"
                className="w-full"
                onClick={() => router.push(`/races/${race.id}/results`)}
              >
                View Results
              </Button>
            )}

            {race.status === 'scheduled' && (
              <Button
                variant="secondary"
                className="w-full"
                onClick={handleCancelRace}
                disabled={cancelling}
              >
                {cancelling ? 'Cancelling...' : 'Cancel Race'}
              </Button>
            )}

            <Button
              variant="secondary"
              className="w-full"
              onClick={() => router.push(`/leagues/${leagueId}`)}
            >
              Back to League
            </Button>
          </div>
        </Card>
      </div>

      {race.status === 'scheduled' && (
        <Card className="mt-6">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-semibold text-white">Entry List</h2>
            <span className="text-sm text-gray-400">
              {entryList.length} {entryList.length === 1 ? 'driver' : 'drivers'} registered
            </span>
          </div>

          {entryList.length === 0 ? (
            <div className="text-center py-8 text-gray-400">
              <p className="mb-2">No drivers registered yet</p>
              <p className="text-sm text-gray-500">Be the first to register!</p>
            </div>
          ) : (
            <div className="space-y-2">
              {entryList.map((driver, index) => (
                <div
                  key={driver.id}
                  className="flex items-center gap-4 p-3 bg-iron-gray/50 rounded-lg border border-charcoal-outline hover:border-primary-blue/50 transition-colors cursor-pointer"
                  onClick={() =>
                    router.push(
                      `/drivers/${driver.id}?from=league&leagueId=${leagueId}`,
                    )
                  }
                >
                  <div className="w-8 text-center text-gray-400 font-mono text-sm">
                    #{index + 1}
                  </div>
                  <div className="w-10 h-10 bg-charcoal-outline rounded-full flex items-center justify-center flex-shrink-0">
                    <span className="text-lg font-bold text-gray-500">
                      {driver.name.charAt(0)}
                    </span>
                  </div>
                  <div className="flex-1">
                    <p className="text-white font-medium">{driver.name}</p>
                    <p className="text-sm text-gray-400">{driver.country}</p>
                  </div>
                  {driver.id === currentDriverId && (
                    <span className="px-2 py-1 text-xs font-medium bg-primary-blue/20 text-primary-blue rounded">
                      You
                    </span>
                  )}
                </div>
              ))}
            </div>
          )}
        </Card>
      )}
    </div>
  );
}