'use client';

import { EmptyState } from '@/ui/EmptyState';
import { LoadingWrapper } from '@/ui/LoadingWrapper';
import { Button } from '@/ui/Button';
import { Card } from '@/ui/Card';
import { Pagination } from '@/ui/Pagination';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ControlBar } from '@/ui/ControlBar';
import { Trophy } from 'lucide-react';
import React, { 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.
      } 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 <LoadingWrapper variant="spinner" message="Loading race history..." />;
  }

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

  return (
    <Stack gap={4}>
      <ControlBar>
        <Group 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>
        </Group>
      </ControlBar>

      <Card>
        <Box minHeight="10rem" display="flex" alignItems="center" justifyContent="center">
          <Text variant="low">No results found for the selected filter.</Text>
        </Box>

        <Pagination
          currentPage={page}
          totalPages={totalPages}
          onPageChange={setPage}
        />
      </Card>
    </Stack>
  );
}