import { useEffect, useState } from 'react';
import {
    Text, Card, Group,
    Box,
    Paper,
    Loader,
    Center,
    ThemeIcon,
} from '@mantine/core';
import { IconUsers } from '@tabler/icons-react';
import { translate } from "../../utils/i18n";
import { ScatterChart } from '@mantine/charts';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUserEngagement } from '../../reducers/dashboardSlice';

const UserEngagementChart = ({ dragHandle }) => {
    const dispatch = useDispatch();
    const { standardEngagementData, standardEngagementLoading } = useSelector((state) => state.dashboard);
    const [chartData, setChartData] = useState([]);

    useEffect(() => {
        dispatch(fetchUserEngagement());
    }, [dispatch]);

    useEffect(() => {
        if (standardEngagementData && standardEngagementData.length > 0) {
            const users = standardEngagementData;

            // Transform to Mantine ScatterChart format
            // Single series for all users
            const seriesData = users.map(user => ({
                engagement: user.x,
                completion: user.y,
                name: user.name,
                metrics: user.metrics
            }));

            setChartData([
                {
                    color: '#228be6', // Mantine blue
                    name: translate('Users'),
                    data: seriesData
                }
            ]);
        }
    }, [standardEngagementData]);

    function ChartTooltip({ payload }) {
        if (!payload || !payload[0]) return null;
        const point = payload[0].payload;

        return (
            <Paper px="md" py="sm" withBorder shadow="md" radius="md">
                <Text fw={500} mb={5} size="sm">
                    {point.name}
                </Text>
                <Text size="xs" c="dimmed">
                    {translate('Engagement Score')}: <Text span fw={500} c="blue">{point.engagement}</Text>
                </Text>
                <Text size="xs" c="dimmed">
                    {translate('Completion Rate')}: <Text span fw={500} c="green">{point.completion}%</Text>
                </Text>

                <Group mt={5} gap="xs">
                    <Text size="xs" c="dimmed">
                        {translate('Comments')}: {point.metrics?.comments}
                    </Text>
                    <Text size="xs" c="dimmed">
                        {translate('Projects')}: {point.metrics?.projects}
                    </Text>
                </Group>
            </Paper>
        );
    }

    return (
        <Card padding="md" withBorder radius="md" h="100%">
            <Card.Section withBorder inheritPadding py="xs" className="bg-[#E7F4E8] mb-2">
                <Box className={dragHandle ? 'draggable-header cursor-grab' : ''}>
                    <Group gap="xs" wrap="nowrap">
                        {dragHandle}
                        <ThemeIcon size="sm" radius="sm" variant="light" color="#10B981">
                            <IconUsers size={14} />
                        </ThemeIcon>
                        <Text fw={600} size="sm">{translate('User Engagement Scatter Plot')}</Text>
                    </Group>
                </Box>
            </Card.Section>
            <Box p="sm" bg="#FBFCFD" h={400}>
                {standardEngagementLoading ? (
                    <Center h="100%">
                        <Loader size="md" />
                    </Center>
                ) : (
                    <ScatterChart
                        h={380}
                        data={chartData}
                        dataKey={{ x: 'engagement', y: 'completion' }}
                        xAxisLabel={translate('Engagement Score')}
                        yAxisLabel={translate('Completion Rate (%)')}
                        gridAxis="xy"
                        tickLine="xy"
                        withXAxis
                        withYAxis
                        xAxisProps={{
                            allowDecimals: false,
                            tick: { fontSize: 12, fill: '#666' }
                        }}
                        yAxisProps={{
                            tickFormatter: (value) => `${value}%`,
                            domain: [0, 100],
                            tick: { fontSize: 12, fill: '#666' }
                        }}
                        tooltipProps={{
                            content: ({ payload }) => <ChartTooltip payload={payload} />,
                            cursor: { strokeDasharray: '3 3' }
                        }}
                    />
                )}
            </Box>
        </Card>

    );
};

export default UserEngagementChart;