import React from 'react';
import { Card, ScrollArea, Text, Switch, Stack, Group, Anchor, Badge } from '@mantine/core';
import { IconShieldLock } from '@tabler/icons-react';
import { __ } from '@wordpress/i18n';

/**
 * Onboarding step that asks the user to opt in to anonymous usage analytics.
 *
 * IMPORTANT for WP.org compliance:
 *  - The Switch starts unchecked (default OFF, not pre-checked).
 *  - The user can advance with the switch in either position — analytics is
 *    NOT a precondition for finishing onboarding.
 *  - The actual save fires from OnboardingForm's nextStep() when this step
 *    is active, by reading the analyticsEnabled state lifted into the parent.
 */
const AnalyticsConsentStep = ({ analyticsEnabled, setAnalyticsEnabled }) => {
    return (
        <Card mt="lg" p="md" withBorder radius="md" bg={'#f4f7f9'}>
            <ScrollArea h={350} scrollbarSize={4} scrollbars={"y"}>
                <Group gap="sm" align="flex-start" wrap="nowrap" mb="sm">
                    <IconShieldLock size={22} color="#39758D" style={{ marginTop: 2, flexShrink: 0 }} />
                    <div style={{ flex: 1 }}>
                        <Text size="lg" fw={600} c="#202020">
                            {__('Help improve LazyTasks (optional)', 'lazytasks-project-task-management')}
                        </Text>
                        <Text size="sm" c="#202020" mt={4}>
                            {__('Send anonymous usage analytics so we can understand which features are used most and where to invest engineering time. You can change this any time in Settings → Privacy & Analytics.', 'lazytasks-project-task-management')}
                        </Text>
                    </div>
                </Group>

                <Group justify="space-between" align="center" mt="md" mb="md" p="sm" style={{ background: '#fff', borderRadius: 8, border: '1px solid #C2D4DC' }}>
                    <Text size="sm" fw={500} c="#202020">
                        {__('Enable anonymous analytics', 'lazytasks-project-task-management')}
                    </Text>
                    <Group gap="xs" align="center">
                        {analyticsEnabled ? (
                            <Badge color="green" size="sm">{__('On', 'lazytasks-project-task-management')}</Badge>
                        ) : (
                            <Badge color="gray" size="sm">{__('Off (default)', 'lazytasks-project-task-management')}</Badge>
                        )}
                        <Switch
                            size="md"
                            color="orange"
                            checked={analyticsEnabled}
                            onChange={(e) => setAnalyticsEnabled(e.currentTarget.checked)}
                        />
                    </Group>
                </Group>

                <Text size="sm" c="#202020" fw={600} mb={4}>
                    {__('What we collect when this is on', 'lazytasks-project-task-management')}
                </Text>
                <Stack gap={4} mb="sm">
                    <Text size="sm" c="#202020">• {__('Plugin / WordPress / PHP version, locale, multisite flag', 'lazytasks-project-task-management')}</Text>
                    <Text size="sm" c="#202020">• {__('Counts of feature use (task created, project created, settings updated, addon enabled / disabled)', 'lazytasks-project-task-management')}</Text>
                    <Text size="sm" c="#202020">• {__('PHP fatal errors originating in this plugin (sanitized — no file paths, credentials, or API keys)', 'lazytasks-project-task-management')}</Text>
                    <Text size="sm" c="#202020">• {__('A randomly-generated anonymous site identifier so we can group events from the same install', 'lazytasks-project-task-management')}</Text>
                </Stack>

                <Text size="sm" c="#202020" fw={600} mb={4}>
                    {__('What we never collect', 'lazytasks-project-task-management')}
                </Text>
                <Stack gap={4} mb="sm">
                    <Text size="sm" c="#202020">• {__('Task content, project names, comments, attachments', 'lazytasks-project-task-management')}</Text>
                    <Text size="sm" c="#202020">• {__('User names, emails, or any user-identifiable data', 'lazytasks-project-task-management')}</Text>
                    <Text size="sm" c="#202020">• {__('Site URL, IP addresses (stripped at our receiver)', 'lazytasks-project-task-management')}</Text>
                </Stack>

                <Text size="xs" c="dimmed" mt="md">
                    <Anchor href="https://lazycoders.co/privacy" target="_blank" rel="noreferrer">
                        {__('Read the full privacy policy', 'lazytasks-project-task-management')}
                    </Anchor>
                </Text>
            </ScrollArea>
        </Card>
    );
};

export default AnalyticsConsentStep;