import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
    TextInput, Select, Modal, Badge, Avatar, Table, ActionIcon, Button, Group, Text, Box, Collapse, Tooltip, Loader,
} from '@mantine/core';
import {
    IconSearch, IconFilter, IconX, IconUserPlus, IconChevronDown, IconChevronUp,
    IconPhone, IconCalendar, IconEdit, IconTrash, IconUserMinus, IconMail, IconPlus,
} from '@tabler/icons-react';
import { showNotification } from '@mantine/notifications';
import { __, _n, sprintf } from '@wordpress/i18n';
import {
    fetchAllMembers, fetchAllInvitedMember, createUser, fetchUser,
    openProfileDrawer,
    removeUserFromProjectThunk, removeUserFromWorkspaceThunk,
    deleteUserPermanentlyThunk, resendInvitationThunk, cancelInvitationThunk,
} from '../../../store/auth/userSlice';
import { fetchAllCompanies } from '../store/companySlice';
import { fetchAllProjects, editProject, changeMemberProjectRole } from '../store/projectSlice';
import { fetchAllRoles } from '../../../store/auth/roleSlice';
import { getUserProjectTaskCount } from '../../../services/AuthService';
import MemberEditDrawer from '../../Profile/MemberEditDrawer';
import { hasPermission } from '../../ui/permissions';
import useAvailableHeight from '../../../utils/useAvailableHeight';

const S = {
    orange: '#ED7D31', orangeDk: '#D46A1E', orangeLt: '#FEF0E6',
    teal: '#39758D', tealLt: '#EBF1F4', tealDk: '#2C5C6E',
    white: '#FFFFFF', bg: '#F4F6F8', border: '#E2E8F0',
    text: '#1A202C', muted: '#64748B', light: '#94A3B8',
    danger: '#EF4444', dangerLt: '#FEE2E2', success: '#10B981', successLt: '#D1FAE5',
    warning: '#F59E0B', warningLt: '#FEF3C7', warningDk: '#92400E',
    radius: 8, radiusSm: 6, radiusLg: 12,
};

const AVATAR_COLORS = ['#39758D','#ED7D31','#8B5CF6','#10B981','#3B82F6','#F59E0B','#EF4444','#06B6D4'];
const getAvatarColor = (id) => AVATAR_COLORS[(parseInt(id) - 1) % AVATAR_COLORS.length];
const getInitials = (u) => {
    const f = u.firstName || u.name?.split(' ')[0] || '';
    const l = u.lastName || u.name?.split(' ')[1] || '';
    return ((f[0] || '') + (l[0] || '')).toUpperCase() || '?';
};

