import {
  Card,
  CardContent,
  Avatar,
  Typography,
  Chip,
  IconButton,
  Tooltip,
  Stack,
  Box,
} from "@mui/material";
import {
  Edit,
  Delete,
  Visibility,
  VpnKey,
  InfoOutlined,
  AdminPanelSettings,
  History,
} from "@mui/icons-material";

interface Props {
  username: string;
  name: string;
  email: string;
  isAdmin: boolean;
  lastLogin: string;
  merchants: string[];
  roles: string[];
  extraRolesCount?: number;
}

export default function UserRoleCard({
  username,
  name,
  email,
  isAdmin,
  lastLogin,
  // merchants,
  roles,
  extraRolesCount,
}: Props) {
  return (
    <Card sx={{ mb: 2, minWidth: "100%" }}>
      <CardContent>
        {/* Header */}
        <Stack direction="row" alignItems="center" spacing={2}>
          <Avatar>{username.slice(0, 2).toUpperCase()}</Avatar>
          <Box flexGrow={1}>
            <Typography fontWeight="bold">{username}</Typography>
            <Typography variant="body2">{name}</Typography>
            <Typography variant="caption">{email}</Typography>
          </Box>
          {isAdmin && (
            <Chip icon={<AdminPanelSettings />} label="Admin" size="small" />
          )}
          <IconButton>
            <History />
          </IconButton>
          <Tooltip title="Edit">
            <IconButton>
              <Edit />
            </IconButton>
          </Tooltip>
          <Tooltip title="View">
            <IconButton>
              <Visibility />
            </IconButton>
          </Tooltip>
          <Tooltip title="Reset Password">
            <IconButton>
              <VpnKey />
            </IconButton>
          </Tooltip>
          <Tooltip title="Delete">
            <IconButton>
              <Delete />
            </IconButton>
          </Tooltip>
        </Stack>

        {/* Merchants + Roles */}
        <Box mt={2}>
          <Typography fontWeight="bold">Merchants</Typography>
          {/* <Stack direction="row" spacing={1} mt={1}>
            {merchants.map((m) => (
              <Chip key={m} label={m} size="small" />
            ))}
          </Stack> */}
        </Box>

        <Box mt={2}>
          <Typography fontWeight="bold">
            Roles{" "}
            <Tooltip title="Roles assigned to this user">
              <InfoOutlined fontSize="small" />
            </Tooltip>
          </Typography>
          <Stack direction="row" spacing={1} mt={1} flexWrap="wrap">
            <Stack direction="row" spacing={1}>
              {roles.map((role) => (
                <Chip key={role} label={role} size="small" />
              ))}
            </Stack>
            {extraRolesCount && <Chip label={`+${extraRolesCount}`} />}
          </Stack>
        </Box>

        {/* Footer */}
        <Box mt={2}>
          <Typography variant="caption" color="text.secondary">
            {lastLogin}
          </Typography>
        </Box>
      </CardContent>
    </Card>
  );
}