import { Alert, Badge, Button, Card, Group, Stack, Text, Title } from '@mantine/core';
import { IconAlertCircle, IconClock, IconInfoCircle, IconPlayerPlay } from '@tabler/icons-react';
import type { Bilingual } from '@ema-platform/api';
import type { EstimatedTime, RegistrationWithExam } from '../types/exam-attempt';

function formatDuration(time: EstimatedTime | null | undefined): string {
  if (!time) return 'Not configured';
  const parts = [
    time.days ? `${time.days}d` : null,
    time.hours ? `${time.hours}h` : null,
    time.minutes ? `${time.minutes}m` : null,
  ].filter(Boolean);
  return parts.length ? parts.join(' ') : '0m';
}

export function ExamInstructions({
  registration,
  localized,
  showDate,
  starting,
  onStart,
}: {
  registration: RegistrationWithExam;
  localized: (value: Bilingual | undefined) => string;
  showDate: (value: string | null | undefined) => string;
  starting: boolean;
  onStart: () => void;
}) {
  const exam = registration.exam;
  const canStart = exam?.status === 'ACTIVE';

  return (
    <Stack maw={720} mx="auto" gap="md">
      <Title order={2}>{localized(exam?.title) || 'Examination'}</Title>
      <Text c="dimmed">{localized(exam?.certification?.name)}</Text>

      <Card withBorder radius="md" p="lg">
        <Stack gap="sm">
          <Group justify="space-between">
            <Text fz="sm" c="dimmed">Admission number</Text>
            <Text fz="sm" fw={600} ff="monospace">{registration.admissionNumber}</Text>
          </Group>
          <Group justify="space-between">
            <Text fz="sm" c="dimmed">Session date</Text>
            <Text fz="sm">{showDate(exam?.date)}{exam?.venue ? ` · ${exam.venue}` : ''}</Text>
          </Group>
          <Group justify="space-between">
            <Text fz="sm" c="dimmed">Duration</Text>
            <Badge variant="light" leftSection={<IconClock size={12} />}>
              {formatDuration(exam?.givenTime)}
            </Badge>
          </Group>
          <Group justify="space-between">
            <Text fz="sm" c="dimmed">Attempt</Text>
            <Badge variant="light" color={registration.kind === 'RETAKE' ? 'orange' : 'blue'}>
              {registration.kind === 'RETAKE'
                ? `Retake · sitting ${registration.attemptNumber}`
                : 'First sitting'}
            </Badge>
          </Group>
        </Stack>
      </Card>

      {exam?.direction && localized(exam.direction) && (
        <Alert icon={<IconInfoCircle size={16} />} color="blue" variant="light" title="Instructions">
          {localized(exam.direction)}
        </Alert>
      )}

      <Alert icon={<IconAlertCircle size={16} />} color="yellow" variant="light">
        Once started, the timer cannot be paused. Answers are saved automatically as you go, but
        the exam ends the moment the deadline passes, whether or not you have submitted.
      </Alert>

      {!canStart && (
        <Alert color="gray" variant="light">
          This session is not currently open for candidates to begin.
        </Alert>
      )}

      <Group justify="flex-end">
        <Button
          size="md"
          leftSection={<IconPlayerPlay size={16} />}
          loading={starting}
          disabled={!canStart}
          onClick={onStart}
        >
          Start exam
        </Button>
      </Group>
    </Stack>
  );
}
