aiops/frontend/src/components/system/UserDetailDialog.tsx

/* eslint-disable @typescript-eslint/no-explicit-any */
// 用户详情弹窗（只读信息 + 角色徽章 + 编辑入口） // Logan.Li
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Key, Edit, User as UserIcon } from 'lucide-react';
import { useTranslation } from 'react-i18next';

interface UserDetailDialogProps {
  selectedUser: any | null;
  setSelectedUser: (u: any | null) => void;
  getUserStatusBadge: (status: 'active' | 'inactive') => React.ReactNode;
  openEdit: ( user: any) => void;
  onResetPassword?: (user: any) => void;
}

// UserDetailDialog 仅展示选中用户的基本信息和角色列表 // Logan.Li
export function UserDetailDialog({
  selectedUser,
  setSelectedUser,
  getUserStatusBadge,
  openEdit,
  onResetPassword,
}: UserDetailDialogProps) {
  const { t } = useTranslation();
  return (
    <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
      <DialogContent className="dg-card">
        <DialogHeader>
          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
            <UserIcon className="h-5 w-5 dg-text-blue" />
            {selectedUser?.nickname}
          </DialogTitle>
          <DialogDescription className="dg-text-muted">
            @{selectedUser?.username} · {selectedUser?.email}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userName')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.username}</p>
            </div>
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userNickname')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.nickname}</p>
            </div>
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userEmail')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.email}</p>
            </div>
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userPhone')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.phone || '--'}</p>
            </div>
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userStatus')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
            </div>
            <div>
              <p className="text-xs dg-text-muted mb-1">{t('system.userCreatedAt')}</p>
              <p className="text-sm text-[var(--dg-text-primary)]">
                {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
              </p>
            </div>
          </div>

          <div>
            <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] mb-2">{t('system.userRole')}</h4>
            <div className="flex flex-wrap gap-2">
              {selectedUser?.roles.map((role: string) => (
                <Badge key={role} variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
                  {role}
                </Badge>
              ))}
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button
            variant="outline"
            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
            disabled={selectedUser?.authSource === 'ldap'}
            onClick={() => selectedUser && onResetPassword?.(selectedUser)}
          >
            <Key className="h-4 w-4 mr-2" />
            {t('system.resetPassword')}
          </Button>
          <Button
            className="bg-blue-600 hover:bg-blue-700 text-white"
            onClick={() => {
              if (selectedUser) {
                setSelectedUser(null);
                openEdit(selectedUser);
              }
            }}
          >
            <Edit className="h-4 w-4 mr-2" />
            {t('common.edit')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}