import React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Activity, Clock, FileText } from 'lucide-react';
import { cn } from '@/lib/utils';
import { WorkflowHistoricalInstance } from '../types';
import { NodeType } from '../../../Design/nodes/types';
import FlowGraphTab from './tabs/FlowGraphTab';
import TimelineTab from './tabs/TimelineTab';
import DetailInfoTab from './tabs/DetailInfoTab';

interface DetailModalProps {
    visible: boolean;
    onCancel: () => void;
    instanceData?: WorkflowHistoricalInstance;
}

const DetailModal: React.FC<DetailModalProps> = ({ visible, onCancel, instanceData }) => {
    if (!instanceData) return null;

    // 获取状态徽章
    const getStatusBadge = (status: string) => {
        const statusMap: Record<string, { variant: 'default' | 'secondary' | 'destructive' | 'outline' | 'success'; text: string; className?: string }> = {
            COMPLETED: { 
                variant: 'success', 
                text: '已完成',
                className: 'bg-green-100 text-green-700 border-green-200'
            },
            RUNNING: { 
                variant: 'default', 
                text: '运行中',
                className: 'bg-blue-100 text-blue-700 border-blue-200 animate-pulse'
            },
            FAILED: { 
                variant: 'destructive', 
                text: '失败',
                className: 'bg-red-100 text-red-700 border-red-200'
            },
            TERMINATED: { 
                variant: 'secondary', 
                text: '已终止',
                className: 'bg-orange-100 text-orange-700 border-orange-200'
            },
            NOT_STARTED: { 
                variant: 'outline', 
                text: '未执行',
                className: 'bg-gray-50 text-gray-600 border-gray-300'
            }
        };
        const statusInfo = statusMap[status] || statusMap.NOT_STARTED;
        return (
            <Badge 
                variant={statusInfo.variant}
                className={cn('font-medium', statusInfo.className)}
            >
                {statusInfo.text}
            </Badge>
        );
    };

    // 获取节点类型文本
    const getNodeTypeText = (nodeType: string) => {
        const nodeTypeMap: Record<NodeType, string> = {
            [NodeType.START_EVENT]: '开始节点',
            [NodeType.END_EVENT]: '结束节点',
            [NodeType.SERVICE_TASK]: '服务任务',
            [NodeType.USER_TASK]: '用户任务',
            [NodeType.SCRIPT_TASK]: '脚本任务',
            [NodeType.NOTIFICATION]: '通知任务',
            [NodeType.JENKINS_BUILD]: 'Jenkins构建',
            [NodeType.APPROVAL]: '审批任务',
            [NodeType.DEPLOY_NODE]: '部署节点',
            [NodeType.GATEWAY_NODE]: '网关节点',
            [NodeType.SUB_PROCESS]: '子流程',
            [NodeType.CALL_ACTIVITY]: '调用活动',
        };
        return nodeTypeMap[nodeType as NodeType] || nodeType;
    };

    return (
        <Dialog open={visible} onOpenChange={(open) => !open && onCancel()}>
            <DialogContent className="!max-w-7xl w-[90vw] h-[85vh] flex flex-col p-0 overflow-hidden">
                <DialogHeader className="px-6 pt-6 pb-4 border-b flex-shrink-0">
                    <DialogTitle className="flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <span className="text-lg font-semibold">流程执行详情</span>
                            {getStatusBadge(instanceData.status)}
                        </div>
                        <div className="text-sm text-muted-foreground font-normal">
                            实例ID: <span className="font-mono">{instanceData.processInstanceId}</span>
                        </div>
                    </DialogTitle>
                </DialogHeader>
                
                <div className="flex-1 overflow-hidden flex flex-col">
                    <Tabs defaultValue="graph" className="flex-1 flex flex-col overflow-hidden">
                        <TabsList className="grid w-full grid-cols-3 h-12 mx-6 mt-4 rounded-none">
                            <TabsTrigger value="graph" className="data-[state=active]:bg-background">
                                <Activity className="h-4 w-4 mr-2" />
                                流程图
                            </TabsTrigger>
                            <TabsTrigger value="timeline" className="data-[state=active]:bg-background">
                                <Clock className="h-4 w-4 mr-2" />
                                执行时间线
                            </TabsTrigger>
                            <TabsTrigger value="info" className="data-[state=active]:bg-background">
                                <FileText className="h-4 w-4 mr-2" />
                                详细信息
                            </TabsTrigger>
                        </TabsList>

                        <TabsContent value="graph" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                            <FlowGraphTab 
                                instanceData={instanceData}
                                getStatusBadge={getStatusBadge}
                                getNodeTypeText={getNodeTypeText}
                            />
                        </TabsContent>

                        <TabsContent value="timeline" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                            <TimelineTab 
                                instanceData={instanceData}
                                getStatusBadge={getStatusBadge}
                                getNodeTypeText={getNodeTypeText}
                            />
                        </TabsContent>

                        <TabsContent value="info" className="flex-1 mt-4 mx-6 overflow-auto focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0">
                            <DetailInfoTab 
                                instanceData={instanceData}
                                getStatusBadge={getStatusBadge}
                            />
                        </TabsContent>
                    </Tabs>
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default DetailModal;
