import { Button, Code, Paper, Stack, Text, ThemeIcon } from '@mantine/core';
import { IconAlertTriangle, IconRefresh, type Icon } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';

interface ErrorStateProps {
  title: string;
  /** What actually failed, in the API's words where available. */
  description?: string;
  /**
   * Request/trace id. Shown verbatim and selectable so a user can quote it in
   * a support ticket — "it didn't work" is not something anyone can act on.
   */
  correlationId?: string;
  onRetry?: () => void;
  icon?: Icon;
}

/** The error state every screen shows: what broke, how to retry, what to quote. */
export function ErrorState({
  title,
  description,
  correlationId,
  onRetry,
  icon: CustomIcon = IconAlertTriangle,
}: ErrorStateProps) {
  const { t } = useTranslation();

  return (
    <Paper p="xl" withBorder role="alert">
      <Stack align="center" gap="sm" py="lg">
        <ThemeIcon size={48} radius="xl" color="red" variant="light">
          <CustomIcon size={26} />
        </ThemeIcon>
        <Text fw={600} fz="lg" ta="center">
          {title}
        </Text>
        {description && (
          <Text c="dimmed" size="sm" ta="center" maw={460}>
            {description}
          </Text>
        )}
        {correlationId && (
          <Text size="xs" c="dimmed">
            {t('error.reference', 'Reference')}: <Code>{correlationId}</Code>
          </Text>
        )}
        {onRetry && (
          <Button
            mt="xs"
            variant="light"
            leftSection={<IconRefresh size={16} />}
            onClick={onRetry}
          >
            {t('error.retry', 'Try again')}
          </Button>
        )}
      </Stack>
    </Paper>
  );
}
