import React, { Fragment, useEffect, useState, useMemo } from 'react';
import {
    Accordion,
    ActionIcon,
    Box,
    Button,
    Divider,
    Flex,
    Grid,
    Popover,
    ScrollArea,
    Select,
    Text, TextInput,
    Tooltip,
} from '@mantine/core';

// Design tokens — matching FilterTasksPopover
const T = {
    white:    '#FFFFFF',
    border:   '#E2E8F0',
    text:     '#1A202C',
    muted:    '#64748B',
    light:    '#94A3B8',
    teal:     '#39758D',
    tealLt:   '#EBF1F4',
    orange:   '#ED7D31',
    bg:       '#F4F6F8',
    radius:   '12px',
    radiusSm: '6px',
};

const fieldStyles = {
    input: {
        height: '32px',
        minHeight: '32px',
        padding: '0 10px 0 30px',
        fontSize: '13px',
        borderRadius: '6px',
        border: '1px solid #E2E8F0',
        color: '#1A202C',
    },
    dropdown: { position: 'fixed', zIndex: 99999 },
};
import {
    IconMail,
    IconPencil,
    IconPlus, IconSearch,
    IconTrash,
    IconUsersPlus
} from '@tabler/icons-react';
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from "react-redux";
import {
    updateBoardMembers,
    fetchTasksByProject,
    fetchProjectOverview,
} from "../../Settings/store/taskSlice";
import { hasPermission, useProjectPermissions } from "../../ui/permissions";
import { editProject, changeMemberProjectRole } from "../../Settings/store/projectSlice";
import { createUser, fetchAllMembers, fetchAllInvitedMember, openProfileDrawer, fetchUser, updateIsLoading } from "../../../store/auth/userSlice";
import UserAvatarSingle from "../../ui/UserAvatarSingle";
import UsersAvatarGroup from "../../ui/UsersAvatarGroup";
import { modals } from "@mantine/modals";
import { translate } from '../../../utils/i18n';
import MemberEditDrawer from '../../Profile/MemberEditDrawer';
import { fetchAllRoles } from '../../../store/auth/roleSlice';
import { showNotification } from '@mantine/notifications';
import { set } from 'date-fns';

