import React, { useRef, useEffect, useState } from 'react';
import {
    Card,
    Group,
    Text,
    ScrollArea,
    Stack,
    Modal,
    Button,
    Grid,
    Box,
    Avatar, Pill,
    Flex, TextInput, LoadingOverlay,
    Badge,
    Title,
    ThemeIcon,
    Divider,
    Overlay,
    Select,
    ActionIcon
} from '@mantine/core';
import { modals } from "@mantine/modals";
import { useDisclosure } from '@mantine/hooks';
import { IconTrash, IconPlus, IconSearch, IconX, IconPencil, IconArchive, IconUser, IconUserCheck } from '@tabler/icons-react';
import UsersAvatarGroup from "../ui/UsersAvatarGroup";
import UserAvatarSingle from "../ui/UserAvatarSingle";
import { useSelector, useDispatch } from 'react-redux';
import { createCompany, editCompany, fetchAllCompanies } from "../Settings/store/companySlice";
import { changeMemberProjectRole, createProject, editProject, fetchAllProjects } from "../Settings/store/projectSlice";
import { createUser, editUser, editUserRole, fetchAllMembers, updateIsLoading, fetchUser, openProfileDrawer } from "../../store/auth/userSlice";
import { fetchAllRoles } from "../../store/auth/roleSlice";
import { fetchTasksByProject, updateBoardMembers, unarchiveProject } from "../Settings/store/taskSlice";
import { showNotification, updateNotification } from "@mantine/notifications";
import DeleteProjectModal from '../Elements/Modal/Project/DeleteProject';
import DeleteWorkspaceModal from '../Elements/Modal/Workspace/DeleteWorkspace';
import EditWorkspaceModal from '../Elements/Modal/Workspace/EditWorkspaceModal';
import MemberEditDrawer from "../../components/Profile/MemberEditDrawer";
import { hasPermission } from "../ui/permissions";
import { translate } from '../../utils/i18n';
import ProjectConfigureModal from '../Elements/Project/ProjectConfigureModal';
import ProjectSettingsTabsModal from '../Elements/Project/ProjectSettingsTabsModal';
import ProjectSettingsButton from '../Elements/Button/ProjectSettingsButton';
import ProjectUnarchiveButton from '../Elements/Button/ProjectUnarchiveButton';



const SectionCard = ({ title, onAdd, children }) => (
    <Card p="lg" radius="md" withBorder>
        <Group position="apart" mb="sm">
            <Text weight={600}>{title}</Text>
        </Group>
        <Stack spacing="sm">{children}</Stack>
    </Card>
);

