import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogBody } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { useToast } from '@/components/ui/use-toast';
import type { FlowEdge, FlowNode } from '../types';
import { convertToUUID, convertToDisplayName } from '@/utils/workflow/variableConversion';
import CodeMirrorVariableInput from '@/components/CodeMirrorVariableInput';
import type { FormField as FormFieldType } from '@/components/CodeMirrorVariableInput/types';

interface EdgeConfigModalProps {
    visible: boolean;
    edge: FlowEdge | null;
    allNodes: FlowNode[];
    allEdges: FlowEdge[];
    formFields?: FormFieldType[];
    onOk: (edgeId: string, condition: EdgeCondition) => void;
    onCancel: () => void;
}

export interface EdgeCondition {
    type: 'EXPRESSION' | 'DEFAULT';
    expression?: string;
    priority: number;
}

// ✅ 简化的 Zod 验证 Schema（不再需要type字段）
const edgeConditionSchema = z.object({
    expression: z.string().optional(),  // 可选，为空表示默认路径
    priority: z.number()
        .min(1, '优先级最小为 1')
        .max(998, '优先级最大为 998'),  // 条件分支的优先级范围
});

type EdgeConditionFormValues = z.infer<typeof edgeConditionSchema>;

/**
 * 边条件配置弹窗
 * 支持两种场景：
 * 1. 网关节点的出口连线（推荐用于复杂分支逻辑）
 * 2. 普通节点的条件分支连线（简单场景可直接在线上配置）
 */
