'use client';

import React from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Loader2 } from 'lucide-react';
import { Role, RoleType } from '../types';

interface RoleDetailDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedRole: Role | null;
  detailLoading?: boolean;
}

export function RoleDetailDialog({
  open,
  onOpenChange,
  selectedRole,
  detailLoading = false
}: RoleDetailDialogProps) {
  const getRoleTypeBadge = (type: RoleType) => {
    return type === 'system' ? (
      <Badge className="bg-blue-100 text-blue-700">系统角色</Badge>
    ) : (
      <Badge className="bg-green-100 text-green-700">自定义</Badge>
    );
  };

  const getStatusBadge = (status: string) => {
    return status === 'active' ? (
      <Badge className="bg-green-100 text-green-700">启用</Badge>
    ) : (
      <Badge className="bg-gray-100 text-gray-700">禁用</Badge>
    );
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>角色详情</DialogTitle>
          <DialogDescription className="sr-only">
            查看角色的详细信息和权限
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-4">
          {detailLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin mr-2" />
              <span>正在加载角色详情...</span>
            </div>
          ) : selectedRole ? (
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label>角色名称</Label>
                <div className="mt-1">{selectedRole.name}</div>
              </div>
              <div>
                <Label>角色代码</Label>
                <div className="mt-1">{selectedRole.code}</div>
              </div>
              <div className="col-span-2">
                <Label>角色描述</Label>
                <div className="mt-1">{selectedRole.description || '-'}</div>
              </div>
              <div>
                <Label>角色类型</Label>
                <div className="mt-1">{getRoleTypeBadge(selectedRole.type)}</div>
              </div>
              <div>
                <Label>状态</Label>
                <div className="mt-1">{getStatusBadge(selectedRole.status)}</div>
              </div>
              {selectedRole.defaultHomePage && (
                <div className="col-span-2">
                  <Label>默认首页</Label>
                  <div className="mt-1">{selectedRole.defaultHomePage}</div>
                </div>
              )}
              <div>
                <Label>菜单数量</Label>
                <div className="mt-1">
                  {selectedRole.menuIds?.includes('*') ? '全部' : (selectedRole.menuIds?.length || 0)}
                </div>
              </div>
              <div>
                <Label>权限数量</Label>
                <div className="mt-1">
                  {selectedRole.permissionIds?.includes('*') ? '全部' : (selectedRole.permissionIds?.length || 0)}
                </div>
              </div>
              <div>
                <Label>创建时间</Label>
                <div className="mt-1">
                  {new Date(selectedRole.createdAt).toLocaleString('zh-CN')}
                </div>
              </div>
              <div>
                <Label>更新时间</Label>
                <div className="mt-1">
                  {new Date(selectedRole.updatedAt).toLocaleString('zh-CN')}
                </div>
              </div>
            </div>
          ) : (
            <div className="flex items-center justify-center py-8">
              <span>无角色数据</span>
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}