import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { AlertCircle } from 'lucide-react';
import type { RoleResponse } from '../types';

interface DeleteDialogProps {
  open: boolean;
  record: RoleResponse | null;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => Promise<void>;
}

/**
 * 角色删除确认对话框
 */
const DeleteDialog: React.FC<DeleteDialogProps> = ({
  open,
  record,
  onOpenChange,
  onConfirm,
}) => {
  if (!record) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-red-600">
            <AlertCircle className="h-5 w-5" /> 确认删除角色？
          </DialogTitle>
          <DialogDescription>
            您确定要删除角色 "<span className="font-semibold text-foreground">{record.name}</span>" 吗？
            此操作不可逆。
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 text-sm text-muted-foreground">
          <p>
            <span className="font-medium">角色编码:</span> {record.code}
          </p>
          {record.description && (
            <p>
              <span className="font-medium">描述:</span> {record.description}
            </p>
          )}
          {record.tags && record.tags.length > 0 && (
            <div>
              <span className="font-medium">标签:</span>
              <div className="flex flex-wrap gap-1 mt-1">
                {record.tags.map(tag => (
                  <Badge key={tag.id} variant="outline" style={{ backgroundColor: tag.color }}>
                    {tag.name}
                  </Badge>
                ))}
              </div>
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={onConfirm}>
            确认删除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeleteDialog;

