import { useEffect } from 'react';
import {
    ScrollArea,
    Text, Card, Group,
    Box,
    Stack,
    ThemeIcon,
    Flex,
} from '@mantine/core';
import { IconActivity } from '@tabler/icons-react';
import { useSelector, useDispatch } from 'react-redux';
import { translate } from '../../utils/i18n';
import { fetchUserActivities } from '../Settings/store/taskSlice';
import UserAvatarSingle from '../ui/UserAvatarSingle';
import ActivityLogs from '../Elements/Project/TasksElements/ActivityLogs';

const UserActivities = ({ dragHandle }) => {
    const dispatch = useDispatch();
    const { userActivities } = useSelector((state) => state.settings.task);
    const { loggedInUser, xWpNonce } = useSelector((state) => state.auth.session);

    useEffect(() => {
        if (xWpNonce && loggedInUser && loggedInUser.loggedUserId && loggedInUser.loggedUserId !== 'undefined') {
            dispatch(fetchUserActivities({ id: loggedInUser.loggedUserId }));
        }
    }, [dispatch, loggedInUser, xWpNonce]);

    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">
                            <IconActivity size={14} />
                        </ThemeIcon>
                        <Text fw={600} size="sm">{translate('Recent Activities')}</Text>
                    </Group>
                </Box>
            </Card.Section>

            <ScrollArea h={420} scrollbarSize={4}>
                {userActivities && userActivities.length > 0 ? (
                    <Stack gap={2}>
                        {userActivities.map((activity) => (
                            <Group
                                key={activity.id}
                                gap="sm"
                                align="flex-start"
                                wrap="nowrap"
                                px={8}
                                py={8}
                                className="rounded-md transition-colors hover:bg-gray-50 cursor-default"
                            >
                                <UserAvatarSingle user={activity.user} size={28} />
                                <Box style={{ flex: 1, minWidth: 0 }}>
                                    <Text fw={600} size="sm" mb={2}>{activity.user.name}</Text>
                                    <Text size="sm" c="#202020" lh={1.4}>
                                        <ActivityLogs activity={activity} />
                                    </Text>
                                    <Text size="xs" c="dimmed" mt={4}>{activity.created_at_formatted}</Text>
                                </Box>
                            </Group>
                        ))}
                    </Stack>
                ) : (
                    <Flex align="center" justify="center" mih={200}>
                        <Text c="dimmed" size="sm">{translate('No recent activities found.')}</Text>
                    </Flex>
                )}
            </ScrollArea>
        </Card>
    );
};

export default UserActivities;