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, Clock, CheckCircle2 } from 'lucide-react';
import type { WorkflowDefinition } from '../types';

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

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

  // 状态徽章
  const getStatusBadge = (status: string) => {
    const statusMap: Record<string, {
      variant: 'default' | 'secondary' | 'destructive' | 'success' | 'outline';
      text: string;
      icon: React.ElementType
    }> = {
      DRAFT: { variant: 'outline', text: '草稿', icon: Clock },
      PUBLISHED: { variant: 'success', text: '已发布', icon: CheckCircle2 },
    };
    const statusInfo = statusMap[status] || { variant: 'outline', text: status, icon: Clock };
    const Icon = statusInfo.icon;
    return (
      <Badge variant={statusInfo.variant} className="inline-flex items-center gap-1 w-fit">
        <Icon className="h-3 w-3" />
        {statusInfo.text}
      </Badge>
    );
  };

  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>{' '}
            <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
              {record.key}
            </code>
          </p>
          <p>
            <span className="font-medium">版本:</span>{' '}
            <span className="font-mono text-sm">{record.flowVersion || 1}</span>
          </p>
          <p className="flex items-center gap-2">
            <span className="font-medium">状态:</span> {getStatusBadge(record.status || 'DRAFT')}
          </p>
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button variant="destructive" onClick={onConfirm}>
            确认删除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeleteDialog;

