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

interface DeleteDialogProps {
  open: boolean;
  record: UserResponse | 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.username}</span>" 吗？
            此操作不可逆。
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 text-sm text-muted-foreground">
          {record.nickname && (
            <p>
              <span className="font-medium">昵称:</span> {record.nickname}
            </p>
          )}
          {record.email && (
            <p>
              <span className="font-medium">邮箱:</span> {record.email}
            </p>
          )}
          {record.departmentName && (
            <p>
              <span className="font-medium">部门:</span> {record.departmentName}
            </p>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={onConfirm}>
            确认删除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeleteDialog;

