import { useEffect, useState } from 'react';
import {
    Text, Card, Group,
    Box,
    Paper,
    Loader,
    Center
} from '@mantine/core';
import { __ } from "@wordpress/i18n";
import { ScatterChart } from '@mantine/charts';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSmartUserEngagement } from '../../reducers/dashboardSlice';

const ROLE_COLORS = {
    'superadmin': '#fa5252', // Red
    'admin': '#fa5252', // Red
    'director': '#fa5252', // Red
    'manager': '#228be6', // Blue
    'line-manager': '#228be6', // Blue
    'employee': '#40c057', // Green
    'follower': '#40c057', // Green
    'member': '#40c057', // Green
};

const UserEngagementChartNew = ({ dragHandle }) => {
    const dispatch = useDispatch();
    const { engagementData, engagementLoading } = useSelector((state) => state.dashboard);
    const [chartData, setChartData] = useState([]);

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

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

            const groupedByRole = users.reduce((acc, user) => {
                const role = user.role || 'Member';
                if (!acc[role]) acc[role] = [];

                acc[role].push({
                    engagement: user.x,
                    completion: user.y,
                    projects: user.metrics?.projects || 1,
                    name: user.name,
                    role: user.role,
                    role_slug: user.role_slug,
                    metrics: user.metrics,
                    raw_score: user.raw_score
                });
                return acc;
            }, {});

            const chartSeries = Object.keys(groupedByRole).map(role => {
                const sampleUser = groupedByRole[role][0];
                const color = ROLE_COLORS[sampleUser.role_slug] || '#228be6';

                return {
                    name: role,
                    color: color,
                    data: groupedByRole[role]
                };
            });

            setChartData(chartSeries);
        }
    }, [engagementData]);

    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 size="sm">
                    <Text span fw={600}>{__( 'User', 'lazytasks-project-task-management' )}:</Text> {point.name}
                </Text>
                <Text size="sm">
                    <Text span fw={600}>{__( 'Role', 'lazytasks-project-task-management' )}:</Text> {__(point.role, 'lazytasks-project-task-management')}
                </Text>
                <Text size="sm">
                    <Text span fw={600}>{__( 'Number of Projects', 'lazytasks-project-task-management' )}:</Text> {point.metrics?.projects || 0}
                </Text>
                <Text size="sm">
                    <Text span fw={600}>{__( 'Tasks Completed', 'lazytasks-project-task-management' )}:</Text> {point.metrics?.completed || 0}
                </Text>
                <Text size="sm">
                    <Text span fw={600}>{__( 'Avg. Completion Time', 'lazytasks-project-task-management' )}:</Text> {point.metrics?.avg_completion_days || 0} {__( 'days', 'lazytasks-project-task-management' )}
                </Text>
                <Text size="sm">
                    <Text span fw={600}>{__( 'Engagement Score', 'lazytasks-project-task-management' )}:</Text> {point.completion}
                </Text>
            </Paper>
        );
    }

    const CustomBubble = (props) => {
        const { cx, cy, fill, payload } = props;
        if (cx == null || cy == null) return null;

        const projects = payload.projects || 1;
        // Base radius is 6, +2 for each project, capped at 30
        const radius = Math.min(Math.max(6 + (projects * 2), 6), 30);

        return (
            <circle cx={cx} cy={cy} r={radius} fill={fill} opacity={0.7} stroke="#fff" strokeWidth={1} />
        );
    };

    return (
        <Card withBorder radius="sm" h={"100%"}>
            <Card.Section withBorder inheritPadding py="xs" className="bg-[#EBF1F4] mb-2">
                <Box className={dragHandle ? "draggable-header cursor-grab" : ""}>
                    <Group justify="space-between" align="center">
                        <Group>
                            {dragHandle}
                            <Text fw={600} size='md'>{__( 'User Engagement Scatter Plot new', 'lazytasks-project-task-management' )}</Text>
                        </Group>
                    </Group>
                </Box>
            </Card.Section>
            <Box p="sm" bg="#FBFCFD" h={400}>
                {engagementLoading ? (
                    <Center h="100%">
                        <Loader size="md" />
                    </Center>
                ) : (
                    <ScatterChart
                        h={380}
                        data={chartData}
                        dataKey={{ x: 'engagement', y: 'completion' }}
                        xAxisLabel={__( 'Completion Rate (%)', 'lazytasks-project-task-management' )}
                        yAxisLabel={__( 'Engagement Score', 'lazytasks-project-task-management' )}
                        gridAxis="xy"
                        tickLine="xy"
                        withXAxis
                        withYAxis
                        xAxisProps={{
                            allowDecimals: false,
                            tick: { fontSize: 12, fill: '#666' }
                        }}
                        yAxisProps={{
                            domain: [0, 100],
                            tick: { fontSize: 12, fill: '#666' }
                        }}
                        scatterProps={{ shape: <CustomBubble /> }}
                        tooltipProps={{
                            content: ({ payload }) => <ChartTooltip payload={payload} />,
                            cursor: { strokeDasharray: '3 3' }
                        }}
                    />
                )}
            </Box>
        </Card>

    );
};

export default UserEngagementChartNew;