import React from 'react';
import { Alert, Stack, Text, Paper, Code, Button, Group, Loader } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { PollingStatus } from '@app/components/shared/stripeCheckout/types/checkout';

interface SuccessStageProps {
  pollingStatus: PollingStatus;
  currentLicenseKey: string | null;
  licenseKey: string | null;
  onClose: () => void;
}

export const SuccessStage: React.FC<SuccessStageProps> = ({
  pollingStatus,
  currentLicenseKey,
  licenseKey,
  onClose,
}) => {
  const { t } = useTranslation();

  return (
    <Alert color="green" title={t('payment.success', 'Payment Successful!')}>
      <Stack gap="md">
        <Text size="sm">
          {t(
            'payment.successMessage',
            'Your subscription has been activated successfully.'
          )}
        </Text>

        {/* License Key Polling Status */}
        {pollingStatus === 'polling' && (
          <Group gap="xs">
            <Loader size="sm" />
            <Text size="sm" c="dimmed">
              {currentLicenseKey
                ? t('payment.syncingLicense', 'Syncing your upgraded license...')
                : t('payment.generatingLicense', 'Generating your license key...')}
            </Text>
          </Group>
        )}

        {pollingStatus === 'ready' && !currentLicenseKey && licenseKey && (
          <Paper withBorder p="md" radius="md" bg="gray.1">
            <Stack gap="sm">
              <Text size="sm" fw={600}>
                {t('payment.licenseKey', 'Your License Key')}
              </Text>
              <Code block>{licenseKey}</Code>
              <Button
                variant="light"
                size="sm"
                onClick={() => navigator.clipboard.writeText(licenseKey)}
              >
                {t('common.copy', 'Copy to Clipboard')}
              </Button>
              <Text size="xs" c="dimmed">
                {t(
                  'payment.licenseInstructions',
                  'This has been added to your installation. You will receive a copy in your email as well.'
                )}
              </Text>
            </Stack>
          </Paper>
        )}

        {pollingStatus === 'ready' && currentLicenseKey && (
          <Alert color="green" title={t('payment.upgradeComplete', 'Upgrade Complete')}>
            <Text size="sm">
              {t(
                'payment.upgradeCompleteMessage',
                'Your subscription has been upgraded successfully. Your existing license key has been updated.'
              )}
            </Text>
          </Alert>
        )}

        {pollingStatus === 'timeout' && (
          <Alert color="yellow" title={t('payment.licenseDelayed', 'License Key Processing')}>
            <Text size="sm">
              {t(
                'payment.licenseDelayedMessage',
                'Your license key is being generated. Please check your email shortly or contact support.'
              )}
            </Text>
          </Alert>
        )}

        {pollingStatus === 'ready' && (
          <Text size="xs" c="dimmed">
            {t('payment.canCloseWindow', 'You can now close this window.')}
          </Text>
        )}

        <Button onClick={onClose} mt="md">
          {t('common.close', 'Close')}
        </Button>
      </Stack>
    </Alert>
  );
};
