import React, { useEffect, useState } from 'react';
import { Modal, Group, Button, Text, TextInput, Box, Tabs, Select, ScrollArea } from '@mantine/core';
import { IconPencil, IconSearch, IconX } from '@tabler/icons-react';
import { useDispatch, useSelector } from 'react-redux';
import { translate } from '../../../utils/i18n';
import ProjectSettingsModal from './ProjectSettingsModal';
import UserAvatarSingle from '../../ui/UserAvatarSingle';
import { fetchProjectOverview } from '../../Settings/store/taskSlice';
import { editProject } from '../../Settings/store/projectSlice';
import { showNotification } from '@mantine/notifications';
import { modals } from '@mantine/modals';

const ProjectSettingsTabsModal = ({
    opened,
    onClose,
    activeTab = 'configuration',
    workspaceName = '',
    projectName = '',
    projectId = null,
}) => {
    const dispatch = useDispatch();
    const { projectInfo, tasks } = useSelector((state) => state.settings.task);
    const { allMembers } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { loggedUserId } = useSelector((state) => state.auth.user)
    const { roles } = useSelector((state) => state.auth.role);
    const [selectedTab, setSelectedTab] = useState(activeTab);
    const [localProjectName, setLocalProjectName] = useState(projectName || '');
    const [memberSearch, setMemberSearch] = useState('');
    const [addedMembers, setAddedMembers] = useState([]);
    const [currentMemberData, setCurrentMemberData] = useState([]);
    const [memberRoles, setMemberRoles] = useState({});
    const [isUsersUpdating, setIsUsersUpdating] = useState(false);
    const [isConfigUpdating, setIsConfigUpdating] = useState(false);
    const tabContentHeight = '520px';

    useEffect(() => {
        if (opened) {
            setSelectedTab(activeTab);
            setLocalProjectName(projectName || '');
        }
    }, [opened, activeTab, projectName]);

    useEffect(() => {
        if (opened && projectId) {
            dispatch(fetchProjectOverview(projectId));
        }
    }, [opened, projectId, dispatch]);

    useEffect(() => {
        const members = projectInfo?.members || [];
        const ids = members.map((member) => member.id);
        setCurrentMemberData(members);
        setAddedMembers(ids);

        const roleMap = {};
        members.forEach((member) => {
            const roleId = member?.project_role?.id || member?.project_role?.role_id ||
                (member?.project_roles || []).find((r) => parseInt(r.project_id) === parseInt(projectId))?.role_id;
            if (roleId) {
                roleMap[member.id] = roleId.toString();
            }
        });
        setMemberRoles(roleMap);
    }, [projectInfo, projectId]);

    const filteredMembers = (allMembers || []).filter((member) => {
        const key = `${member?.name || ''} ${member?.email || ''}`.toLowerCase();
        return key.includes(memberSearch.toLowerCase());
    });

    const handleDeleteCurrentMember = (id) => {
        const isMemberAssignedToTask = tasks && tasks.allTasks && Object.values(tasks.allTasks).length > 0 &&
            Object.values(tasks.allTasks).some((task) => task.assignedTo_id === id.toString());
        const isMemberAssignedToSubTask = tasks && tasks.allTasks && Object.values(tasks.allTasks).length > 0 &&
            Object.values(tasks.allTasks).some((task) => task.children && task.children.length > 0 &&
                task.children.some((subtask) => subtask.assignedTo_id === id.toString()));

        if (isMemberAssignedToTask || isMemberAssignedToSubTask) {
            modals.open({
                withCloseButton: false,
                centered: true,
                children: (
                    <Box>
                        <Text size="sm">
                            This member is assigned to a task. Please reassign the task before removing the member.
                        </Text>

                        <div className="!grid w-full !justify-items-center">
                            <Button justify="center" onClick={() => modals.closeAll()} mt="md">
                                Ok
                            </Button>
                        </div>
                    </Box>
                ),
            });
            return;
        }

        const updatedCurrentMembers = currentMemberData.filter((member) => member?.id !== id);
        setCurrentMemberData(updatedCurrentMembers);
        setAddedMembers((prevMembers) => prevMembers.filter((memberId) => memberId !== id));
    };

    const handleButtonClick = (member) => {
        const roleId = memberRoles[member?.id];

        if (!roleId) {
            showNotification({
                title: 'Role Required',
                message: 'Please select a role for the member.',
                color: 'red',
                autoClose: 3000,
            });
            return;
        }

        const selectedRole = roles && roles.find((r) => r.id.toString() === roleId.toString());
        const roleObj = selectedRole ? { id: selectedRole.id, name: selectedRole.name } : null;
        const updatedMember = {
            ...member,
            role_id: roleId,
            lazytasks_role: roleObj ? [roleObj] : [],
            status: 'Added',
        };

        if (!addedMembers.includes(member?.id)) {
            setCurrentMemberData((prev) => [...prev, updatedMember]);
            setAddedMembers((prev) => [...prev, member?.id]);
        }
    };

    const handleProjectRoleChange = (memberId, roleId) => {
        setMemberRoles((prev) => ({
            ...prev,
            [memberId]: roleId,
        }));
    };

    const attachRolesToMembers = (members = []) => {
        return members.map((member) => {
            const mapped = { ...member };

            if (mapped.lazytasks_role && mapped.lazytasks_role.length) {
                return mapped;
            }

            const roleId = mapped.role_id ?? memberRoles[mapped.id] ?? null;

            if (roleId && roles?.length) {
                const foundRole = roles.find((role) => role.id.toString() === roleId.toString() || role.id === roleId);
                if (foundRole) {
                    mapped.lazytasks_role = [{ id: foundRole.id, name: foundRole.name }];
                }
            }

            return mapped;
        });
    };

    const handleUsersTabUpdate = () => {
        if (!projectId) {
            return;
        }

        const trimmedName = (localProjectName || '').trim();
        if (!trimmedName) {
            showNotification({
                id: 'project-users-update',
                title: translate('Validation Error'),
                message: translate('Project name is required.'),
                color: 'red',
                autoClose: 2000,
            });
            return;
        }

        const invitedMembers = projectInfo?.invitedMembers || [];
        const mergedMembers = [
            ...currentMemberData,
            ...invitedMembers.filter((invited) => !currentMemberData.some((current) => current.id === invited.id)),
        ];

        const payloadMembers = attachRolesToMembers(mergedMembers);

        setIsUsersUpdating(true);

        dispatch(editProject({
            id: projectId,
            data: {
                name: trimmedName,
                members: payloadMembers,
                updated_by: loggedInUser?.loggedUserId ?? loggedInUser,
            },
        })).then((response) => {
            setIsUsersUpdating(false);

            if (response.payload?.status === 200) {
                showNotification({
                    id: 'project-users-update',
                    title: 'User',
                    message: response.payload?.message || 'Project updated successfully.',
                    color: 'green',
                    autoClose: 2000,
                });
                dispatch(fetchProjectOverview(projectId));
                if (typeof onClose === 'function') {
                    onClose();
                }
                return;
            }

            showNotification({
                id: 'project-users-update',
                title: 'User',
                message: response.payload?.message || 'Could not update users for this project.',
                color: 'red',
                autoClose: 2500,
            });
        }).catch(() => {
            setIsUsersUpdating(false);
            showNotification({
                id: 'project-users-update',
                title: 'User',
                message: 'Could not update users for this project.',
                color: 'red',
                autoClose: 2500,
            });
        });
    };

    const handleTopUpdateClick = () => {
        if (selectedTab === 'configuration') {
            if (!projectId) {
                return;
            }

            const trimmedName = (localProjectName || '').trim();

            if (!trimmedName) {
                showNotification({
                    id: 'config-inline-update',
                    title: translate('Validation Error'),
                    message: translate('Project name is required.'),
                    color: 'red',
                    autoClose: 2000,
                });
                return;
            }

            if (trimmedName === (projectName || '').trim()) {
                showNotification({
                    id: 'config-inline-update',
                    title: translate('Success'),
                    message: translate('Data Updated Successfully'),
                    color: 'green',
                    autoClose: 1800,
                });
                if (typeof onClose === 'function') {
                    onClose();
                }
                return;
            }

            setIsConfigUpdating(true);
            dispatch(editProject({
                id: projectId,
                data: {
                    name: trimmedName,
                    updated_by: loggedInUser?.loggedUserId ?? loggedUserId,
                },
            })).then((response) => {
                setIsConfigUpdating(false);

                if (response.payload?.status === 200) {
                    showNotification({
                        id: 'config-inline-update',
                        title: translate('Success'),
                        message: response.payload?.message || translate('Data Updated Successfully'),
                        color: 'green',
                        autoClose: 1800,
                    });
                    dispatch(fetchProjectOverview(projectId));
                    if (typeof onClose === 'function') {
                        onClose();
                    }
                    return;
                }

                showNotification({
                    id: 'config-inline-update',
                    title: translate('Update Failed'),
                    message: response.payload?.message || translate('Could not update project.'),
                    color: 'red',
                    autoClose: 2500,
                });
            }).catch(() => {
                setIsConfigUpdating(false);
                showNotification({
                    id: 'config-inline-update',
                    title: translate('Update Failed'),
                    message: translate('Could not update project.'),
                    color: 'red',
                    autoClose: 2500,
                });
            });
            return;
        }

        if (selectedTab === 'users') {
            handleUsersTabUpdate();
        }
    };

    return (
        <Modal.Root opened={opened} onClose={onClose} centered size="92%" withCloseButton={false}>
            <Modal.Overlay />
            <Modal.Content radius={8}>
                <Modal.Header px={16} py={10}>
                    <Group justify="space-between" style={{ width: '100%' }} gap="xs" >
                        <Text size="sm" fw={600} fz={16} mb={8}>
                            {translate('Workspace name')}: {workspaceName}
                        </Text>
                        <Group gap="xs" justify='flex-end'>
                            <Button
                                variant="filled"
                                color="#ED7D31"
                                size="sm"
                                onClick={handleTopUpdateClick}
                                loading={(selectedTab === 'users' && isUsersUpdating) || (selectedTab === 'configuration' && isConfigUpdating)}
                                loaderProps={{ type: 'dots' }}
                            >
                                {translate('Update')}
                            </Button>
                            <Modal.CloseButton />
                        </Group>
                    </Group>
                </Modal.Header>

                <Modal.Body pt={0} pb={16}>
                    <TextInput
                        withAsterisk
                        label={translate('Project name')}
                        value={localProjectName}
                        onChange={(e) => setLocalProjectName(e.target.value)}
                        rightSection={<IconPencil size={16} stroke={1.5} />}
                        mb={12}
                    />

                    <Box bg="#E8ECEF" p={12} style={{ borderRadius : 8}}>
                        <Tabs value={selectedTab} onChange={setSelectedTab} variant="unstyled">
                            <Tabs.List grow>
                                <Tabs.Tab
                                    value="configuration"
                                    style={{
                                        backgroundColor: selectedTab === 'configuration' ? '#39758D' : '#D9E0E6',
                                        color: selectedTab === 'configuration' ? '#FFFFFF' : '#202020',
                                        borderRadius: 4,
                                        fontWeight: 500,
                                        marginRight: 8,
                                        height: 32,
                                    }}
                                >
                                    {translate('Configuration Tab')}
                                </Tabs.Tab>
                                <Tabs.Tab
                                    value="users"
                                    style={{
                                        backgroundColor: selectedTab === 'users' ? '#39758D' : '#D9E0E6',
                                        color: selectedTab === 'users' ? '#FFFFFF' : '#202020',
                                        borderRadius: 4,
                                        fontWeight: 500,
                                        height: 32,
                                    }}
                                >
                                    {translate('Users')}
                                </Tabs.Tab>
                            </Tabs.List>

                            <Tabs.Panel value="configuration" pt={14}>
                                <Box
                                    bg="#FFFFFF"
                                    p={12}
                                    style={{
                                        height: tabContentHeight,
                                        border: '1px solid #E5E9EC',
                                        borderRadius: 8,
                                        overflowX: 'hidden',
                                    }}
                                >
                                    <ScrollArea h="100%" scrollbarSize={2} scrollbars="y">
                                        {projectId && (
                                            <ProjectSettingsModal
                                                project_id={projectId}
                                                isSettings={true}
                                                embedded={true}
                                            />
                                        )}
                                    </ScrollArea>
                                </Box>
                            </Tabs.Panel>

                            <Tabs.Panel value="users" pt={14}>
                                <Box
                                    bg="#FFFFFF"
                                    p={12}
                                    style={{
                                        height: tabContentHeight,
                                        border: '1px solid #E5E9EC',
                                        borderRadius: 8,
                                        display: 'flex',
                                        flexDirection: 'column',
                                        overflowX: 'hidden',
                                    }}
                                >
                                    <Text fw={50} fz={14} mb={10}>{translate('Assign To')}</Text>

                                    <Box className="flex flex-wrap gap-2" mb={12}>
                                        {currentMemberData.map((member) => (
                                            <Box
                                                key={`chip-${member.id}`}
                                                className="flex items-center gap-1"
                                                style={{ backgroundColor: '#E8ECEF', borderRadius: 4 }}
                                                p={8}
                                            >
                                                <UserAvatarSingle user={{ name: member.name, avatar: member.avatar }} size={24} stroke={1.25} />
                                                <Text fz={12} fw={500} pl={2} pr={2}>{member.name}</Text>
                                                <IconX size={16} style={{ cursor: 'pointer' }} onClick={() => handleDeleteCurrentMember(member.id)} />
                                            </Box>
                                        ))}
                                    </Box>

                                    <TextInput
                                        leftSection={<IconSearch size={16} stroke={1.5} />}
                                        placeholder={translate('Quick search member')}
                                        value={memberSearch}
                                        onChange={(e) => setMemberSearch(e.target.value)}
                                        mb={12}
                                    />

                                    <Text fw={700} size="xl" ta="center" mb={12}>{translate('WordPress Users')}</Text>

                                    <ScrollArea style={{ flex: 1 }} scrollbarSize={2} scrollbars="y">
                                        {filteredMembers.map((member) => {
                                            const projectRole = (member.project_roles || []).find(
                                                (r) => parseInt(r.project_id) === parseInt(projectId)
                                            );
                                            const isAdded = addedMembers.includes(member?.id);

                                            return (
                                                <Box
                                                    key={`member-row-${member.id}`}
                                                    className="grid items-center"
                                                    style={{
                                                        gridTemplateColumns: '1fr 280px 90px',
                                                        gap: '10px',
                                                        padding: '9px 0',
                                                        borderBottom: '1px solid #E5E9EC',
                                                    }}
                                                >
                                                    <Group gap="sm">
                                                        <UserAvatarSingle user={{ name: member.name, avatar: member.avatar }} size={36} stroke={1.25} />
                                                        <Box>
                                                            <Text fz={14} fw={500}>{member.name}</Text>
                                                            <Text fz={12} fw={400} c="dimmed">{member.email}</Text>
                                                        </Box>
                                                    </Group>

                                                    <Select
                                                        placeholder={translate('Select role')}
                                                        searchable
                                                        allowDeselect={false}
                                                        size="sm"
                                                        data={
                                                            roles?.length
                                                                ? roles
                                                                    .filter((role) => role.slug !== 'superadmin')
                                                                    .map((role) => ({
                                                                        value: role.id.toString(),
                                                                        label: role.name,
                                                                    }))
                                                                : []
                                                        }
                                                        value={memberRoles[member?.id] || projectRole?.role_id?.toString()}
                                                        onChange={(value) => handleProjectRoleChange(member?.id, value)}
                                                        disabled={isAdded}
                                                    />

                                                    {isAdded ? (
                                                        <Button
                                                            radius="sm"
                                                            height={20}
                                                            style={{
                                                                backgroundColor: '#f00f00',
                                                                color: '#fff',
                                                                fontWeight: 400,
                                                                padding: '5px 0px',
                                                                width: '100px',
                                                            }}
                                                            size="sm"
                                                            onClick={() => handleDeleteCurrentMember(member?.id)}
                                                        >
                                                            {translate('Remove')}
                                                        </Button>
                                                    ) : (
                                                        <Button
                                                            radius="sm"
                                                            height={20}
                                                            style={{
                                                                backgroundColor: '#39758D',
                                                                color: '#fff',
                                                                fontWeight: 400,
                                                                padding: '5px 0px',
                                                                width: '100px',
                                                            }}
                                                            size="sm"
                                                            onClick={() => handleButtonClick(member)}
                                                        >
                                                            {translate('Add')}
                                                        </Button>
                                                    )}
                                                </Box>
                                            );
                                        })}
                                    </ScrollArea>
                                </Box>
                            </Tabs.Panel>
                        </Tabs>
                    </Box>
                </Modal.Body>
            </Modal.Content>
        </Modal.Root>
    );
};

export default ProjectSettingsTabsModal;