import { useState } from "react";
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";
import EditUser from "./EditUser/EditUser";
import "./User.scss";
import { IUser } from "../Pages/Admin/Users/interfaces";

interface Props {
  user: IUser;
}

export default function UserRoleCard({ user }: Props) {
  const [isEditing, setIsEditing] = useState(false);
  const { username, first_name, last_name, email, groups } = user;
  const handleEditClick = () => {
    setIsEditing(!isEditing);
  };

  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">
              {first_name} {last_name}
            </Typography>
            <Typography variant="caption">{email}</Typography>
          </Box>
          {true && (
            <Chip icon={<AdminPanelSettings />} label="Admin" size="small" />
          )}
          <IconButton>
            <History />
          </IconButton>
          <Tooltip title="Edit">
            <IconButton onClick={handleEditClick}>
              <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}>
              {groups.map(role => (
                <Chip key={role} label={role} size="small" />
              ))}
            </Stack>
            {/* {extraRolesCount && <Chip label={`+${extraRolesCount}`} />} */}
          </Stack>
        </Box>
        <div
          className={`user-card__edit-transition${
            isEditing ? " user-card__edit-transition--open" : ""
          }`}
        >
          {isEditing && <EditUser user={user} />}
        </div>
      </CardContent>
    </Card>
  );
}