import { Paper, SimpleGrid, Text, UnstyledButton } from '@mantine/core';
import type { CandidateQuestion } from '../types/exam-attempt';

export function ExamQuestionNav({
  questions,
  currentIndex,
  answeredIds,
  disabled,
  onJump,
}: {
  questions: CandidateQuestion[];
  currentIndex: number;
  answeredIds: Set<string>;
  disabled: boolean;
  onJump: (index: number) => void;
}) {
  return (
    <Paper withBorder radius="md" p="sm">
      <Text fz="xs" fw={600} c="dimmed" mb="xs" tt="uppercase">
        Questions
      </Text>
      <SimpleGrid cols={5} spacing={6}>
        {questions.map((q, index) => {
          const answered = answeredIds.has(q.id);
          const current = index === currentIndex;
          return (
            <UnstyledButton
              key={q.id}
              disabled={disabled}
              onClick={() => onJump(index)}
              style={{
                height: 34,
                borderRadius: 6,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontWeight: 600,
                fontSize: 13,
                border: current ? '2px solid var(--mantine-color-blue-6)' : '1px solid var(--mantine-color-gray-4)',
                background: answered
                  ? 'var(--mantine-color-teal-1)'
                  : 'var(--mantine-color-body)',
                color: answered ? 'var(--mantine-color-teal-8)' : undefined,
                opacity: disabled ? 0.5 : 1,
              }}
            >
              {index + 1}
            </UnstyledButton>
          );
        })}
      </SimpleGrid>
      <Text fz="xs" c="dimmed" mt="sm">
        {answeredIds.size} of {questions.length} answered
      </Text>
    </Paper>
  );
}