gridpilot.gg/apps/website/components/drivers/ProfileRaceHistory.tsx

'use client';

import { useState, useEffect } from 'react';
import Card from '../ui/Card';
import Button from '../ui/Button';
import RaceResultCard from '../races/RaceResultCard';
import { useServices } from '@/lib/services/ServiceProvider';

interface RaceHistoryProps {
  driverId: string;
}

export default function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
  const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
  const [page, setPage] = useState(1);
  const [races, setRaces] = useState<Race[]>([]);
  const [results, setResults] = useState<Result[]>([]);
  const [leagues, setLeagues] = useState<Map<string, League>>(new Map());
  const [loading, setLoading] = useState(true);
  const resultsPerPage = 10;

  useEffect(() => {
    async function loadRaceHistory() {
      try {
        const resultRepo = getResultRepository();
        const raceRepo = getRaceRepository();
        const leagueRepo = getLeagueRepository();

        const driverResults = await resultRepo.findByDriverId(driverId);
        const allRaces = await raceRepo.findAll();
        const allLeagues = await leagueRepo.findAll();

        // Filter races to only those where driver has results
        const raceIds = new Set(driverResults.map(r => r.raceId));
        const driverRaces = allRaces
          .filter(race => raceIds.has(race.id) && race.status === 'completed')
          .sort((a, b) => b.scheduledAt.getTime() - a.scheduledAt.getTime());

        const leagueMap = new Map<string, League>();
        allLeagues.forEach(league => leagueMap.set(league.id, league));

        setRaces(driverRaces);
        setResults(driverResults);
        setLeagues(leagueMap);
      } catch (err) {
        console.error('Failed to load race history:', err);
      } finally {
        setLoading(false);
      }
    }

    loadRaceHistory();
  }, [driverId]);

  const raceHistory = races.map(race => {
    const result = results.find(r => r.raceId === race.id);
    const league = leagues.get(race.leagueId);
    return {
      race,
      result,
      league,
    };
  }).filter(item => item.result);

  const filteredResults = raceHistory.filter(item => {
    if (!item.result) return false;
    if (filter === 'wins') return item.result.position === 1;
    if (filter === 'podiums') return item.result.position <= 3;
    return true;
  });

  const totalPages = Math.ceil(filteredResults.length / resultsPerPage);
  const paginatedResults = filteredResults.slice(
    (page - 1) * resultsPerPage,
    page * resultsPerPage
  );

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          {[1, 2, 3].map(i => (
            <div key={i} className="h-9 w-24 bg-iron-gray rounded animate-pulse" />
          ))}
        </div>
        <Card>
          <div className="space-y-2">
            {[1, 2, 3].map(i => (
              <div key={i} className="h-20 bg-deep-graphite rounded animate-pulse" />
            ))}
          </div>
        </Card>
      </div>
    );
  }

  if (raceHistory.length === 0) {
    return (
      <Card className="text-center py-12">
        <p className="text-gray-400 mb-2">No race history yet</p>
        <p className="text-sm text-gray-500">Complete races to build your racing record</p>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Button
          variant={filter === 'all' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('all'); setPage(1); }}
          className="text-sm"
        >
          All Races
        </Button>
        <Button
          variant={filter === 'wins' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('wins'); setPage(1); }}
          className="text-sm"
        >
          Wins Only
        </Button>
        <Button
          variant={filter === 'podiums' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('podiums'); setPage(1); }}
          className="text-sm"
        >
          Podiums
        </Button>
      </div>

      <Card>
        <div className="space-y-2">
          {paginatedResults.map(({ race, result, league }) => {
            if (!result || !league) return null;

            return (
              <RaceResultCard
                key={race.id}
                race={race}
                result={result}
                league={league}
                showLeague={true}
              />
            );
          })}
        </div>

        {totalPages > 1 && (
          <div className="flex items-center justify-center gap-2 mt-4 pt-4 border-t border-charcoal-outline">
            <Button
              variant="secondary"
              onClick={() => setPage(p => Math.max(1, p - 1))}
              disabled={page === 1}
              className="text-sm"
            >
              Previous
            </Button>
            <span className="text-gray-400 text-sm">
              Page {page} of {totalPages}
            </span>
            <Button
              variant="secondary"
              onClick={() => setPage(p => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              className="text-sm"
            >
              Next
            </Button>
          </div>
        )}
      </Card>
    </div>
  );
}