const MemberAddRemovePopover = ({ isOpened, setIsOpened }) => {
    const dispatch = useDispatch();

    const { id } = useParams();
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { tasks } = useSelector((state) => state.settings.task);
    const { allMembers, allInvitedMembers } = useSelector((state) => state.auth.user);
    const { boardMembers, projectInfo } = useSelector((state) => state.settings.task);
    const projectPermissions = useProjectPermissions(projectInfo?.id);
    const projectInvitedMembers = projectInfo?.invitedMembers || [];
    const { roles } = useSelector((state) => state.auth.role);
    const [selectedMembers, setSelectedMembers] = useState(boardMembers || []);
    const [hasFetchedMembers, setHasFetchedMembers] = useState(false);

    const [addedMembers, setAddedMembers] = useState(boardMembers && boardMembers.length > 0 ? boardMembers.map((member) => parseInt(member.id)) : []);
    const [assignLoadingId, setAssignLoadingId] = useState(null);
    const [assignEditLoadingId, setAssignEditLoadingId] = useState(null);
    const [removeLoadingId, setRemoveLoadingId] = useState(null);

    const [searchValue, setSearchValue] = useState('');
    const [inviteEmail, setInviteEmail] = useState('');
    const [inviteLoading, setInviteLoading] = useState(false);
    const [memberRoles, setMemberRoles] = useState({});

    useEffect(() => {
        setHasFetchedMembers(false); // Reset flag when project changes

        if (isOpened) {
            dispatch(fetchAllRoles());
            dispatch(fetchAllMembers());
            dispatch(fetchAllInvitedMember());
            setHasFetchedMembers(true);
        }
    }, [isOpened, id, dispatch]);

    const filteredMembers = useMemo(() => {
        if (!allMembers) return [];
        const lower = searchValue.toLowerCase();
        const filtered = allMembers.filter(
            member =>
                member.name.toLowerCase().includes(lower) ||
                member.email.toLowerCase().includes(lower)
        );
        return filtered.sort((a, b) => {
            const aAdded = addedMembers.includes(a.id);
            const bAdded = addedMembers.includes(b.id);
            if (aAdded && !bAdded) return -1;
            if (!aAdded && bAdded) return 1;
            return a.name.localeCompare(b.name);
        });
    }, [allMembers, searchValue, addedMembers]);

    useEffect(() => {
        setSelectedMembers(boardMembers || []);
        setAddedMembers(boardMembers && boardMembers.length > 0 ? boardMembers.map((member) => parseInt(member.id)) : []);
    }, [projectInfo, boardMembers]);

    // Reset memberRoles when project ID changes
    useEffect(() => {
        setMemberRoles({});
    }, [id]);

    const handleAssignButtonClick = (member) => {
        setAssignLoadingId(member.id);
        setRemoveLoadingId(null);
        // Toggle between assigning and removing a member
        var updatedMembers = [];
        const index = selectedMembers.findIndex((selectedMember) => parseInt(selectedMember.id) === parseInt(member.id));
        if (index === -1) {
            const assignAfterMembers = [...selectedMembers, member];
            updatedMembers = assignAfterMembers;

            setSelectedMembers(assignAfterMembers);
        } else {
            const deletedAfterMembers = selectedMembers.filter((selectedMember) => parseInt(selectedMember.id) !== parseInt(member.id));
            updatedMembers = deletedAfterMembers;

            setSelectedMembers(deletedAfterMembers);
        }

        if (id && id !== 'undefined' && updatedMembers) {
            dispatch(editProject({ id: id, data: { 'members': updatedMembers, 'updated_by': loggedUserId } })).then((response) => {

                if (response.payload.status === 200) {
                    const updatedMembersResult = response.payload.data.members || [];
                    dispatch(updateBoardMembers(updatedMembersResult));
                    dispatch(fetchAllMembers());
                    setSelectedMembers(updatedMembersResult);
                    setAddedMembers(updatedMembersResult.map((m) => parseInt(m.id)));

                    // Check if the assigned user is a WordPress administrator
                    const assignedMember = updatedMembersResult.find((m) => m.id === member.id);
                    if (assignedMember && assignedMember.is_wp_admin) {
                        setAssignLoadingId(null);
                        setRemoveLoadingId(null);
                        showNotification({
                            title: 'Superadmin Assigned',
                            message: `${assignedMember.name} is now a superadmin in LazyTasks.`,
                            color: 'blue',
                            autoClose: 3000,
                        });
                    }

                }

            })
                .catch(() => {
                    setAssignLoadingId(null);
                    setRemoveLoadingId(null);
                });
        } else {
            setAssignLoadingId(null);
            setRemoveLoadingId(null);
        }
    };

    const handleRemoveButtonClick = (member) => {
        setRemoveLoadingId(member.id);
        setAssignLoadingId(null);
        const isMemberAssignedToTask = tasks && tasks.allTasks && Object.values(tasks.allTasks).length > 0 && Object.values(tasks.allTasks).some((task) => task.assignedTo_id === member.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 === member.id.toString()));
        setRemoveLoadingId(null);
        if (isMemberAssignedToTask || isMemberAssignedToSubTask) {
            setRemoveLoadingId(null);
            modals.open({
                withCloseButton: false,
                centered: true,
                zIndex: 10001,
                children: (
                    <Fragment>
                        <Text size="sm">
                            {translate('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={() => {
                                setIsOpened(true)
                                modals.closeAll()
                            }} mt="md">
                                {translate('Ok')}
                            </Button>
                        </div>
                    </Fragment>
                ),
            });

            return false;

        }

        // Toggle between assigning and removing a member
        var updatedMembers = [];
        const index = selectedMembers.findIndex((selectedMember) => parseInt(selectedMember.id) === parseInt(member.id));
        if (index === -1) {
            const assignAfterMembers = [...selectedMembers, member];
            updatedMembers = assignAfterMembers;

            setSelectedMembers(assignAfterMembers);
        } else {
            const deletedAfterMembers = selectedMembers.filter((selectedMember) => parseInt(selectedMember.id) !== parseInt(member.id));
            updatedMembers = deletedAfterMembers;

            setSelectedMembers(deletedAfterMembers);
        }

        if (id && id !== 'undefined' && updatedMembers) {
            dispatch(editProject({ id: id, data: { 'members': updatedMembers, deleted_member_id: member.id, 'updated_by': loggedUserId } })).then((response) => {

                if (response.payload.status === 200) {
                    const updatedMembersResult = response.payload.data.members || [];
                    dispatch(updateBoardMembers(updatedMembersResult));
                    dispatch(fetchAllMembers());
                    setSelectedMembers(updatedMembersResult);
                    setAddedMembers(updatedMembersResult.map((m) => parseInt(m.id)));
                    setMemberRoles(prev => ({ ...prev, [member.id]: null }));

                }

            })
                .catch(() => {
                    setRemoveLoadingId(null);
                    setAssignLoadingId(null);
                });
        } else {
            setRemoveLoadingId(null);
            setAssignLoadingId(null);
        }
    };

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

    const [isEmailValid, setIsEmailValid] = useState(false);

    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 validateEmail = (email) => {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
    };

    const handleSendInvite = (email) => {
        if (isEmailAlreadyInvited(email)) {
            showNotification({
                id: 'load-data',
                loading: false,
                title: 'User',
                message: translate('This email is already invited.'),
                autoClose: 2000,
                disallowClose: true,
                color: 'red',
            });
            return;
        }
        const roleId = memberRoles["invite"];
        if (!roleId) {
            showNotification({
                title: 'Role Required',
                message: 'Please select a role for the invited member.',
                color: 'red',
                autoClose: 3000,
            });
            return;
        }
        // Check if this email belongs to someone invited to another project but not yet accepted.
        // They won't appear in the browseable list, but we still allow adding them with a warning.
        const invitedSystemWide = allInvitedMembers &&
            allInvitedMembers.find(m => m.email.toLowerCase() === email.toLowerCase());

        if (invitedSystemWide) {
            showNotification({
                title: 'Pending Invitation',
                message: 'This person has been invited but hasn\'t accepted yet. They will still be added to this project.',
                color: 'yellow',
                autoClose: 5000,
            });
            const invitedMemberWithRole = { ...invitedSystemWide, role_id: roleId };
            const members = [
                ...selectedMembers,
                ...projectInvitedMembers.filter(inv => !selectedMembers.some(m => m.id === inv.id)),
                invitedMemberWithRole,
            ];
            setInviteLoading(true);
            dispatch(editProject({
                id: projectInfo ? projectInfo.id : id,
                data: { members, updated_by: loggedInUser ? loggedInUser.id : loggedUserId }
            })).then((res) => {
                if (res.payload?.status === 200) {
                    dispatch(fetchTasksByProject({ id }));
                    setInviteEmail('');
                    setIsEmailValid(false);
                    setMemberRoles(prev => ({ ...prev, invite: null }));
                }
                setInviteLoading(false);
            });
            return;
        }

        setInviteLoading(true);
        const values = {
            email: email,
            loggedInUserId: loggedInUser ? loggedInUser.id : loggedUserId
        }
        dispatch(createUser(values)).then((response) => {
            if (response.payload && response.payload.status && response.payload.status === 200) {
                const invitedMemberWithRole = {
                    ...response.payload.data,
                    role_id: roleId,
                };
                const members = [
                    ...selectedMembers,
                    ...projectInvitedMembers.filter(invited => !selectedMembers.some(m => m.id === invited.id)),
                    invitedMemberWithRole,
                ];

                dispatch(editProject({
                    id: projectInfo ? projectInfo.id : id,
                    data: { 'members': members, 'updated_by': loggedInUser ? loggedInUser.id : loggedUserId }
                })).then((res) => {
                    if (res.payload && res.payload.status && res.payload.status === 200) {
                        dispatch(fetchAllMembers());
                        dispatch(fetchTasksByProject({ id: id }));
                        setInviteEmail('');
                        setIsEmailValid(false);
                        setMemberRoles(prev => ({
                            ...prev,
                            invite: null
                        }));
                        showNotification({
                            id: 'load-data',
                            loading: true,
                            title: 'User',
                            message: response.payload && response.payload.message && response.payload.message,
                            autoClose: 2000,
                            disallowClose: true,
                            color: 'green',
                        });
                    }
                    setInviteLoading(false);
                });
            }
        }).finally(() => {

        });
    }


    function shortenEmail(email) {
        if (!email) return '';

        if (email.length <= 25) {
            return email;
        }

        const [namePart, domainPart] = email.split('@');

        const shortName = namePart.length > 6
            ? `${namePart.slice(0, 4)}...`
            : namePart;

        let domain = domainPart || '';
        const domainParts = domain.split('.');

        const domainName = domainParts[0] || '';
        const domainExt = domainParts.slice(1).join('.') || '';

        const shortDomainName = domainName.length > 5
            ? `${domainName.slice(0, 5)}...`
            : domainName;

        return `${shortName}@${shortDomainName}.${domainExt}`;
    }

    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 handleRoleChange = (memberId, roleId) => {
        setMemberRoles(prev => ({
            ...prev,
            [memberId]: roleId,
        }));
    };


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

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

        const memberWithRole = {
            ...member,
            role_id: roleId,
        };
        setAssignLoadingId(member.id);
        const members = [...selectedMembers, memberWithRole];

        dispatch(editProject({ id: projectInfo ? projectInfo.id : id, data: { 'members': members, 'updated_by': loggedUserId } })).then((res) => {
            if (res.payload && res.payload.status && res.payload.status === 200) {
                const updatedMembers = res.payload.data.members || [];
                dispatch(updateBoardMembers(updatedMembers));
                setSelectedMembers(updatedMembers);
                setAddedMembers(updatedMembers.map((m) => parseInt(m.id)));
                dispatch(fetchAllMembers());

                // Check if the assigned user is a WordPress administrator
                const assignedMember = updatedMembers.find((m) => m.id === member.id);
                if (assignedMember && assignedMember.is_wp_admin) {
                    setAssignLoadingId(null);
                    showNotification({
                        title: 'Superadmin Assigned',
                        message: `${assignedMember.name} is now a superadmin in LazyTasks.`,
                        color: 'blue',
                        autoClose: 3000,
                    });
                }
                showNotification({
                    id: 'load-data',
                    loading: true,
                    title: 'Project',
                    message: 'Member added successfully',
                    autoClose: 2000,
                    disallowClose: true,
                    color: 'green',
                });
                setAssignLoadingId(null);
            }
        });
    };

    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: projectInfo ? projectInfo.id : id, data: { 'member': changeMemberWithRole, 'updated_by': loggedUserId } })).then((res) => {
            if (res.payload && res.payload.status && res.payload.status === 200) {
                dispatch(fetchAllMembers());
                setAssignEditLoadingId(null);
                showNotification({
                    id: 'load-data',
                    loading: true,
                    title: 'Project',
                    message: res?.payload?.message || 'Member Role Change successfully',
                    autoClose: 2000,
                    disallowClose: true,
                    color: 'green',
                });
            }
        });

    }

    const canAdd    = hasPermission(loggedInUser, ["manage-project-members"], projectPermissions, "project");
    const canRemove = hasPermission(loggedInUser, ["remove-project-member"], projectPermissions, "project");
    const canInvite =
        hasPermission(loggedInUser, ["invite-user"], projectPermissions, "global") ||
        hasPermission(loggedInUser, ["invite-project-member"], projectPermissions, "project");
    const canAnyAction = canAdd || canRemove || canInvite;

    return (
        <>
            <Popover
                withinPortal={false}
                width={560}
                position="bottom-end"
                shadow={false}
                offset={6}
                opened={isOpened && canAnyAction && projectInfo?.status_name === 'active'}
                onChange={setIsOpened}
                onClose={() => {
                    setIsOpened(false);
                    setMemberRoles({});
                    setSearchValue('');
                    setInviteEmail('');
                }}
            >
                <Popover.Target>
                    <Tooltip withinPortal={false} label={translate("Add Member")} position="top" withArrow>
                        <ActionIcon onClick={() => canAnyAction && setIsOpened(!isOpened)} variant="filled" size={37} radius="xl" color="#ED7D31"
                            aria-label="Add Member"
                            disabled={!canAnyAction}
                            className={`mt-[2px] ${!canAnyAction ? 'opacity-50 !cursor-not-allowed' : 'cursor-pointer'}`}
                        >
                            <IconUsersPlus className=' hover:scale-110' size={24} stroke={1.5} />
                        </ActionIcon>
                    </Tooltip>
                </Popover.Target>
                <Popover.Dropdown style={{
                    padding: 0,
                    border: `1px solid ${T.border}`,
                    borderRadius: T.radius,
                    boxShadow: '0 8px 32px rgba(0,0,0,.12)',
                    overflow: 'hidden',
                }}>
                    {/* Header */}
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        padding: '12px 16px 10px',
                        borderBottom: `1px solid ${T.border}`,
                    }}>
                        <span style={{ fontSize: '13px', fontWeight: 700, color: T.text, display: 'flex', alignItems: 'center', gap: '6px' }}>
                            <IconUsersPlus size={13} stroke={1.5} color={T.teal} />
                            {translate('Add Members')}
                        </span>
                        {boardMembers?.length > 0 && (
                            <span style={{ fontSize: '11px', color: T.muted }}>
                                {boardMembers.length} member{boardMembers.length !== 1 ? 's' : ''} in project
                            </span>
                        )}
                    </div>

                    {/* Body */}
                    <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
                    {canInvite && (<>
                                <Flex align="center" gap="sm">
                                    <TextInput
                                        leftSection={<IconMail size={18} />}
                                        placeholder={translate("Invite By Email")}
                                        value={inviteEmail}
                                        onChange={handleInviteInputChange}
                                        style={{ flex: 1 }}
                                        styles={fieldStyles}
                                        size="sm"
                                    />
                                    <Box
                                        onClick={(e) => e.stopPropagation()}
                                        onMouseDown={(e) => e.stopPropagation()}
                                    >
                                        <Select
                                            placeholder={translate("Select Role")}
                                            searchable
                                            allowDeselect={false}
                                            size="sm"
                                            w={120}
                                            data={
                                                roles?.length
                                                    ? roles
                                                        .filter((role) => role.slug !== "superadmin")
                                                        .map((role) => ({
                                                            value: role.id.toString(),
                                                            label: role.name,
                                                        }))
                                                    : []
                                            }
                                            value={memberRoles["invite"] || null}
                                            onChange={(v) =>
                                                setMemberRoles((prev) => ({
                                                    ...prev,
                                                    ["invite"]: v,
                                                }))
                                            }
                                            styles={fieldStyles}
                                        />
                                    </Box>

                                    <Button
                                        variant="filled"
                                        color="#39758D"
                                        size="sm"
                                        radius="sm"
                                        disabled={!isEmailValid || inviteLoading}
                                        loading={inviteLoading}
                                        loaderProps={{ type: "dots" }}
                                        onClick={() => handleSendInvite(inviteEmail)}
                                        h={36}
                                        px={16}
                                    >
                                        {translate("Invite")}
                                    </Button>

                                </Flex>

                                {projectInvitedMembers && projectInvitedMembers.length > 0 && (
                                <Accordion chevronPosition="right" variant="contained"
                                    mt={12}
                                    classNames={{
                                        content: '!pb-0 !pt-0',
                                    }}
                                >
                                    <Accordion.Item value="invited-members" className="accordion-item !border-solid !border-[#dddddd] !rounded-t-md accordion-item">
                                        <Accordion.Control
                                            className='!bg-[#EBF1F4]'
                                        >
                                            <Text size="sm" fw={700} c="#202020">{projectInvitedMembers.length} people invited</Text>
                                        </Accordion.Control>
                                        <Accordion.Panel>
                                            <ScrollArea
                                                className={`min-w-[380px] max-w-[495px] !pr-1.5 ${projectInvitedMembers && projectInvitedMembers.length > 3 ? "h-[160px]" : ""
                                                    }`}
                                                scrollbarSize={5}
                                            >
                                                <div className="p-0">

                                                    <div className="mt-1">
                                                        {projectInvitedMembers && projectInvitedMembers.length > 0 && projectInvitedMembers.map((member) => {
                                                            const projectRole = (member.project_roles || []).find((r) => parseInt(r.project_id) === parseInt(id));
                                                            return (
                                                                <div key={member.id} className="ml-single flex items-center border-b border-solid border-[#ffffff] py-1.5 justify-between gap-1">
                                                                    {/*<Avatar src={member.avatar} size={40} radius={32} />*/}
                                                                    <UserAvatarSingle user={member} size={32} />
                                                                    <div className="mls-ne ml-2 w-full">
                                                                        <div className="flex items-center gap-1.5">
                                                                            <Text lineClamp={1} size="sm" fw={700} c="#202020">{member.name}</Text>
                                                                            {projectRole && (
                                                                                <span style={{ fontSize: '10px', fontWeight: 500, color: '#39758D', backgroundColor: '#EBF1F4', padding: '1px 8px', borderRadius: '9999px', whiteSpace: 'nowrap', lineHeight: '18px' }}>
                                                                                    {projectRole.name}
                                                                                </span>
                                                                            )}
                                                                        </div>
                                                                        <Text lineClamp={1} size="sm" fw={100} c="#202020">
                                                                            {shortenEmail(member.email)}
                                                                        </Text>
                                                                    </div>
                                                                </div>
                                                            )
                                                        })}
                                                    </div>
                                                </div>
                                            </ScrollArea>
                                        </Accordion.Panel>
                                    </Accordion.Item>
                                </Accordion>
                                )}

                                <Divider my="sm" />

                    </>)}

                    <Grid columns={12} gutter="md">
                        {/* Search Input */}
                        <Grid.Col span={12}>
                            <TextInput
                                leftSection={<IconSearch size={16} />}
                                placeholder={translate('Quick search member')}
                                value={searchValue}
                                onChange={handleSearchInputChange}
                                styles={fieldStyles}
                            />
                        </Grid.Col>
                    </Grid>
                    <Text className={`!mb-2`} mt={6} size="sm" fw={700} c="#202020">{translate('%d people available').replace('%d', filteredMembers && filteredMembers.length > 0 ? filteredMembers.length : 0)}</Text>

                    <ScrollArea className="h-[290px] min-w-[520px] max-w-[520px] !pr-1.5" scrollbarSize={5}>
                        <div className="p-0">

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

                                        return (
                                            <div
                                                key={member.id}
                                                className="flex items-center gap-3 px-2 py-[6px] rounded-lg hover:bg-[#EBF1F4] transition-colors"
                                            >
                                                {/* Avatar */}
                                                <UserAvatarSingle user={member} size={32} />

                                                {/* Name + Email */}
                                                <div className="flex-1 min-w-0">
                                                    <div className="flex items-center gap-1.5 flex-wrap">
                                                        <Text size="xs" fw={600} c={T.text} lineClamp={1}>
                                                            {member.name}
                                                        </Text>
                                                        {(isSuperAdmin || isWpAdmin) && (
                                                            <span style={{ fontSize: '10px', fontWeight: 500, color: T.teal, backgroundColor: T.tealLt, padding: '1px 6px', borderRadius: '9999px', whiteSpace: 'nowrap', lineHeight: '16px' }}>
                                                                {isSuperAdmin ? "Superadmin" : "WP Admin"}
                                                            </span>
                                                        )}
                                                        {!isSuperAdmin && !isWpAdmin && projectRole && (
                                                            <span style={{ fontSize: '10px', fontWeight: 500, color: T.teal, backgroundColor: T.tealLt, padding: '1px 6px', borderRadius: '9999px', whiteSpace: 'nowrap', lineHeight: '16px' }}>
                                                                {projectRole.name}
                                                            </span>
                                                        )}
                                                    </div>
                                                    <Text size="xs" c={T.muted} fw={400} lineClamp={1}>
                                                        {shortenEmail(member.email)}
                                                    </Text>
                                                </div>

                                                {/* Role Select */}
                                                <div
                                                    onClick={(e) => e.stopPropagation()}
                                                    onMouseDown={(e) => e.stopPropagation()}
                                                >
                                                    <Select
                                                        placeholder={translate("Role")}
                                                        searchable
                                                        allowDeselect={false}
                                                        size="xs"
                                                        w={110}
                                                        data={
                                                            roles?.length
                                                                ? roles
                                                                    .filter((role) => role.slug !== "superadmin")
                                                                    .map((role) => ({
                                                                        value: role.id.toString(),
                                                                        label: role.name,
                                                                    }))
                                                                : []
                                                        }
                                                        value={projectRole?.role_id?.toString() || memberRoles[member.id]}
                                                        onChange={(v) => addedMembers.includes(parseInt(member.id)) ? handleChangeProjectRole(member.id, v, member) : handleRoleChange(member.id, v)}
                                                        disabled={!canAdd}
                                                        styles={{ input: { height: '26px', minHeight: '26px', fontSize: '11px', borderRadius: T.radiusSm, border: `1px solid ${T.border}` } }}
                                                    />
                                                </div>

                                                {/* Action Button */}
                                                {addedMembers.includes(parseInt(member.id)) ? (
                                                    <Button
                                                        size="compact-xs"
                                                        radius="sm"
                                                        variant="filled"
                                                        color="red"
                                                        w={64}
                                                        loading={removeLoadingId === member.id}
                                                        loaderProps={{ type: 'dots' }}
                                                        disabled={!canRemove || removeLoadingId === member.id}
                                                        onClick={!canRemove ? undefined : () => handleRemoveButtonClick(member)}
                                                    >
                                                        {translate('Remove')}
                                                    </Button>
                                                ) : (
                                                    <Button
                                                        size="compact-xs"
                                                        radius="sm"
                                                        variant="filled"
                                                        color="#39758D"
                                                        w={64}
                                                        loading={assignLoadingId === member.id}
                                                        loaderProps={{ type: 'dots' }}
                                                        disabled={!canAdd || assignLoadingId === member.id}
                                                        onClick={!canAdd ? undefined : () => handleSaveAddMemberToProject(member)}
                                                    >
                                                        {translate('Add')}
                                                    </Button>
                                                )}
                                            </div>
                                        );
                                    })}

                            </div>
                        </div>
                    </ScrollArea>
                    </div>{/* /Body */}

                </Popover.Dropdown>
            </Popover>
            {hasPermission(loggedInUser, ['remove-project-member', 'manage-users'], projectPermissions, 'project') ? (
                <UsersAvatarGroup users={boardMembers} size={40} maxCount={8}
                    onAvatarClick={(user) => {
                        handleProfileEditDrawer(user.id);
                    }}
                />
            ) : (
                <UsersAvatarGroup users={boardMembers} size={40} maxCount={8} />
            )}

            <MemberEditDrawer />
        </>
    );
}

export default MemberAddRemovePopover;