import { Badge, Group } from '@mantine/core';
import { IconClock } from '@tabler/icons-react';

function format(totalSeconds: number): string {
  const s = Math.max(0, totalSeconds);
  const h = Math.floor(s / 3600);
  const m = Math.floor((s % 3600) / 60);
  const sec = s % 60;
  const pad = (n: number) => String(n).padStart(2, '0');
  return h > 0 ? `${h}:${pad(m)}:${pad(sec)}` : `${pad(m)}:${pad(sec)}`;
}

/**
 * Display only. `remainingSeconds` is a local countdown seeded once from the
 * server's own clock (`AttemptSession.remainingSeconds`/`serverTime`) and
 * ticked down client-side — the deadline it represents is enforced by the
 * backend on every save/submit regardless of whether this number is right.
 */
export function ExamTimer({ remainingSeconds }: { remainingSeconds: number }) {
  const low = remainingSeconds <= 300; // 5 minutes
  return (
    <Group gap={6}>
      <Badge
        size="lg"
        variant="light"
        color={low ? 'red' : 'blue'}
        leftSection={<IconClock size={14} />}
        ff="monospace"
      >
        {format(remainingSeconds)}
      </Badge>
    </Group>
  );
}
