import React, { useState, useEffect, useMemo, useRef, Fragment } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { Modal, Checkbox, Tooltip, Paper, Text, Group, TextInput, Button, ActionIcon, Badge } from '@mantine/core';
import { IconInfoCircle, IconSearch, IconPlus, IconX } from '@tabler/icons-react';
import { showNotification } from '@mantine/notifications';
import {
    fetchAllPermission,
    fetchRolePermissions,
    editRolePermissions,
    createRole,
    updateRole,
    deleteRole,
} from '../../../store/auth/roleSlice';
import { __ } from '@wordpress/i18n';
import { hasPermission } from '../../ui/permissions';
import useAvailableHeight from '../../../utils/useAvailableHeight';
import '../../../style/roles-v3.css';

const S = {
    orange: '#ED7D31', orangeDk: '#D46A1E', orangeLt: '#FEF0E6',
    teal: '#39758D', tealLt: '#EBF1F4', tealDk: '#2C5C6E',
    bg: '#F4F6F8', white: '#FFFFFF', border: '#E2E8F0',
    text: '#1A202C', muted: '#64748B', light: '#94A3B8',
    danger: '#EF4444',
    shadow: '0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05)',
    radius: 12, radiusSm: 6,
};

// ── Permission parent-child dependency rules ──
// When a child is enabled, its parent(s) auto-enable and lock.
// When a parent is disabled, all its descendants are cascade-removed.
const PERMISSION_DEPS = [
    // Global
    { child: 'delete-workspace',          parent: 'manage-workspace' },
    { child: 'delete-project',            parent: 'manage-project' },
    { child: 'delete-role',               parent: 'manage-roles-permissions' },
    { child: 'invite-user',               parent: 'manage-users' },
    // Global ↔ Project bridge — invite-user transitively requires project member mgmt
    { child: 'invite-user',               parent: 'invite-project-member' },
    { child: 'invite-user',               parent: 'manage-project-members' },
    { child: 'manage-users',              parent: 'invite-project-member' },
    { child: 'manage-users',              parent: 'manage-project-members' },
    // Project
    { child: 'delete-section',            parent: 'manage-section' },
    { child: 'manage-tasks-by-others',    parent: 'create-task' },
    { child: 'delete-tasks-by-others',    parent: 'manage-tasks-by-others' },
    { child: 'delete-tasks-by-others',    parent: 'create-task' },
    { child: 'close-task',                parent: 'complete-task' },
    { child: 'delete-comments-by-others', parent: 'add-comments' },
    { child: 'remove-project-member',     parent: 'manage-project-members' },
    { child: 'invite-project-member',     parent: 'manage-project-members' },
    // Addon — TimeTracker
    { child: 'timetracker-manage-entries',    parent: 'timetracker-access' },
    { child: 'timetracker-manage-entries',    parent: 'timetracker-view-team-entries' },
    { child: 'timetracker-delete-entries',    parent: 'timetracker-access' },
    { child: 'timetracker-delete-entries',    parent: 'timetracker-view-team-entries' },
    { child: 'timetracker-manage-estimates',  parent: 'timetracker-access' },
    { child: 'timetracker-view-team-entries', parent: 'timetracker-access' },
];

// child slug → [parent slugs]
const PARENTS_OF = new Map();
// parent slug → [child slugs]
const CHILDREN_OF = new Map();
PERMISSION_DEPS.forEach(({ child, parent }) => {
    if (!PARENTS_OF.has(child)) PARENTS_OF.set(child, []);
    PARENTS_OF.get(child).push(parent);
    if (!CHILDREN_OF.has(parent)) CHILDREN_OF.set(parent, []);
    CHILDREN_OF.get(parent).push(child);
});

// ── Permission "implies" rules ──
// When a granter is checked, the implied perms auto-check AND lock.
// When the granter is unchecked, all implied perms are stripped off (symmetric).
// Conceptually: the granter IS full access — it doesn't depend on the implied
// perms, it grants them. Distinct from PERMISSION_DEPS (child needs parent);
// here the relationship is "granter → grants".
const PERMISSION_IMPLIES = [
    { granter: 'timetracker-admin-settings', grants: 'timetracker-access' },
    { granter: 'timetracker-admin-settings', grants: 'timetracker-manage-entries' },
    { granter: 'timetracker-admin-settings', grants: 'timetracker-delete-entries' },
    { granter: 'timetracker-admin-settings', grants: 'timetracker-manage-estimates' },
    { granter: 'timetracker-admin-settings', grants: 'timetracker-view-team-entries' },
];

// granter slug → [granted slugs]
const IMPLIES_OF = new Map();
// granted slug → [granter slugs] (for lock-by-granter detection)
const IMPLIED_BY_OF = new Map();
PERMISSION_IMPLIES.forEach(({ granter, grants }) => {
    if (!IMPLIES_OF.has(granter)) IMPLIES_OF.set(granter, []);
    IMPLIES_OF.get(granter).push(grants);
    if (!IMPLIED_BY_OF.has(grants)) IMPLIED_BY_OF.set(grants, []);
    IMPLIED_BY_OF.get(grants).push(granter);
});

/**
 * Given a role's current permissions array, return a Map of parent slugs
 * that are "locked" (cannot be unchecked) because an active child requires them.
 * Map<parentSlug, Set<childDescription>> — the Set is used for tooltip text.
 */
function getLockedPermissions(rolePermissions, allPerms) {
    const locked = new Map();
    const activeNames = new Set((rolePermissions || []).map(p => p.name));
    const descOf = new Map();
    (allPerms || []).forEach(p => descOf.set(p.name, p.description || p.name));

    for (const [parentSlug, children] of CHILDREN_OF.entries()) {
        const activeChildren = children.filter(c => activeNames.has(c));
        if (activeChildren.length > 0) {
            locked.set(parentSlug, new Set(activeChildren.map(c => descOf.get(c) || c)));
        }
    }
    // Implied perms lock when their granter is active (super-permission cascade).
    for (const [impliedSlug, granters] of IMPLIED_BY_OF.entries()) {
        const activeGranters = granters.filter(g => activeNames.has(g));
        if (activeGranters.length > 0) {
            const existing = locked.get(impliedSlug) || new Set();
            activeGranters.forEach(g => existing.add(descOf.get(g) || g));
            locked.set(impliedSlug, existing);
        }
    }
    return locked;
}

/**
 * Given a permission slug being enabled, return the full permission objects
 * for all parent permissions that must also be enabled.
 */
function getRequiredParents(permSlug, allPerms) {
    const parentSlugs = PARENTS_OF.get(permSlug) || [];
    return parentSlugs.map(slug => (allPerms || []).find(p => p.name === slug)).filter(Boolean);
}

/**
 * Given a permission slug being disabled, return a Set of ALL descendant
 * slugs that must also be removed (recursive — handles chains).
 * E.g. removing 'create-task' → returns {'manage-tasks-by-others', 'delete-tasks-by-others'}
 */
function getAllDescendants(permSlug) {
    const result = new Set();
    const queue = [permSlug];
    while (queue.length > 0) {
        const current = queue.shift();
        const children = CHILDREN_OF.get(current) || [];
        for (const child of children) {
            if (!result.has(child)) {
                result.add(child);
                queue.push(child);
            }
        }
    }
    return result;
}

/**
 * Full permission objects for all perms directly granted by this granter.
 */
function getGrantedPerms(permSlug, allPerms) {
    const grantedSlugs = IMPLIES_OF.get(permSlug) || [];
    return grantedSlugs.map(slug => (allPerms || []).find(p => p.name === slug)).filter(Boolean);
}

/**
 * All perm slugs transitively granted by this slug (BFS — handles future nesting).
 */
function getAllGranted(permSlug) {
    const result = new Set();
    const queue = [permSlug];
    while (queue.length > 0) {
        const current = queue.shift();
        const grants = IMPLIES_OF.get(current) || [];
        for (const g of grants) {
            if (!result.has(g)) {
                result.add(g);
                queue.push(g);
            }
        }
    }
    return result;
}

function Btn({ children, variant = 'primary', loading, style, disabled, onClick, type = 'button' }) {
    const colorMap = { primary: 'orange', secondary: 'teal', ghost: 'gray', danger: 'red' };
    const variantMap = { primary: 'filled', secondary: 'light', ghost: 'outline', danger: 'filled' };
    return (
        <Button type={type} variant={variantMap[variant] || 'filled'} color={colorMap[variant] || 'orange'}
            size="xs" disabled={disabled} loading={loading} onClick={onClick} style={{ fontWeight: 500, ...style }}>
            {children}
        </Button>
    );
}

function IconBtn({ children, variant = 'ghost', title, onClick, disabled }) {
    const colorMap = { ghost: 'gray', danger: 'red' };
    return (
        <Tooltip label={title} withArrow disabled={!title}>
            <ActionIcon variant="subtle" color={colorMap[variant] || 'gray'} size="sm"
                onClick={onClick} disabled={disabled}>
                {children}
            </ActionIcon>
        </Tooltip>
    );
}

