import Person from "@mui/icons-material/Person";
import { SideDrawer } from "@/shared/ui/SideDrawer.jsx";
import { TimeText } from "@/shared/ui/TimeText.jsx";
import { UserStatusBadge } from "./UserStatusBadge.jsx";

export function UserProfileDrawer({ onClose, open, user }) {
  if (!user) {
    return null;
  }

  return (
    <SideDrawer onClose={onClose} open={open} title="用户信息">
      <div className="user-profile">
        <div className="user-profile__head">
          <div className="user-profile__avatar">
            <Person fontSize="small" />
          </div>
          <div className="user-profile__identity">
            <strong>{user.name || "-"}</strong>
            <span>{user.account || "-"}</span>
          </div>
        </div>

        <div className="user-profile__rows">
          <ProfileRow label="用户 ID" value={user.id} />
          <ProfileRow label="角色" value={user.role} />
          <ProfileRow label="团队" value={user.teamName || user.team} />
          <ProfileRow label="状态" value={<UserStatusBadge status={user.status} />} />
          <ProfileRow label="MFA" value={formatMfa(user)} />
          <ProfileRow label="最后登录" value={<TimeText value={user.lastLoginMs ?? user.lastLoginAtMs ?? user.lastLogin} />} />
        </div>
      </div>
    </SideDrawer>
  );
}

function ProfileRow({ label, value }) {
  return (
    <div className="user-profile__row">
      <span>{label}</span>
      <div className="user-profile__value">{value === 0 || value ? value : "-"}</div>
    </div>
  );
}

function formatMfa(user) {
  if (user.mfa) {
    return user.mfa;
  }
  return user.mfaEnabled ? "已开启" : "未开启";
}
