import { Fragment } from "react";
import { Box, Checkbox, Flex, Group, ScrollArea, Table, Text } from "@mantine/core";
import { IconPencil, IconTrash } from "@tabler/icons-react";
import ContentEditable from "react-contenteditable";
import { Tooltip } from "recharts";
import { translate } from "../../../utils/i18n";
import { useElementSize } from '@mantine/hooks';

const PermissionTable = ({
    roles,
    permissions,
    groupPermissions,
    handleCheckAll,
    handleCheckAllGroup,
    togglePermission,
    editingRoleIndex,
    editingRoleName,
    contentEditableRef,
    setEditingRoleIndex,
    setEditingRoleName,
    handleRoleNameSave,
    onOpenRoleEdit,
    roleDeleteHandler,
    allPermissions,
    type,
    ref,
    width,
    height
}) => {
    const grouped = groupPermissions(permissions);
    const permissionType = permissions[0]?.type || null;
    const sourcePermissionsForHeader = allPermissions || permissions;


    return (
        <ScrollArea scrollbarSize={6} h={440} w={width}>
            <Box w={220 + (roles?.length || 0) * 200}>
                <Table
                    h={440}
                    withBorder
                    withColumnBorders
                    highlightOnHover
                    striped
                    stickyHeader
                    style={{ tableLayout: 'fixed', width: '100%' }}
                >
                    <Table.Thead>
                        <Table.Tr>
                            <Table.Th>{translate('Permission')}</Table.Th>

                            {roles?.map((role, index) => (
                                <Table.Th key={index}>
                                    {/* Remove minWidth; make contents fit the fixed column */}
                                    <Flex gap="xs"
                                        justify="center"
                                        align="center"
                                        direction="row"
                                        wrap="nowrap">
                                        <Box w={"20%"}>
                                            <Checkbox
                                                color="orange"
                                                checked={sourcePermissionsForHeader.every(sp =>
                                                    role.permissions.some(p => p.id === sp.id)
                                                )}
                                                onChange={event =>
                                                    handleCheckAll(index, event.currentTarget.checked, sourcePermissionsForHeader)
                                                }
                                                disabled={
                                                    role.slug === 'superadmin' ||
                                                    (permissionType === 'global' && (role.use_global_permissions === false)) ||
                                                    (permissionType === 'project' && (role.use_project_permissions === false))
                                                }
                                            />
                                        </Box>

                                        <Box
                                            w={"80%"}
                                            className="role-editable-group"
                                            style={{
                                                overflow: 'hidden',
                                                textOverflow: 'ellipsis',
                                                whiteSpace: 'nowrap',
                                                flex: 1,
                                            }}
                                        >
                                            <Text
                                                size="sm"
                                                style={{ cursor: 'pointer' }}
                                                onClick={() => {
                                                    setEditingRoleIndex(index);
                                                    setEditingRoleName(role.name);
                                                    setTimeout(() => {
                                                        contentEditableRef.current?.focus();
                                                    }, 0);
                                                }}
                                                dangerouslySetInnerHTML={{ __html: role.name }}
                                            />

                                            {role.slug !== 'superadmin' && (
                                                <Flex justify="center"
                                                    align="center"
                                                    direction="row"
                                                    wrap="nowrap">
                                                    <IconPencil
                                                        size={16}
                                                        className="role-edit-icon"
                                                        onClick={() => onOpenRoleEdit?.(index)}
                                                    />
                                                    <IconTrash
                                                        size={16}
                                                        className="role-edit-icon"
                                                        onClick={() => roleDeleteHandler(role)}
                                                        color="red"
                                                        stroke={1.25}
                                                    />
                                                </Flex>
                                            )}
                                        </Box>
                                    </Flex>
                                </Table.Th>
                            ))}
                        </Table.Tr>
                    </Table.Thead>

                    <Table.Tbody>
                        {Object.entries(grouped).map(([groupName, groupPermissions]) => (
                            <Fragment key={groupName}>
                                <Table.Tr>
                                    <Table.Td style={{ backgroundColor: '#EBF1F4' }}>
                                        <Text weight={700}>{groupName}</Text>
                                    </Table.Td>

                                    {roles?.map((role, roleIndex) => {
                                        const isWhiteboardDisabled =
                                            groupName === 'Whiteboard' && !window?.appLocalizer?.whiteboardInstalled;

                                        const checkbox = (
                                            <Checkbox
                                                color="orange"
                                                checked={groupPermissions.every(permission =>
                                                    role.permissions.some(p => p.id === permission.id)
                                                )}
                                                onChange={event =>
                                                    handleCheckAllGroup(roleIndex, groupPermissions, event.currentTarget.checked)
                                                }
                                                disabled={
                                                    role.slug === 'superadmin' ||
                                                    isWhiteboardDisabled ||
                                                    (permissionType === 'global' && (role.use_global_permissions === false)) ||
                                                    (permissionType === 'project' && (role.use_project_permissions === false))
                                                }
                                            />
                                        );

                                        return (
                                            <Table.Td key={roleIndex} style={{ textAlign: 'center', backgroundColor: '#EBF1F4' }}>
                                                {isWhiteboardDisabled ? (
                                                    <Tooltip label="Install the Whiteboard Addon to enable these permissions" withArrow>
                                                        <span>{checkbox}</span>
                                                    </Tooltip>
                                                ) : (
                                                    checkbox
                                                )}
                                            </Table.Td>
                                        );
                                    })}
                                </Table.Tr>

                                {groupPermissions.map(permission => (
                                    <Table.Tr key={permission.id}>
                                        <Table.Td style={{ paddingLeft: '2rem' }}>{permission.description}</Table.Td>

                                        {roles?.map((role, roleIndex) => {
                                            const isWhiteboardDisabled =
                                                groupName === 'Whiteboard' && !window?.appLocalizer?.whiteboardInstalled;

                                            const checkbox = (
                                                <Checkbox
                                                    color="orange"
                                                    checked={
                                                        permission.name === 'view-only-access'
                                                            ? true
                                                            : role.permissions.some(p => p.id === permission.id)
                                                    }
                                                    onChange={
                                                        permission.name === 'view-only-access'
                                                            ? undefined
                                                            : () => togglePermission(roleIndex, permission)
                                                    }
                                                    disabled={
                                                        role.slug === 'superadmin' ||
                                                        isWhiteboardDisabled ||
                                                        (permissionType === 'global' && (role.use_global_permissions === false)) ||
                                                        (permissionType === 'project' && (role.use_project_permissions === false))
                                                    }
                                                />
                                            );

                                            return <Table.Td key={roleIndex}>{checkbox}</Table.Td>;
                                        })}
                                    </Table.Tr>
                                ))}
                            </Fragment>
                        ))}
                    </Table.Tbody>
                </Table>
            </Box>
        </ScrollArea>
    );
};
export default PermissionTable;