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 { DepartmentResponse } from '../types';

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

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

  const hasChildren = record.children && record.children.length > 0;

  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>" 吗？
            {hasChildren && (
              <span className="block mt-2 text-red-600">
                该部门下有子部门，请先删除子部门！
              </span>
            )}
          </DialogDescription>
        </DialogHeader>
        <div className="space-y-2 text-sm text-muted-foreground">
          <p>
            <span className="font-medium">部门编码:</span> <code className="text-sm">{record.code}</code>
          </p>
          {record.description && (
            <p>
              <span className="font-medium">描述:</span> {record.description}
            </p>
          )}
          {record.leaderName && (
            <p>
              <span className="font-medium">负责人:</span> {record.leaderName}
            </p>
          )}
          <div className="flex items-center gap-2">
            <span className="font-medium">状态:</span>
            <Badge variant={record.enabled ? 'success' : 'secondary'}>
              {record.enabled ? '启用' : '禁用'}
            </Badge>
          </div>
          {hasChildren && (
            <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded">
              <p className="text-red-600 text-sm font-medium">
                包含 {record.children!.length} 个子部门
              </p>
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={onConfirm} disabled={hasChildren}>
            {hasChildren ? '无法删除' : '确认删除'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeleteDialog;

