'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { useEffectiveDriverId } from '@/lib/currentDriver';
import { createLeagueSchedulePresenter } from '@/lib/presenters/factories';
import type { LeagueScheduleRaceItemViewModel } from '@/lib/presenters/LeagueSchedulePresenter';

interface LeagueScheduleProps {
  leagueId: string;
}

export default function LeagueSchedule({ leagueId }: LeagueScheduleProps) {
  const router = useRouter();
  const [races, setRaces] = useState<LeagueScheduleRaceItemViewModel[]>([]);
  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 loadRacesCallback = useCallback(async () => {
    setLoading(true);
    try {
      const viewModel = await loadLeagueSchedule(leagueId, currentDriverId);
      setRaces(viewModel.races);

      const states: Record<string, boolean> = {};
      for (const race of viewModel.races) {
        states[race.id] = race.isRegistered;
      }
      setRegistrationStates(states);
    } catch (error) {
      console.error('Failed to load races:', error);
    } finally {
      setLoading(false);
    }
  }, [leagueId, currentDriverId]);

  useEffect(() => {
    void loadRacesCallback();
  }, [loadRacesCallback]);

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

    const confirmed = window.confirm(`Register for ${race.track}?`);

    if (!confirmed) return;

    setProcessingRace(race.id);
    try {
      await registerForRace(race.id, leagueId, 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: LeagueScheduleRaceItemViewModel, e: React.MouseEvent) => {
    e.stopPropagation();

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

    if (!confirmed) return;

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

  const upcomingRaces = races.filter((race) => race.isUpcoming);
  const pastRaces = races.filter((race) => race.isPast);

  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.isPast;
            const isUpcoming = race.isUpcoming;

            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(`/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">
                        {race.scheduledAt.toLocaleDateString('en-US', {
                          month: 'short',
                          day: 'numeric',
                          year: 'numeric',
                        })}
                      </p>
                      <p className="text-sm text-gray-400">
                        {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>
  );
}