Stirling-PDF/frontend/src/components/shared/AdminAnalyticsChoiceModal.tsx

import { Modal, Stack, Button, Text, Title, Anchor } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import { Z_ANALYTICS_MODAL } from '../../styles/zIndex';
import apiClient from '../../services/apiClient';

interface AdminAnalyticsChoiceModalProps {
  opened: boolean;
  onClose?: () => void;
}

export default function AdminAnalyticsChoiceModal({ opened }: AdminAnalyticsChoiceModalProps) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleChoice = async (enableAnalytics: boolean) => {
    setLoading(true);
    setError(null);

    try {
     const formData = new FormData();
      formData.append('enabled', enableAnalytics.toString());

      await apiClient.post('/api/v1/settings/update-enable-analytics', formData);


      // Reload the page to apply new settings
      window.location.reload();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unknown error occurred');
      setLoading(false);
    }
  };

  const handleEnable = () => {
    handleChoice(true);
  };

  const handleDisable = () => {
    handleChoice(false);
  };

  return (
    <Modal
      opened={opened}
      onClose={() => {}} // Prevent closing
      closeOnClickOutside={false}
      closeOnEscape={false}
      withCloseButton={false}
      size="lg"
      centered
      zIndex={Z_ANALYTICS_MODAL}
    >
      <Stack gap="md">
        <Title order={2}>{t('analytics.title', 'Do you want make Stirling PDF better?')}</Title>

        <Text size="sm" c="dimmed">
          {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product. We do not track any personal information or file contents.')}
        </Text>

        <Text size="sm" c="dimmed">
          {t('analytics.paragraph2', 'Please consider enabling analytics to help Stirling-PDF grow and to allow us to understand our users better.')}{' '}
          <Anchor
            href="https://docs.stirlingpdf.com/analytics-telemetry"
            target="_blank"
            rel="noopener noreferrer"
            size="sm"
          >
            {t('analytics.learnMore', 'Learn more')}
          </Anchor>
        </Text>

        {error && (
          <Text c="red" size="sm">
            {error}
          </Text>
        )}

        <Stack gap="sm">
          <Button
            onClick={handleEnable}
            loading={loading}
            fullWidth
            size="md"
          >
            {t('analytics.enable', 'Enable analytics')}
          </Button>

          <Button
            onClick={handleDisable}
            loading={loading}
            fullWidth
            size="md"
            variant="subtle"
            c="gray"
          >
            {t('analytics.disable', 'Disable analytics')}
          </Button>
        </Stack>

        <Text size="xs" c="dimmed" ta="center">
          {t('analytics.settings', 'You can change the settings for analytics in the config/settings.yml file')}
        </Text>
      </Stack>
    </Modal>
  );
}