'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { Race } from '@gridpilot/racing/domain/entities/Race';
import {
  getRaceRepository,
  getIsDriverRegisteredForRaceQuery,
  getRegisterForRaceUseCase,
  getWithdrawFromRaceUseCase,
} from '@/lib/di-container';
import { useEffectiveDriverId } from '@/lib/currentDriver';

interface LeagueScheduleProps {
  leagueId: string;
}

export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
  const router = useRouter();
  const [races, setRaces] = useState<Race[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('upcoming');
  const [registrationStates, setRegistrationStates] = useState<Record<string, boolean>>({});
  const [processingRace, setProcessingRace] = useState<string | null>(null);

  const currentDriverId = useEffectiveDriverId();

  const loadRaces = useCallback(async () => {
    setLoading(true);
    try {
      const raceRepo = getRaceRepository();
      const allRaces = await raceRepo.findAll();
      const leagueRaces = allRaces
        .filter((race) => race.leagueId === leagueId)
        .sort(
          (a, b) =>
            new Date(a.scheduledAt).getTime() - new Date(b.scheduledAt).getTime(),
        );
      setRaces(leagueRaces);

      const isRegisteredQuery = getIsDriverRegisteredForRaceQuery();
      const states: Record<string, boolean> = {};
      await Promise.all(
        leagueRaces.map(async (race) => {
          const registered = await isRegisteredQuery.execute({
            raceId: race.id,
            driverId: currentDriverId,
          });
          states[race.id] = registered;
        }),
      );
      setRegistrationStates(states);
    } catch (error) {
      console.error('Failed to load races:', error);
    } finally {
      setLoading(false);
    }
  }, [leagueId, currentDriverId]);

  useEffect(() => {
    loadRaces();
  }, [loadRaces]);


  const handleRegister = async (race: Race, e: React.MouseEvent) => {
    e.stopPropagation();
    
    const confirmed = window.confirm(
      `Register for ${race.track}?`
    );

    if (!confirmed) return;

    setProcessingRace(race.id);
    try {
      const useCase = getRegisterForRaceUseCase();
      await useCase.execute({
        raceId: race.id,
        leagueId,
        driverId: currentDriverId,
      });
      setRegistrationStates((prev) => ({ ...prev, [race.id]: true }));
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to register');
    } finally {
      setProcessingRace(null);
    }
  };

  const handleWithdraw = async (race: Race, e: React.MouseEvent) => {
    e.stopPropagation();

    const confirmed = window.confirm(
      'Withdraw from this race?'
    );

    if (!confirmed) return;

    setProcessingRace(race.id);
    try {
      const useCase = getWithdrawFromRaceUseCase();
      await useCase.execute({
        raceId: race.id,
        driverId: currentDriverId,
      });
      setRegistrationStates((prev) => ({ ...prev, [race.id]: false }));
    } catch (err) {
      alert(err instanceof Error ? err.message : 'Failed to withdraw');
    } finally {
      setProcessingRace(null);
    }
  };

  const now = new Date();
  const upcomingRaces = races.filter(race => race.status === 'scheduled' && new Date(race.scheduledAt) > now);
  const pastRaces = races.filter(race => race.status === 'completed' || new Date(race.scheduledAt) <= now);

  const getDisplayRaces = () => {
    switch (filter) {
      case 'upcoming':
        return upcomingRaces;
      case 'past':
        return pastRaces.reverse();
      case 'all':
        return [...upcomingRaces, ...pastRaces.reverse()];
      default:
        return races;
    }
  };

  const displayRaces = getDisplayRaces();

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

  return (
    <div>
      {/* Filter Controls */}
      <div className="mb-4 flex items-center justify-between">
        <p className="text-sm text-gray-400">
          {displayRaces.length} {displayRaces.length === 1 ? 'race' : 'races'}
        </p>
        <div className="flex gap-2">
          <button
            onClick={() => setFilter('upcoming')}
            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
              filter === 'upcoming'
                ? 'bg-primary-blue text-white'
                : 'bg-iron-gray text-gray-400 hover:text-white'
            }`}
          >
            Upcoming ({upcomingRaces.length})
          </button>
          <button
            onClick={() => setFilter('past')}
            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
              filter === 'past'
                ? 'bg-primary-blue text-white'
                : 'bg-iron-gray text-gray-400 hover:text-white'
            }`}
          >
            Past ({pastRaces.length})
          </button>
          <button
            onClick={() => setFilter('all')}
            className={`px-3 py-1 text-sm font-medium rounded transition-colors ${
              filter === 'all'
                ? 'bg-primary-blue text-white'
                : 'bg-iron-gray text-gray-400 hover:text-white'
            }`}
          >
            All ({races.length})
          </button>
        </div>
      </div>

      {/* Race List */}
      {displayRaces.length === 0 ? (
        <div className="text-center py-8 text-gray-400">
          <p className="mb-2">No {filter} races</p>
          {filter === 'upcoming' && (
            <p className="text-sm text-gray-500">Schedule your first race to get started</p>
          )}
        </div>
      ) : (
        <div className="space-y-3">
          {displayRaces.map((race) => {
            const isPast = race.status === 'completed' || new Date(race.scheduledAt) <= now;
            const isUpcoming = race.status === 'scheduled' && new Date(race.scheduledAt) > now;

            return (
              <div
                key={race.id}
                className={`p-4 rounded-lg border transition-all duration-200 cursor-pointer hover:scale-[1.02] ${
                  isPast
                    ? 'bg-iron-gray/50 border-charcoal-outline/50 opacity-75'
                    : 'bg-deep-graphite border-charcoal-outline hover:border-primary-blue'
                }`}
                onClick={() => router.push(`/leagues/${leagueId}/races/${race.id}`)}
              >
                <div className="flex items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1 flex-wrap">
                      <h3 className="text-white font-medium">{race.track}</h3>
                      {isUpcoming && !registrationStates[race.id] && (
                        <span className="px-2 py-0.5 text-xs font-medium bg-primary-blue/10 text-primary-blue rounded border border-primary-blue/30">
                          Upcoming
                        </span>
                      )}
                      {isUpcoming && registrationStates[race.id] && (
                        <span className="px-2 py-0.5 text-xs font-medium bg-green-500/10 text-green-400 rounded border border-green-500/30">
                          ✓ Registered
                        </span>
                      )}
                      {isPast && (
                        <span className="px-2 py-0.5 text-xs font-medium bg-gray-700/50 text-gray-400 rounded border border-gray-600/50">
                          Completed
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-gray-400">{race.car}</p>
                    <div className="flex items-center gap-3 mt-2">
                      <p className="text-xs text-gray-500 uppercase">{race.sessionType}</p>
                    </div>
                  </div>
                  
                  <div className="flex items-center gap-3">
                    <div className="text-right">
                    <p className="text-white font-medium">
                      {new Date(race.scheduledAt).toLocaleDateString('en-US', {
                        month: 'short',
                        day: 'numeric',
                        year: 'numeric',
                      })}
                    </p>
                    <p className="text-sm text-gray-400">
                      {new Date(race.scheduledAt).toLocaleTimeString([], {
                        hour: '2-digit',
                        minute: '2-digit',
                      })}
                    </p>
                      {isPast && race.status === 'completed' && (
                        <p className="text-xs text-primary-blue mt-1">View Results →</p>
                      )}
                    </div>

                    {/* Registration Actions */}
                    {isUpcoming && (
                      <div onClick={(e) => e.stopPropagation()}>
                        {!registrationStates[race.id] ? (
                          <button
                            onClick={(e) => handleRegister(race, e)}
                            disabled={processingRace === race.id}
                            className="px-3 py-1.5 text-sm font-medium bg-primary-blue hover:bg-primary-blue/80 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                          >
                            {processingRace === race.id ? 'Registering...' : 'Register'}
                          </button>
                        ) : (
                          <button
                            onClick={(e) => handleWithdraw(race, e)}
                            disabled={processingRace === race.id}
                            className="px-3 py-1.5 text-sm font-medium bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                          >
                            {processingRace === race.id ? 'Withdrawing...' : 'Withdraw'}
                          </button>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}