const SettingsPanel = () => {
    const dispatch = useDispatch();
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { roles } = useSelector((state) => state.auth.role);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        setIsLoading(true);
        dispatch(fetchAllCompanies());
        dispatch(fetchAllMembers());
        dispatch(fetchAllRoles()).then(() => {
            setIsLoading(false);
        });
    }, [dispatch]);

    const { companies } = useSelector((state) => state.settings.company);
    const { projects } = useSelector((state) => state.settings.project);
    const { allMembers } = useSelector((state) => state.auth.user);

    const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(null);
    const [selectedProjectId, setSelectedProjectId] = useState(null);

    const selectedProject = projects.find(project => project.id === selectedProjectId) || {};
    const projectMembers = selectedProject?.members || [];
    const invitedMembers = selectedProject?.invitedMembers || [];

    const [projectCreateModalOpen, { open: openProjectCreateModal, close: closeProjectCreateModal }] = useDisclosure(false);
    const [isEmailValid, setIsEmailValid] = useState(false);
    const [inviteEmail, setInviteEmail] = useState('');
    const [searchValue, setSearchValue] = useState('');
    const [workspaceName, setWorkspaceName] = useState('');
    const [workspaceError, setWorkspaceError] = useState(false);
    const [projectName, setProjectName] = useState('');
    const [projectError, setProjectError] = useState(false);
    const selectedCompany = companies.find(company => company.id === selectedWorkspaceId);
    const selectedCompanyName = selectedCompany ? selectedCompany.name : '';

    const selectedProjectName = selectedProject ? selectedProject.name : '';

    const [workspaceCreateModalOpen, { open: openWorkspaceCreateModal, close: closeWorkspaceCreateModal }] = useDisclosure(false);
    const workspaceInputRef = useRef(null);
    const projectInputRef = useRef(null);
    const [addMemberModalOpen, { open, close }] = useDisclosure(false);
    const [isInviteClose, setIsInviteClose] = useState(false);
    const [inviteLoading, setInviteLoading] = useState(false);

    const [isEditWorkspace, setIsEditWorkspace] = useState(false);
    const [editingWorkspace, setEditingWorkspace] = useState(null);

    const [projectMemberData, setProjectMemberData] = useState([]);
    const [projectNavConfigureModalOpen, setProjectNavConfigureModalOpen] = useState(false);
    const [projectSettingsModalOpen, setProjectSettingsModalOpen] = useState(false);
    const [projectSettingsActiveTab, setProjectSettingsActiveTab] = useState('configuration');
    const [projectSettingsWorkspaceName, setProjectSettingsWorkspaceName] = useState('');
    const [projectSettingsProjectName, setProjectSettingsProjectName] = useState('');
    const [projectId, setProjectId] = useState(null);

    const [memberRoles, setMemberRoles] = useState({});
    const [assignEditLoadingId, setAssignEditLoadingId] = useState(null);
    const {projectInfo} = useSelector((state) => state.settings.task);

    useEffect(() => {
        if (selectedProject?.members) {
            setProjectMemberData(selectedProject.members);
        }
    }, [selectedProject]);

    const validateEmail = (email) => {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    };

    const filteredMembers = allMembers && allMembers.length > 0 && allMembers.filter(
        (member) => {
            const matchesSearch = (member?.name || '').toLowerCase().includes(searchValue.toLowerCase()) ||
                (member?.email || '').toLowerCase().includes(searchValue.toLowerCase());
            return matchesSearch;
        }
    );

    const handleSearchInputChange = (e) => {
        const inputValue = e.target.value;
        setSearchValue(inputValue);
        // setIsEmailValid(validateEmail(inputValue));
    };

    const handleInviteInputChange = (e) => {
        const inputValue = e.target.value;
        setInviteEmail(inputValue);
        setIsEmailValid(validateEmail(inputValue));
    };

    const attachRolesToMembers = (members = []) => {
        return members.map((member) => {
            const m = { ...member };
            // If lazytasks_role already present, keep it
            if (m.lazytasks_role && m.lazytasks_role.length) {
                return m;
            }
            // If role_id is set, map it to a role object
            const roleId = m.role_id ?? (m.lazy_role_id ?? null);
            if (roleId && roles && roles.length) {
                const found = roles.find(r => r.id.toString() === roleId.toString() || r.id === roleId);
                if (found) {
                    m.lazytasks_role = [{ id: found.id, name: found.name }];
                }
            }
            return m;
        });
    };

    const [addedMembers, setAddedMembers] = useState([]);
    const [currentMemberData, setCurrentMemberData] = useState([]);
    const { tasks } = useSelector((state) => state.settings.task);
    const [localRoleUpdates, setLocalRoleUpdates] = useState({});

    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>
                ),
            });

        } else {

            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;
        }

        // Attach role object to the incoming member (backend/UI expects lazytasks_role)
        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 not already added, insert into the list
        if (!addedMembers.includes(member?.id)) {
            setCurrentMemberData((prev) => [...prev, updatedMember]);
            setAddedMembers((prev) => [...prev, member?.id]);
        }

        // console.log("Updated Members:", currentMemberData);
        // console.log("Added Members:", addedMembers);
    };
    const handleWorkspaceName = (e) => {
        setWorkspaceName(e.currentTarget.value);
        if (e.currentTarget.value === '') {
            setWorkspaceError(true);
        } else {
            setWorkspaceError(false);
        }
    }
    const handleProjectName = (e) => {
        setProjectName(e.currentTarget.value);
        if (e.currentTarget.value === '') {
            setProjectError(true);
        } else {
            setProjectError(false);
        }
    }

    useEffect(() => {
        if (companies?.length > 0 && selectedWorkspaceId === null) {
            setSelectedWorkspaceId(companies[0].id);
        }
    }, [companies, selectedWorkspaceId]);

    useEffect(() => {
        const workspaceProjects = projects?.filter(
            (project) => project.company_id === selectedWorkspaceId
        );

        if (selectedWorkspaceId && (!selectedProjectId || !workspaceProjects.find(p => p.id === selectedProjectId))) {
            setSelectedProjectId(workspaceProjects[0]?.id || null);
        }

    }, [selectedWorkspaceId, projects, selectedProjectId]);

    useEffect(() => {
        // if (projectCreateModalOpen === false) {
        //     handleProjectCreation();
        // }
        if (projectCreateModalOpen) {
            setTimeout(() => {
                projectInputRef.current?.focus();
            }, 100);
        }
    }, [projectCreateModalOpen]);

    // useEffect(() => {
    //     if (addMemberModalOpen === false && !isInviteClose) {
    //         handleAddMemberToProject();
    //     }
    //     // Reset the flag when modal is closed
    //     if (addMemberModalOpen === false) {
    //         setIsInviteClose(false);
    //     }
    // }, [addMemberModalOpen]);

    useEffect(() => {
        if (selectedProjectId) {
            dispatch(fetchTasksByProject({ id: selectedProjectId }));
        }
        // Reset memberRoles when project changes
        setMemberRoles({});
        setCurrentMemberData([]);
        setAddedMembers([]);
    }, [selectedProjectId, dispatch]);

    useEffect(() => {
        if (!workspaceCreateModalOpen) {
            setIsEditWorkspace(false);
            setWorkspaceName('');
            setWorkspaceError(null);
        }
        if (workspaceCreateModalOpen) {
            setTimeout(() => {
                workspaceInputRef.current?.focus();
            }, 100);
        }
    }, [workspaceCreateModalOpen]);

    const handleProjectCreation = () => {
        const trimmedProjectName = projectName.trim();
        if (!trimmedProjectName) {
            showNotification({
                id: 'load-data',
                loading: true,
                title: 'Project',
                message: translate('Project name cannot be empty'),
                autoClose: 2000,
                disallowClose: true,
                color: 'red',
            });
            return;
        }

        const isSuperAdmin = loggedInUser?.llc_roles?.some(role => role.slug === "superadmin");
        const isWpAdmin = loggedInUser?.roles?.includes("administrator");
        const isNormalUser = !isSuperAdmin && !isWpAdmin;

        const currentMember = allMembers?.find(m => Number(m.id) === Number(loggedUserId));
        const userHasAddedThemself = currentMember && addedMembers.includes(currentMember.id);
        const hasAtLeastOneMember = currentMemberData && currentMemberData.length > 0;

        if (isNormalUser && !userHasAddedThemself) {
            showNotification({
                id: 'load-data',
                loading: true,
                title: 'Project',
                message: translate('Please add yourself to the project first'),
                autoClose: 2000,
                disallowClose: true,
                color: 'red',
            });
            return;
        }

        if (!hasAtLeastOneMember) {
            showNotification({
                id: 'load-data',
                loading: true,
                title: 'Project',
                message: translate('Please add at least one member to the project'),
                autoClose: 2000,
                disallowClose: true,
                color: 'red',
            });
            return;
        }
        const newProject = {
            name: trimmedProjectName,
            members: attachRolesToMembers(currentMemberData),
            company_id: selectedWorkspaceId,
            created_by: loggedInUser,
        };
        if (newProject.name !== '') {
            dispatch(createProject(newProject)).then((response) => {
                if (response.payload && response.payload.status && response.payload.status === 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'Project',
                        message: response.payload && response.payload.message && response.payload.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'green',
                    });
                    dispatch(fetchAllCompanies());
                    setProjectName('');
                    closeProjectCreateModal();
                }
                if (response.payload && response.payload.status && response.payload.status !== 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'Project',
                        message: response.payload && response.payload.message && response.payload.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'red',
                    });
                }
            }
            );
        }
        setProjectName('');
        setCurrentMemberData([]);
        setAddedMembers([]);
    };

    const isEmailAlreadyInvited = (email) => {
        return invitedMembers && invitedMembers.some(member =>
            member?.email.toLowerCase() === email.toLowerCase()
        );
    };

    const handleSendInvite = (email) => {
        setInviteLoading(true);
        const values = {
            email,
            loggedInUserId: loggedInUser ? loggedInUser.id : loggedUserId
        };

        dispatch(createUser(values)).then((response) => {
            if (response.payload?.status === 200) {
                // console.log(projectMemberData);
                // const updated = [...projectMemberData, response.payload.data];
                // console.log(updated);
                const updatedMembers = [
                    ...projectMemberData,
                    ...(selectedProject?.invitedMembers || []).filter(
                        invited => !projectMemberData.some(project => project.id === invited.id)
                    ),
                    response.payload.data
                ];

                if (selectedProjectId) {
                    dispatch(editProject({
                        id: selectedProjectId,
                        data: {
                            members: updatedMembers,
                            updated_by: loggedInUser ? loggedInUser.id : loggedUserId
                        }
                    })).then((res) => {
                        if (res.payload?.status === 200) {
                            // Important: use latest members from server, not local assumption
                            dispatch(updateBoardMembers(res.payload.data?.members || []));
                            dispatch(fetchAllMembers()).then(() => {
                                dispatch(fetchAllCompanies()).then(() => {
                                    const updatedProject = projects.find(p => p.id === selectedProjectId);
                                    if (updatedProject) {
                                        setProjectMemberData(updatedProject.members || []);
                                        setCurrentMemberData(updatedProject.members || []);
                                    }
                                });
                            });
                            setInviteEmail('');
                            setIsEmailValid(false);
                            setIsInviteClose(true);
                            closeAddMemberModal();
                            // Update projectMemberData state if needed
                            // setProjectMemberData(res.payload.data?.members || []);
                        }
                    });
                }

                showNotification({
                    id: 'load-data',
                    loading: false,
                    title: 'User',
                    message: response.payload.message || 'User invited successfully',
                    autoClose: 2000,
                    disallowClose: true,
                    color: 'green',
                });
            }
        }).catch(error => {
            console.error('Invite Error:', error);
            showNotification({
                id: 'load-data-error',
                title: 'Error',
                message: 'Failed to invite user.',
                autoClose: 2000,
                disallowClose: true,
                color: 'red',
            });
        }).finally(() => {
            setInviteLoading(false);
        });
    };


    const openAddMemberModal = () => {
        if (selectedProject) {
            const initialMemberIds = selectedProject?.members?.map(member => member?.id) || [];
            setCurrentMemberData(selectedProject.members || []);
            setAddedMembers(initialMemberIds);
        } else {
            setCurrentMemberData([]);
        }
        open(true);
    };

    const closeAddMemberModal = () => {
        close();
        // Reset member roles when modal closes
        setMemberRoles({});
        setCurrentMemberData([]);
        setAddedMembers([]);
    };

    const handleAddMemberToProject = () => {
        if (currentMemberData && currentMemberData.length > 0) {
            const merged = [
                ...currentMemberData,
                ...(selectedProject?.invitedMembers || []).filter(
                    invited => !currentMemberData.some(current => current.id === invited.id)
                )
            ];
            const updatedMembers = attachRolesToMembers(merged);

            dispatch(editProject({ id: selectedProjectId, data: { 'members': updatedMembers, 'updated_by': loggedInUser } })).then((response) => {
                if (response.payload && response.payload.status && response.payload.status === 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'User',
                        message: response.payload && response.payload.message && response.payload.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'green',
                    });
                    // dispatch(fetchAllCompanies());
                    dispatch(fetchAllCompanies()).then(() => {
                        const updatedProject = projects.find(p => p.id === selectedProjectId);
                        if (updatedProject) {
                            setProjectMemberData(updatedProject.members || []);
                        }
                    });
                    closeAddMemberModal();
                    setCurrentMemberData([]);
                    setAddedMembers([]);
                }
            });

        }
    };

    const confirmRemoveMember = (member) => {
        modals.openConfirmModal({
            title: `Remove ${member?.name}?`,
            centered: true,
            children: (
                <Text size="sm">
                    Are you sure you want to remove <strong>{member?.name}</strong> from this project? This action cannot be undone.
                </Text>
            ),
            labels: { confirm: 'Remove', cancel: "Cancel" },
            confirmProps: { color: 'red' },
            onConfirm: () => handleRemoveMember(member?.id),
        });
    };

    const handleRemoveMember = (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>
                ),
            });

        } else {

            const updatedMembers = projectMemberData.filter(member => member?.id !== id);
            setProjectMemberData(updatedMembers);

            dispatch(editProject({
                id: selectedProjectId,
                data: {
                    members: updatedMembers,
                    deleted_member_id: id,
                    updated_by: loggedInUser
                }
            })).then((response) => {
                if (response.payload?.status === 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'User',
                        message: response.payload?.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'green',
                    });
                    dispatch(fetchAllCompanies());
                }
            });
        }
    };

    const handleRoleChange = (user, newRoleId) => {
        const selectedRole = roles.find(role => role.id.toString() === newRoleId);
        if (selectedRole) {
            const roleObject = {
                id: selectedRole.id,
                name: selectedRole.name,
            };

            setLocalRoleUpdates(prev => ({
                ...prev,
                [user.id]: roleObject
            }));
            // Update local state
            const updatedMembers = projectMembers.map(member => {
                if (member?.id === user.id) {
                    return {
                        ...member,
                        lazytasks_role: [roleObject]
                    };
                }
                return member;
            });
            setProjectMemberData(updatedMembers);

            dispatch(editUserRole({ id: user.id, data: { roles: JSON.stringify([roleObject]) } })).then((response) => {
                if (response.payload && response.payload.status && response.payload.status === 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'User',
                        message: response.payload && response.payload.message && response.payload.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'green',
                    });
                    dispatch(fetchAllCompanies());
                }
                if (response.payload && response.payload.status && response.payload.status !== 200) {
                    showNotification({
                        id: 'load-data',
                        loading: true,
                        title: 'User',
                        message: response.payload && response.payload.message && response.payload.message,
                        autoClose: 2000,
                        disallowClose: true,
                        color: 'red',
                    });
                    setProjectMemberData(projectMembers);
                }
            });

        }
    };


    const handleWorkspaceCreation = () => {
        if (workspaceName) {
            if (isEditWorkspace && editingWorkspace) {
                if (workspaceName === editingWorkspace.name) {
                    closeWorkspaceCreateModal();
                    setIsEditWorkspace(false);
                    setEditingWorkspace(null);
                    return; // Skip dispatching editCompany
                }
                const editWorkspace = {
                    id: editingWorkspace.id,
                    data: {
                        name: workspaceName,
                        updated_by: loggedInUser
                    }
                };
                console.log(editingWorkspace, workspaceName);
                // return;
                // Edit mode
                dispatch(editCompany(editWorkspace)).then((response) => {
                    console.log(response);
                    if (response.payload && response.payload.status === 200) {
                        showNotification({
                            id: 'load-data',
                            loading: true,
                            title: 'Workspace',
                            message: response.payload.message,
                            autoClose: 2000,
                            disallowClose: true,
                            color: 'green',
                        });
                        setWorkspaceName('');
                        setIsEditWorkspace(false);
                        setEditingWorkspace(null);
                        dispatch(fetchAllCompanies());
                        closeWorkspaceCreateModal();
                    }
                });
            } else {
                const newWorkspace = {
                    name: workspaceName,
                    created_by: loggedInUser
                };
                dispatch(createCompany(newWorkspace)).then((response) => {
                    if (response.payload && response.payload.status && response.payload.status === 200) {
                        showNotification({
                            id: 'load-data',
                            loading: true,
                            title: 'Workspace',
                            message: response.payload && response.payload.message && response.payload.message,
                            autoClose: 2000,
                            disallowClose: true,
                            color: 'green',
                        });
                        setWorkspaceName('');
                        dispatch(fetchAllCompanies());
                        closeWorkspaceCreateModal();
                    }
                });
            }

        }
    }

    const handleProfileEditDrawer = (id) => {
        dispatch(fetchAllRoles());
        dispatch(updateIsLoading(true));

        dispatch(fetchUser(id)).then((response) => {
            if (response.payload && response.payload.status && response.payload.status === 200) {
                dispatch(openProfileDrawer());

                // set timeout to close the loading overlay
                setTimeout(() => {
                    dispatch(updateIsLoading(false));
                }, 500);
            }
        });
    }

    const handleEditWorkspace = (workspace) => {
        setIsEditWorkspace(true);
        setEditingWorkspace(workspace);
        setWorkspaceName(workspace.name);
        openWorkspaceCreateModal();
    };

    const handleOpenProjectSettings = (projectId, tab = 'configuration', project = null) => {
        setProjectId(projectId);
        setProjectSettingsActiveTab(tab);
        setProjectSettingsProjectName(project?.name || '');
        setProjectSettingsWorkspaceName(project?.parent?.name || selectedCompanyName || '');
        setProjectSettingsModalOpen(true);
    };

    const handleUnarchiveProject = (id) => {
        modals.openConfirmModal({
            title: (
                <Group spacing="xs">
                    <ThemeIcon color="orange" radius="xl" size="lg" variant="filled">
                        <IconArchive size={24} />
                    </ThemeIcon>
                    <Text size="md" weight={500}>
                        {translate('Unarchive Project')}
                    </Text>
                </Group>
            ),
            centered: true,
            children: (
                <>
                    <Divider size="xs" mb={24} className='!-ml-4 w-[calc(100%+2rem)]' />
                    <Text size="md" mb={30}>
                        {translate('Are you sure you want to unarchive this project?')}
                    </Text>
                </>
            ),
            labels: { confirm: 'Yes', cancel: 'Cancel' },
            confirmProps: { color: 'orange' },
            onConfirm: () => {
                showNotification({
                    id: 'load-data',
                    loading: true,
                    title: 'Project',
                    message: "Unarchiving The Project...",
                    disallowClose: true,
                    color: 'green',
                });
                dispatch(unarchiveProject({
                    id: id,
                    data: {
                        updated_by: loggedInUser?.loggedUserId ?? loggedUserId,
                    }
                }))
                    .then((response) => {
                        if (response.payload && response.payload.status && response.payload.status === 200) {
                            updateNotification({
                                id: 'load-data',
                                loading: true,
                                title: 'Subtask',
                                message: response.payload && response.payload.message && response.payload.message,
                                autoClose: 2000,
                                disallowClose: true,
                                color: 'green',
                            });
                            dispatch(fetchAllProjects());
                            setSelectedProjectId(id);
                        } else {
                            updateNotification({
                                id: 'load-data',
                                loading: false,
                                title: 'Subtask',
                                message: response.payload && response.payload.message && response.payload.message,
                                autoClose: 2000,
                                disallowClose: true,
                                color: 'red',
                            });
                        }
                    })
                    .catch((error) => {
                        console.error('Error completing subtask:', error);
                    });
            },
        });
    }

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

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

        const changeMemberWithRole = {
            ...member,
            role_id: roleId,
        };

        setAssignEditLoadingId(member?.id);

        dispatch(changeMemberProjectRole({ id: selectedProject ? selectedProject.id : id, data: { 'member': changeMemberWithRole, 'updated_by': loggedUserId } })).then((res) => {
            if (res.payload && res.payload.status && res.payload.status === 200) {
                setMemberRoles(prev => ({
                    ...prev,
                    [memberId]: roleId,
                }));
                dispatch(fetchAllCompanies()).then(() => {
                    const updatedProject = projects.find(p => p.id === selectedProjectId);
                    if (updatedProject) {
                        setProjectMemberData(updatedProject.members || []);
                    }
                });
                setAssignEditLoadingId(null);
                showNotification({
                    id: 'load-data',
                    loading: true,
                    title: 'Project',
                    message: res?.payload?.message || 'Member Role Change successfully',
                    autoClose: 2000,
                    disallowClose: true,
                    color: 'green',
                });
            }
        });

    }

    return (
        <Box>
            <ScrollArea scrollbarSize={4} scrollbars="y"
                className={`w-full ${appLocalizer?.is_admin ? 'h-[calc(100vh-300px)]' : 'h-[calc(100vh-250px)]'}`}
            >
                <LoadingOverlay visible={isLoading} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
                <Grid columns={24}>
                    <Grid.Col span={6}>

                        <SectionCard title={translate('Workspaces')}>
                            {hasPermission(loggedInUser, ['create-workspace'], null, 'global') &&
                                <button
                                    className="relative w-full h-full min-h-[60px] rounded-lg border border-dashed bg-white flex-row items-center justify-center align-items-center text-center"
                                    style={{ borderColor: '#39758D' }} onClick={openWorkspaceCreateModal}
                                >
                                    <Flex justify="center" align="flex-start" gap="xs" wrap="nowrap">
                                        <IconPlus size={20} color="#39758D" />

                                        <Text ta="center" fz="md" fw={500} c="#39758D">
                                            {translate('Create Workspace')}
                                        </Text>
                                    </Flex>
                                </button>
                            }
                            <ScrollArea h={hasPermission(loggedInUser, ['create-workspace'], null, 'global') ? 515 : 592} scrollbarSize={2}>
                                {companies && companies.length > 0 && companies.map((item) => (

                                    <Card key={item.id} padding="lg" shadow="xs" className='mb-3' withBorder onClick={() => setSelectedWorkspaceId(item.id)}
                                        style={{ borderColor: selectedWorkspaceId === item.id ? '#39758d' : '#dee2e6', cursor: 'pointer', backgroundColor: selectedWorkspaceId === item.id ? '#F5F9FB' : 'white' }}
                                    >

                                        <Text size="lg" weight={900}>{item.name}</Text>
                                        <Flex align="center" justify="space-between">
                                            <Group>
                                                <Box className='flex items-center gap-1'>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                        <circle cx="4" cy="4" r="4" fill="#F1975A" />
                                                    </svg>
                                                    <Text size="sm">
                                                        {translate('%d users engaged').replace('%d', item.members && item.members.length)}
                                                    </Text>
                                                </Box>
                                                <Box className='flex items-center gap-1'>
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                        <circle cx="4" cy="4" r="4" fill="#39758D" />
                                                    </svg>
                                                    <Text size="sm">
                                                        {translate('%d project').replace('%d', item.projects && item.projects.length)}
                                                    </Text>
                                                </Box>
                                            </Group>

                                            <Group spacing="sm">
                                                {hasPermission(loggedInUser, ['edit-workspace'], null, 'global') &&
                                                    <Box
                                                        className='border border-dashed rounded-full p-2 group cursor-pointer'
                                                        style={{
                                                            borderColor: '#4D4D4D',
                                                            transition: 'all 0.2s ease'
                                                        }}
                                                        onMouseEnter={(e) => {
                                                            e.currentTarget.style.borderColor = '#ff9800';
                                                            e.currentTarget.querySelector('svg').style.color = '#ff9800';
                                                        }}
                                                        onMouseLeave={(e) => {
                                                            e.currentTarget.style.borderColor = '#4D4D4D';
                                                            e.currentTarget.querySelector('svg').style.color = '#4D4D4D';
                                                        }}
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            handleEditWorkspace(item);
                                                        }}
                                                    >
                                                        <IconPencil
                                                            size={20}
                                                            stroke={1.25}
                                                            style={{
                                                                transition: 'all 0.2s ease'
                                                            }}
                                                        />
                                                    </Box>
                                                }
                                                {hasPermission(loggedInUser, ['delete-workspace'], null, 'global') &&
                                                    <DeleteWorkspaceModal {...item} />
                                                }
                                            </Group>
                                        </Flex>
                                    </Card>
                                ))}
                            </ScrollArea>

                        </SectionCard>
                    </Grid.Col>
                    <Grid.Col span={7}>
                        {/* Projects */}

                        <SectionCard title={translate('Projects')}>
                            {hasPermission(loggedInUser, ['create-project'], null, 'global') &&
                                <button
                                    className="relative w-full h-full min-h-[60px] rounded-lg border border-dashed bg-white flex-row items-center justify-center align-items-center text-center"
                                    style={{ borderColor: '#39758D' }} onClick={openProjectCreateModal}
                                >
                                    <Flex justify="center" align="flex-start" gap="xs" wrap="nowrap">
                                        <IconPlus size={20} color="#39758D" />

                                        <Text ta="center" fz="md" fw={500} c="#39758D">
                                            {translate('Create Project')}
                                        </Text>
                                    </Flex>
                                </button>
                            }
                            <ScrollArea h={hasPermission(loggedInUser, ['create-project'], null, 'global') ? 515 : 592} scrollbarSize={2} offsetScrollbars={true}>
                                {projects && projects.length > 0 && projects.filter((project) => project.company_id === selectedWorkspaceId)
                                    .map((project, index) => (

                                        <Card key={index} padding="lg" shadow="xs" className='mb-3' withBorder onClick={() => setSelectedProjectId(project.id)}
                                            style={{
                                                borderColor: selectedProjectId === project.id ? '#39758d' : '#dee2e6',
                                                cursor: 'pointer',
                                                backgroundColor:
                                                    project.status == '2' // 2 means archived
                                                        ? '#F0F0F0' // always gray for archived
                                                        : selectedProjectId === project.id
                                                            ? '#F5F9FB' // highlight for active selected
                                                            : 'white', // default
                                            }}
                                        >
                                            {project.status == '2' && (
                                                <Badge
                                                    color="gray"
                                                    variant="filled"
                                                    radius="sm"
                                                    size="sm"
                                                    style={{
                                                        position: 'absolute',
                                                        top: '5px',
                                                        right: '5px',
                                                        zIndex: 10,
                                                        cursor: 'pointer'
                                                    }}
                                                    onClick={(e) => {
                                                        e.stopPropagation(); // prevent triggering card click
                                                        handleUnarchiveProject(project.id); // unarchive the project
                                                    }}
                                                >
                                                    {translate('Archived')}
                                                </Badge>
                                            )}

                                            <Text size="lg" weight={900}>{project.name}</Text>
                                            <Flex justify="space-between" align="center">
                                                <Group>
                                                    <Box className='flex items-center gap-1'>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                            <circle cx="4" cy="4" r="4" fill="#F1975A" />
                                                        </svg>
                                                        <Text size="sm">
                                                            {translate('%d users engaged').replace('%d', project.members && project.members.length > 0 ? project.members.length : 0)}
                                                        </Text>
                                                    </Box>
                                                    <Box className='flex items-center gap-1'>
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
                                                            <circle cx="4" cy="4" r="4" fill="#39758D" />
                                                        </svg>
                                                        <Text size="sm">
                                                            {translate('%d tasks').replace('%d', project.total_tasks && project.total_tasks > 0 ? project.total_tasks : 0)}
                                                        </Text>
                                                    </Box>
                                                </Group>

                                                <Group spacing="sm">

                                                    {project.status == '1' && hasPermission(loggedInUser, ['edit-project'], null, 'global') &&
                                                        <Box
                                                            className='border border-dashed rounded-full p-2 group cursor-pointer'
                                                            style={{
                                                                borderColor: '#4D4D4D',
                                                                transition: 'all 0.2s ease'
                                                            }}
                                                            onMouseEnter={(e) => {
                                                                e.currentTarget.style.borderColor = '#ff9800';
                                                                e.currentTarget.querySelector('svg').style.color = '#ff9800';
                                                            }}
                                                            onMouseLeave={(e) => {
                                                                e.currentTarget.style.borderColor = '#4D4D4D';
                                                                e.currentTarget.querySelector('svg').style.color = '#4D4D4D';
                                                            }}
                                                            onClick={(e) => {
                                                                e.stopPropagation();
                                                                handleOpenProjectSettings(project.id, 'users', project);
                                                            }}
                                                        >
                                                            <IconPencil
                                                                size={20}
                                                                stroke={1.25}
                                                                style={{
                                                                    transition: 'all 0.2s ease'
                                                                }}
                                                            />
                                                        </Box>
                                                    }
                                                    {project.status == '1' && hasPermission(loggedInUser, ['configure-project-tabs'], projectInfo?.permissions?.permissions, 'project') &&
                                                        <ProjectSettingsButton
                                                            onClick={() => handleOpenProjectSettings(project.id, 'configuration', project)}
                                                        />
                                                    }
                                                    {project.status == '2' && hasPermission(loggedInUser, ['project-archive-unarchive'], null, 'global') &&
                                                        <ProjectUnarchiveButton
                                                            onClick={() => handleUnarchiveProject(project.id)}
                                                        />
                                                    }
                                                    {hasPermission(loggedInUser, ['delete-project'], null, 'global') &&
                                                        <DeleteProjectModal {...project} />
                                                    }

                                                </Group>

                                            </Flex>
                                        </Card>
                                    ))}
                            </ScrollArea>

                        </SectionCard>
                    </Grid.Col>
                    <Grid.Col span={11}>
                        {/* Members */}

                        <SectionCard title={translate('Members')}>
                            {selectedProject && selectedProject?.status == '2' && (
                                <>
                                    <Overlay
                                        blur={2}
                                        opacity={0.7}
                                        color="#fff"
                                        zIndex={20}
                                    />
                                    <Box
                                        style={{
                                            position: 'absolute',
                                            top: '50%',
                                            left: '50%',
                                            transform: 'translate(-50%, -50%)',
                                            zIndex: 25, // Ensure it is above the overlay
                                            textAlign: 'center',
                                        }}
                                    >
                                        <Badge size="lg" leftSection={<IconArchive stroke={1.25} />} color="orange">{translate('This project is archived')}</Badge>
                                    </Box>
                                </>
                            )}
                            {hasPermission(loggedInUser, ['create-project', 'edit-project'], null, 'global') &&
                                <button
                                    className="relative w-full h-full min-h-[60px] rounded-lg border border-dashed bg-white flex-row items-center justify-center align-items-center text-center"
                                    style={{ borderColor: '#39758D' }} onClick={openAddMemberModal}
                                >
                                    <Flex justify="center" align="flex-start" gap="xs" wrap="nowrap">
                                        <IconPlus size={20} color="#39758D" />

                                        <Text ta="center" fz="md" fw={500} c="#39758D">
                                            {translate('Add Member')}
                                        </Text>
                                    </Flex>
                                </button>
                            }
                            <ScrollArea h={hasPermission(loggedInUser, ['create-project', 'edit-project'], null, 'global') ? 515 : 592} scrollbarSize={2} offsetScrollbars={true}>
                                {projectMembers && projectMembers.length > 0 && projectMembers.map((user, index) => {
                                    const projectRole = user?.project_role;
                                    const displayedRole = memberRoles[user.id] 
                                        ? roles?.find(r => r.id.toString() === memberRoles[user.id])
                                        : projectRole;
                                    const isSuperAdmin = user.llc_roles?.some(role => role.slug === "superadmin");
                                    const isWpAdmin = user?.is_wp_admin;

                                    return (
                                        <Card key={index} p="sm" shadow="xs" className='mb-3' withBorder>

                                            <Flex justify="space-between" align="center" gap="xs">
                                                <Group spacing="sm">
                                                    <UserAvatarSingle user={{ name: user.name, avatar: user.avatar }} size={50} stroke={1.25} />
                                                    <Box>
                                                        <Text size="lg">{user.name}</Text>
                                                        <Text size="xs" c="dimmed">{user.email}</Text>
                                                         {(isSuperAdmin || isWpAdmin) && (
                                                            <Text
                                                                size="xs"
                                                                fw={500}
                                                                className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 w-fit"
                                                                mt={7}
                                                                p={4}
                                                            >
                                                                {isSuperAdmin ? "Superadmin" : "WP Admin"}
                                                            </Text>
                                                        )}

                                                        {!isSuperAdmin && !isWpAdmin && projectRole && (
                                                            <Text
                                                                size="xs"
                                                                fw={500}
                                                                className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 w-fit"
                                                                mt={7}
                                                                p={4}
                                                            >
                                                                {displayedRole?.name}
                                                            </Text>
                                                        )}
                                                    </Box>
                                                </Group>

                                                <Group spacing="xs" justify='space-between'>
                                                    {hasPermission(loggedInUser, ['manage-rolls-permissions'], null, 'global') && (
                                                        <>
                                                            <Box>
                                                                {/*{isSuperAdmin ? (
                                                                    <Select
                                                                        placeholder={translate("Select Role")}
                                                                        searchable
                                                                        allowDeselect={false}
                                                                        size="xs"
                                                                        className="min-w-[100px] w-full"
                                                                        data={
                                                                            ['Superadmin']
                                                                        }
                                                                        defaultValue={'Superadmin'}
                                                                        disabled
                                                                    />
                                                                ) : (
                                                                    <Select
                                                                        placeholder={translate("Select Role")}
                                                                        searchable
                                                                        allowDeselect={false}
                                                                        size="xs"
                                                                        className="min-w-[100px] w-full"
                                                                        data={
                                                                            roles?.length
                                                                                ? roles
                                                                                    .filter((role) => role.slug !== "superadmin")
                                                                                    .map((role) => ({
                                                                                        value: role.id.toString(),
                                                                                        label: role.name,
                                                                                    }))
                                                                                : []
                                                                        }
                                                                        value={memberRoles[user.id] || projectRole?.id?.toString()}
                                                                        onChange={(v) => handleChangeProjectRole(user.id, v, user)}
                                                                        disabled={assignEditLoadingId === user.id}
                                                                    />
                                                                )}*/}
                                                                <Select
                                                                    placeholder={translate("Select Role")}
                                                                    searchable
                                                                    allowDeselect={false}
                                                                    size="xs"
                                                                    className="min-w-[100px] w-full"
                                                                    data={
                                                                        roles?.length
                                                                            ? roles
                                                                                .filter((role) => role.slug !== "superadmin")
                                                                                .map((role) => ({
                                                                                    value: role.id.toString(),
                                                                                    label: role.name,
                                                                                }))
                                                                            : []
                                                                    }
                                                                    value={memberRoles[user.id] || projectRole?.id?.toString()}
                                                                    onChange={(v) => handleChangeProjectRole(user.id, v, user)}
                                                                    disabled={assignEditLoadingId === user.id}
                                                                />

                                                            </Box>
                                                        </>
                                                    )}

                                                    {
                                                        hasPermission(loggedInUser, ['manage-users'], null, 'global') && (
                                                        <Box
                                                            className='border border-dashed rounded-full p-2 group cursor-pointer'
                                                            style={{
                                                                borderColor: '#4D4D4D',
                                                                transition: 'all 0.2s ease'
                                                            }}
                                                            onMouseEnter={(e) => {
                                                                e.currentTarget.style.borderColor = '#ff9800';
                                                                e.currentTarget.querySelector('svg').style.color = '#ff9800';
                                                            }}
                                                            onMouseLeave={(e) => {
                                                                e.currentTarget.style.borderColor = '#4D4D4D';
                                                                e.currentTarget.querySelector('svg').style.color = '#4D4D4D';
                                                            }}
                                                        >
                                                            <IconPencil
                                                                size={20}
                                                                stroke={1.25}
                                                                style={{
                                                                    transition: 'all 0.2s ease'
                                                                }}
                                                                onClick={() => handleProfileEditDrawer(user.id)}
                                                            />
                                                        </Box>
                                                    )}
                                                    {(
                                                        hasPermission(loggedInUser, ['manage-users'], null, 'global') ||
                                                        hasPermission(loggedInUser, ['remove-member-from-project'], projectInfo?.permissions?.permissions, 'project')
                                                    ) && (
                                                        <Box
                                                            className='border border-dashed rounded-full p-2 group cursor-pointer'
                                                            style={{
                                                                borderColor: '#4D4D4D',
                                                                transition: 'all 0.2s ease'
                                                            }}
                                                            onMouseEnter={(e) => {
                                                                e.currentTarget.style.borderColor = '#ff0000';
                                                                e.currentTarget.querySelector('svg').style.color = '#ff0000';
                                                            }}
                                                            onMouseLeave={(e) => {
                                                                e.currentTarget.style.borderColor = '#4D4D4D';
                                                                e.currentTarget.querySelector('svg').style.color = '#4D4D4D';
                                                            }}
                                                        >
                                                            <IconTrash
                                                                size={20}
                                                                stroke={1.25}
                                                                style={{
                                                                    transition: 'all 0.2s ease'
                                                                }}
                                                                onClick={() => confirmRemoveMember(user)}
                                                            />
                                                        </Box>
                                                    )}
                                                </Group>

                                            </Flex>

                                        </Card>
                                    );
                                })}
                                {invitedMembers && invitedMembers.length > 0 && invitedMembers.map((invitedUser, index) => (

                                    <Card key={index} p="sm" shadow="xs" className='mb-3' withBorder>

                                        <Flex justify="space-between" align="center" gap="xs">
                                            <Group>
                                                <UserAvatarSingle user={{ name: invitedUser.name, avatar: invitedUser.avatar }} size={50} stroke={1.25} />
                                                <div>
                                                    <Text size="lg">{invitedUser.name}</Text>
                                                    <Text size="xs" c="dimmed">{invitedUser.email}</Text>
                                                </div>
                                            </Group>
                                            {hasPermission(loggedInUser, ['create-project', 'edit-project'], null, 'global') &&
                                                <Group spacing="xs">

                                                    <Pill size="lg" bg={"#EBF1F4"}>{translate('Invited')}</Pill>

                                                    <Box
                                                        className='border border-dashed rounded-full p-2 group cursor-pointer'
                                                        style={{
                                                            borderColor: '#4D4D4D',
                                                            transition: 'all 0.2s ease'
                                                        }}
                                                        onMouseEnter={(e) => {
                                                            e.currentTarget.style.borderColor = '#ff0000';
                                                            e.currentTarget.querySelector('svg').style.color = '#ff0000';
                                                        }}
                                                        onMouseLeave={(e) => {
                                                            e.currentTarget.style.borderColor = '#4D4D4D';
                                                            e.currentTarget.querySelector('svg').style.color = '#4D4D4D';
                                                        }}
                                                    >
                                                        <IconTrash
                                                            size={20}
                                                            stroke={1.25}
                                                            style={{
                                                                transition: 'all 0.2s ease'
                                                            }}
                                                            onClick={() => confirmRemoveMember(invitedUser)}
                                                        />
                                                    </Box>
                                                </Group>
                                            }
                                        </Flex>

                                    </Card>
                                ))}
                            </ScrollArea>

                        </SectionCard>

                    </Grid.Col>
                </Grid>
            </ScrollArea>

            <Modal.Root
                opened={projectCreateModalOpen}
                onClose={closeProjectCreateModal}
                centered
                size="xl"
            >
                <Modal.Overlay />
                <Modal.Content radius={15}>
                    <Modal.Header px={20} py={10}>
                        <Group position="apart" justify='space-between' align='items-center' style={{ width: '100%' }}>
                            <Title order={5}>{translate('Create Project')}</Title>
                            {(() => {
                                const hasCreatePermission = hasPermission(
                                    loggedInUser,
                                    ['create-project'],
                                    null,
                                    'global'
                                );
                                
                                return (
                                    <Button 
                                        variant="filled" 
                                        color="orange" 
                                        mr={10}
                                        onClick={handleProjectCreation}
                                        size='sm'
                                        disabled={!hasCreatePermission}
                                    >
                                        {translate('Create')}
                                    </Button>
                                );
                            })()}
                        </Group>
                        <Modal.CloseButton />

                    </Modal.Header>
                    <Modal.Body>
                        <Card withBorder padding="md" mt="sm">
                            <Text fw={500} mb="sm">
                                {translate('Workspace')} : {selectedCompanyName}
                            </Text>
                            <TextInput
                                ref={projectInputRef}
                                withAsterisk
                                label={translate('Project name')}
                                placeholder={translate('Project name')}
                                mb="md"
                                radius="md"
                                size="md"
                                onChange={(e) => handleProjectName(e)}
                                styles={{
                                    label: { marginBottom: '8px', fontSize: '15px' },
                                }}
                                error={projectError}
                            />

                            {/* Current Logged-In User Section - Only for normal users with create-project permission */}
                            {loggedInUser && (() => {
                                const isSuperAdmin = loggedInUser?.llc_roles?.some(role => role.slug === "superadmin");
                                const isWpAdmin = loggedInUser?.roles?.includes("administrator");
                                const hasCreatePermission = hasPermission(
                                    loggedInUser,
                                    ['create-project'],
                                    null,
                                    "global"
                                );
                                // Show section only for non-superadmin, non-admin users with create-project permission
                                const shouldShowSection = !isSuperAdmin && !isWpAdmin && hasCreatePermission;
                                
                                if (!shouldShowSection) {
                                    return null;
                                }
                                
                                return (
                                    <div className="mt-0 mb-4">
                                        <>
                                            {(() => {
                                                const member = allMembers?.find(m => Number(m.id) === Number(loggedUserId));
                                                const projectRole = (loggedInUser?.project_roles || []).find(
                                                    (r) => parseInt(r.project_id) === parseInt(selectedProjectId)
                                                );

                                            return (
                                                <div
                                                    className="grid grid-cols-[1fr_170px_80px] items-center gap-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition"
                                                >
                                                    {/* COLUMN 1: Avatar + Info */}
                                                    <div className="flex items-center gap-3 min-w-0">
                                                        <UserAvatarSingle user={member} size={38} />

                                                        <div className="min-w-0">
                                                            <Text size="sm" fw={700} c="#202020" lineClamp={1}>
                                                                {member?.name}
                                                            </Text>

                                                            <Text size="xs" c="#555" fw={400} lineClamp={1}>
                                                                {member?.email}
                                                            </Text>

                                                            {(isSuperAdmin || isWpAdmin) && (
                                                                <Text
                                                                    size="xs"
                                                                    fw={500}
                                                                    className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 mt-1 w-fit"
                                                                >
                                                                    {isSuperAdmin ? "Superadmin" : "WP Admin"}
                                                                </Text>
                                                            )}

                                                            {!isSuperAdmin && !isWpAdmin && projectRole && (
                                                                <Text
                                                                    size="xs"
                                                                    fw={500}
                                                                    className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 mt-1 w-fit"
                                                                >
                                                                    {projectRole.name}
                                                                </Text>
                                                            )}
                                                        </div>
                                                    </div>

                                                    {/* COLUMN 2: Select Role */}
                                                    <div className="flex justify-end"
                                                        onClick={(e) => e.stopPropagation()}
                                                        onMouseDown={(e) => e.stopPropagation()}
                                                    >
                                                        <Select
                                                            placeholder={translate("Select Role")}
                                                            searchable
                                                            allowDeselect={false}
                                                            size="sm"
                                                            className="min-w-[100px] w-full"
                                                            data={
                                                                roles?.length
                                                                    ? roles
                                                                        .filter((role) => role.slug !== "superadmin")
                                                                        .map((role) => ({
                                                                            value: role.id.toString(),
                                                                            label: role.name,
                                                                        }))
                                                                    : []
                                                            }
                                                            value={projectCreateModalOpen
                                                                ? (memberRoles[member?.id] || null) // keep blank when creating a new project
                                                                : (memberRoles[member?.id] || projectRole?.role_id?.toString())}
                                                            onChange={(v) => handleProjectRoleChange(member?.id, v)}
                                                            disabled={addedMembers.includes(member?.id) && true}
                                                        />
                                                    </div>

                                                    {/* COLUMN 3: Action Buttons */}
                                                    <div className="flex items-center gap-2 justify-start">
                                                        {/* Remove button */}
                                                        {addedMembers.includes(member?.id) &&
                                                            hasPermission(
                                                                loggedInUser,
                                                                ['create-project', 'edit-project'],
                                                                "project"
                                                            ) && (
                                                                <Button
                                                                    radius="sm"
                                                                    height={20}
                                                                    style={{
                                                                        backgroundColor: "#f00f00",
                                                                        color: "#fff",
                                                                        fontWeight: 400,
                                                                        padding: "5px 0px",
                                                                        width: "100px",
                                                                    }}
                                                                    size="sm"
                                                                    marginLeft={2}
                                                                    onClick={() => handleDeleteCurrentMember(member?.id)}
                                                                >
                                                                    {translate('Remove')}
                                                                </Button>
                                                            )}

                                                        {/* Add button */}
                                                        {!addedMembers.includes(member?.id) &&
                                                            hasPermission(
                                                                loggedInUser,
                                                                ['create-project'],
                                                                null,
                                                                "global"
                                                            ) && (
                                                                <Button
                                                                    radius="sm"
                                                                    height={20}
                                                                    style={{
                                                                        backgroundColor: "#39758D",
                                                                        color: "#fff",
                                                                        fontWeight: 400,
                                                                        padding: "5px 0px",
                                                                        width: "100px",
                                                                    }}
                                                                    size="sm"
                                                                    marginLeft={2}
                                                                    onClick={() => handleButtonClick(member)}
                                                                >
                                                                    {translate('Add')}
                                                                </Button>
                                                            )}
                                                    </div>
                                                </div>
                                            );
                                            })()}
                                        </>
                                    </div>
                                );
                            })()}

                            <div className="flex flex-wrap gap-4 mb-4">
                                {currentMemberData && currentMemberData.length > 0 && currentMemberData.map((member) => (
                                    <div
                                        key={member?.id}
                                        className="flex items-center justify-between gap-2"
                                        style={{ backgroundColor: '#EBF1F4', padding: '5px 10px', borderRadius: '5px' }}
                                    >
                                        {/*<Avatar src={member?.name} size={28} radius={22} />*/}
                                        <UserAvatarSingle user={member} size={32} />
                                        <Text size="sm" fw={100} c="#202020">
                                            {member?.name}
                                        </Text>
                                        <button onClick={() => handleDeleteCurrentMember(member?.id)}>
                                            <IconX size={16} color="#202020" />
                                        </button>
                                    </div>
                                ))}
                            </div>
                            <Grid>
                                {/* Search Input */}
                                <Grid.Col span={6}>
                                    <TextInput
                                        leftSection={<IconSearch size={16} />}
                                        placeholder={translate('Quick search member')}
                                        mt="md"
                                        value={searchValue}
                                        onChange={handleSearchInputChange}
                                    />
                                </Grid.Col>
                                <Grid.Col span={6}>
                                    <TextInput
                                        placeholder={translate('Invite By Email')}
                                        mt="md"
                                        value={inviteEmail}
                                        onChange={handleInviteInputChange}
                                        rightSection={
                                            <Button variant="filled" color="#39758D"
                                                size='sm'
                                                radius='sm'
                                                disabled={!isEmailValid || inviteLoading}
                                                loading={inviteLoading}
                                                loaderProps={{ type: 'dots' }}
                                                onClick={() => handleSendInvite(inviteEmail)}
                                                style={{
                                                    padding: '0px 10px',
                                                    height: '28px'
                                                }}
                                            >
                                                {translate('Invite')}
                                            </Button>
                                        }
                                        rightSectionWidth={60}
                                    />
                                </Grid.Col>
                            </Grid>
                            <Text size="lg" c="#000" mt={10} fw={600} ta="center">
                                {translate('Wordpress Users')}
                            </Text>

                            <ScrollArea h={220} scrollbarSize={6}>
                                {/* User List */}
                                {filteredMembers && filteredMembers.length === 0 && (
                                    <div className="py-4 text-center">
                                        <Text size="sm" c="#555">{translate('No members found')}</Text>
                                    </div>
                                )}
                                {/* User List */}
                                {filteredMembers &&
                                    filteredMembers.length > 0 &&
                                    filteredMembers.map((member) => {
                                        const projectRole = (member.project_roles || []).find(
                                            (r) => parseInt(r.project_id) === parseInt(selectedProjectId)
                                        );
                                        const isSuperAdmin = member.llc_roles?.some(role => role.slug === "superadmin");
                                        const isWpAdmin = member.roles.includes("administrator");

                                        return (
                                            <div
                                                key={member?.id}
                                                className="grid grid-cols-[1fr_170px_80px] items-center gap-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition"
                                            >
                                                {/* COLUMN 1: Avatar + Info */}
                                                <div className="flex items-center gap-3 min-w-0">
                                                    <UserAvatarSingle user={member} size={38} />

                                                    <div className="min-w-0">
                                                        <Text size="sm" fw={700} c="#202020" lineClamp={1}>
                                                            {member?.name}
                                                        </Text>

                                                        <Text size="xs" c="#555" fw={400} lineClamp={1}>
                                                            {member?.email}
                                                        </Text>

                                                        {(isSuperAdmin || isWpAdmin) && (
                                                            <Text
                                                                size="xs"
                                                                fw={500}
                                                                className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 mt-1 w-fit"
                                                            >
                                                                {isSuperAdmin ? "Superadmin" : "WP Admin"}
                                                            </Text>
                                                        )}


                                                    </div>
                                                </div>

                                                {/* COLUMN 2: Select Role */}
                                                <div className="flex justify-end"
                                                    onClick={(e) => e.stopPropagation()}
                                                    onMouseDown={(e) => e.stopPropagation()}
                                                >
                                                    <Select
                                                        placeholder={translate("Select Role")}
                                                        searchable
                                                        allowDeselect={false}
                                                        size="sm"
                                                        className="min-w-[100px] w-full"
                                                        data={
                                                            roles?.length
                                                                ? roles
                                                                    .filter((role) => role.slug !== "superadmin")
                                                                    .map((role) => ({
                                                                        value: role.id.toString(),
                                                                        label: role.name,
                                                                    }))
                                                                : []
                                                        }
                                                        value={projectCreateModalOpen
                                                            ? (memberRoles[member?.id] || null) // keep blank when creating a new project
                                                            : (memberRoles[member?.id] || projectRole?.role_id?.toString())}
                                                        onChange={(v) => handleProjectRoleChange(member?.id, v)}
                                                        // disabled={addedMembers.includes(member?.id) && true}
                                                    />
                                                </div>

                                                {/* COLUMN 3: Action Buttons */}
                                                <div className="flex items-center gap-2 justify-start">

                                                    {/* Change button (only when member already added) */}
                                                    {/* {!isSuperAdmin && addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (

                                                            <ActionIcon variant="filled" color="#4A4A4A" size="md" aria-label="Settings"
                                                                onClick={() => handleChangeProjectRole(member)}
                                                                title={translate('Edit Member Role')}
                                                            >
                                                                <IconPencil style={{ width: '70%', height: '70%' }} stroke={1.5} />
                                                            </ActionIcon>
                                                        )} */}

                                                    {/* Remove button */}
                                                    {addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (
                                                            <Button
                                                                radius="sm"
                                                                height={20}
                                                                style={{
                                                                    backgroundColor: "#f00f00",
                                                                    color: "#fff",
                                                                    fontWeight: 400,
                                                                    padding: "5px 0px",
                                                                    width: "100px",
                                                                }}
                                                                size="sm"
                                                                marginLeft={2}
                                                                onClick={() => handleDeleteCurrentMember(member?.id)}
                                                            >
                                                                {translate('Remove')}
                                                            </Button>
                                                        )}

                                                    {/* Add button */}
                                                    {!addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (
                                                            <Button
                                                                radius="sm"
                                                                height={20}
                                                                style={{
                                                                    backgroundColor: "#39758D",
                                                                    color: "#fff",
                                                                    fontWeight: 400,
                                                                    padding: "5px 0px",
                                                                    width: "100px",
                                                                }}
                                                                size="sm"
                                                                marginLeft={2}
                                                                onClick={() => handleButtonClick(member)}
                                                            >
                                                                {translate('Add')}
                                                            </Button>
                                                        )}
                                                </div>
                                            </div>
                                        );
                                    })}

                            </ScrollArea>
                        </Card>
                    </Modal.Body>
                </Modal.Content>
            </Modal.Root>

            <Modal.Root
                opened={addMemberModalOpen}
                onClose={closeAddMemberModal}
                centered
                size="xl"
            >
                <Modal.Overlay />
                <Modal.Content radius={15}>
                    <Modal.Header px={20} py={10}>
                        {/* <Title order={5}>{translate('Add Member')}</Title> */}
                        {/* <Modal.CloseButton size={`lg`} icon={translate('Add')} className={`!ml-2 !h-[36px] !border-0 !w-[70px] !bg-[#ED7D31] !text-white`} /> */}
                        <Group position="apart" justify='space-between' align='items-center' style={{ width: '100%' }}>
                            <Title order={5}>{translate('Add Member')}</Title>
                            <Button variant="filled" color="orange" mr={10}
                                onClick={handleAddMemberToProject}
                                size='sm'
                            >
                                {translate('Add')}
                            </Button>
                        </Group>
                        <Modal.CloseButton />
                    </Modal.Header>
                    <Modal.Body>
                        <Card withBorder padding="md" mt="sm">
                            <Text fw={500} mb="sm">
                                {translate('Workspace')} : {selectedCompanyName}
                            </Text>
                            <Text fw={500} mb="sm">
                                {translate('Project')} : {selectedProjectName}
                            </Text>

                            <div className="flex flex-wrap gap-4 mb-4">
                                {currentMemberData && currentMemberData.length > 0 && currentMemberData.map((member) => (
                                    <div
                                        key={member?.id}
                                        className="flex items-center justify-between gap-2"
                                        style={{ backgroundColor: '#EBF1F4', padding: '5px 10px', borderRadius: '5px' }}
                                    >
                                        {/*<Avatar src={member?.name} size={28} radius={22} />*/}
                                        <UserAvatarSingle user={member} size={32} />
                                        <Text size="sm" fw={100} c="#202020">
                                            {member?.name}
                                        </Text>
                                        <button onClick={() => handleDeleteCurrentMember(member?.id)}>
                                            <IconX size={16} color="#202020" />
                                        </button>
                                    </div>
                                ))}
                            </div>
                            <Grid>
                                {/* Search Input */}
                                <Grid.Col span={6}>
                                    <TextInput
                                        leftSection={<IconSearch size={16} />}
                                        placeholder={translate('Quick search member')}
                                        mt="md"
                                        value={searchValue}
                                        onChange={handleSearchInputChange}
                                    />
                                </Grid.Col>
                                <Grid.Col span={6}>
                                    <TextInput
                                        placeholder={translate('Invite By Email')}
                                        mt="md"
                                        value={inviteEmail}
                                        onChange={handleInviteInputChange}
                                        rightSection={
                                            <Button variant="filled" color="#39758D"
                                                size='sm'
                                                radius='sm'
                                                disabled={!isEmailValid || inviteLoading}
                                                loading={inviteLoading}
                                                loaderProps={{ type: 'dots' }}
                                                onClick={() => handleSendInvite(inviteEmail)}
                                                style={{
                                                    padding: '0px 10px',
                                                    height: '28px'
                                                }}
                                            >
                                                {translate('Invite')}
                                            </Button>
                                        }
                                        rightSectionWidth={60}
                                    />
                                </Grid.Col>
                            </Grid>


                            <Text size="lg" c="#000" mt={10} fw={600} ta="center">
                                {translate('Wordpress Users')}
                            </Text>

                            <ScrollArea h={220} scrollbarSize={6}>
                                {filteredMembers && filteredMembers.length === 0 && (
                                    <div className="py-4 text-center">
                                        <Text size="sm" c="#555">{translate('No members found')}</Text>
                                    </div>
                                )}
                                {/* User List */}
                                {filteredMembers &&
                                    filteredMembers.length > 0 &&
                                    filteredMembers.map((member) => {
                                        const projectRole = (member.project_roles || []).find(
                                            (r) => parseInt(r.project_id) === parseInt(selectedProjectId)
                                        );
                                        const isSuperAdmin = member.llc_roles?.some(role => role.slug === "superadmin");
                                        const isWpAdmin = member.roles.includes("administrator");

                                        return (
                                            <div
                                                key={member?.id}
                                                className="grid grid-cols-[1fr_170px_80px] items-center gap-4 py-3 border-b border-gray-200 hover:bg-gray-50 transition"
                                            >
                                                {/* COLUMN 1: Avatar + Info */}
                                                <div className="flex items-center gap-3 min-w-0">
                                                    <UserAvatarSingle user={member} size={38} />

                                                    <div className="min-w-0">
                                                        <Text size="sm" fw={700} c="#202020" lineClamp={1}>
                                                            {member?.name}
                                                        </Text>

                                                        <Text size="xs" c="#555" fw={400} lineClamp={1}>
                                                            {member?.email}
                                                        </Text>

                                                         {(isSuperAdmin || isWpAdmin) && (
                                                            <Text
                                                                size="xs"
                                                                fw={500}
                                                                className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 mt-1 w-fit"
                                                            >
                                                                {isSuperAdmin ? "Superadmin" : "WP Admin"}
                                                            </Text>
                                                        )}

                                                        {!isSuperAdmin && !isWpAdmin && projectRole && (
                                                            <Text
                                                                size="xs"
                                                                fw={500}
                                                                className="px-2 py-0.5 rounded bg-gray-200 text-gray-700 mt-1 w-fit"
                                                            >
                                                                {projectRole.name}
                                                            </Text>
                                                        )}
                                                    </div>
                                                </div>

                                                {/* COLUMN 2: Select Role */}
                                                <div className="flex justify-end"
                                                    onClick={(e) => e.stopPropagation()}
                                                    onMouseDown={(e) => e.stopPropagation()}
                                                >
                                                    <Select
                                                        placeholder={translate("Select Role")}
                                                        searchable
                                                        allowDeselect={false}
                                                        size="sm"
                                                        className="min-w-[100px] w-full"
                                                        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={(v) => handleProjectRoleChange(member?.id, v)}
                                                        disabled={addedMembers.includes(member?.id) && true}
                                                    />
                                                </div>

                                                {/* COLUMN 3: Action Buttons */}
                                                <div className="flex items-center gap-2 justify-start">

                                                    {/* Change button (only when member already added) */}
                                                    {/* {!isSuperAdmin && addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (

                                                            <ActionIcon variant="filled" color="#4A4A4A" size="md" aria-label="Settings"
                                                                onClick={() => handleChangeProjectRole(member)}
                                                                title={translate('Edit Member Role')}
                                                            >
                                                                <IconPencil style={{ width: '70%', height: '70%' }} stroke={1.5} />
                                                            </ActionIcon>
                                                        )} */}

                                                    {/* Remove button */}
                                                    {addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (
                                                            <Button
                                                                radius="sm"
                                                                height={20}
                                                                style={{
                                                                    backgroundColor: "#f00f00",
                                                                    color: "#fff",
                                                                    fontWeight: 400,
                                                                    padding: "5px 0px",
                                                                    width: "100px",
                                                                }}
                                                                size="sm"
                                                                marginLeft={2}
                                                                onClick={() => handleDeleteCurrentMember(member?.id)}
                                                            >
                                                                {translate('Remove')}
                                                            </Button>
                                                        )}

                                                    {/* Add button */}
                                                    {!addedMembers.includes(member?.id) &&
                                                        hasPermission(
                                                            loggedInUser,
                                                            ['create-project', 'edit-project'],
                                                            "project"
                                                        ) && (
                                                            <Button
                                                                radius="sm"
                                                                height={20}
                                                                style={{
                                                                    backgroundColor: "#39758D",
                                                                    color: "#fff",
                                                                    fontWeight: 400,
                                                                    padding: "5px 0px",
                                                                    width: "100px",
                                                                }}
                                                                size="sm"
                                                                marginLeft={2}
                                                                onClick={() => handleButtonClick(member)}
                                                            >
                                                                {translate('Add')}
                                                            </Button>
                                                        )}
                                                </div>
                                            </div>
                                        );
                                })}

                            </ScrollArea>
                        </Card>
                    </Modal.Body>
                </Modal.Content>
            </Modal.Root>

            <Modal.Root
                opened={workspaceCreateModalOpen}
                onClose={closeWorkspaceCreateModal}
                centered
                size={575}
            >
                <Modal.Overlay />
                <Modal.Content radius={15}>
                    <Modal.Header px={20} py={10}>

                        {/* <Modal.CloseButton size={`lg`} icon={isEditWorkspace ? translate('Update') : translate('Create')} className={`!ml-2 !h-[36px] !border-0 !w-[70px] !bg-[#ED7D31] !text-white`} /> */}
                        <Group position="apart" justify='space-between' align='items-center' style={{ width: '100%' }}>
                            <Title order={5}>{isEditWorkspace ? translate('Edit Workspace') : translate('Create Workspace')}</Title>
                            <Button variant="filled" color="orange" mr={10}
                                onClick={handleWorkspaceCreation}
                                size='sm'
                            >
                                {isEditWorkspace ? translate('Update') : translate('Create')}
                            </Button>
                        </Group>
                        <Modal.CloseButton />
                    </Modal.Header>
                    <Modal.Body>
                        <Card withBorder padding="md" mt="sm">

                            <TextInput
                                ref={workspaceInputRef}
                                withAsterisk
                                label={translate('Workspace name')}
                                placeholder={translate('Workspace name')}
                                mb="md"
                                radius="md"
                                size="md"
                                value={workspaceName}
                                onChange={(e) => handleWorkspaceName(e)}
                                styles={{
                                    label: { marginBottom: '8px', fontSize: '15px' },
                                }}
                                error={workspaceError}
                            />

                        </Card>
                    </Modal.Body>
                </Modal.Content>
            </Modal.Root>


            <MemberEditDrawer />
            <ProjectSettingsTabsModal
                opened={projectSettingsModalOpen}
                onClose={() => setProjectSettingsModalOpen(false)}
                activeTab={projectSettingsActiveTab}
                workspaceName={projectSettingsWorkspaceName}
                projectName={projectSettingsProjectName}
                projectId={projectId}
            />
        </Box>
    );
};
export default SettingsPanel;