import { ActionIcon, Badge, Group, Table, Text, Tooltip } from "@mantine/core";
import { IconChevronRight, IconLock } from "@tabler/icons-react";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { IRole } from "@/features/acadenice/rbac/types/rbac.types";

export interface RoleRowProps {
  role: IRole;
}

export function RoleRow({ role }: RoleRowProps) {
  const { t } = useTranslation();
  const target = `/settings/roles/${role.id}`;

  return (
    <Table.Tr data-testid={`role-row-${role.id}`}>
      <Table.Td>
        <Group gap="sm" wrap="nowrap">
          <Text fw={500} size="sm">
            {role.name}
          </Text>
          {role.isSystemRole ? (
            <Tooltip
              label={t("System role — name and existence are protected")}
              withArrow
            >
              <Badge
                size="xs"
                color="gray"
                variant="light"
                leftSection={<IconLock size={10} />}
                data-testid={`role-badge-system-${role.id}`}
              >
                {t("system")}
              </Badge>
            </Tooltip>
          ) : (
            <Badge size="xs" color="blue" variant="light">
              {t("custom")}
            </Badge>
          )}
        </Group>
      </Table.Td>
      <Table.Td>
        <Text size="sm" c="dimmed" lineClamp={2}>
          {role.description ?? "—"}
        </Text>
      </Table.Td>
      <Table.Td>
        <Text size="sm">
          {typeof role.memberCount === "number" ? role.memberCount : "—"}
        </Text>
      </Table.Td>
      <Table.Td>
        <ActionIcon
          component={Link}
          to={target}
          variant="subtle"
          aria-label={t("Open role {{name}}", { name: role.name })}
          data-testid={`role-open-${role.id}`}
        >
          <IconChevronRight size={16} />
        </ActionIcon>
      </Table.Td>
    </Table.Tr>
  );
}

export default RoleRow;