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 { MenuResponse } from '../types';
import { getIconComponent } from '@/config/icons.tsx';

interface DeleteDialogProps {
  open: boolean;
  record: MenuResponse | 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;

  const getTypeText = (type: number) => {
    const typeMap: Record<number, { text: string; variant: 'default' | 'secondary' | 'outline' }> = {
      1: { text: '目录', variant: 'default' },
      2: { text: '菜单', variant: 'secondary' },
      3: { text: '按钮', variant: 'outline' },
    };
    return typeMap[type] || { text: '未知', variant: 'outline' };
  };

  const typeInfo = getTypeText(record.type);

  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">
          <div className="flex items-center gap-2">
            <span className="font-medium">菜单类型:</span>
            <Badge variant={typeInfo.variant}>{typeInfo.text}</Badge>
          </div>
          {record.icon && (
            <div className="flex items-center gap-2">
              <span className="font-medium">图标:</span>
              {getIconComponent(record.icon)}
            </div>
          )}
          {record.path && (
            <p>
              <span className="font-medium">路由地址:</span> {record.path}
            </p>
          )}
          {record.component && (
            <p>
              <span className="font-medium">组件路径:</span> {record.component}
            </p>
          )}
          {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;