function PencilIcon() {
    return (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
        </svg>
    );
}

function TrashIcon() {
    return (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="3 6 5 6 21 6" />
            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
            <path d="M10 11v6M14 11v6" />
            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
        </svg>
    );
}

function ChevronIcon({ open }) {
    return (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform .2s', flexShrink: 0 }}>
            <polyline points="6 9 12 15 18 9" />
        </svg>
    );
}

function SearchIcon() {
    return (
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" />
        </svg>
    );
}

const Spinner = () => (
    <div style={{ display: 'flex', justifyContent: 'center', padding: 60 }}>
        <div style={{ width: 32, height: 32, border: `3px solid ${S.border}`, borderTopColor: S.teal, borderRadius: '50%', animation: 'wp-spin 0.6s linear infinite' }} />
        <style>{`@keyframes wp-spin { to { transform: rotate(360deg); } }`}</style>
    </div>
);

const StatCard = ({ label, value, color }) => (
    <Paper withBorder radius="sm" px={12} py={6} miw={70} style={{ textAlign: 'center' }}>
        <Text fw={700} fz={14} c={color || S.teal}>{value}</Text>
        <Text fz={10} fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: '0.04em', marginTop: 2 }}>{label}</Text>
    </Paper>
);

const NavItem = ({ icon, label, isActive, onClick, actions, disabled }) => {
    const [hov, setHov] = useState(false);
    return (
        <div
            onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
            onClick={disabled ? undefined : onClick}
            style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px',
                cursor: disabled ? 'default' : 'pointer',
                color: isActive ? S.orange : disabled ? '#CBD5E1' : hov ? S.teal : S.muted,
                fontWeight: isActive ? 600 : 500, fontSize: 13,
                background: isActive ? S.orangeLt : hov && !disabled ? S.tealLt : 'none',
                borderLeft: isActive ? `3px solid ${S.orange}` : '3px solid transparent',
                width: '100%', textAlign: 'left', position: 'relative', fontFamily: 'inherit',
                transition: '180ms ease', boxSizing: 'border-box'
            }}
        >
            <span style={{ flexShrink: 0, display: 'flex', opacity: disabled ? 0.4 : 1 }}>
                {icon}
            </span>
            <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{label}</span>

            {actions && (hov || isActive) && !disabled && (
                <span onClick={e => e.stopPropagation()} style={{ flexShrink: 0, display: 'flex' }}>
                    {actions}
                </span>
            )}
        </div>
    );
};

const SectionLabel = ({ label }) => (
    <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.8px', color: S.light, padding: '14px 14px 6px' }}>
        {label}
    </div>
);

const COL_WIDTH = 140;
const LABEL_WIDTH = 240;

