// 用户详情弹窗（只读信息 + 角色徽章 + 编辑入口） // 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 type { JsonData } from '@/types/common';

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

// UserDetailDialog 仅展示选中用户的基本信息和角色列表 // Logan.Li
export function UserDetailDialog({
  selectedUser,
  setSelectedUser,
  getUserStatusBadge,
  openEdit,
}: UserDetailDialogProps) {
  return (
    <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
      <DialogContent className="bg-slate-900 border-slate-800">
        <DialogHeader>
          <DialogTitle className="text-slate-100 flex items-center gap-2">
            <UserIcon className="h-5 w-5 text-blue-400" />
            {selectedUser?.nickname}
          </DialogTitle>
          <DialogDescription className="text-slate-500">
            @{selectedUser?.username} · {selectedUser?.email}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
            <div>
              <p className="text-xs text-slate-500 mb-1">用户名</p>
              <p className="text-sm text-slate-200">{selectedUser?.username}</p>
            </div>
            <div>
              <p className="text-xs text-slate-500 mb-1">昵称</p>
              <p className="text-sm text-slate-200">{selectedUser?.nickname}</p>
            </div>
            <div>
              <p className="text-xs text-slate-500 mb-1">邮箱</p>
              <p className="text-sm text-slate-200">{selectedUser?.email}</p>
            </div>
            <div>
              <p className="text-xs text-slate-500 mb-1">手机号</p>
              <p className="text-sm text-slate-200">{selectedUser?.phone || '--'}</p>
            </div>
            <div>
              <p className="text-xs text-slate-500 mb-1">状态</p>
              <p className="text-sm text-slate-200">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
            </div>
            <div>
              <p className="text-xs text-slate-500 mb-1">创建时间</p>
              <p className="text-sm text-slate-200">
                {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
              </p>
            </div>
          </div>

          <div>
            <h4 className="text-sm font-medium text-slate-300 mb-2">角色</h4>
            <div className="flex flex-wrap gap-2">
              {selectedUser?.roles.map((role: string) => (
                <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
                  {role}
                </Badge>
              ))}
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" className="border-slate-700 text-slate-300">
            <Key className="h-4 w-4 mr-2" />
            重置密码
          </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" />
            编辑
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}