import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { AlertCircle } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { deleteExternalSystem } from '../service';
import type { ExternalSystemResponse, SystemType } from '../types';

interface DeleteDialogProps {
  open: boolean;
  record?: ExternalSystemResponse;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
}

const getSystemTypeLabel = (type: SystemType) => {
  const typeMap = {
    JENKINS: 'Jenkins',
    GIT: 'Git',
    ZENTAO: '禅道',
  };
  return typeMap[type];
};

/**
 * 外部系统删除确认对话框
 */
const DeleteDialog: React.FC<DeleteDialogProps> = ({
  open,
  record,
  onOpenChange,
  onSuccess,
}) => {
  const { toast } = useToast();

  const handleConfirm = async () => {
    if (!record) return;

    try {
      await deleteExternalSystem(record.id);
      toast({ title: '删除成功', description: `系统 "${record.name}" 已删除` });
      onSuccess();
      onOpenChange(false);
    } catch (error) {
      console.error('删除失败:', error);
      toast({
        title: '删除失败',
        description: error instanceof Error ? error.message : '未知错误',
        variant: 'destructive'
      });
    }
  };

  if (!record) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-destructive">
            <AlertCircle className="h-5 w-5" />
            确认删除
          </DialogTitle>
          <DialogDescription className="space-y-3 pt-4">
            <p>您确定要删除以下系统吗？此操作不可撤销。</p>
            <div className="bg-muted p-3 rounded-md space-y-2 text-sm">
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">系统名称:</span>
                <span className="font-medium">{record.name}</span>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">系统类型:</span>
                <Badge variant="outline">{getSystemTypeLabel(record.type)}</Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-muted-foreground">系统地址:</span>
                <span className="font-mono text-xs truncate max-w-[250px]">{record.url}</span>
              </div>
            </div>
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={handleConfirm}>
            确认删除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeleteDialog;

