import React from 'react';
import { Box, Text } from 'ink';
import type { RoleDTO } from '@effigenix/api-client';

interface RoleTableProps {
  roles: RoleDTO[];
  selectedIndex: number;
}

export function RoleTable({ roles, selectedIndex }: RoleTableProps) {
  if (roles.length === 0) {
    return <Text color="gray">Keine Rollen vorhanden.</Text>;
  }

  return (
    <Box flexDirection="column">
      {/* Header */}
      <Box>
        <Text color="gray" bold>
          {'  '}
          {'#'.padEnd(3)}
          {'Rollenname'.padEnd(25)}
          {'Berechtigungen'}
        </Text>
      </Box>
      <Box>
        <Text color="gray">{'─'.repeat(70)}</Text>
      </Box>

      {/* Rows */}
      {roles.map((role, index) => {
        const isSelected = index === selectedIndex;
        const rowColor = isSelected ? 'cyan' : 'white';
        const prefix = isSelected ? '▶ ' : '  ';
        const permCount = `${role.permissions.length} Berecht.`;

        return (
          <Box key={role.id}>
            <Text color={rowColor}>
              {prefix}
              {String(index + 1).padEnd(3)}
              {role.name.padEnd(25)}
              {permCount}
            </Text>
          </Box>
        );
      })}
    </Box>
  );
}
