'use client';

import { EmptyState } from '@/components/shared/state/EmptyState';
import { LoadingWrapper } from '@/components/shared/state/LoadingWrapper';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Pagination } from '@/ui/Pagination';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { Trophy } from 'lucide-react';
import { useEffect, useState } from 'react';

interface RaceHistoryProps {
  driverId: string;
}

export function ProfileRaceHistory({ driverId }: RaceHistoryProps) {
  const [filter, setFilter] = useState<'all' | 'wins' | 'podiums'>('all');
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(true);
  const resultsPerPage = 10;

  useEffect(() => {
    async function loadRaceHistory() {
      try {
        // Driver race history is not exposed via API yet.
        // Keep as placeholder until an endpoint exists.
      } catch (err) {
        console.error('Failed to load race history:', err);
      } finally {
        setLoading(false);
      }
    }

    loadRaceHistory();
  }, [driverId]);

  const filteredResults: Array<unknown> = [];

  const totalPages = Math.ceil(filteredResults.length / resultsPerPage);

  if (loading) {
    return (
      <Stack gap={4}>
        <Stack display="flex" alignItems="center" gap={2}>
          {[1, 2, 3].map(i => (
            <Stack key={i} h="9" w="24" bg="bg-iron-gray" rounded="md" animate="pulse" />
          ))}
        </Stack>
        <Card>
          <LoadingWrapper variant="skeleton" skeletonCount={3} />
        </Card>
      </Stack>
    );
  }

  if (filteredResults.length === 0) {
    return (
      <EmptyState
        icon={Trophy}
        title="No race history yet"
        description="Complete races to build your racing record"
      />
    );
  }

  return (
    <Stack gap={4}>
      <Stack display="flex" alignItems="center" gap={2}>
        <Button
          variant={filter === 'all' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('all'); setPage(1); }}
          size="sm"
        >
          All Races
        </Button>
        <Button
          variant={filter === 'wins' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('wins'); setPage(1); }}
          size="sm"
        >
          Wins Only
        </Button>
        <Button
          variant={filter === 'podiums' ? 'primary' : 'secondary'}
          onClick={() => { setFilter('podiums'); setPage(1); }}
          size="sm"
        >
          Podiums
        </Button>
      </Stack>

      <Card>
        {/* No results until API provides driver results */}
        <Stack minHeight="100px" display="flex" center>
          <Text color="text-gray-500">No results found for the selected filter.</Text>
        </Stack>

        <Pagination
          currentPage={page}
          totalPages={totalPages}
          totalItems={filteredResults.length}
          itemsPerPage={resultsPerPage}
          onPageChange={setPage}
        />
      </Card>
    </Stack>
  );
}