const EdgeConfigModal: React.FC<EdgeConfigModalProps> = ({
    visible,
    edge,
    allNodes,
    allEdges,
    formFields = [],
    onOk,
    onCancel
}) => {
    // ✅ 所有 Hooks 必须在最顶部调用，不能放在条件语句后面
    const { toast } = useToast();
    
    const form = useForm<EdgeConditionFormValues>({
        resolver: zodResolver(edgeConditionSchema),
        defaultValues: {
            expression: '',
            priority: 10,
        },
    });
    
    // 监听表达式字段，判断是否为默认路径
    const expression = form.watch('expression');
    const isDefaultBranch = !expression?.trim();

    // 当 edge 变化时，更新表单值
    useEffect(() => {
        if (visible && edge && allNodes.length > 0) {
            const condition = edge.data?.condition;
            
            // 转换 expression 中的 UUID 为显示名称
            const displayExpression = condition?.expression 
                ? convertToDisplayName(condition.expression, allNodes)
                : '';
            
            // 如果是默认路径，不显示优先级（自动为999）
            const priority = condition?.type === 'DEFAULT' 
                ? 10  // UI默认值
                : (condition?.priority || 10);
            
            form.reset({
                expression: displayExpression,
                priority,
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [visible, edge?.id]);
    
    // ⚠️ 检查源节点是否为网关节点（Hooks 调用之后再判断）
    const sourceNode = edge ? allNodes.find(n => n.id === edge.source) : null;
    const isFromGateway = sourceNode?.data?.nodeType === 'GATEWAY_NODE';
    // ✅ 网关类型存储在 inputMapping 中，不是 configs 中
    const gatewayType = isFromGateway ? (sourceNode?.data?.inputMapping?.gatewayType || sourceNode?.data?.configs?.gatewayType) : null;
    
    // 获取源节点的所有出口连线（不管是不是网关节点）
    const sourceEdges = edge
        ? allEdges.filter(e => e.source === edge.source)
        : [];
    
    // 检查是否已有其他默认分支
    const hasOtherDefaultBranch = sourceEdges.some(e => 
        e.id !== edge?.id && 
        e.data?.condition?.type === 'DEFAULT'
    );
    
    // 检查优先级是否重复
    const usedPriorities = sourceEdges
        .filter(e => e.id !== edge?.id && e.data?.condition?.type === 'EXPRESSION')
        .map(e => e.data?.condition?.priority)
        .filter((p): p is number => p !== undefined);

    const handleSubmit = (values: EdgeConditionFormValues) => {
        if (!edge) return;
        
        // 判断是否为默认路径（表达式为空）
        const expr = values.expression?.trim();
        const isDefault = !expr;
        
        // 1. 检查多个默认分支（已在UI上显示红色警告框，此处直接阻止提交）
        if (isDefault && hasOtherDefaultBranch) {
            return;
        }
        
        // 2. 网关节点必须先配置类型
        if (isFromGateway && !gatewayType) {
            toast({
                variant: 'destructive',
                title: '网关节点未配置',
                description: '请先关闭此弹窗，双击网关节点配置其类型（排他/并行/包容），然后再配置分支条件。',
                duration: 5000,
            });
            return;
        }
        
        // 3. 条件分支的验证
        if (!isDefault) {
            // 3.1 检查优先级重复
            if (usedPriorities.includes(values.priority)) {
                toast({
                    variant: 'destructive',
                    title: '优先级冲突',
                    description: `优先级 ${values.priority} 已被其他分支使用。已使用的优先级：${usedPriorities.join(', ')}。请选择不同的优先级。`,
                    duration: 5000,
                });
                return;
            }
            
            // 3.2 转换显示名称为 UUID
            const uuidExpression = convertToUUID(expr, allNodes);
            
            // 3.3 检查是否包含变量引用
            const hasVariable = /\$\{[^}]+\}/.test(uuidExpression);
            if (!hasVariable) {
                toast({
                    variant: 'destructive',
                    title: '条件表达式格式错误',
                    description: '表达式必须包含变量引用！正确格式：${上游节点名称.字段名 == \'值\'}。点击输入框可查看可用变量。',
                    duration: 6000,
                });
                return;
            }
            
            // 3.4 并行网关提示（不阻止）
            if (isFromGateway && gatewayType === 'parallelGateway') {
                toast({
                    title: '💡 温馨提示',
                    description: '并行网关的所有分支都会同时执行，配置条件表达式不会影响执行逻辑。建议保持默认配置即可。',
                    duration: 4000,
                });
            }
        }
        
        // 4. 构建条件数据
        const condition: EdgeCondition = isDefault
            ? {
                type: 'DEFAULT',
                priority: 999  // 默认路径自动设为最低优先级
              }
            : {
                type: 'EXPRESSION',
                expression: convertToUUID(expr, allNodes),
                priority: values.priority
              };
        
        // 5. 成功提示
        toast({
            title: '✅ 保存成功',
            description: isDefault 
                ? '已设置为默认路径（当所有其他条件都不满足时执行）' 
                : `已设置条件分支，优先级：${values.priority}`,
            duration: 2000,
        });
        
        onOk(edge.id, condition);
        handleClose();
    };

    const handleClose = () => {
        form.reset();
        onCancel();
    };

    return (
        <Dialog open={visible} onOpenChange={(open) => !open && handleClose()}>
            <DialogContent className="sm:max-w-[600px]">
                <DialogHeader>
                    <DialogTitle>配置边条件</DialogTitle>
                    <DialogDescription>
                        {isFromGateway ? (
                            <>
                                源节点为<strong>网关节点</strong>
                                {gatewayType === 'exclusiveGateway' && '（排他网关）：根据优先级选择唯一一条分支'}
                                {gatewayType === 'parallelGateway' && '（并行网关）：所有分支同时执行，无需条件'}
                                {gatewayType === 'inclusiveGateway' && '（包容网关）：根据条件选择多条分支'}
                            </>
                        ) : (
                            '设置流程分支的条件表达式和优先级'
                        )}
                    </DialogDescription>
                </DialogHeader>

                <DialogBody>
                    {/* ⚠️ 关键配置提示：网关节点未配置类型 */}
                    {isFromGateway && !gatewayType && (
                        <div className="rounded-md bg-amber-50 dark:bg-amber-950/20 border-2 border-amber-400 dark:border-amber-600 p-4 text-sm mb-6">
                            <div className="flex items-start gap-3">
                                <span className="text-2xl">⚠️</span>
                                <div className="flex-1 space-y-3">
                                    <p className="font-bold text-amber-900 dark:text-amber-200 text-base">
                                        网关节点尚未配置类型
                                    </p>
                                    <p className="text-amber-800 dark:text-amber-300">
                                        在配置分支条件之前，您需要先设置网关节点的类型。请按以下步骤操作：
                                    </p>
                                    <ol className="list-decimal list-inside text-amber-800 dark:text-amber-300 space-y-2 ml-2">
                                        <li className="font-medium">关闭此弹窗</li>
                                        <li className="font-medium">双击画布上的网关节点（菱形图标）</li>
                                        <li className="font-medium">在配置面板中选择网关类型：
                                            <ul className="list-disc list-inside ml-6 mt-1 space-y-1 font-normal">
                                                <li><strong>排他网关（XOR）</strong>：根据条件选择唯一一条分支（如：成功/失败）</li>
                                                <li><strong>并行网关（AND）</strong>：所有分支同时执行（如：同时通知多人）</li>
                                                <li><strong>包容网关（OR）</strong>：根据条件选择多条分支</li>
                                            </ul>
                                        </li>
                                        <li className="font-medium">保存网关配置后，再回来配置分支条件</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* 错误提示：多个默认分支（网关节点） */}
                    {isFromGateway && gatewayType && gatewayType !== 'parallelGateway' && hasOtherDefaultBranch && isDefaultBranch && (
                        <div className="rounded border border-red-300 dark:border-red-700 bg-red-50/50 dark:bg-red-950/10 px-3 py-2.5 mb-4">
                            <div className="flex items-start gap-2">
                                <div className="flex-shrink-0 w-4 h-4 mt-0.5 rounded-full bg-red-500 flex items-center justify-center">
                                    <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </div>
                                <div className="flex-1">
                                    <p className="text-sm text-red-800 dark:text-red-300">
                                        当前网关已有一个默认分支，请将此分支配置为条件表达式。
                                    </p>
                                </div>
                            </div>
                        </div>
                    )}


                    {/* 并行网关：简洁提示 */}
                    {isFromGateway && gatewayType === 'parallelGateway' ? (
                        <div className="py-8 text-center text-gray-500 dark:text-gray-400">
                            <p className="text-sm">并行网关的所有分支自动执行，无需配置条件。</p>
                        </div>
                    ) : (
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
                                {/* 智能提示：默认路径说明（仅在没有冲突时显示） */}
                                {isDefaultBranch && !hasOtherDefaultBranch && (
                                    <div className="rounded border border-blue-300 dark:border-blue-700 bg-blue-50/50 dark:bg-blue-950/10 px-3 py-2.5 mb-4">
                                        <div className="flex items-start gap-2">
                                            <div className="flex-shrink-0 w-4 h-4 mt-0.5 rounded-full bg-blue-500 flex items-center justify-center">
                                                <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                </svg>
                                            </div>
                                            <div className="flex-1">
                                                <p className="text-sm text-blue-800 dark:text-blue-300">
                                                    默认路径：未配置条件时作为默认分支执行，优先级自动设为999。
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                )}
                                
                                {/* 错误提示：多个默认分支（仅非网关节点） */}
                                {!isFromGateway && isDefaultBranch && hasOtherDefaultBranch && (
                                    <div className="rounded border border-red-300 dark:border-red-700 bg-red-50/50 dark:bg-red-950/10 px-3 py-2.5 mb-4">
                                        <div className="flex items-start gap-2">
                                            <div className="flex-shrink-0 w-4 h-4 mt-0.5 rounded-full bg-red-500 flex items-center justify-center">
                                                <svg className="w-2.5 h-2.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                                                </svg>
                                            </div>
                                            <div className="flex-1">
                                                <p className="text-sm text-red-800 dark:text-red-300">
                                                    节点"{sourceNode?.data.label}"已有默认分支，请将此分支配置为条件表达式。
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                )}

                                {/* ✅ 条件表达式输入（核心字段） */}
                                <FormField
                                    control={form.control}
                                    name="expression"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>条件表达式</FormLabel>
                                            <FormControl>
                                                <CodeMirrorVariableInput
                                                    value={field.value || ''}
                                                    onChange={field.onChange}
                                                    allNodes={allNodes}
                                                    allEdges={allEdges}
                                                    currentNodeId={edge?.target || ''}
                                                    formFields={formFields}
                                                    variant="textarea"
                                                    placeholder={hasOtherDefaultBranch 
                                                        ? "例如: ${Jenkins构建.status} == 'SUCCESS'" 
                                                        : "例如: ${Jenkins构建.status} == 'SUCCESS'，留空表示默认路径"
                                                    }
                                                    rows={4}
                                                />
                                            </FormControl>
                                            <FormDescription>
                                                {hasOtherDefaultBranch ? (
                                                    <>当前已有默认分支，请填写条件表达式。使用 JUEL 语法，支持比较运算符（==、!=、&gt;、&lt;）和逻辑运算符（&amp;&amp;、||）</>
                                                ) : (
                                                    <>留空作为默认路径（所有条件不满足时执行）。填写时使用 JUEL 语法，支持比较运算符（==、!=、&gt;、&lt;）和逻辑运算符（&amp;&amp;、||）</>
                                                )}
                                            </FormDescription>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                {/* ✅ 优先级（仅条件分支显示） */}
                                {!isDefaultBranch && (
                                    <FormField
                                        control={form.control}
                                        name="priority"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>优先级</FormLabel>
                                                <FormControl>
                                                    <Input
                                                        type="number"
                                                        min={1} 
                                                        max={998} 
                                                        placeholder="请输入优先级（数字越小越优先）"
                                                        {...field}
                                                        onChange={(e) => field.onChange(Number(e.target.value))}
                                                    />
                                                </FormControl>
                                                <FormDescription>
                                                    数字越小优先级越高，按优先级顺序评估条件（1-998），默认路径自动为999。
                                                    {usedPriorities.length > 0 && ` 已使用：${usedPriorities.join(', ')}`}
                                                </FormDescription>
                                                <FormMessage />
                                            </FormItem>
                                        )}
                                    />
                                )}
                        </form>
                    </Form>
                    )}
                </DialogBody>

                <DialogFooter>
                    <Button type="button" variant="outline" onClick={handleClose}>
                        {isFromGateway && gatewayType === 'parallelGateway' ? '关闭' : '取消'}
                    </Button>
                    {/* 并行网关不需要确定按钮 */}
                    {(!isFromGateway || gatewayType !== 'parallelGateway') && (
                        <Button type="submit" onClick={form.handleSubmit(handleSubmit)}>
                            确定
                        </Button>
                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};

export default EdgeConfigModal;

