import { Button, Group, Modal, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { AcadeniceApiKey } from "../types/api-key.types";
import { useRevokeAcadeniceApiKeyMutation } from "../queries/api-key.queries";

interface RevokeApiKeyModalProps {
  opened: boolean;
  onClose: () => void;
  apiKey: AcadeniceApiKey | null;
}

export function AcadeniceRevokeApiKeyModal({
  opened,
  onClose,
  apiKey,
}: RevokeApiKeyModalProps) {
  const { t } = useTranslation();
  const revokeMutation = useRevokeAcadeniceApiKeyMutation();

  if (!apiKey) return null;

  const handleRevoke = () => {
    revokeMutation.mutate(apiKey.id, { onSuccess: onClose });
  };

  return (
    <Modal opened={opened} onClose={onClose} title={t("Revoke API key")} size="sm">
      <Text size="sm" mb="md">
        {t(
          'Are you sure you want to revoke "{{label}}"? This action cannot be undone.',
          { label: apiKey.label },
        )}
      </Text>

      <Group justify="flex-end">
        <Button variant="default" onClick={onClose}>
          {t("Cancel")}
        </Button>
        <Button
          color="red"
          loading={revokeMutation.isPending}
          onClick={handleRevoke}
          aria-label={t("Confirm revoke API key")}
        >
          {t("Revoke")}
        </Button>
      </Group>
    </Modal>
  );
}