'use client';

import { Button } from '@/ui/Button';
import { Stack } from '@/ui/Stack';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/ui/Table';
import { Text } from '@/ui/Text';

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

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

export function TeamMembersTable({ members, isAdmin, onRemoveMember }: TeamMembersTableProps) {
  return (
    <Stack border borderColor="outline-steel" bg="surface-charcoal/30">
      <Table>
        <TableHead>
          <TableRow>
            <TableHeader>Personnel</TableHeader>
            <TableHeader>Role</TableHeader>
            <TableHeader>Joined</TableHeader>
            <TableHeader textAlign="right">Rating</TableHeader>
            {isAdmin && <TableHeader textAlign="right">Actions</TableHeader>}
          </TableRow>
        </TableHead>
        <TableBody>
          {members.map((member) => (
            <TableRow key={member.driverId}>
              <TableCell>
                <Stack direction="row" align="center" gap={3}>
                  <Stack w="8" h="8" bg="base-black" border borderColor="outline-steel" display="flex" center>
                    <Text size="xs" weight="bold" color="primary-accent">{member.driverName.substring(0, 2).toUpperCase()}</Text>
                  </Stack>
                  <Text weight="bold" size="sm" color="text-white">{member.driverName}</Text>
                </Stack>
              </TableCell>
              <TableCell>
                <Stack px={2} py={0.5} bg="base-black" border borderColor="outline-steel" display="inline-block">
                  <Text size="xs" color="text-gray-400" font="mono" uppercase>{member.role}</Text>
                </Stack>
              </TableCell>
              <TableCell>
                <Text size="xs" color="text-gray-500" font="mono">
                  {new Date(member.joinedAt).toLocaleDateString()}
                </Text>
              </TableCell>
              <TableCell textAlign="right">
                <Text font="mono" weight="bold" color="primary-accent">1450</Text>
              </TableCell>
              {isAdmin && (
                <TableCell textAlign="right">
                  {member.role !== 'owner' && (
                    <Button 
                      variant="secondary" 
                      size="sm" 
                      onClick={() => onRemoveMember?.(member.driverId)}
                    >
                      DECOMMISSION
                    </Button>
                  )}
                </TableCell>
              )}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Stack>
  );
}