// CLASSIC VIEW MATRIX
function PermissionMatrix({ roles, permList, type, onPerm, onCheckAll, onCheckAllGroup, onCheckAllType, onEditRole, onDeleteRole, isAddonDisabled, permNameDisabledMap = {}, searchQ = '', canEditRole = false, canDeleteRole = false, stickyTopThead = 0, stickyTopGroup = 0, theadRef, lockedPermsPerRole = [] }) {
    const [openClassicGroups, setOpenClassicGroups] = useState({});
    const toggleClassicGroup = (g) => setOpenClassicGroups(prev => ({ ...prev, [g]: prev[g] === false ? true : (prev[g] === undefined ? false : !prev[g]) }));

    const filteredPermList = searchQ ? permList.filter(p => (p.description || p.name).toLowerCase().includes(searchQ)) : permList;
    const grouped = {};
    filteredPermList.forEach(p => {
        const g = p.group || 'Other';
        if (!grouped[g]) grouped[g] = [];
        grouped[g].push(p);
    });

    const isTypeDisabled = (role) => {
        if (type === 'global' && role.use_global_permissions === false) return true;
        if (type === 'project' && role.use_project_permissions === false) return true;
        return false;
    };

    const allChecked = (role) => permList.length > 0 && permList.every(p => role.permissions?.some(rp => rp.id === p.id));

    // Type-wide master state: across every role that allows this type (excluding superadmin),
    // is every permission of this type checked (all) / some (indeterminate) / none?
    const typeRoles = roles.filter(r => r.slug !== 'superadmin' && !isTypeDisabled(r));
    const typeMasterAllChecked = typeRoles.length > 0 && permList.length > 0 &&
        typeRoles.every(r => permList.every(p => r.permissions?.some(rp => rp.id === p.id)));
    const typeMasterSomeChecked = typeRoles.some(r => permList.some(p => r.permissions?.some(rp => rp.id === p.id)));
    const typeMasterIndeterminate = !typeMasterAllChecked && typeMasterSomeChecked;

    const tableW = LABEL_WIDTH + roles.length * COL_WIDTH;

    return (
            <table style={{ width: tableW, borderCollapse: 'collapse', tableLayout: 'fixed' }}>
                <thead ref={theadRef}>
                    <tr>
                        <th style={{ width: LABEL_WIDTH, minWidth: LABEL_WIDTH, position: 'sticky', left: 0, top: stickyTopThead, zIndex: 10, background: S.tealLt, border: `1px solid ${S.border}`, padding: '10px 14px', textAlign: 'left', fontSize: 11, fontWeight: 700, color: S.muted, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                <Tooltip label={__( 'Check / uncheck all permissions for all roles', 'lazytasks-project-task-management' )} withArrow position="top">
                                    <Checkbox
                                        size="xs"
                                        color="orange"
                                        checked={typeMasterAllChecked}
                                        indeterminate={typeMasterIndeterminate}
                                        onChange={e => onCheckAllType && onCheckAllType(e.currentTarget.checked)}
                                        disabled={typeRoles.length === 0}
                                    />
                                </Tooltip>
                                {__( 'Permission', 'lazytasks-project-task-management' )}
                            </div>
                        </th>
                        {roles.map((role, ri) => {
                            const isSuperadmin = role.slug === 'superadmin';
                            const disabled = isSuperadmin || isTypeDisabled(role);
                            return (
                                <th key={role.id || ri} style={{ width: COL_WIDTH, minWidth: COL_WIDTH, position: 'sticky', top: stickyTopThead, zIndex: 5, background: S.tealLt, border: `1px solid ${S.border}`, padding: '6px 6px', textAlign: 'center', verticalAlign: 'middle' }}>
                                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3 }}>
                                        <Checkbox size="xs" color="orange" checked={isSuperadmin || allChecked(role)} onChange={e => !disabled && onCheckAll(ri, e.currentTarget.checked, permList, type)} disabled={disabled} />
                                        <div style={{ display: 'flex', alignItems: 'center', gap: 3, justifyContent: 'center' }}>
                                            <span style={{ fontSize: 11, fontWeight: 600, color: S.text, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: COL_WIDTH - 60 }}>
                                                {role.name}
                                            </span>
                                            {!isSuperadmin && (canEditRole || canDeleteRole) && (
                                                <>
                                                    {canEditRole && <IconBtn variant="ghost" title={__( 'Edit', 'lazytasks-project-task-management' )} onClick={() => onEditRole(role, ri)} style={{ width: 18, height: 18 }}><PencilIcon /></IconBtn>}
                                                    {canDeleteRole && <IconBtn variant="danger" title={__( 'Delete', 'lazytasks-project-task-management' )} onClick={() => onDeleteRole(role)} style={{ width: 18, height: 18 }}><TrashIcon /></IconBtn>}
                                                </>
                                            )}
                                        </div>
                                    </div>
                                </th>
                            );
                        })}
                    </tr>
                </thead>
                <tbody>
                    {(() => { const groupOrder = type === 'project' ? ['Project Configuration', 'Sections', 'Task Operations', 'Overwrite Others', 'Gantt View', 'Addons'] : ['Global Settings', 'Workspaces & Projects', 'Users & Invitations', 'Roles & Permissions', 'Addon Settings', 'License & Support']; return Object.entries(grouped).sort(([a], [b]) => { const ia = groupOrder.indexOf(a); const ib = groupOrder.indexOf(b); return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib); }); })().map(([groupName, groupPerms]) => {
                        const classicGroupOpen = openClassicGroups[groupName] !== false;
                        return (
                        <Fragment key={groupName}>
                            <tr onClick={() => toggleClassicGroup(groupName)} style={{ cursor: 'pointer' }}>
                                <td colSpan={roles.length + 1} style={{ position: 'sticky', top: stickyTopGroup, zIndex: 4, background: '#EFF6FF', border: `1px solid ${S.border}`, padding: '9px 14px', fontWeight: 700, fontSize: 13, color: '#374151', textTransform: 'uppercase', letterSpacing: '0.06em', textAlign: 'left' }}>
                                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                        <ChevronIcon open={classicGroupOpen} />
                                        {groupName}
                                    </div>
                                </td>
                            </tr>
                            {classicGroupOpen && (() => {
                                const hasSubGroups = groupPerms.some(p => p.sub_group);
                                if (hasSubGroups) {
                                    const subGroups = {};
                                    groupPerms.forEach(p => {
                                        const sg = p.sub_group || 'Others';
                                        if (!subGroups[sg]) subGroups[sg] = [];
                                        subGroups[sg].push(p);
                                    });
                                    Object.keys(subGroups).forEach(sg => {
                                        subGroups[sg].sort((a, b) => (a.order_id || 0) - (b.order_id || 0));
                                    });

                                    const order = groupName === 'Setting'
                                        ? ['Main Settings Menu', 'Side Menu (General)', 'Tag Management', 'Others']
                                        : [];
                                    const sortedKeys = Object.keys(subGroups).sort((a, b) => {
                                        let ia = order.indexOf(a);
                                        let ib = order.indexOf(b);
                                        if (ia === -1) ia = 99;
                                        if (ib === -1) ib = 99;
                                        return ia - ib;
                                    });

                                    return sortedKeys.map(sg => {
                                        const sgDisabled = isAddonDisabled ? (isAddonDisabled(sg) || isAddonDisabled(groupName)) : false;
                                        // Only the toggleable (non-row-disabled) perms count toward "all checked" and get flipped by check-all.
                                        const togglablePerms = subGroups[sg].filter(p => !permNameDisabledMap[p.name]);
                                        return (
                                            <Fragment key={sg}>
                                                <tr>
                                                    <td style={{ position: 'sticky', left: 0, zIndex: 1, background: '#F8FAFC', border: `1px solid ${S.border}`, padding: '7px 14px 7px 20px', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', color: sgDisabled ? S.light : S.muted }}>
                                                        {__(sg, 'lazytasks-project-task-management')}
                                                    </td>
                                                    {roles.map((r, ri) => {
                                                        const isSuperadmin = r.slug === 'superadmin';
                                                        const roleDisabled = isSuperadmin || isTypeDisabled(r) || sgDisabled;
                                                        const allChecked = isSuperadmin || (togglablePerms.length > 0 && togglablePerms.every(p => r.permissions?.some(rp => rp.id === p.id)));
                                                        const disabled = roleDisabled || togglablePerms.length === 0;
                                                        return (
                                                            <td key={r.id || ri} style={{ textAlign: 'center', verticalAlign: 'middle', background: '#F8FAFC', border: `1px solid ${S.border}`, padding: '4px' }}>
                                                                <Checkbox
                                                                    size="xs"
                                                                    color="orange"
                                                                    checked={allChecked}
                                                                    onChange={() => !disabled && onCheckAllGroup && onCheckAllGroup(ri, togglablePerms, !allChecked)}
                                                                    disabled={disabled}
                                                                />
                                                            </td>
                                                        );
                                                    })}
                                                </tr>
                                                {subGroups[sg].map(perm => (
                                                    <tr key={perm.id}>
                                                        <td style={{ position: 'sticky', left: 0, zIndex: 1, background: S.white, border: `1px solid ${S.border}`, padding: '7px 14px 7px 36px', fontSize: 12, color: (sgDisabled || permNameDisabledMap[perm.name]) ? S.light : S.text }}>
                                                            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                                                                {perm.description ? __(perm.description, 'lazytasks-project-task-management') : perm.name}
                                                                {perm.help_text && <Tooltip label={__(perm.help_text, 'lazytasks-project-task-management')} multiline w={300} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.light, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                                            </span>
                                                        </td>
                                                        {roles.map((role, ri) => {
                                                            const isSuperadmin = role.slug === 'superadmin';
                                                            const lockedInfo = lockedPermsPerRole[ri]?.get(perm.name);
                                                            const isLockedByDep = !isSuperadmin && !!lockedInfo;
                                                            const disabled = isSuperadmin || isTypeDisabled(role) || sgDisabled || !!permNameDisabledMap[perm.name] || isLockedByDep;
                                                            const checked = isSuperadmin || role.permissions?.some(rp => rp.id === perm.id);
                                                            const checkbox = <Checkbox size="xs" color="orange" checked={checked} onChange={() => !disabled && onPerm(ri, perm)} disabled={disabled} />;
                                                            return (
                                                                <td key={role.id || ri} style={{ textAlign: 'center', verticalAlign: 'middle', background: S.white, border: `1px solid ${S.border}`, padding: '7px 4px' }}><div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                                                    {isLockedByDep ? <Tooltip label={`Required by: ${[...lockedInfo].join(', ')}`} withArrow position="top" multiline w={250}>{checkbox}</Tooltip> : checkbox}
                                                                </div></td>
                                                            );
                                                        })}
                                                    </tr>
                                                ))}
                                            </Fragment>
                                        );
                                    });
                                }

                                return groupPerms.map(perm => (
                                    <tr key={perm.id}>
                                        <td style={{ position: 'sticky', left: 0, zIndex: 1, background: S.white, border: `1px solid ${S.border}`, padding: '7px 14px 7px 28px', fontSize: 12, color: permNameDisabledMap[perm.name] ? S.light : S.text }}>
                                            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                                                {perm.description ? __(perm.description, 'lazytasks-project-task-management') : perm.name}
                                                {perm.help_text && <Tooltip label={__(perm.help_text, 'lazytasks-project-task-management')} multiline w={300} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.light, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                            </span>
                                        </td>
                                        {roles.map((role, ri) => {
                                            const isSuperadmin = role.slug === 'superadmin';
                                            const groupDisabledForAddon = isAddonDisabled ? isAddonDisabled(groupName) : false;
                                            const lockedInfo = lockedPermsPerRole[ri]?.get(perm.name);
                                            const isLockedByDep = !isSuperadmin && !!lockedInfo;
                                            const disabled = isSuperadmin || isTypeDisabled(role) || groupDisabledForAddon || !!permNameDisabledMap[perm.name] || isLockedByDep;
                                            const checked = isSuperadmin || role.permissions?.some(rp => rp.id === perm.id);
                                            const checkbox = <Checkbox size="xs" color="orange" checked={checked} onChange={() => !disabled && onPerm(ri, perm)} disabled={disabled} />;
                                            return (
                                                <td key={role.id || ri} style={{ textAlign: 'center', verticalAlign: 'middle', background: S.white, border: `1px solid ${S.border}`, padding: '7px 4px' }}><div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                                    {isLockedByDep ? <Tooltip label={`Required by: ${[...lockedInfo].join(', ')}`} withArrow position="top" multiline w={250}>{checkbox}</Tooltip> : checkbox}
                                                </div></td>
                                            );
                                        })}
                                    </tr>
                                ));
                            })()}
                        </Fragment>
                        );
                    })}
                </tbody>
            </table>
    );
}

const inputStyle = {
    width: '100%', height: 36, padding: '0 10px', borderRadius: S.radiusSm,
    border: `1px solid ${S.border}`, fontSize: 13, outline: 'none',
    fontFamily: 'inherit', color: S.text, background: S.white, boxSizing: 'border-box',
};
const labelStyle = { fontSize: 12, fontWeight: 600, color: '#495057', marginBottom: 4, display: 'block' };

export default function RolesPermissionsTabV3() {
    const dispatch = useDispatch();
    const { permissions: allPerms, rolePermissions } = useSelector(state => state.auth.role);
    const { loggedInUser } = useSelector(state => state.auth.session);
    const { timeTrackerAddonState, whiteboardAddonState, performanceAddonState } = useSelector(state => state.settings.setting);
    // Addon group-level disabled map — retained for backwards-compat with any API response
    // that still emits a sub_group; the current flat structure routes everything through
    // permNameDisabledMap below.
    const addonDisabledMap = {
        'TimeTracker': timeTrackerAddonState !== 'installed_active',
        'Whiteboard': whiteboardAddonState !== 'installed_active',
    };
    const isAddonDisabled = (name) => name in addonDisabledMap && addonDisabledMap[name];
    // Per-permission disabled map. Addon perms stay visible but are non-toggleable
    // unless the owning addon is installed_active in LazyTasks Settings → Addons.
    const timeTrackerInactive = timeTrackerAddonState !== 'installed_active';
    const whiteboardInactive = whiteboardAddonState !== 'installed_active';
    const performanceInactive = performanceAddonState !== 'installed_active';
    const permNameDisabledMap = {
        // Addon Settings (global)
        'timetracker-admin-settings': timeTrackerInactive,
        'performance-access': performanceInactive,
        'performance-manage-rules': performanceInactive,
        'whiteboard-settings-access': whiteboardInactive,
        // Addons group (project) — Whiteboard
        'whiteboard-access': whiteboardInactive,
        'whiteboard-manage': whiteboardInactive,
        'whiteboard-comments': whiteboardInactive,
        'edit-whiteboard-comments': whiteboardInactive,
        'delete-whiteboard-comments': whiteboardInactive,
        'create-edit-whiteboard-page': whiteboardInactive,
        'delete-whiteboard-page': whiteboardInactive,
        // Addons group (project) — TimeTracker
        'timetracker-access': timeTrackerInactive,
        'timetracker-manage-entries': timeTrackerInactive,
        'timetracker-delete-entries': timeTrackerInactive,
        'timetracker-manage-estimates': timeTrackerInactive,
        'timetracker-view-team-entries': timeTrackerInactive,
    };
    const canAddRole = hasPermission(loggedInUser, ['manage-roles-permissions'], null, 'global');
    const canEditRole = hasPermission(loggedInUser, ['manage-roles-permissions'], null, 'global');
    const canDeleteRole = hasPermission(loggedInUser, ['delete-role'], null, 'global');

    const [roles, setRoles] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [isSaving, setIsSaving] = useState(false);

    // View mode: 'classic' | 'modern'
    const [viewMode, setViewMode] = useState('classic');

    // Classic View states
    const [accordionOpen, setAccordionOpen] = useState({ global: true, project: true });
    const classicScrollRef = useRef(null);
    const classicSectionBtnRef = useRef(null);
    const classicTheadRef = useRef(null);
    const modernContentRef = useRef(null);
    const classicMaxH = useAvailableHeight(classicScrollRef, [viewMode, roles]);
    const modernMaxH = useAvailableHeight(modernContentRef, [viewMode, roles]);
    const [canClassicScrollRight, setCanClassicScrollRight] = useState(false);
    const [classicStickyOffsets, setClassicStickyOffsets] = useState({ thead: 0, group: 0 });
    useEffect(() => {
        const el = classicScrollRef.current;
        if (!el) return;
        const check = () => setCanClassicScrollRight(el.scrollWidth > el.clientWidth && el.scrollLeft + el.clientWidth < el.scrollWidth - 2);
        check();
        el.addEventListener('scroll', check);
        const ro = new ResizeObserver(check);
        ro.observe(el);
        return () => { el.removeEventListener('scroll', check); ro.disconnect(); };
    }, [roles, viewMode]);
    useEffect(() => {
        const btnH = classicSectionBtnRef.current?.offsetHeight || 0;
        const theadH = classicTheadRef.current?.offsetHeight || 0;
        setClassicStickyOffsets({ thead: btnH, group: btnH + theadH });
    }, [roles, accordionOpen, viewMode]);

    // Modern View section header measurement
    const modernSectionRef = useRef(null);
    const [modernGroupTop, setModernGroupTop] = useState(0);

    // New View state
    const [activeRoleIndex, setActiveRoleIndex] = useState(0);
    const [openGroups, setOpenGroups] = useState({});
    const [openTypes, setOpenTypes] = useState({ global: true, project: true });

    useEffect(() => {
        const el = modernSectionRef.current;
        if (!el) return;
        const h = el.offsetHeight;
        const mt = parseInt(getComputedStyle(el).marginTop, 10) || 0;
        setModernGroupTop(h + mt);
    }, [viewMode, openTypes]);

    // Modals
    const [createOpen, setCreateOpen] = useState(false);
    const [newName, setNewName] = useState('');
    const [newUseGlobal, setNewUseGlobal] = useState(true);
    const [newUseProject, setNewUseProject] = useState(true);
    const [createSaving, setCreateSaving] = useState(false);

    const [editModal, setEditModal] = useState(null); // { role, index }
    const [editName, setEditName] = useState('');
    const [editUseGlobal, setEditUseGlobal] = useState(true);
    const [editUseProject, setEditUseProject] = useState(true);
    const [editSaving, setEditSaving] = useState(false);

    const [deleteModal, setDeleteModal] = useState(null);
    const [deleteSaving, setDeleteSaving] = useState(false);
    const [deleteInfo, setDeleteInfo] = useState(null);
    const [deleteConfirmText, setDeleteConfirmText] = useState('');

    // Search
    const [permSearch, setPermSearch] = useState('');

    // Dirty tracking
    const savedRolesRef = useRef(null);
    const isDirty = useMemo(() => {
        if (!savedRolesRef.current || !roles.length) return false;
        return JSON.stringify(roles) !== JSON.stringify(savedRolesRef.current);
    }, [roles]);

    // Duplicate name check
    const isDuplicateRoleName = (name, excludeId = null) => {
        const n = name?.trim().toLowerCase();
        return (roles || []).some(r =>
            r.name?.toLowerCase() === n && (!excludeId || parseInt(r.id) !== parseInt(excludeId))
        );
    };

    // Create validation state
    const [newNameError, setNewNameError] = useState('');
    const [editNameError, setEditNameError] = useState('');

    useEffect(() => {
        setIsLoading(true);
        dispatch(fetchAllPermission());
        dispatch(fetchRolePermissions()).then(() => setIsLoading(false));
    }, [dispatch]);

    useEffect(() => {
        if (rolePermissions) {
            setRoles(rolePermissions);
            savedRolesRef.current = rolePermissions;
            if (rolePermissions.length > 0 && activeRoleIndex >= rolePermissions.length) {
                setActiveRoleIndex(0);
            }
        }
    }, [rolePermissions]);

    const globalPerms = allPerms?.filter(p => p.type === 'global') || [];
    const projectPerms = allPerms?.filter(p => p.type === 'project') || [];

    // Grouping UI states for New view
    let permsByType = { global: {}, project: {} };
    if (allPerms) {
        allPerms.forEach(p => {
            const t = p.type === 'global' ? 'global' : 'project';
            const g = p.group || 'Other';
            if (!permsByType[t][g]) permsByType[t][g] = [];
            permsByType[t][g].push(p);
        });
    }

    const toggleAccordion = key => setAccordionOpen(prev => ({ ...prev, [key]: !prev[key] }));
    const toggleGroup = (groupId) => setOpenGroups(prev => ({ ...prev, [groupId]: !prev[groupId] }));
    const toggleType = (type) => setOpenTypes(prev => ({ ...prev, [type]: !prev[type] }));

    const handleTogglePermByActive = (permission) => {
        setRoles(prev => prev.map((role, i) => {
            if (i !== activeRoleIndex) return role;
            if (permission.type === 'global' && role.use_global_permissions === false) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Role cannot have global permissions', 'lazytasks-project-task-management' ), color: 'red' }); return role; }
            if (permission.type === 'project' && role.use_project_permissions === false) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Role cannot have project permissions', 'lazytasks-project-task-management' ), color: 'red' }); return role; }
            const has = role.permissions?.some(p => p.id === permission.id);
            if (has) {
                // Removing: cascade-remove all descendants AND all implied perms
                const toRemove = getAllDescendants(permission.name);
                toRemove.add(permission.name);
                const granted = getAllGranted(permission.name);
                granted.forEach(g => {
                    toRemove.add(g);
                    getAllDescendants(g).forEach(d => toRemove.add(d));
                });
                return { ...role, permissions: (role.permissions || []).filter(p => !toRemove.has(p.name)) };
            } else {
                // Adding: also add required parents AND any implied perms
                const parents = getRequiredParents(permission.name, allPerms);
                const current = [...(role.permissions || []), permission];
                const currentIds = new Set(current.map(p => p.id));
                parents.forEach(pp => { if (!currentIds.has(pp.id)) { current.push(pp); currentIds.add(pp.id); } });
                const granted = getGrantedPerms(permission.name, allPerms);
                granted.forEach(gp => { if (!currentIds.has(gp.id)) { current.push(gp); currentIds.add(gp.id); } });
                return { ...role, permissions: current };
            }
        }));
    };

    const handleTogglePerm = (roleIndex, permission) => {
        setRoles(prev => prev.map((role, i) => {
            if (i !== roleIndex) return role;
            if (permission.type === 'global' && role.use_global_permissions === false) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Role cannot have global permissions', 'lazytasks-project-task-management' ), color: 'red' }); return role; }
            if (permission.type === 'project' && role.use_project_permissions === false) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Role cannot have project permissions', 'lazytasks-project-task-management' ), color: 'red' }); return role; }
            const has = role.permissions?.some(p => p.id === permission.id);
            if (has) {
                // Removing: cascade-remove all descendants AND all implied perms
                const toRemove = getAllDescendants(permission.name);
                toRemove.add(permission.name);
                const granted = getAllGranted(permission.name);
                granted.forEach(g => {
                    toRemove.add(g);
                    getAllDescendants(g).forEach(d => toRemove.add(d));
                });
                return { ...role, permissions: (role.permissions || []).filter(p => !toRemove.has(p.name)) };
            } else {
                // Adding: also add required parents AND any implied perms
                const parents = getRequiredParents(permission.name, allPerms);
                const current = [...(role.permissions || []), permission];
                const currentIds = new Set(current.map(p => p.id));
                parents.forEach(pp => { if (!currentIds.has(pp.id)) { current.push(pp); currentIds.add(pp.id); } });
                const granted = getGrantedPerms(permission.name, allPerms);
                granted.forEach(gp => { if (!currentIds.has(gp.id)) { current.push(gp); currentIds.add(gp.id); } });
                return { ...role, permissions: current };
            }
        }));
    };

    // Per-role column check-all, scoped to ONE type (global OR project). Sets that type to
    // all-on/all-off for the role while leaving the other type's perms intact — global and
    // project are independent (checking all Global for a role never clears its Project perms).
    const handleCheckAll = (roleIndex, checked, sourcePerms, permType) => {
        setRoles(prev => prev.map((role, i) => {
            if (i !== roleIndex) return role;
            const otherType = (role.permissions || []).filter(p => p.type !== permType);
            return { ...role, permissions: checked ? [...otherType, ...sourcePerms] : otherType };
        }));
    };

    const handleCheckAllGroup = (roleIndex, groupPerms, checked) => {
        setRoles(prev => prev.map((role, i) => {
            if (i !== roleIndex) return role;
            if (checked) {
                // Adding group: also add required parents from outside this group
                const others = (role.permissions || []).filter(p => !groupPerms.some(gp => gp.id === p.id));
                const newPerms = [...others, ...groupPerms];
                const currentIds = new Set(newPerms.map(p => p.id));
                groupPerms.forEach(gp => {
                    getRequiredParents(gp.name, allPerms).forEach(pp => {
                        if (!currentIds.has(pp.id)) { newPerms.push(pp); currentIds.add(pp.id); }
                    });
                });
                return { ...role, permissions: newPerms };
            } else {
                // Removing group: also cascade-remove descendants that depended on these
                const removedSlugs = new Set(groupPerms.map(gp => gp.name));
                groupPerms.forEach(gp => {
                    getAllDescendants(gp.name).forEach(d => removedSlugs.add(d));
                });
                return { ...role, permissions: (role.permissions || []).filter(p => !removedSlugs.has(p.name)) };
            }
        }));
    };

    const handleCheckAllGroupNewView = (groupPerms, checked) => {
        handleCheckAllGroup(activeRoleIndex, groupPerms, checked);
    };

    // Type-wide master: check/uncheck every permission of one type (global OR project)
    // across ALL roles at once. Global and project are INDEPENDENT — this sets the whole
    // type to all-on/all-off while leaving the other type's perms on each role untouched.
    // It deliberately does NOT follow cross-type dependency bridges (e.g. invite-user ↔
    // project member perms), so checking all Global never (un)checks Project, and vice
    // versa. Within-type deps are trivially satisfied (everything on, or everything off).
    // Superadmin and roles that disallow this type are skipped.
    const handleCheckAllType = (checked, typePerms, permType) => {
        setRoles(prev => prev.map(role => {
            if (role.slug === 'superadmin') return role;
            const allows = permType === 'global'
                ? (role.use_global_permissions ?? true)
                : (role.use_project_permissions ?? true);
            if (!allows) return role;
            const otherType = (role.permissions || []).filter(p => p.type !== permType);
            return { ...role, permissions: checked ? [...otherType, ...typePerms] : otherType };
        }));
    };

    const openEdit = (role, index) => {
        setEditModal({ role, index });
        setEditName(role.name || '');
        setEditUseGlobal(role.use_global_permissions ?? true);
        setEditUseProject(role.use_project_permissions ?? true);
    };

    const handleSave = async () => {
        setIsSaving(true);
        try {
            const res = await dispatch(editRolePermissions({ roles })).unwrap();
            if (res.status === 200) {
                showNotification({ title: __( 'Permissions Saved', 'lazytasks-project-task-management' ), message: __( 'Users will need to log in again for changes to take effect.', 'lazytasks-project-task-management' ), color: 'green' });
                dispatch(fetchRolePermissions());
            } else {
                showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: res.message || __( 'Failed to save permissions', 'lazytasks-project-task-management' ), color: 'red' });
            }
        } catch {
            showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Failed to save permissions', 'lazytasks-project-task-management' ), color: 'red' });
        } finally {
            setIsSaving(false);
        }
    };

    const handleCreate = async () => {
        const trimmed = newName.trim();
        if (!trimmed) { setNewNameError(__( 'Role name is required.', 'lazytasks-project-task-management' )); return; }
        if (isDuplicateRoleName(trimmed)) { setNewNameError(__( 'A role with this name already exists.', 'lazytasks-project-task-management' )); return; }
        if (!newUseGlobal && !newUseProject) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Select at least one permission type', 'lazytasks-project-task-management' ), color: 'red' }); return; }
        setCreateSaving(true);
        const res = await dispatch(createRole({ name: newName.trim(), use_global_permissions: newUseGlobal, use_project_permissions: newUseProject }));
        setCreateSaving(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: ok ? __( 'Success', 'lazytasks-project-task-management' ) : __( 'Error', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red' });
        if (ok) {
            setCreateOpen(false);
            dispatch(fetchRolePermissions());
        }
    };

    const handleEdit = async () => {
        const trimmed = editName.trim();
        if (!trimmed) { setEditNameError(__( 'Role name is required.', 'lazytasks-project-task-management' )); return; }
        if (isDuplicateRoleName(trimmed, editModal?.role?.id)) { setEditNameError(__( 'A role with this name already exists.', 'lazytasks-project-task-management' )); return; }
        if (!editUseGlobal && !editUseProject) { showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Select at least one permission type', 'lazytasks-project-task-management' ), color: 'red' }); return; }
        setEditSaving(true);
        const res = await dispatch(updateRole({ id: editModal.role.id, data: { name: editName.trim(), use_global_permissions: editUseGlobal, use_project_permissions: editUseProject } }));
        setEditSaving(false);
        const ok = res.payload?.status === 200;
        showNotification({ title: ok ? __( 'Success', 'lazytasks-project-task-management' ) : __( 'Error', 'lazytasks-project-task-management' ), message: res.payload?.message || '', color: ok ? 'green' : 'red' });
        if (ok) {
            setEditModal(null);
            dispatch(fetchRolePermissions());
        }
    };

    const handleDelete = async (force = false) => {
        if (!deleteModal) return;
        setDeleteSaving(true);
        try {
            const res = await dispatch(deleteRole({ id: deleteModal.id, force })).unwrap();
            if (res.status === 403) {
                setDeleteInfo(res);
            } else if (res.status === 'confirm') {
                setDeleteInfo(res);
            } else if (res.status === 200) {
                showNotification({ title: __( 'Success', 'lazytasks-project-task-management' ), message: res.message || __( 'Role deleted successfully.', 'lazytasks-project-task-management' ), color: 'green' });
                closeDeleteModal();
                if (activeRoleIndex === roles.length - 1) setActiveRoleIndex(Math.max(0, activeRoleIndex - 1));
                dispatch(fetchRolePermissions());
            } else {
                showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: res.message || __( 'Failed to delete role', 'lazytasks-project-task-management' ), color: 'red' });
            }
        } catch {
            showNotification({ title: __( 'Error', 'lazytasks-project-task-management' ), message: __( 'Failed to delete role', 'lazytasks-project-task-management' ), color: 'red' });
        } finally {
            setDeleteSaving(false);
        }
    };

    const closeDeleteModal = () => {
        setDeleteModal(null);
        setDeleteInfo(null);
        setDeleteConfirmText('');
    };

    const activeRole = roles[activeRoleIndex] || null;
    const isSuperadmin = activeRole?.slug === 'superadmin';

    // Stats
    const stats = useMemo(() => ({
        roles: roles.length,
        globalPerms: globalPerms.length,
        projectPerms: projectPerms.length,
        totalPerms: (allPerms || []).length,
    }), [roles, globalPerms, projectPerms, allPerms]);

    // Locked permissions — parents that can't be unchecked because a child is active
    const lockedPermsPerRole = useMemo(() =>
        roles.map(role => getLockedPermissions(role.permissions, allPerms)),
        [roles, allPerms]
    );
    const activeLockedPerms = useMemo(() =>
        activeRole ? getLockedPermissions(activeRole.permissions, allPerms) : new Map(),
        [activeRole, allPerms]
    );

    // Search filter for permissions
    const searchQ = permSearch.trim().toLowerCase();

    // Expand/Collapse all (new view)
    const allGroupIds = useMemo(() => {
        const ids = [];
        ['global', 'project'].forEach(t => {
            const groups = permsByType[t];
            if (groups) Object.keys(groups).forEach(g => ids.push(`${t}-${g}`));
        });
        return ids;
    }, [allPerms]);

    const allExpanded = allGroupIds.length > 0 && allGroupIds.every(id => openGroups[id] === true) && openTypes.global && openTypes.project;
    const toggleAllGroups = () => {
        const val = !allExpanded;
        const next = {};
        allGroupIds.forEach(id => { next[id] = val; });
        setOpenGroups(next);
        setOpenTypes({ global: val, project: val });
    };

    if (isLoading) {
        return <Spinner />;
    }

    const renderRoleListNewView = () => {
        return roles.map((role, idx) => {
            const isSuper = role.slug === 'superadmin';
            return (
                <NavItem
                    key={role.id || idx}
                    icon={
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 15, height: 15 }}>
                            {isSuper ? (
                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
                            ) : (
                                <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" /></>
                            )}
                        </svg>
                    }
                    label={role.name}
                    isActive={activeRoleIndex === idx}
                    onClick={() => setActiveRoleIndex(idx)}
                    actions={!isSuper ? (
                        <>
                            <button className="rl-icon-btn-sm" title={__( 'Edit', 'lazytasks-project-task-management' )} onClick={(e) => { e.stopPropagation(); openEdit(role, idx); }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" /><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" /></svg>
                            </button>
                            <button className="rl-icon-btn-sm danger" title={__( 'Delete', 'lazytasks-project-task-management' )} onClick={(e) => { e.stopPropagation(); setDeleteModal(role); }}>
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6M14 11v6" /></svg>
                            </button>
                        </>
                    ) : null}
                />
            );
        });
    };

    const renderPermGroupsNewView = (type) => {
        const groups = permsByType[type];
        if (!groups || Object.keys(groups).length === 0) return null;

        const disabledType = activeRole && activeRole[`use_${type}_permissions`] === false;
        const disabled = isSuperadmin || disabledType;

        // Filter by search
        const filteredGroups = {};
        Object.entries(groups).forEach(([g, perms]) => {
            const filtered = searchQ ? perms.filter(p => (p.description || p.name).toLowerCase().includes(searchQ)) : perms;
            if (filtered.length > 0) filteredGroups[g] = filtered;
        });
        if (Object.keys(filteredGroups).length === 0) return null;

        const totalPermsInType = Object.values(filteredGroups).flat().length;

        const typeOpen = openTypes[type] || false;

        return (
            <div className="rl-section" style={{ marginBottom: 10 }}>
                <div
                    ref={type === 'global' ? modernSectionRef : undefined}
                    onClick={() => toggleType(type)}
                    style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', background: S.tealLt, borderRadius: S.radiusSm, cursor: 'pointer', marginTop: 12, marginBottom: typeOpen ? 8 : 0, border: `1px solid ${S.border}`, userSelect: 'none', position: 'sticky', top: 0, zIndex: 5 }}
                >
                    <ChevronIcon open={typeOpen} />
                    <span style={{ fontSize: 14, fontWeight: 700, color: S.teal, flex: 1 }}>{type === 'global' ? __('Global Permissions', 'lazytasks-project-task-management') : __('Project Permissions', 'lazytasks-project-task-management')}</span>
                    <span style={{ fontSize: 11, background: S.white, color: S.muted, borderRadius: 20, padding: '2px 8px', border: `1px solid ${S.border}` }}>{totalPermsInType} {__( 'permissions', 'lazytasks-project-task-management' )}</span>
                </div>
                {typeOpen && (() => { const groupOrder = type === 'project' ? ['Project Configuration', 'Sections', 'Task Operations', 'Overwrite Others', 'Gantt View', 'Addons'] : ['Global Settings', 'Workspaces & Projects', 'Users & Invitations', 'Roles & Permissions', 'Addon Settings', 'License & Support']; return Object.entries(filteredGroups).sort(([a], [b]) => { const ia = groupOrder.indexOf(a); const ib = groupOrder.indexOf(b); return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib); }).map(([groupName, groupPerms]) => {
                    const groupId = `${type}-${groupName}`;
                    const isOpen = openGroups[groupId] === true;
                    const groupDisabled = disabled || isAddonDisabled(groupName);

                    return (
                        <div className={`rl-group ${isOpen ? 'open' : ''}`} key={groupId}>
                            <div className="rl-group-hdr" onClick={() => toggleGroup(groupId)} style={{ justifyContent: 'center', position: 'sticky', top: modernGroupTop, zIndex: 4 }}>
                                <span className="rl-group-chev"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg></span>
                                <span className="rl-group-name" style={{ fontSize: 13, textAlign: 'center', flex: 1 }}>{groupName}</span>
                            </div>
                            {isOpen && (
                                <div className="rl-group-body">
                                    {(() => {
                                        const hasSubGroups = groupPerms.some(p => p.sub_group);
                                        if (hasSubGroups) {
                                            const subGroups = {};
                                            groupPerms.forEach(p => {
                                                const sg = p.sub_group || 'Others';
                                                if (!subGroups[sg]) subGroups[sg] = [];
                                                subGroups[sg].push(p);
                                            });
                                            Object.keys(subGroups).forEach(sg => {
                                                subGroups[sg].sort((a, b) => (a.order_id || 0) - (b.order_id || 0));
                                            });

                                            const order = groupName === 'Setting'
                                                ? ['Main Settings Menu', 'Side Menu (General)', 'Tag Management', 'Others']
                                                : [];
                                            const sortedKeys = Object.keys(subGroups).sort((a, b) => {
                                                let ia = order.indexOf(a);
                                                let ib = order.indexOf(b);
                                                if (ia === -1) ia = 99;
                                                if (ib === -1) ib = 99;
                                                return ia - ib;
                                            });

                                            return sortedKeys.map(sg => {
                                                const addonSubgroupDisabled = isAddonDisabled(sg) || isAddonDisabled(groupName);
                                                const sgCheckedAll = subGroups[sg].every(p => {
                                                    return activeRole?.permissions?.some(rp => rp.id === p.id);
                                                });
                                                return (
                                                    <div key={sg} style={{ marginBottom: 12 }}>
                                                        <div style={{ display: 'flex', alignItems: 'center', fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: '#94A3B8', letterSpacing: '0.5px', marginBottom: 6, paddingLeft: 10 }}>
                                                            <div style={{ marginRight: 8, cursor: groupDisabled || addonSubgroupDisabled ? 'default' : 'pointer' }} onClick={(e) => { e.stopPropagation(); e.preventDefault(); !groupDisabled && !addonSubgroupDisabled && handleCheckAllGroupNewView(subGroups[sg], !(isSuperadmin || sgCheckedAll)); }}>
                                                                <Checkbox color="orange" size="xs" checked={isSuperadmin || sgCheckedAll} readOnly disabled={groupDisabled || addonSubgroupDisabled} style={{ pointerEvents: 'none' }} />
                                                            </div>
                                                            {__(sg, 'lazytasks-project-task-management')}
                                                        </div>
                                                        {subGroups[sg].map(perm => {
                                                            const lockedInfo = activeLockedPerms.get(perm.name);
                                                            const isLockedByDep = !isSuperadmin && !!lockedInfo;
                                                            const permDisabled = groupDisabled || addonSubgroupDisabled || !!permNameDisabledMap[perm.name] || isLockedByDep;
                                                            const checked = isSuperadmin || activeRole?.permissions?.some(rp => rp.id === perm.id);
                                                            return (
                                                                <div className="rl-perm-row" style={{ paddingLeft: 32 }} key={perm.id} onClick={(e) => { e.preventDefault(); !permDisabled && handleTogglePermByActive(perm); }}>
                                                                    <Checkbox color="orange" size="sm" checked={checked} readOnly disabled={permDisabled} style={{ pointerEvents: 'none', transform: 'translateY(1px)' }} />
                                                                    <span className="rl-perm-lbl">{perm.description ? __(perm.description, 'lazytasks-project-task-management') : perm.name}</span>
                                                                    {isLockedByDep && <Tooltip label={`Required by: ${[...lockedInfo].join(', ')}`} multiline w={250} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.orange, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                                                    {!isLockedByDep && perm.help_text && <Tooltip label={__(perm.help_text, 'lazytasks-project-task-management')} multiline w={300} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.light, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                );
                                            });
                                        }

                                        return groupPerms.map(perm => {
                                            const lockedInfo = activeLockedPerms.get(perm.name);
                                            const isLockedByDep = !isSuperadmin && !!lockedInfo;
                                            const permDisabled = groupDisabled || !!permNameDisabledMap[perm.name] || isLockedByDep;
                                            const checked = isSuperadmin || activeRole?.permissions?.some(rp => rp.id === perm.id);
                                            return (
                                                <div className="rl-perm-row" key={perm.id} onClick={(e) => { e.preventDefault(); !permDisabled && handleTogglePermByActive(perm); }}>
                                                    <Checkbox color="orange" size="sm" checked={checked} readOnly disabled={permDisabled} style={{ pointerEvents: 'none', transform: 'translateY(1px)' }} />
                                                    <span className="rl-perm-lbl">{perm.description ? __(perm.description, 'lazytasks-project-task-management') : perm.name}</span>
                                                    {isLockedByDep && <Tooltip label={`Required by: ${[...lockedInfo].join(', ')}`} multiline w={250} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.orange, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                                    {!isLockedByDep && perm.help_text && <Tooltip label={__(perm.help_text, 'lazytasks-project-task-management')} multiline w={300} withArrow position="right"><IconInfoCircle size={14} style={{ color: S.light, cursor: 'help', flexShrink: 0 }} /></Tooltip>}
                                                </div>
                                            );
                                        });
                                    })()}
                                </div>
                            )}
                        </div>
                    );
                }); })()}
            </div>
        );
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {/* Header — title + tiles + actions */}
            <Group justify="space-between" align="flex-start" mb={14}
                style={{ position: 'sticky', top: 0, zIndex: 10, background: '#F4F6F8', paddingTop: 4, paddingBottom: 4 }}>
                {/* Left: title + desc + compact tiles */}
                <Group gap={16} align="center">
                    <div>
                        <Text fz={16} fw={700} c={S.text}>{__( 'Roles & Permissions', 'lazytasks-project-task-management' )}</Text>
                        <Text fz={12} c="dimmed" mt={2}>{__( 'Manage roles and their access levels', 'lazytasks-project-task-management' )}</Text>
                    </div>
                    <Group gap={6}>
                        <StatCard label={__( 'Roles', 'lazytasks-project-task-management' )} value={stats.roles} color={S.orange} />
                        <StatCard label={__( 'Global', 'lazytasks-project-task-management' )} value={stats.globalPerms} />
                        <StatCard label={__( 'Project', 'lazytasks-project-task-management' )} value={stats.projectPerms} />
                        <StatCard label={__( 'Total', 'lazytasks-project-task-management' )} value={stats.totalPerms} color={S.muted} />
                    </Group>
                </Group>
                {/* Right: actions + toggle stacked */}
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
                    <Group gap={8} align="center">
                        <TextInput size="xs" placeholder={__( 'Search permissions...', 'lazytasks-project-task-management' )}
                            leftSection={<IconSearch size={14} />}
                            rightSection={permSearch ? <ActionIcon variant="subtle" size="xs" onClick={() => setPermSearch('')}><IconX size={12} /></ActionIcon> : null}
                            value={permSearch} onChange={e => setPermSearch(e.target.value)}
                            style={{ width: 200 }} />
                        <Button size="xs" color="orange" leftSection={<IconPlus size={13} />}
                            disabled={!canAddRole}
                            onClick={!canAddRole ? undefined : () => { setCreateOpen(true); setNewName(''); setNewUseGlobal(true); setNewUseProject(true); }}>
                            {__( 'New Role', 'lazytasks-project-task-management' )}
                        </Button>
                        <Button size="xs" loading={isSaving} onClick={handleSave}
                            color={isDirty ? 'orange' : 'teal'}
                            style={isDirty ? { boxShadow: `0 0 0 2px ${S.orange}44` } : {}}>
                            {isDirty ? __( 'Save *', 'lazytasks-project-task-management' ) : __( 'Save', 'lazytasks-project-task-management' )}
                        </Button>
                    </Group>
                    <div style={{ display: 'flex', border: `1px solid ${S.border}`, borderRadius: 6, overflow: 'hidden' }}>
                        <button onClick={() => setViewMode('classic')} style={{ padding: '5px 14px', fontSize: 12, fontWeight: 500, cursor: 'pointer', border: 'none', background: viewMode === 'classic' ? S.orange : S.white, color: viewMode === 'classic' ? '#fff' : S.muted, transition: '0.2s' }}>
                            {__( 'Classic', 'lazytasks-project-task-management' )}
                        </button>
                        <button onClick={() => setViewMode('modern')} style={{ padding: '5px 14px', fontSize: 12, fontWeight: 500, cursor: 'pointer', border: 'none', background: viewMode === 'modern' ? S.orange : S.white, color: viewMode === 'modern' ? '#fff' : S.muted, borderLeft: `1px solid ${S.border}`, transition: '0.2s' }}>
                            {__( 'Modern', 'lazytasks-project-task-management' )}
                        </button>
                    </div>
                </div>
            </Group>

            {/* View Render */}
            {viewMode === 'classic' ? (
                // ── CLASSIC VIEW ──
                <div style={{ position: 'relative', border: `1px solid ${S.border}`, borderRadius: S.radius, background: S.white, boxShadow: S.shadow, marginBottom: 20 }}>
                    <div ref={classicScrollRef} style={{ overflow: 'auto', maxHeight: classicMaxH, borderRadius: S.radius }}>
                        <button ref={classicSectionBtnRef} onClick={() => toggleAccordion('global')} style={{ position: 'sticky', top: 0, zIndex: 15, width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', background: S.tealLt, border: 'none', borderBottom: `1px solid ${S.border}`, cursor: 'pointer', fontWeight: 600, fontSize: 13, color: S.text }}>
                            <ChevronIcon open={accordionOpen.global} />
                            {__( 'Global Permissions', 'lazytasks-project-task-management' )}
                            <span style={{ marginLeft: 'auto', fontSize: 11, background: S.white, color: S.muted, borderRadius: 20, padding: '2px 8px', border: `1px solid ${S.border}` }}>{globalPerms.length} {__( 'permissions', 'lazytasks-project-task-management' )}</span>
                        </button>
                        {accordionOpen.global && (
                            <PermissionMatrix roles={roles} permList={globalPerms} type="global" onPerm={handleTogglePerm} onCheckAll={handleCheckAll} onCheckAllGroup={handleCheckAllGroup} onCheckAllType={(checked) => handleCheckAllType(checked, globalPerms, 'global')} onEditRole={openEdit} onDeleteRole={setDeleteModal} isAddonDisabled={isAddonDisabled} permNameDisabledMap={permNameDisabledMap} searchQ={searchQ} canEditRole={canEditRole} canDeleteRole={canDeleteRole} stickyTopThead={classicStickyOffsets.thead} stickyTopGroup={classicStickyOffsets.group} theadRef={classicTheadRef} lockedPermsPerRole={lockedPermsPerRole} />
                        )}
                        <button onClick={() => toggleAccordion('project')} style={{ position: 'sticky', top: 0, zIndex: 15, width: '100%', display: 'flex', alignItems: 'center', gap: 10, padding: '13px 16px', background: S.tealLt, border: 'none', borderBottom: `1px solid ${S.border}`, cursor: 'pointer', fontWeight: 600, fontSize: 13, color: S.text }}>
                            <ChevronIcon open={accordionOpen.project} />
                            {__( 'Project Permissions', 'lazytasks-project-task-management' )}
                            <span style={{ marginLeft: 'auto', fontSize: 11, background: S.white, color: S.muted, borderRadius: 20, padding: '2px 8px', border: `1px solid ${S.border}` }}>{projectPerms.length} {__( 'permissions', 'lazytasks-project-task-management' )}</span>
                        </button>
                        {accordionOpen.project && (
                            <PermissionMatrix roles={roles} permList={projectPerms} type="project" onPerm={handleTogglePerm} onCheckAll={handleCheckAll} onCheckAllGroup={handleCheckAllGroup} onCheckAllType={(checked) => handleCheckAllType(checked, projectPerms, 'project')} onEditRole={openEdit} onDeleteRole={setDeleteModal} isAddonDisabled={isAddonDisabled} permNameDisabledMap={permNameDisabledMap} searchQ={searchQ} canEditRole={canEditRole} canDeleteRole={canDeleteRole} stickyTopThead={classicStickyOffsets.thead} stickyTopGroup={classicStickyOffsets.group} lockedPermsPerRole={lockedPermsPerRole} />
                        )}
                    </div>
                    {canClassicScrollRight && (
                        <div style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 40, background: 'linear-gradient(to right, transparent, rgba(0,0,0,.06))', pointerEvents: 'none', borderRadius: `0 ${S.radius}px ${S.radius}px 0` }} />
                    )}
                </div>
            ) : (
                // ── NEW VIEW (GeneralTabV3 equivalent Layout) ──
                <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
                    {/* Sticky Sidebar Page Flow */}
                    <div style={{ width: 220, flexShrink: 0, position: 'sticky', top: 80, alignSelf: 'flex-start' }}>
                        <div style={{ background: S.white, border: `1px solid ${S.border}`, borderRadius: S.radius, overflow: 'hidden', boxShadow: S.shadow }}>
                            <SectionLabel label={__( 'Roles', 'lazytasks-project-task-management' )} />
                            <div style={{ display: 'flex', flexDirection: 'column' }}>
                                {renderRoleListNewView()}
                            </div>
                        </div>
                    </div>

                    {/* Content Component */}
                    <div style={{ flex: 1, minWidth: 0 }}>
                        <div ref={modernContentRef} style={{
                            background: S.white, border: `1px solid ${S.border}`,
                            borderRadius: S.radius, boxShadow: S.shadow, display: 'flex', flexDirection: 'column', maxHeight: modernMaxH,
                        }}>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 20px', borderBottom: `1px solid ${S.border}`, flexShrink: 0 }}>
                                <div style={{ display: 'flex', alignItems: 'center' }}>
                                    <span style={{ fontSize: 14, fontWeight: 700, color: S.text }}>{activeRole?.name || ''}</span>
                                    <span className="rl-badge">{[activeRole?.use_global_permissions ? __( 'Global', 'lazytasks-project-task-management' ) : null, activeRole?.use_project_permissions ? __( 'Project', 'lazytasks-project-task-management' ) : null].filter(Boolean).join(' + ')}</span>
                                </div>
                                <Btn variant="ghost" onClick={toggleAllGroups} style={{ fontSize: 11, height: 28, padding: '0 10px' }}>
                                    {allExpanded ? __( 'Collapse All', 'lazytasks-project-task-management' ) : __( 'Expand All', 'lazytasks-project-task-management' )}
                                </Btn>
                            </div>

                            <div style={{ overflow: 'auto', padding: '0 20px 24px' }}>
                                {activeRole?.use_global_permissions !== false && renderPermGroupsNewView('global')}
                                {activeRole?.use_project_permissions !== false && renderPermGroupsNewView('project')}
                                {(activeRole?.use_global_permissions === false && activeRole?.use_project_permissions === false) && (
                                    <div style={{ padding: 40, textAlign: 'center', color: S.muted, fontSize: 14 }}>
                                        {__( 'This role has no permissions types enabled.', 'lazytasks-project-task-management' )}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Modals remain structurally shared */}
            <Modal opened={createOpen} onClose={() => { setCreateOpen(false); setNewNameError(''); }} title={<span style={{ fontWeight: 700, fontSize: 15 }}>{__( 'New Role', 'lazytasks-project-task-management' )}</span>} centered size="sm">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div>
                        <label style={labelStyle}>{__( 'Role Name', 'lazytasks-project-task-management' )} <span style={{ color: S.danger }}>*</span></label>
                        <input style={{ ...inputStyle, ...(newNameError ? { borderColor: S.danger } : {}) }} value={newName} onChange={e => { setNewName(e.target.value); setNewNameError(''); }} placeholder={__( 'Enter role name', 'lazytasks-project-task-management' )} onKeyDown={e => e.key === 'Enter' && handleCreate()} autoFocus />
                        {newNameError && <div style={{ fontSize: 11, color: S.danger, marginTop: 4 }}>{newNameError}</div>}
                    </div>
                    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                        <Checkbox color="orange" label={__( 'Global Permissions', 'lazytasks-project-task-management' )} checked={newUseGlobal} onChange={e => setNewUseGlobal(e.currentTarget.checked)} />
                        <Checkbox color="orange" label={__( 'Project Permissions', 'lazytasks-project-task-management' )} checked={newUseProject} onChange={e => setNewUseProject(e.currentTarget.checked)} />
                    </div>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <Btn variant="ghost" onClick={() => setCreateOpen(false)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                        <Btn variant="primary" loading={createSaving} onClick={handleCreate}>{__( 'Create Role', 'lazytasks-project-task-management' )}</Btn>
                    </div>
                </div>
            </Modal>

            <Modal opened={!!editModal} onClose={() => { setEditModal(null); setEditNameError(''); }} title={<span style={{ fontWeight: 700, fontSize: 15 }}>{__( 'Edit Role', 'lazytasks-project-task-management' )}</span>} centered size="sm">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div>
                        <label style={labelStyle}>{__( 'Role Name', 'lazytasks-project-task-management' )} <span style={{ color: S.danger }}>*</span></label>
                        <input style={{ ...inputStyle, ...(editNameError ? { borderColor: S.danger } : {}) }} value={editName} onChange={e => { setEditName(e.target.value); setEditNameError(''); }} placeholder={__( 'Enter role name', 'lazytasks-project-task-management' )} onKeyDown={e => e.key === 'Enter' && handleEdit()} autoFocus />
                        {editNameError && <div style={{ fontSize: 11, color: S.danger, marginTop: 4 }}>{editNameError}</div>}
                    </div>
                    <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                        <Checkbox color="orange" label={__( 'Global Permissions', 'lazytasks-project-task-management' )} checked={editUseGlobal} onChange={e => setEditUseGlobal(e.currentTarget.checked)} />
                        <Checkbox color="orange" label={__( 'Project Permissions', 'lazytasks-project-task-management' )} checked={editUseProject} onChange={e => setEditUseProject(e.currentTarget.checked)} />
                    </div>
                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <Btn variant="ghost" onClick={() => setEditModal(null)}>{__( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                        <Btn variant="primary" loading={editSaving} onClick={handleEdit}>{__( 'Save', 'lazytasks-project-task-management' )}</Btn>
                    </div>
                </div>
            </Modal>

            <Modal opened={!!deleteModal} onClose={closeDeleteModal} title={<span style={{ fontWeight: 700, fontSize: 15, color: S.danger }}>{__( 'Delete Role', 'lazytasks-project-task-management' )}</span>} centered size="sm">
                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                        <div style={{ width: 40, height: 40, borderRadius: '50%', background: '#FEF2F2', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={S.danger} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
                        </div>
                        <div>
                            <div style={{ fontWeight: 600, fontSize: 13, color: S.text, marginBottom: 4 }}>{__( 'Delete', 'lazytasks-project-task-management' )} "{deleteModal?.name}"?</div>
                            {!deleteInfo && (
                                <div style={{ fontSize: 12, color: S.muted, lineHeight: 1.5 }}>{__( 'This will permanently remove the role and all its permission assignments.', 'lazytasks-project-task-management' )}</div>
                            )}
                        </div>
                    </div>

                    {/* Blocked — non-admin, role has users */}
                    {deleteInfo?.status === 403 && (
                        <div style={{ background: '#FEF2F2', border: '1px solid #FECACA', borderRadius: S.radiusSm, padding: '10px 14px', fontSize: 12, color: '#991B1B', lineHeight: 1.6 }}>
                            {__( 'This role is assigned to', 'lazytasks-project-task-management' )} <strong>{deleteInfo.user_count}</strong> {__( 'user(s). Remove all user assignments first, or ask an admin to force-delete.', 'lazytasks-project-task-management' )}
                        </div>
                    )}

                    {/* Confirm — admin, role has users, needs typed confirmation */}
                    {deleteInfo?.status === 'confirm' && (
                        <>
                            <div style={{ background: '#FFFBEB', border: '1px solid #FDE68A', borderRadius: S.radiusSm, padding: '10px 14px', fontSize: 12, color: '#92400E', lineHeight: 1.6 }}>
                                {__( 'This will unassign', 'lazytasks-project-task-management' )} <strong>{deleteInfo.user_count}</strong> {__( 'user(s) from this role across all projects. They will lose their permissions immediately.', 'lazytasks-project-task-management' )}
                            </div>
                            <div>
                                <label style={labelStyle}>{__( 'Type', 'lazytasks-project-task-management' )} <strong>{deleteInfo.role_name}</strong> {__( 'to confirm', 'lazytasks-project-task-management' )}</label>
                                <input
                                    style={{ ...inputStyle, borderColor: deleteConfirmText && deleteConfirmText.trim().toLowerCase() === deleteInfo.role_name?.trim().toLowerCase() ? '#10B981' : S.border }}
                                    value={deleteConfirmText}
                                    onChange={e => setDeleteConfirmText(e.target.value)}
                                    placeholder={deleteInfo.role_name}
                                    autoFocus
                                />
                            </div>
                        </>
                    )}

                    <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                        <Btn variant="ghost" onClick={closeDeleteModal}>{deleteInfo?.status === 403 ? __( 'Close', 'lazytasks-project-task-management' ) : __( 'Cancel', 'lazytasks-project-task-management' )}</Btn>
                        {deleteInfo?.status === 403 ? null : deleteInfo?.status === 'confirm' ? (
                            <Btn
                                variant="danger"
                                loading={deleteSaving}
                                disabled={deleteConfirmText.trim().toLowerCase() !== deleteInfo.role_name?.trim().toLowerCase()}
                                onClick={() => handleDelete(true)}
                            >
                                {__( 'Confirm Delete', 'lazytasks-project-task-management' )}
                            </Btn>
                        ) : (
                            <Btn variant="danger" loading={deleteSaving} onClick={() => handleDelete(false)}>{__( 'Delete Role', 'lazytasks-project-task-management' )}</Btn>
                        )}
                    </div>
                </div>
            </Modal>

        </div>
    );
}