import React from 'react';
import { Modal, Steps, Card, Descriptions, Tag, Timeline } from 'antd';
import { WorkflowHistoricalInstance, WorkflowInstanceStage } from '../types';
import dayjs from 'dayjs';

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

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

    const getStatusTag = (status: string) => {
        const statusMap: Record<string, { color: string; text: string }> = {
            COMPLETED: { color: 'success', text: '已完成' },
            RUNNING: { color: 'processing', text: '运行中' },
            FAILED: { color: 'error', text: '失败' },
            TERMINATED: { color: 'warning', text: '已终止' },
            NOT_STARTED: { color: 'default', text: '未执行' }
        };
        const statusInfo = statusMap[status] || { color: 'default', text: status };
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
    };

    const getNodeTypeText = (nodeType: string) => {
        const nodeTypeMap: Record<string, string> = {
            startEvent: '开始节点',
            endEvent: '结束节点',
            serviceTask: '服务任务',
            userTask: '用户任务',
            scriptTask: '脚本任务'
        };
        return nodeTypeMap[nodeType] || nodeType;
    };

    const getStepStatus = (stage: WorkflowInstanceStage) => {
        switch (stage.status) {
            case 'COMPLETED':
                return 'finish';
            case 'RUNNING':
                return 'process';
            case 'FAILED':
                return 'error';
            case 'TERMINATED':
                return 'wait';
            default:
                return 'wait';
        }
    };

    return (
        <Modal
            title="流程执行详情"
            open={visible}
            onCancel={onCancel}
            width={1200}
            footer={null}
        >
            <Card className="mb-4">
                <Descriptions title="基本信息" bordered column={2}>
                    <Descriptions.Item label="业务标识">{instanceData.businessKey}</Descriptions.Item>
                    <Descriptions.Item label="状态">{getStatusTag(instanceData.status)}</Descriptions.Item>
                    <Descriptions.Item label="开始时间">{dayjs(instanceData.startTime).format('YYYY-MM-DD HH:mm:ss')}</Descriptions.Item>
                    <Descriptions.Item label="结束时间">
                        {instanceData.endTime ? dayjs(instanceData.endTime).format('YYYY-MM-DD HH:mm:ss') : '暂无'}
                    </Descriptions.Item>
                    <Descriptions.Item label="流程实例ID">{instanceData.processInstanceId}</Descriptions.Item>
                    <Descriptions.Item label="流程定义ID">{instanceData.processDefinitionId}</Descriptions.Item>
                </Descriptions>
            </Card>

            <Card title="执行阶段" className="mb-4">
                <Steps
                    progressDot
                    current={instanceData.stages.length}
                    items={instanceData.stages.map((stage) => ({
                        title: stage.nodeName,
                        description: (
                            <div className="text-xs">
                                <div>{getNodeTypeText(stage.nodeType)}</div>
                                <div>{getStatusTag(stage.status)}</div>
                            </div>
                        ),
                        status: getStepStatus(stage)
                    }))}
                />
            </Card>

            <Card title="详细时间线">
                <Timeline
                    items={instanceData.stages.map((stage) => ({
                        color: stage.status === 'COMPLETED' ? 'green' : 
                               stage.status === 'FAILED' ? 'red' : 
                               stage.status === 'RUNNING' ? 'blue' : 'gray',
                        children: (
                            <div>
                                <div className="font-medium">{stage.nodeName}</div>
                                {stage.id && (
                                    <div className="text-gray-500 text-sm">
                                        {dayjs(stage.startTime).format('YYYY-MM-DD HH:mm:ss')}
                                        {stage.endTime && ` - ${dayjs(stage.endTime).format('YYYY-MM-DD HH:mm:ss')}`}
                                    </div>
                                )}
                                <div>{getStatusTag(stage.status)}</div>
                            </div>
                        )
                    }))}
                />
            </Card>
        </Modal>
    );
};

export default DetailModal;
