import React, { useEffect, useState } from 'react';
import {
    Card,
    Switch,
    Button,
    Group,
    Text,
    Stack,
    Badge,
    Loader,
    Center,
    Modal,
    Table,
    Anchor,
    Divider,
    Alert,
    ScrollArea,
} from '@mantine/core';
import {
    IconShieldLock,
    IconRefresh,
    IconTrash,
    IconAlertCircle,
    IconChevronDown,
    IconChevronUp,
} from '@tabler/icons-react';
import { showNotification } from '@mantine/notifications';
import { __ } from '@wordpress/i18n';
import {
    getAnalyticsConsent,
    updateAnalyticsConsent,
    getAnalyticsSentLog,
    forgetAnalyticsData,
    resetAnalyticsIdentity,
} from '../../../services/AnalyticsService';

const PrivacyAnalyticsSettings = () => {
    const [loading, setLoading]               = useState(true);
    const [consent, setConsent]               = useState(null); // 'unknown' | 'granted' | 'declined'
    const [consentTimestamp, setConsentTimestamp] = useState(null);
    const [consentSource, setConsentSource]   = useState(null);
    const [siteId, setSiteId]                 = useState(null);
    const [queueSize, setQueueSize]           = useState(0);

    const [savingConsent, setSavingConsent]   = useState(false);
    const [resettingId, setResettingId]       = useState(false);
    const [forgetting, setForgetting]         = useState(false);
    const [forgetModalOpen, setForgetModalOpen] = useState(false);

    const [logExpanded, setLogExpanded]       = useState(false);
    const [logLoading, setLogLoading]         = useState(false);
    const [log, setLog]                       = useState([]);

    const refreshConsent = async () => {
        try {
            const res = await getAnalyticsConsent();
            const d = res?.data || {};
            setConsent(d.consent || 'unknown');
            setConsentTimestamp(d.consent_timestamp || null);
            setConsentSource(d.consent_source || null);
            setSiteId(d.site_id || null);
            setQueueSize(d.queue_size || 0);
        } catch (e) {
            // BaseService already shows notification on error.
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        refreshConsent();
    }, []);

    const handleToggle = async (checked) => {
        const newState = checked ? 'granted' : 'declined';
        setSavingConsent(true);
        try {
            await updateAnalyticsConsent({ state: newState, source: 'settings' });
            await refreshConsent();
            showNotification({
                title: __('Saved', 'lazytasks-project-task-management'),
                message: checked
                    ? __('Analytics enabled. Thank you for helping us improve LazyTasks.', 'lazytasks-project-task-management')
                    : __('Analytics disabled. No further data will be collected.', 'lazytasks-project-task-management'),
                color: 'green',
            });
        } catch (e) {
            // BaseService notifies.
        } finally {
            setSavingConsent(false);
        }
    };

    const handleResetIdentity = async () => {
        setResettingId(true);
        try {
            await resetAnalyticsIdentity();
            await refreshConsent();
            showNotification({
                title: __('Identity reset', 'lazytasks-project-task-management'),
                message: __('A new anonymous identifier was generated.', 'lazytasks-project-task-management'),
                color: 'green',
            });
        } catch (e) {
            // notified
        } finally {
            setResettingId(false);
        }
    };

    const handleForget = async () => {
        setForgetting(true);
        try {
            await forgetAnalyticsData();
            await refreshConsent();
            setLog([]);
            setForgetModalOpen(false);
            showNotification({
                title: __('Data deleted', 'lazytasks-project-task-management'),
                message: __('Local analytics data has been purged.', 'lazytasks-project-task-management'),
                color: 'green',
            });
        } catch (e) {
            // notified
        } finally {
            setForgetting(false);
        }
    };

    const toggleLog = async () => {
        const next = !logExpanded;
        setLogExpanded(next);
        if (next && log.length === 0) {
            setLogLoading(true);
            try {
                const res = await getAnalyticsSentLog(50);
                setLog(res?.data?.log || []);
            } catch (e) {
                // notified
            } finally {
                setLogLoading(false);
            }
        }
    };

    if (loading) {
        return (
            <Center mt="xl"><Loader /></Center>
        );
    }

    const isGranted = consent === 'granted';

    return (
        <Stack gap="md" maw={920}>
            <Card withBorder radius="md" p="lg">
                <Group justify="space-between" align="flex-start" wrap="nowrap">
                    <Group gap="sm" align="flex-start" wrap="nowrap">
                        <IconShieldLock size={22} color="#39758D" style={{ marginTop: 2, flexShrink: 0 }} />
                        <div>
                            <Text fw={600} size="md">{__('Help improve LazyTasks (optional)', 'lazytasks-project-task-management')}</Text>
                            <Text size="sm" c="dimmed" mt={4}>
                                {__('Send anonymous usage analytics so we can understand which features are most useful and where to invest engineering time. You can change this any time.', 'lazytasks-project-task-management')}
                            </Text>
                        </div>
                    </Group>
                    <Switch
                        size="lg"
                        color="orange"
                        checked={isGranted}
                        disabled={savingConsent}
                        onChange={(e) => handleToggle(e.currentTarget.checked)}
                    />
                </Group>

                <Divider my="md" />

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

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

            <Card withBorder radius="md" p="lg">
                <Text fw={600} size="md" mb="xs">{__('Current state', 'lazytasks-project-task-management')}</Text>
                <Table withRowBorders={false} verticalSpacing="xs">
                    <Table.Tbody>
                        <Table.Tr>
                            <Table.Td><Text size="sm" c="dimmed">{__('Consent', 'lazytasks-project-task-management')}</Text></Table.Td>
                            <Table.Td>
                                <Badge color={isGranted ? 'green' : consent === 'declined' ? 'gray' : 'yellow'}>
                                    {consent || 'unknown'}
                                </Badge>
                            </Table.Td>
                        </Table.Tr>
                        {consentTimestamp && (
                            <Table.Tr>
                                <Table.Td><Text size="sm" c="dimmed">{__('Last decided', 'lazytasks-project-task-management')}</Text></Table.Td>
                                <Table.Td><Text size="sm">{consentTimestamp} UTC ({consentSource || '—'})</Text></Table.Td>
                            </Table.Tr>
                        )}
                        {siteId && (
                            <Table.Tr>
                                <Table.Td><Text size="sm" c="dimmed">{__('Anonymous site ID', 'lazytasks-project-task-management')}</Text></Table.Td>
                                <Table.Td><Text size="sm" ff="monospace">{siteId}</Text></Table.Td>
                            </Table.Tr>
                        )}
                        <Table.Tr>
                            <Table.Td><Text size="sm" c="dimmed">{__('Pending events to send', 'lazytasks-project-task-management')}</Text></Table.Td>
                            <Table.Td><Text size="sm">{queueSize}</Text></Table.Td>
                        </Table.Tr>
                    </Table.Tbody>
                </Table>
            </Card>

            <Card withBorder radius="md" p="lg">
                <Group justify="space-between" wrap="nowrap" mb="xs" style={{ cursor: 'pointer' }} onClick={toggleLog}>
                    <Text fw={600} size="md">{__('What we have sent (recent flush attempts)', 'lazytasks-project-task-management')}</Text>
                    {logExpanded ? <IconChevronUp size={18} /> : <IconChevronDown size={18} />}
                </Group>
                {logExpanded && (
                    logLoading ? (
                        <Center my="md"><Loader size="sm" /></Center>
                    ) : log.length === 0 ? (
                        <Text size="sm" c="dimmed">{__('No flush attempts recorded yet.', 'lazytasks-project-task-management')}</Text>
                    ) : (
                        <ScrollArea h={240} scrollbarSize={6}>
                            <Table withRowBorders={false} verticalSpacing={6}>
                                <Table.Thead>
                                    <Table.Tr>
                                        <Table.Th><Text size="xs" c="dimmed">{__('Time (UTC)', 'lazytasks-project-task-management')}</Text></Table.Th>
                                        <Table.Th><Text size="xs" c="dimmed">{__('Events', 'lazytasks-project-task-management')}</Text></Table.Th>
                                        <Table.Th><Text size="xs" c="dimmed">{__('Status', 'lazytasks-project-task-management')}</Text></Table.Th>
                                        <Table.Th><Text size="xs" c="dimmed">{__('Reason', 'lazytasks-project-task-management')}</Text></Table.Th>
                                    </Table.Tr>
                                </Table.Thead>
                                <Table.Tbody>
                                    {log.map((row, i) => (
                                        <Table.Tr key={i}>
                                            <Table.Td><Text size="xs" ff="monospace">{row.timestamp}</Text></Table.Td>
                                            <Table.Td><Text size="xs">{row.count}</Text></Table.Td>
                                            <Table.Td>
                                                <Badge size="xs" color={row.status === 'ok' ? 'green' : 'red'}>
                                                    {row.status}
                                                </Badge>
                                            </Table.Td>
                                            <Table.Td><Text size="xs" c="dimmed">{row.reason || '—'}</Text></Table.Td>
                                        </Table.Tr>
                                    ))}
                                </Table.Tbody>
                            </Table>
                        </ScrollArea>
                    )
                )}
            </Card>

            <Card withBorder radius="md" p="lg">
                <Text fw={600} size="md" mb="xs">{__('Your data, your control', 'lazytasks-project-task-management')}</Text>
                <Text size="sm" c="dimmed" mb="md">
                    {__('Reset replaces the anonymous identifier so future events cannot be linked to past ones. Delete purges all locally-queued events and asks our backend to remove anything we have already received.', 'lazytasks-project-task-management')}
                </Text>
                <Group>
                    <Button
                        variant="default"
                        leftSection={<IconRefresh size={16} />}
                        loading={resettingId}
                        onClick={handleResetIdentity}
                        disabled={!siteId}
                    >
                        {__('Reset my analytics identity', 'lazytasks-project-task-management')}
                    </Button>
                    <Button
                        color="red"
                        variant="light"
                        leftSection={<IconTrash size={16} />}
                        onClick={() => setForgetModalOpen(true)}
                    >
                        {__('Delete my analytics data', 'lazytasks-project-task-management')}
                    </Button>
                </Group>
            </Card>

            <Modal
                opened={forgetModalOpen}
                onClose={() => setForgetModalOpen(false)}
                title={__('Delete analytics data?', 'lazytasks-project-task-management')}
                centered
            >
                <Alert icon={<IconAlertCircle size={16} />} color="red" mb="md">
                    {__('This purges every locally-queued event and resets your anonymous identifier. Events already received by our backend will be queued for deletion. This cannot be undone.', 'lazytasks-project-task-management')}
                </Alert>
                <Group justify="flex-end">
                    <Button variant="default" onClick={() => setForgetModalOpen(false)} disabled={forgetting}>
                        {__('Cancel', 'lazytasks-project-task-management')}
                    </Button>
                    <Button color="red" loading={forgetting} onClick={handleForget}>
                        {__('Delete', 'lazytasks-project-task-management')}
                    </Button>
                </Group>
            </Modal>

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

export default PrivacyAnalyticsSettings;