import React, { useEffect, useState } 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 { CheckCircle2, FileText, Loader2, Rocket } from 'lucide-react';
import type { WorkflowDefinition } from '../types';
import { getDefinitionById as getFormDefinitionById } from '@/pages/Form/Definition/List/service';
import type { FormDefinitionResponse } from '@/pages/Form/Definition/List/types';

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

/**
 * 发布确认对话框
 */
const DeployDialog: React.FC<DeployDialogProps> = ({
  open,
  record,
  onOpenChange,
  onConfirm,
}) => {
  const [formDefinition, setFormDefinition] = useState<FormDefinitionResponse | null>(null);
  const [loadingForm, setLoadingForm] = useState(false);

  // 加载表单定义信息
  useEffect(() => {
    if (open && record?.formDefinitionId) {
      setLoadingForm(true);
      getFormDefinitionById(record.formDefinitionId)
        .then(form => setFormDefinition(form))
        .catch(err => {
          console.error('加载表单定义失败:', err);
          setFormDefinition(null);
        })
        .finally(() => setLoadingForm(false));
    } else {
      setFormDefinition(null);
    }
  }, [open, record?.formDefinitionId]);

  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-green-600">
            <Rocket className="h-5 w-5" /> 确认发布工作流？
          </DialogTitle>
          <DialogDescription>
            您确定要发布工作流 "<span className="font-semibold text-foreground">{record.name}</span>" 吗？
            发布后将可以启动执行。
          </DialogDescription>
        </DialogHeader>

        {/* 工作流信息 */}
        <div className="space-y-3 py-4 px-6 bg-muted/50 rounded-lg">
          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">流程标识：</span>
            <code className="text-sm font-mono bg-background px-2 py-1 rounded">
              {record.key}
            </code>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">流程版本：</span>
            <Badge variant="outline">v{record.flowVersion}</Badge>
          </div>
          <div className="flex items-start justify-between gap-4">
            <span className="text-sm text-muted-foreground shrink-0">启动表单：</span>
            <div className="flex items-center gap-2 flex-1 justify-end">
              {loadingForm ? (
                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                  <Loader2 className="h-3 w-3 animate-spin" />
                  加载中...
                </div>
              ) : formDefinition ? (
                <div className="flex items-center gap-2">
                  <FileText className="h-4 w-4 text-blue-500" />
                  <span className="text-sm font-medium">{formDefinition.name}</span>
                  <Badge variant="outline" className="text-xs">
                    {formDefinition.key}
                  </Badge>
                </div>
              ) : (
                <span className="text-sm text-muted-foreground">未绑定</span>
              )}
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button onClick={onConfirm}>
            <Rocket className="h-4 w-4 mr-2" />
            确认发布
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default DeployDialog;

