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

interface UserTableProps {
  users: UserDTO[];
  selectedIndex: number;
}

export function UserTable({ users, selectedIndex }: UserTableProps) {
  if (users.length === 0) {
    return <Text color="gray">Keine Benutzer vorhanden.</Text>;
  }

  return (
    <Box flexDirection="column">
      {/* Header */}
      <Box>
        <Text color="gray" bold>
          {'  '}
          {'#'.padEnd(3)}
          {'Benutzername'.padEnd(20)}
          {'E-Mail'.padEnd(30)}
          {'Status'.padEnd(10)}
          {'Rollen'}
        </Text>
      </Box>
      <Box>
        <Text color="gray">{'─'.repeat(80)}</Text>
      </Box>

      {/* Rows */}
      {users.map((user, index) => {
        const isSelected = index === selectedIndex;
        const statusColor = user.status === 'ACTIVE' ? 'green' : 'red';
        const rowColor = isSelected ? 'cyan' : 'white';
        const prefix = isSelected ? '▶ ' : '  ';
        const roleNames = user.roles.map((r) => r.name).join(', ') || '–';

        return (
          <Box key={user.id}>
            <Text color={rowColor}>
              {prefix}
              {String(index + 1).padEnd(3)}
              {user.username.padEnd(20)}
              {user.email.padEnd(30)}
            </Text>
            <Text color={statusColor}>{user.status.padEnd(10)}</Text>
            <Text color={rowColor}>{roleNames}</Text>
          </Box>
        );
      })}
    </Box>
  );
}