const ManageUsersTabV3 = () => {
    const dispatch = useDispatch();
    const usersScrollRef = useRef(null);
    const { allMembers, allInvitedMembers } = useSelector(s => s.auth.user);
    const { loggedInUser } = useSelector(s => s.auth.session);
    const { companies } = useSelector(s => s.settings.company);
    const { projects } = useSelector(s => s.settings.project);
    const { roles } = useSelector(s => s.auth.role);
    const { projects: memberProjects } = useSelector(s => s.auth.permissions);

    // Read workspace param from URL hash (set by Workspace tab's "View All Members" link)
    const getInitialWorkspaceFilter = () => {
        try {
            const hash = window.location.hash;
            const qs = hash.split('?')[1];
            if (qs) {
                const params = new URLSearchParams(qs);
                return params.get('workspace') || null;
            }
        } catch { /* ignore */ }
        return null;
    };

    const [search, setSearch] = useState('');
    const [filterWorkspace, setFilterWorkspace] = useState(getInitialWorkspaceFilter);
    const [filterProject, setFilterProject] = useState(null);
    const [filterStatus, setFilterStatus] = useState(null);
    const [expandedUserId, setExpandedUserId] = useState(null);
    const [loading, setLoading] = useState(true);
    const usersMaxH = useAvailableHeight(usersScrollRef, [loading]);
    const leftPanelRef = useRef(null);
    const [rightMinH, setRightMinH] = useState(0);

    useEffect(() => {
        if (leftPanelRef.current) {
            setRightMinH(leftPanelRef.current.offsetHeight);
        }
    }, [expandedUserId]);

    // Invite modal
    const [inviteOpen, setInviteOpen] = useState(false);
    const [inviteEmail, setInviteEmail] = useState('');
    const [inviteFirstName, setInviteFirstName] = useState('');
    const [inviteLastName, setInviteLastName] = useState('');
    const [inviteProject, setInviteProject] = useState(null);
    const [inviteRole, setInviteRole] = useState(null);
    const [inviteLoading, setInviteLoading] = useState(false);

    // Confirmation modals
    const [removeProjectModal, setRemoveProjectModal] = useState(null); // { user, project, taskCount }
    const [removeWorkspaceModal, setRemoveWorkspaceModal] = useState(null); // user
    const [deleteUserModal, setDeleteUserModal] = useState(null); // user
    const [confirmInput, setConfirmInput] = useState('');
    const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(null);

    // Add to project form
    const [addProjectUserId, setAddProjectUserId] = useState(null);
    const [addProjectId, setAddProjectId] = useState(null);
    const [addProjectRoleId, setAddProjectRoleId] = useState(null);

    // Per-action loading states
    const [addProjectLoading, setAddProjectLoading] = useState(false);
    const [roleChangeLoading, setRoleChangeLoading] = useState(null); // projectId_memberId key
    const [removeProjectLoading, setRemoveProjectLoading] = useState(false);
    const [removeWorkspaceLoading, setRemoveWorkspaceLoading] = useState(false);
    const [resendLoading, setResendLoading] = useState(null); // userId
    const [cancelLoading, setCancelLoading] = useState(null); // userId

    // Initial data fetch
    useEffect(() => {
        Promise.all([
            dispatch(fetchAllMembers()),
            dispatch(fetchAllInvitedMember()),
            dispatch(fetchAllCompanies()),
            dispatch(fetchAllProjects()),
            dispatch(fetchAllRoles()),
        ]).then(() => setLoading(false));
    }, [dispatch]);

    // Combine active + pending users
    const combinedUsers = useMemo(() => {
        const activeIds = new Set((allMembers || []).map(u => String(u.id)));
        const active = (allMembers || []).map(u => ({ ...u, _status: 'active' }));
        const pending = (allInvitedMembers || [])
            .filter(u => !activeIds.has(String(u.id)))
            .map(u => ({ ...u, _status: 'pending' }));
        return [...active, ...pending];
    }, [allMembers, allInvitedMembers]);

    // Workspace options
    const workspaceOptions = useMemo(() =>
        (companies || []).map(c => ({ value: String(c.id), label: c.name })),
    [companies]);

    // Project options (cascading from workspace)
    const projectOptions = useMemo(() => {
        let filtered = projects || [];
        if (filterWorkspace) {
            filtered = filtered.filter(p => String(p.company_id) === filterWorkspace);
        }
        return filtered.map(p => ({ value: String(p.id), label: p.name }));
    }, [projects, filterWorkspace]);

    // Role options (exclude superadmin)
    const roleOptions = useMemo(() =>
        (roles || []).filter(r => r.slug !== 'superadmin').map(r => ({ value: String(r.id), label: r.name })),
    [roles]);

    // Get workspace names for a user
    const getUserWorkspaces = useCallback((u) => {
        const ws = new Set();
        (u.project_roles || []).forEach(pr => {
            const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
            if (proj) {
                const comp = (companies || []).find(c => String(c.id) === String(proj.company_id));
                if (comp) ws.add(comp.name);
            }
        });
        return ws;
    }, [projects, companies]);

    // Sort helper — alphabetical by first+last name
    const sortAlpha = (a, b) => {
        const nameA = `${a.firstName || ''} ${a.lastName || ''}`.trim().toLowerCase();
        const nameB = `${b.firstName || ''} ${b.lastName || ''}`.trim().toLowerCase();
        return nameA.localeCompare(nameB);
    };

    // Filter logic
    const filteredUsers = useMemo(() => {
        return combinedUsers.filter(u => {
            if (search) {
                const hay = `${u.firstName || ''} ${u.lastName || ''} ${u.email || ''} ${u.name || ''}`.toLowerCase();
                if (!hay.includes(search.toLowerCase())) return false;
            }
            if (filterStatus) {
                if (u._status !== filterStatus) return false;
            }
            if (filterWorkspace) {
                const userWs = getUserWorkspaces(u);
                const wsName = (companies || []).find(c => String(c.id) === filterWorkspace)?.name;
                if (!wsName || !userWs.has(wsName)) return false;
            }
            if (filterProject) {
                const hasProject = (u.project_roles || []).some(pr => String(pr.project_id) === filterProject);
                if (!hasProject) return false;
            }
            return true;
        });
    }, [combinedUsers, search, filterStatus, filterWorkspace, filterProject, getUserWorkspaces, companies]);

    // Group into active (sorted A-Z) then pending (sorted A-Z)
    const activeUsers = useMemo(() => filteredUsers.filter(u => u._status === 'active').sort(sortAlpha), [filteredUsers]);
    const pendingUsers = useMemo(() => filteredUsers.filter(u => u._status === 'pending').sort(sortAlpha), [filteredUsers]);

    const hasActiveFilters = filterWorkspace || filterProject || filterStatus;

    const clearFilters = () => {
        setFilterWorkspace(null);
        setFilterProject(null);
        setFilterStatus(null);
    };

    // Global invite-user permission lets user invite from anywhere
    const canInviteGlobal = hasPermission(loggedInUser, ['invite-user'], null, 'global');

    // Projects where logged-in user can invite members (for Invite User modal)
    const invitableProjects = useMemo(() => (projects || []).filter(p => {
        if (String(p.status) !== '1') return false;
        if (canInviteGlobal) return true;
        const perms = memberProjects[String(p.id)]?.permissions ?? [];
        return hasPermission(loggedInUser, ['invite-project-member'], perms, 'project');
    }), [projects, memberProjects, loggedInUser, canInviteGlobal]);

    // Check if user is self or WP admin
    const isSelf = (u) => String(u.id) === String(loggedInUser?.id);
    const isWpAdmin = (u) => u.roles?.includes('administrator');
    const isSuperadmin = (u) => u.llc_roles?.some(r => r.slug === 'superadmin');
    const loggedInIsWpAdmin = loggedInUser?.roles?.includes('administrator');

    // Get workspace IDs + names for a user (for workspace picker)
    const getUserWorkspaceList = useCallback((u) => {
        const wsMap = new Map();
        (u.project_roles || []).forEach(pr => {
            const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
            if (proj) {
                const comp = (companies || []).find(c => String(c.id) === String(proj.company_id));
                if (comp && !wsMap.has(String(comp.id))) {
                    wsMap.set(String(comp.id), comp.name);
                }
            }
        });
        return Array.from(wsMap, ([id, name]) => ({ id, name }));
    }, [projects, companies]);

    // ── Handlers ──

    const handleInvite = async () => {
        if (!inviteEmail) {
            showNotification({ message: __( 'Email is required', 'lazytasks-project-task-management' ), color: 'red' });
            return;
        }
        setInviteLoading(true);
        const payload = {
            email: inviteEmail,
            firstName: inviteFirstName,
            lastName: inviteLastName,
            loggedInUserId: loggedInUser?.id,
            roles: [],
        };
        const res = await dispatch(createUser(payload));
        if (res.payload?.status === 200 || res.payload?.id) {
            // If project selected, add to project
            let projectAddFailed = false;
            if (inviteProject && inviteRole) {
                const targetProject = (projects || []).find(p => String(p.id) === String(inviteProject));
                const currentMembers = targetProject?.members || [];
                const newUserId = res.payload?.data?.id || res.payload?.id;
                const updatedMembers = [...currentMembers, { id: newUserId, role_id: parseInt(inviteRole) }];
                const projRes = await dispatch(editProject({
                    id: parseInt(inviteProject),
                    data: { members: updatedMembers, updated_by: loggedInUser?.id }
                }));
                if (!projRes.payload?.status || projRes.payload.status !== 200) {
                    projectAddFailed = true;
                }
            }
            showNotification({
                message: projectAddFailed
                    ? sprintf(
                        /* translators: %s: invited user's email address */
                        __( 'Invitation sent to %s, but failed to add to project.', 'lazytasks-project-task-management' ),
                        inviteEmail
                    )
                    : sprintf(
                        /* translators: %s: invited user's email address */
                        __( 'Invitation sent to %s', 'lazytasks-project-task-management' ),
                        inviteEmail
                    ),
                color: projectAddFailed ? 'orange' : 'green',
            });
            setInviteOpen(false);
            setInviteEmail(''); setInviteFirstName(''); setInviteLastName('');
            setInviteProject(null); setInviteRole(null);
            dispatch(fetchAllMembers());
            dispatch(fetchAllInvitedMember());
        } else {
            showNotification({ message: res.payload?.message || __( 'Failed to send invitation', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setInviteLoading(false);
    };

    const handleOpenRemoveProject = async (user, projectRole) => {
        try {
            const res = await getUserProjectTaskCount(user.id, projectRole.project_id);
            setRemoveProjectModal({
                user,
                project: projectRole,
                taskCount: res?.task_count || 0,
                projectName: (projects || []).find(p => String(p.id) === String(projectRole.project_id))?.name || 'Unknown',
            });
        } catch {
            setRemoveProjectModal({
                user,
                project: projectRole,
                taskCount: 0,
                projectName: (projects || []).find(p => String(p.id) === String(projectRole.project_id))?.name || 'Unknown',
            });
        }
    };

    const handleConfirmRemoveProject = async () => {
        const { user, project } = removeProjectModal;
        setRemoveProjectLoading(true);
        const res = await dispatch(removeUserFromProjectThunk({ userId: user.id, projectId: project.project_id }));
        if (res.payload?.status === 200) {
            showNotification({ message: res.payload.message, color: 'green' });
            dispatch(fetchAllMembers());
        } else {
            showNotification({ message: res.payload?.message || __( 'Failed', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setRemoveProjectLoading(false);
        setRemoveProjectModal(null);
    };

    const handleConfirmRemoveWorkspace = async () => {
        if (!selectedWorkspaceId) return;
        setRemoveWorkspaceLoading(true);
        const res = await dispatch(removeUserFromWorkspaceThunk({ userId: removeWorkspaceModal.id, companyId: selectedWorkspaceId }));
        if (res.payload?.status === 200) {
            showNotification({ message: res.payload.message, color: 'green' });
            dispatch(fetchAllMembers());
        } else {
            showNotification({ message: res.payload?.message || __( 'Failed', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setRemoveWorkspaceLoading(false);
        setRemoveWorkspaceModal(null);
        setSelectedWorkspaceId(null);
        setConfirmInput('');
    };

    const handleDeleteFromLazyTasks = async () => {
        const res = await dispatch(deleteUserPermanentlyThunk({ userId: deleteUserModal.id, deleteFromWordpress: false }));
        if (res.payload?.status === 200) {
            showNotification({ message: res.payload.message, color: 'green' });
            dispatch(fetchAllMembers());
            dispatch(fetchAllInvitedMember());
        } else {
            showNotification({ message: res.payload?.message || __( 'Failed', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setDeleteUserModal(null);
        setConfirmInput('');
    };

    const handleDeleteFromWordPress = async () => {
        const res = await dispatch(deleteUserPermanentlyThunk({ userId: deleteUserModal.id, deleteFromWordpress: true }));
        if (res.payload?.status === 200) {
            showNotification({ message: res.payload.message, color: 'green' });
            dispatch(fetchAllMembers());
            dispatch(fetchAllInvitedMember());
        } else {
            showNotification({ message: res.payload?.message || __( 'Failed', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setDeleteUserModal(null);
        setConfirmInput('');
    };

    const handleResendInvitation = async (userId) => {
        setResendLoading(userId);
        const res = await dispatch(resendInvitationThunk(userId));
        if (res.payload?.status === 200) {
            showNotification({ message: __( 'Invitation resent', 'lazytasks-project-task-management' ), color: 'green' });
        } else {
            showNotification({ message: __( 'Failed to resend', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setResendLoading(null);
    };

    const handleCancelInvitation = async (userId) => {
        setCancelLoading(userId);
        const res = await dispatch(cancelInvitationThunk(userId));
        if (res.payload?.status === 200) {
            showNotification({ message: __( 'Invitation cancelled', 'lazytasks-project-task-management' ), color: 'green' });
        } else {
            showNotification({ message: __( 'Failed to cancel', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setCancelLoading(null);
    };

    const handleAddToProject = async (userId) => {
        if (!addProjectId || !addProjectRoleId) {
            showNotification({ message: __( 'Select a project and role', 'lazytasks-project-task-management' ), color: 'red' });
            return;
        }
        setAddProjectLoading(true);
        const targetProject = (projects || []).find(p => String(p.id) === String(addProjectId));
        const currentMembers = targetProject?.members || [];
        const updatedMembers = [...currentMembers, { id: userId, role_id: parseInt(addProjectRoleId) }];
        const res = await dispatch(editProject({
            id: parseInt(addProjectId),
            data: { members: updatedMembers, updated_by: loggedInUser?.id }
        }));
        if (res.payload?.status === 200 || res.payload?.data) {
            showNotification({ message: __( 'User added to project', 'lazytasks-project-task-management' ), color: 'green' });
            dispatch(fetchAllMembers());
            dispatch(fetchAllProjects());
            setAddProjectUserId(null);
            setAddProjectId(null);
            setAddProjectRoleId(null);
        } else {
            showNotification({ message: __( 'Failed to add user to project', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setAddProjectLoading(false);
    };

    const handleRoleChange = async (projectId, memberId, newRoleId) => {
        setRoleChangeLoading(`${projectId}_${memberId}`);
        const res = await dispatch(changeMemberProjectRole({
            id: projectId,
            data: { member: { id: memberId, role_id: parseInt(newRoleId) }, updated_by: loggedInUser?.id },
        }));
        if (res.payload?.status === 200 || res.payload?.data) {
            showNotification({ message: __( 'Role updated', 'lazytasks-project-task-management' ), color: 'green' });
            dispatch(fetchAllMembers());
        } else {
            showNotification({ message: __( 'Failed to update role', 'lazytasks-project-task-management' ), color: 'red' });
        }
        setRoleChangeLoading(null);
    };

    const handleEditProfile = (userId) => {
        dispatch(fetchUser(userId));
        dispatch(openProfileDrawer());
    };

    // ── Render helpers ──

    const formatDate = (d) => {
        if (!d) return '—';
        return new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
    };

    const renderUserRow = (u) => {
        const expanded = expandedUserId === u.id;
        const wsCount = getUserWorkspaces(u).size;
        const projCount = (u.project_roles || []).length;
        const isPending = u._status === 'pending';

        return (
            <React.Fragment key={u.id}>
                <Table.Tr
                    onClick={() => setExpandedUserId(expanded ? null : u.id)}
                    style={{
                        cursor: 'pointer',
                        background: expanded ? '#F0F4F7' : undefined,
                        transition: '150ms ease',
                    }}
                    className="mu-row-hover"
                >
                    <Table.Td>
                        <Group gap={10} wrap="nowrap">
                            <Avatar size={34} radius="xl" color={getAvatarColor(u.id)} style={{ flexShrink: 0 }}>
                                {getInitials(u)}
                            </Avatar>
                            <div>
                                <Text size="sm" fw={600} c={S.text} lh={1.3}>
                                    {u.firstName || ''} {u.lastName || ''}
                                </Text>
                                {isWpAdmin(u) && <Text size="xs" c={S.light} lh={1.3}>{__( "WordPress Administrator", "lazytasks-project-task-management" )}</Text>}
                                {!isWpAdmin(u) && isSuperadmin(u) && <Text size="xs" c={S.orange} lh={1.3}>{__( "Superadmin", "lazytasks-project-task-management" )}</Text>}
                            </div>
                        </Group>
                    </Table.Td>
                    <Table.Td><Text size="sm" c={S.muted}>{u.email}</Text></Table.Td>
                    <Table.Td ta="center">
                        <Text size="sm" fw={600} c={wsCount > 0 ? S.text : S.light}>{wsCount}</Text>
                    </Table.Td>
                    <Table.Td ta="center">
                        <Text size="sm" fw={600} c={projCount > 0 ? S.text : S.light}>{projCount}</Text>
                    </Table.Td>
                    <Table.Td ta="center">
                        {isPending
                            ? <Badge size="sm" variant="light" color="yellow" radius="xl">{__('Pending', 'lazytasks-project-task-management')}</Badge>
                            : <Badge size="sm" variant="light" color="green" radius="xl">{__('Active', 'lazytasks-project-task-management')}</Badge>
                        }
                    </Table.Td>
                    <Table.Td ta="right">
                        {expanded ? <IconChevronUp size={16} color={S.teal} /> : <IconChevronDown size={16} color={S.light} />}
                    </Table.Td>
                </Table.Tr>
                {expanded && (
                    <Table.Tr onClick={(e) => e.stopPropagation()} style={{ background: '#F8FAFC' }}>
                        <Table.Td colSpan={6} p={0} style={{ borderLeft: `3px solid ${S.teal}` }}>
                            {renderExpandedPanel(u)}
                        </Table.Td>
                    </Table.Tr>
                )}
            </React.Fragment>
        );
    };

    const renderExpandedPanel = (u) => {
        const userProjectRoles = u.project_roles || [];
        const isPending = u._status === 'pending';
        const self = isSelf(u);
        const wpAdmin = isWpAdmin(u);
        const superadmin = isSuperadmin(u);

        // Projects user is NOT in (for "Add to Project")
        const userProjectIds = new Set(userProjectRoles.map(pr => String(pr.project_id)));
        const availableProjects = (projects || []).filter(p => {
            if (String(p.status) !== '1') return false;
            if (userProjectIds.has(String(p.id))) return false;
            const perms = memberProjects[String(p.id)]?.permissions ?? [];
            return hasPermission(loggedInUser, ['manage-project-members'], perms, 'project');
        });

        return (
            <div style={{ display: 'flex', gap: 20, padding: 20 }}>
                {/* Profile Card */}
                <div ref={leftPanelRef} style={{ width: 260, flexShrink: 0, background: S.white, borderRadius: S.radiusLg, border: `1px solid ${S.border}`, padding: 16, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', alignSelf: 'flex-start' }}>
                    <div>
                        <Group gap={10} mb={12}>
                            <Avatar size={44} radius="xl" color={getAvatarColor(u.id)}>{getInitials(u)}</Avatar>
                            <div>
                                <Text size="sm" fw={700} c={S.text}>{u.firstName || ''} {u.lastName || ''}</Text>
                                <Text size="xs" c={S.muted}>{u.email}</Text>
                            </div>
                        </Group>
                        <div style={{ fontSize: 13, color: S.muted, display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 12 }}>
                            <Group gap={6}><IconPhone size={14} /><Text size="xs">{u.phoneNumber || '—'}</Text></Group>
                            <Group gap={6}><IconCalendar size={14} /><Text size="xs">{sprintf( /* translators: %s is a formatted date */ __( 'Joined %s', 'lazytasks-project-task-management' ), formatDate(u.created_at) )}</Text></Group>
                        </div>
                    </div>
                    {!isPending && (
                        <Button
                            variant="light" color="teal" size="xs" fullWidth
                            leftSection={<IconEdit size={14} />}
                            onClick={() => handleEditProfile(u.id)}
                            mt={12}
                        >
                            {__( 'Edit Profile', 'lazytasks-project-task-management' )}
                        </Button>
                    )}
                </div>

                {/* Projects Card */}
                <div style={{ flex: 1, background: S.white, borderRadius: S.radiusLg, border: `1px solid ${S.border}`, padding: 16, minHeight: rightMinH || 'auto', display: 'flex', flexDirection: 'column' }}>
                    <div style={{ flex: 1 }}>
                    <Group justify="space-between" mb={8}>
                        <Group gap={6}>
                            <Text size="sm" fw={700} c={S.text}>{__( "Project Memberships", "lazytasks-project-task-management" )}</Text>
                            <Badge size="sm" variant="light" color="teal" radius="xl">{userProjectRoles.length}</Badge>
                        </Group>
                    </Group>

                    {userProjectRoles.length === 0 ? (
                        <Text size="sm" c={S.light} ta="center" py={16}>{__( "Not assigned to any projects", "lazytasks-project-task-management" )}</Text>
                    ) : (() => {
                        // Group projects by workspace
                        const wsGroups = new Map();
                        userProjectRoles.forEach(pr => {
                            const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
                            const comp = proj ? (companies || []).find(c => String(c.id) === String(proj.company_id)) : null;
                            const wsId = comp ? String(comp.id) : '_none';
                            const wsName = comp?.name || 'No Workspace';
                            if (!wsGroups.has(wsId)) wsGroups.set(wsId, { wsId, wsName, roles: [] });
                            wsGroups.get(wsId).roles.push({ ...pr, _proj: proj, _comp: comp });
                        });
                        return (
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                                {Array.from(wsGroups.values()).map(({ wsId, wsName, roles: wsRoles }) => {
                                    const canRemoveWs = loggedInUser?.is_superadmin || loggedInIsWpAdmin || wsRoles.every(pr => {
                                        const perms = memberProjects[String(pr.project_id)]?.permissions ?? [];
                                        return hasPermission(loggedInUser, ['remove-project-member'], perms, 'project');
                                    });
                                    return (
                                    <div key={wsId}>
                                        <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 8px', marginBottom: 2 }}>
                                            <Text size="xs" fw={700} c={S.muted} tt="uppercase" style={{ letterSpacing: 0.5 }}>{wsName}</Text>
                                            {!self && wsId !== '_none' && canRemoveWs && (
                                                <Tooltip label={__( "Remove from workspace", "lazytasks-project-task-management" )} withArrow position="left">
                                                    <ActionIcon variant="subtle" color="red" size="sm"
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            setSelectedWorkspaceId(wsId);
                                                            setRemoveWorkspaceModal(u);
                                                        }}>
                                                        <IconX size={14} />
                                                    </ActionIcon>
                                                </Tooltip>
                                            )}
                                        </div>
                                        <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                                            {wsRoles.map(pr => {
                                                const projPerms = memberProjects[String(pr.project_id)]?.permissions ?? [];
                                                const canRemove = !self && hasPermission(loggedInUser, ['remove-project-member'], projPerms, 'project');
                                                const canChangeRole = !self && hasPermission(loggedInUser, ['manage-project-members'], projPerms, 'project');
                                                return (
                                                    <div key={pr.project_id} style={{
                                                        display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px 6px 16px',
                                                        borderRadius: S.radiusSm, transition: '150ms ease',
                                                    }} className="mu-project-hover">
                                                        <div style={{ width: 8, height: 8, borderRadius: '50%', background: S.teal, flexShrink: 0 }} />
                                                        <Text size="sm" fw={500} style={{ flex: 1 }}>{pr._proj?.name || `Project #${pr.project_id}`}</Text>
                                                        {canChangeRole ? (
                                                            <Select
                                                                size="xs"
                                                                data={roleOptions}
                                                                value={String(pr.role_id)}
                                                                onChange={(val) => handleRoleChange(pr.project_id, u.id, val)}
                                                                onClick={(e) => e.stopPropagation()}
                                                                disabled={roleChangeLoading === `${pr.project_id}_${u.id}`}
                                                                styles={{
                                                                    input: { height: 24, minHeight: 24, fontSize: 11, fontWeight: 600, color: S.tealDk, background: S.tealLt, border: 'none', borderRadius: 20, paddingLeft: 8, paddingRight: 22, width: 110 },
                                                                    wrapper: { width: 'auto' },
                                                                }}
                                                                comboboxProps={{ withinPortal: true }}
                                                            />
                                                        ) : (
                                                            <Badge size="sm" variant="light" color="teal" radius="xl">{pr.role_name || roleOptions.find(r => r.value === String(pr.role_id))?.label || 'Member'}</Badge>
                                                        )}
                                                        {canRemove ? (
                                                            <ActionIcon variant="subtle" color="red" size="sm"
                                                                onClick={(e) => { e.stopPropagation(); handleOpenRemoveProject(u, pr); }}>
                                                                <IconX size={14} />
                                                            </ActionIcon>
                                                        ) : (
                                                            <div style={{ width: 22, flexShrink: 0 }} />
                                                        )}
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                    );
                                })}
                            </div>
                        );
                    })()}

                    </div>

                    {/* Add to Project */}
                    {availableProjects.length > 0 && !isPending && (
                        <div style={{ marginTop: 10 }}>
                            {addProjectUserId === u.id ? (
                                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', padding: 12, border: `1px dashed ${S.border}`, borderRadius: S.radiusSm, background: S.white }}>
                                    <Select size="xs" placeholder={__( "Project...", "lazytasks-project-task-management" )} flex={1}
                                        data={availableProjects.map(p => ({ value: String(p.id), label: p.name }))}
                                        value={addProjectId} onChange={setAddProjectId}
                                        comboboxProps={{ withinPortal: true }}
                                    />
                                    <Select size="xs" placeholder={__( "Role...", "lazytasks-project-task-management" )} flex={1}
                                        data={roleOptions}
                                        value={addProjectRoleId} onChange={setAddProjectRoleId}
                                        comboboxProps={{ withinPortal: true }}
                                    />
                                    <Button size="xs" color="orange" loading={addProjectLoading} onClick={() => handleAddToProject(u.id)}>{__('Add', 'lazytasks-project-task-management')}</Button>
                                    <ActionIcon variant="subtle" color="gray" size="sm" onClick={() => setAddProjectUserId(null)}><IconX size={14} /></ActionIcon>
                                </div>
                            ) : (
                                <Button variant="subtle" color="teal" size="xs"
                                    leftSection={<IconPlus size={14} />}
                                    onClick={() => { setAddProjectUserId(u.id); setAddProjectId(null); setAddProjectRoleId(null); }}
                                >
                                    {__( 'Add to Project', 'lazytasks-project-task-management' )}
                                </Button>
                            )}
                        </div>
                    )}

                    {/* Actions */}
                    {isPending ? (
                        <div style={{ display: 'flex', gap: 8, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Button variant="light" color="teal" size="xs" flex={1}
                                leftSection={<IconMail size={14} />}
                                loading={resendLoading === u.id}
                                onClick={() => handleResendInvitation(u.id)}>
                                {__( 'Resend Invitation', 'lazytasks-project-task-management' )}
                            </Button>
                            <Button variant="light" color="red" size="xs" flex={1}
                                leftSection={<IconX size={14} />}
                                loading={cancelLoading === u.id}
                                onClick={() => handleCancelInvitation(u.id)}>
                                {__( 'Cancel Invitation', 'lazytasks-project-task-management' )}
                            </Button>
                        </div>
                    ) : !self && !wpAdmin && !superadmin && (loggedInIsWpAdmin || loggedInUser?.is_superadmin) ? (
                        <div style={{ display: 'flex', gap: 8, marginTop: 14, paddingTop: 14, borderTop: `1px solid ${S.border}` }}>
                            <Button variant="filled" color="red" size="xs"
                                leftSection={<IconTrash size={14} />}
                                onClick={() => setDeleteUserModal(u)}>
                                {__( 'Delete User', 'lazytasks-project-task-management' )}
                            </Button>
                        </div>
                    ) : self ? (
                        <Text size="xs" c={S.light} fs="italic" mt={14} pt={14} style={{ borderTop: `1px solid ${S.border}` }}>
                            {__('You cannot remove or delete your own account from here.', 'lazytasks-project-task-management')}
                        </Text>
                    ) : wpAdmin || superadmin ? (
                        <Text size="xs" c={S.light} fs="italic" mt={14} pt={14} style={{ borderTop: `1px solid ${S.border}` }}>
                            {wpAdmin
                                ? __('WordPress administrators cannot be deleted from this interface.', 'lazytasks-project-task-management')
                                : __('Superadmins cannot be deleted from this interface.', 'lazytasks-project-task-management')}
                        </Text>
                    ) : null}
                </div>
            </div>
        );
    };

    if (loading) {
        return (
            <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}>
                <Loader color={S.teal} />
            </div>
        );
    }

    return (
        <div>
            {/* Header */}
            <Group justify="space-between" mb={12} style={{ position: 'sticky', top: 0, zIndex: 10, background: '#F4F6F8', paddingTop: 4, paddingBottom: 4 }}>
                <Group gap={12}>
                    <Text size="md" fw={700} c={S.text}>{__( "All Users", "lazytasks-project-task-management" )}</Text>
                    <Badge size="sm" variant="light" color="teal" radius="xl">{filteredUsers.length} user{filteredUsers.length !== 1 ? 's' : ''}</Badge>
                </Group>
                <Group gap={10}>
                    <TextInput
                        size="xs" placeholder={__( "Search by name or email...", "lazytasks-project-task-management" )}
                        leftSection={<IconSearch size={14} />}
                        value={search} onChange={(e) => setSearch(e.currentTarget.value)}
                        style={{ width: 260 }}
                    />
                    <Tooltip label={__( "No projects available to invite members to", "lazytasks-project-task-management" )} disabled={invitableProjects.length > 0} withArrow>
                        <Button size="xs" color="orange" leftSection={<IconUserPlus size={15} />}
                            disabled={invitableProjects.length === 0}
                            onClick={() => setInviteOpen(true)}>
                            {__( 'Invite User', 'lazytasks-project-task-management' )}
                        </Button>
                    </Tooltip>
                </Group>
            </Group>

            {/* Filters */}
            <Group gap={10} mb={12}>
                <Group gap={5}>
                    <IconFilter size={14} color={S.light} />
                    <Text size="xs" fw={600} c={S.muted}>{__( "Filters", "lazytasks-project-task-management" )}</Text>
                </Group>
                <Select size="xs" placeholder={__( "All Workspaces", "lazytasks-project-task-management" )} clearable
                    data={workspaceOptions} value={filterWorkspace}
                    onChange={(v) => { setFilterWorkspace(v); setFilterProject(null); }}
                    style={{ width: 160 }}
                    comboboxProps={{ withinPortal: true }}
                />
                <Select size="xs" placeholder={__( "All Projects", "lazytasks-project-task-management" )} clearable
                    data={projectOptions} value={filterProject}
                    onChange={setFilterProject}
                    style={{ width: 160 }}
                    comboboxProps={{ withinPortal: true }}
                />
                <Select size="xs" placeholder={__( "All Status", "lazytasks-project-task-management" )} clearable
                    data={[{ value: 'active', label: __('Active', 'lazytasks-project-task-management') }, { value: 'pending', label: __('Pending (Invited)', 'lazytasks-project-task-management') }]}
                    value={filterStatus} onChange={setFilterStatus}
                    style={{ width: 150 }}
                    comboboxProps={{ withinPortal: true }}
                />
                {hasActiveFilters && (
                    <Button variant="default" size="xs" leftSection={<IconX size={12} />}
                        onClick={clearFilters} styles={{ root: { height: 26, fontSize: 11 } }}>
                        {__( 'Clear', 'lazytasks-project-task-management' )}
                    </Button>
                )}
            </Group>

            {/* Table */}
            <div ref={usersScrollRef} style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radiusLg, overflow: 'auto', maxHeight: usersMaxH, boxShadow: '0 1px 3px rgba(0,0,0,.07)' }}>
                <Table highlightOnHover={false} verticalSpacing="sm" style={{ borderCollapse: 'separate', borderSpacing: 0 }}>
                    <Table.Thead style={{ position: 'sticky', top: 0, zIndex: 5 }}>
                        <Table.Tr style={{ background: '#FAFBFC' }}>
                            <Table.Th style={{ width: '30%', fontSize: 11, fontWeight: 600, color: S.muted, textTransform: 'uppercase', letterSpacing: '.04em' }}>{__('User', 'lazytasks-project-task-management')}</Table.Th>
                            <Table.Th style={{ width: '25%', fontSize: 11, fontWeight: 600, color: S.muted, textTransform: 'uppercase', letterSpacing: '.04em' }}>{__('Email', 'lazytasks-project-task-management')}</Table.Th>
                            <Table.Th ta="center" style={{ width: '12%', fontSize: 11, fontWeight: 600, color: S.muted, textTransform: 'uppercase', letterSpacing: '.04em' }}>{__('Workspaces', 'lazytasks-project-task-management')}</Table.Th>
                            <Table.Th ta="center" style={{ width: '12%', fontSize: 11, fontWeight: 600, color: S.muted, textTransform: 'uppercase', letterSpacing: '.04em' }}>{__('Projects', 'lazytasks-project-task-management')}</Table.Th>
                            <Table.Th ta="center" style={{ width: '11%', fontSize: 11, fontWeight: 600, color: S.muted, textTransform: 'uppercase', letterSpacing: '.04em' }}>{__('Status', 'lazytasks-project-task-management')}</Table.Th>
                            <Table.Th style={{ width: '10%' }} />
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        {filteredUsers.length === 0 ? (
                            <Table.Tr>
                                <Table.Td colSpan={6}>
                                    <Text ta="center" c={S.light} py={32} size="sm">{__( "No users found.", "lazytasks-project-task-management" )}</Text>
                                </Table.Td>
                            </Table.Tr>
                        ) : (
                            <>
                                {activeUsers.length > 0 && (
                                    <>
                                        <Table.Tr style={{ background: '#F0F7F4', position: 'sticky', top: 37, zIndex: 4 }}>
                                            <Table.Td colSpan={6} py={6} px={16}>
                                                <Group gap={8}>
                                                    <Badge size="sm" variant="light" color="green" radius="xl">{__('Active', 'lazytasks-project-task-management')}</Badge>
                                                    <Text size="xs" fw={600} c={S.muted}>{activeUsers.length} user{activeUsers.length !== 1 ? 's' : ''}</Text>
                                                </Group>
                                            </Table.Td>
                                        </Table.Tr>
                                        {activeUsers.map(renderUserRow)}
                                    </>
                                )}
                                {pendingUsers.length > 0 && (
                                    <>
                                        <Table.Tr style={{ background: '#FFFBEB', position: 'sticky', top: 37, zIndex: 4 }}>
                                            <Table.Td colSpan={6} py={6} px={16}>
                                                <Group gap={8}>
                                                    <Badge size="sm" variant="light" color="yellow" radius="xl">{__('Pending', 'lazytasks-project-task-management')}</Badge>
                                                    <Text size="xs" fw={600} c={S.muted}>{pendingUsers.length} user{pendingUsers.length !== 1 ? 's' : ''}</Text>
                                                </Group>
                                            </Table.Td>
                                        </Table.Tr>
                                        {pendingUsers.map(renderUserRow)}
                                    </>
                                )}
                            </>
                        )}
                    </Table.Tbody>
                </Table>
            </div>

            {/* ── Invite Modal ── */}
            <Modal opened={inviteOpen} onClose={() => setInviteOpen(false)} title={__( "Invite New User", "lazytasks-project-task-management" )} centered size="md">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <TextInput label={__( "Email Address", "lazytasks-project-task-management" )} required placeholder="user@example.com"
                        value={inviteEmail} onChange={(e) => setInviteEmail(e.currentTarget.value)} />
                    <Group grow>
                        <TextInput label={__('First Name', 'lazytasks-project-task-management')} placeholder={__('John', 'lazytasks-project-task-management')}
                            value={inviteFirstName} onChange={(e) => setInviteFirstName(e.currentTarget.value)} />
                        <TextInput label={__('Last Name', 'lazytasks-project-task-management')} placeholder={__('Doe', 'lazytasks-project-task-management')}
                            value={inviteLastName} onChange={(e) => setInviteLastName(e.currentTarget.value)} />
                    </Group>
                    <Group grow>
                        <Select label={__( "Add to Project", "lazytasks-project-task-management" )} placeholder={__( "Select project...", "lazytasks-project-task-management" )} clearable
                            data={invitableProjects.map(p => ({ value: String(p.id), label: p.name }))}
                            value={inviteProject} onChange={setInviteProject}
                            comboboxProps={{ withinPortal: true }}
                        />
                        <Select label={__( "Role", "lazytasks-project-task-management" )} placeholder={__( "Select role...", "lazytasks-project-task-management" )} clearable
                            data={roleOptions}
                            value={inviteRole} onChange={setInviteRole}
                            comboboxProps={{ withinPortal: true }}
                        />
                    </Group>
                    <Group justify="flex-end" mt={8}>
                        <Button variant="default" onClick={() => setInviteOpen(false)}>{__('Cancel', 'lazytasks-project-task-management')}</Button>
                        <Button color="orange" loading={inviteLoading} onClick={handleInvite}>{__('Send Invitation', 'lazytasks-project-task-management')}</Button>
                    </Group>
                </div>
            </Modal>

            {/* ── Remove from Project Modal ── */}
            <Modal opened={!!removeProjectModal} onClose={() => setRemoveProjectModal(null)} title={__( "Remove from Project", "lazytasks-project-task-management" )} centered size="sm">
                {removeProjectModal && (() => {
                    const { user, taskCount, projectName } = removeProjectModal;
                    const isLast = (user.project_roles || []).length === 1;
                    return (
                        <div>
                            {isLast && (
                                <div style={{ background: S.warningLt, border: `1px solid ${S.warning}`, borderRadius: S.radiusSm, padding: '10px 12px', marginBottom: 12 }}>
                                    <Text size="xs" c={S.warningDk} fw={600}>
                                        This is {user.firstName}'s only project. Removing them will also remove them from the LazyTasks workspace entirely.
                                    </Text>
                                </div>
                            )}
                            {taskCount > 0 && (
                                <div style={{ background: '#FFF7ED', border: '1px solid #FDBA74', borderRadius: S.radiusSm, padding: '10px 12px', marginBottom: 12 }}>
                                    <Text size="xs" c="#92400E">
                                        <strong>{sprintf( /* translators: %d is a task count */ _n( '%d task', '%d tasks', taskCount, 'lazytasks-project-task-management' ), taskCount )}</strong> {__( 'assigned to this user in', 'lazytasks-project-task-management' )} <strong>{projectName}</strong> {__( 'will be', 'lazytasks-project-task-management' )} <strong>{__( 'unassigned', 'lazytasks-project-task-management' )}</strong>.
                                    </Text>
                                </div>
                            )}
                            <Text size="sm" mb={12}>
                                {__( 'Remove', 'lazytasks-project-task-management' )} <strong>{user.firstName} {user.lastName}</strong> {__( 'from', 'lazytasks-project-task-management' )} <strong>{projectName}</strong>?
                            </Text>
                            <Group justify="flex-end">
                                <Button variant="default" size="xs" onClick={() => setRemoveProjectModal(null)}>{__('Cancel', 'lazytasks-project-task-management')}</Button>
                                <Button color="red" size="xs" loading={removeProjectLoading} onClick={handleConfirmRemoveProject}>
                                    {isLast ? __('Remove (Last Project)', 'lazytasks-project-task-management') : __('Remove from Project', 'lazytasks-project-task-management')}
                                </Button>
                            </Group>
                        </div>
                    );
                })()}
            </Modal>

            {/* ── Remove from Workspace Modal ── */}
            <Modal opened={!!removeWorkspaceModal} onClose={() => { setRemoveWorkspaceModal(null); setSelectedWorkspaceId(null); setConfirmInput(''); }} title={__( "Remove from Workspace", "lazytasks-project-task-management" )} centered size="sm">
                {removeWorkspaceModal && (() => {
                    const u = removeWorkspaceModal;
                    const wsList = getUserWorkspaceList(u);
                    const userProjects = (u.project_roles || []).filter(pr => {
                        if (!selectedWorkspaceId) return true;
                        const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
                        return proj && String(proj.company_id) === selectedWorkspaceId;
                    });
                    const needsConfirm = userProjects.length > 1;
                    return (
                        <div>
                            <div style={{ background: S.warningLt, border: `1px solid ${S.warning}`, borderRadius: S.radiusSm, padding: '10px 12px', marginBottom: 12 }}>
                                <Text size="xs" c={S.warningDk}>
                                    {__( 'They will lose access to all tasks, comments, and assignments in this workspace. Their WordPress account will remain.', 'lazytasks-project-task-management' )}
                                </Text>
                            </div>
                            {selectedWorkspaceId && userProjects.length > 0 && (
                                <>
                                    <Text size="sm" mb={6}>{__('This will remove', 'lazytasks-project-task-management')} <strong>{u.firstName} {u.lastName}</strong> {__('from', 'lazytasks-project-task-management')} <strong>{userProjects.length}</strong> {userProjects.length > 1 ? __('projects:', 'lazytasks-project-task-management') : __('project:', 'lazytasks-project-task-management')}</Text>
                                    <div style={{ marginBottom: 12 }}>
                                        {userProjects.map(pr => {
                                            const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
                                            return (
                                                <Group key={pr.project_id} gap={6} py={3}>
                                                    <div style={{ width: 6, height: 6, borderRadius: '50%', background: S.teal }} />
                                                    <Text size="sm">{proj?.name || `Project #${pr.project_id}`}</Text>
                                                    <Text size="xs" c={S.muted} ml="auto">{pr.name || ''}</Text>
                                                </Group>
                                            );
                                        })}
                                    </div>
                                </>
                            )}
                            {needsConfirm && selectedWorkspaceId && (
                                <div style={{ marginTop: 12 }}>
                                    <Text size="xs" c={S.muted} mb={4}>{__('Type', 'lazytasks-project-task-management')} <strong>"remove"</strong> {__('to confirm:', 'lazytasks-project-task-management')}</Text>
                                    <TextInput size="xs" placeholder="remove" value={confirmInput}
                                        onChange={(e) => setConfirmInput(e.currentTarget.value)} />
                                </div>
                            )}
                            <Group justify="flex-end" mt={12}>
                                <Button variant="default" size="xs" onClick={() => { setRemoveWorkspaceModal(null); setSelectedWorkspaceId(null); setConfirmInput(''); }}>{__('Cancel', 'lazytasks-project-task-management')}</Button>
                                <Button color="red" size="xs"
                                    disabled={!selectedWorkspaceId || (needsConfirm && confirmInput.toLowerCase().trim() !== 'remove')}
                                    loading={removeWorkspaceLoading}
                                    onClick={handleConfirmRemoveWorkspace}>
                                    {__('Remove from Workspace', 'lazytasks-project-task-management')}
                                </Button>
                            </Group>
                        </div>
                    );
                })()}
            </Modal>

            {/* ── Delete User Modal ── */}
            <Modal opened={!!deleteUserModal} onClose={() => { setDeleteUserModal(null); setConfirmInput(''); }}
                title={loggedInIsWpAdmin ? __('Delete User', 'lazytasks-project-task-management') : __('Remove from LazyTasks', 'lazytasks-project-task-management')} centered size={loggedInIsWpAdmin ? 'md' : 'sm'}>
                {deleteUserModal && (() => {
                    const u = deleteUserModal;
                    const userProjects = u.project_roles || [];

                    const projectList = userProjects.length > 0 && (
                        <div style={{ marginBottom: 12 }}>
                            <Text size="xs" fw={600} mb={4}>{u.firstName} {u.lastName} is in {userProjects.length} project{userProjects.length > 1 ? 's' : ''}:</Text>
                            {userProjects.map(pr => {
                                const proj = (projects || []).find(p => String(p.id) === String(pr.project_id));
                                return (
                                    <Group key={pr.project_id} gap={6} py={3}>
                                        <div style={{ width: 6, height: 6, borderRadius: '50%', background: S.teal }} />
                                        <Text size="xs">{proj?.name || `Project #${pr.project_id}`}</Text>
                                        <Text size="xs" c={S.muted} ml="auto">{pr.name || ''}</Text>
                                    </Group>
                                );
                            })}
                        </div>
                    );

                    if (!loggedInIsWpAdmin) {
                        return (
                            <div>
                                <div style={{ background: S.warningLt, border: `1px solid ${S.warning}`, borderRadius: S.radiusSm, padding: '10px 12px', marginBottom: 12 }}>
                                    <Text size="xs" c={S.warningDk} fw={600}>
                                        This will remove {u.firstName} {u.lastName} from LazyTasks completely. They will lose access to all projects, tasks, and assignments. Their WordPress account will not be affected.
                                    </Text>
                                </div>
                                {projectList}
                                <Group justify="flex-end" mt={12}>
                                    <Button variant="default" size="xs" onClick={() => { setDeleteUserModal(null); setConfirmInput(''); }}>{__('Cancel', 'lazytasks-project-task-management')}</Button>
                                    <Button color="orange" size="xs" onClick={handleDeleteFromLazyTasks}>
                                        {__( 'Remove from LazyTasks', 'lazytasks-project-task-management' )}
                                    </Button>
                                </Group>
                            </div>
                        );
                    }

                    return (
                        <div>
                            {projectList}
                            {/* Option 1: Remove from LazyTasks only */}
                            <div style={{ border: `1px solid ${S.warning}`, borderRadius: S.radiusSm, padding: 14, marginBottom: 14 }}>
                                <Text size="sm" fw={600} mb={6}>{__('Option 1: Remove from LazyTasks only', 'lazytasks-project-task-management')}</Text>
                                <Text size="xs" c={S.muted} mb={10}>
                                    Remove {u.firstName} {u.lastName} from all projects, tasks, and assignments in LazyTasks. Their WordPress account will remain active.
                                </Text>
                                <Button color="orange" size="xs" variant="light" onClick={handleDeleteFromLazyTasks}>
                                    {__('Remove from LazyTasks', 'lazytasks-project-task-management')}
                                </Button>
                            </div>
                            {/* Option 2: Delete from WordPress */}
                            <div style={{ border: `1px solid ${S.danger}`, borderRadius: S.radiusSm, padding: 14 }}>
                                <Text size="sm" fw={600} mb={6} c="#991B1B">{__('Option 2: Delete from WordPress entirely', 'lazytasks-project-task-management')}</Text>
                                <Text size="xs" c={S.muted} mb={10}>
                                    Permanently delete {u.firstName} {u.lastName}'s WordPress account and all their LazyTasks data. This action cannot be undone.
                                </Text>
                                <div>
                                    <Text size="xs" c={S.muted} mb={4}>{__('Type', 'lazytasks-project-task-management')} <strong>"delete"</strong> {__('to confirm:', 'lazytasks-project-task-management')}</Text>
                                    <TextInput size="xs" placeholder="delete" value={confirmInput}
                                        onChange={(e) => setConfirmInput(e.currentTarget.value)} />
                                </div>
                                <Group justify="flex-end" mt={10}>
                                    <Button color="red" size="xs"
                                        disabled={confirmInput.toLowerCase().trim() !== 'delete'}
                                        onClick={handleDeleteFromWordPress}>
                                        {__('Delete from WordPress', 'lazytasks-project-task-management')}
                                    </Button>
                                </Group>
                            </div>
                        </div>
                    );
                })()}
            </Modal>

            {/* MemberEditDrawer — mounted locally */}
            <MemberEditDrawer />

            <style>{`
                .mu-row-hover:hover { background: ${S.tealLt} !important; }
                .mu-project-hover:hover { background: #F8FAFC; }
            `}</style>
        </div>
    );
};

export default ManageUsersTabV3;