'use client';

import React from 'react';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
import { Surface } from '@/ui/Surface';

interface Member {
  driverId: string;
  driverName: string;
  role: string;
  joinedAt: string;
  joinedAtLabel: string;
}

interface TeamMembersTableProps {
  members: Member[];
  isAdmin?: boolean;
  onRemoveMember?: (driverId: string) => void;
  'data-testid'?: string;
}

export function TeamMembersTable({ members, isAdmin, onRemoveMember, 'data-testid': dataTestId }: TeamMembersTableProps) {
  return (
    <Surface variant="precision" padding="none" data-testid={dataTestId}>
      <Table>
        <TableHead>
          <TableHeaderCell>Personnel</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
          <TableHeaderCell>Joined</TableHeaderCell>
          <TableHeaderCell textAlign="right">Rating</TableHeaderCell>
          {isAdmin && <TableHeaderCell textAlign="right">Actions</TableHeaderCell>}
        </TableHead>
        <TableBody>
          {members.map((member) => (
            <TableRow key={member.driverId} data-testid="driver-card">
              <TableCell>
                <Stack direction="row" align="center" gap="sm">
                  <Box
                    width={10}
                    height={10}
                    bg="var(--ui-color-bg-base)"
                    border="1px solid var(--ui-color-border-muted)"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    rounded="md"
                  >
                    <Text size="xs" weight="bold" variant="primary" mono>{member.driverName.substring(0, 2).toUpperCase()}</Text>
                  </Box>
                  <Text weight="bold" size="sm" data-testid="driver-card-name">{member.driverName}</Text>
                </Stack>
              </TableCell>
              <TableCell>
                <Box
                  paddingX={2}
                  paddingY={0.5}
                  bg="rgba(255,255,255,0.02)"
                  border="1px solid var(--ui-color-border-muted)"
                  display="inline-block"
                  rounded="sm"
                >
                  <Text size="xs" variant="low" mono uppercase>{member.role}</Text>
                </Box>
              </TableCell>
              <TableCell>
                <Text size="xs" variant="low" mono>
                  {member.joinedAtLabel}
                </Text>
              </TableCell>
              <TableCell textAlign="right">
                <Text mono weight="bold" variant="primary" data-testid="driver-card-stats">1450</Text>
              </TableCell>
              {isAdmin && (
                <TableCell textAlign="right">
                  {member.role !== 'owner' && (
                    <Button
                      variant="secondary"
                      size="sm"
                      onClick={() => onRemoveMember?.(member.driverId)}
                      data-testid="admin-actions"
                    >
                      DECOMMISSION
                    </Button>
                  )}
                </TableCell>
              )}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Surface>
  );
}