import { Button, Card, Stack, Text, ThemeIcon, Title } from '@mantine/core';
import { IconCircleCheck, IconClockPause } from '@tabler/icons-react';
import { useNavigate } from 'react-router-dom';
import type { AttemptStatus } from '../types/exam-attempt';

/**
 * No score, no pass/fail, nothing evaluation-shaped — grading hasn't run.
 * This only confirms what actually happened: the candidate submitted, or
 * the deadline closed the attempt out first.
 */
export function ExamCompletion({
  status,
  submittedAt,
}: {
  status: AttemptStatus;
  submittedAt: string | null;
}) {
  const navigate = useNavigate();
  const expired = status === 'EXPIRED';

  return (
    <Stack maw={520} mx="auto" align="center" py="xl">
      <Card withBorder radius="lg" p="xl" w="100%">
        <Stack align="center" gap="md">
          <ThemeIcon size={64} radius="xl" variant="light" color={expired ? 'orange' : 'teal'}>
            {expired ? <IconClockPause size={32} /> : <IconCircleCheck size={32} />}
          </ThemeIcon>
          <Title order={3} ta="center">
            {expired ? 'Time expired' : 'Exam submitted'}
          </Title>
          <Text ta="center" c="dimmed">
            {expired
              ? 'The scheduled time ran out. Your saved answers were recorded as your final submission.'
              : 'Your answers have been recorded.'}
            {' '}Your result will appear on the Examinations page once marking, moderation and
            approval are complete — it is not available yet.
          </Text>
          {submittedAt && (
            <Text fz="xs" c="dimmed">
              {expired ? 'Closed' : 'Submitted'} at {new Date(submittedAt).toLocaleString()}
            </Text>
          )}
          <Button variant="light" onClick={() => navigate('/exams')}>
            Back to Examinations
          </Button>
        </Stack>
      </Card>
    </Stack>
  );
}
