import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Clock, CheckCircle2, XCircle, AlertCircle, Play } from 'lucide-react';
import dayjs from 'dayjs';
import { WorkflowHistoricalInstance } from '../../types';

interface TimelineTabProps {
    instanceData: WorkflowHistoricalInstance;
    getStatusBadge: (status: string) => React.ReactNode;
    getNodeTypeText: (nodeType: string) => string;
}

const TimelineTab: React.FC<TimelineTabProps> = ({
    instanceData,
    getStatusBadge,
    getNodeTypeText
}) => {
    const getStatusIcon = (status: string) => {
        switch (status) {
            case 'COMPLETED':
                return <CheckCircle2 className="h-5 w-5 text-green-500" />;
            case 'RUNNING':
                return <Play className="h-5 w-5 text-blue-500 animate-pulse" />;
            case 'FAILED':
                return <XCircle className="h-5 w-5 text-red-500" />;
            default:
                return <AlertCircle className="h-5 w-5 text-gray-400" />;
        }
    };

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'COMPLETED':
                return {
                    border: 'border-green-500',
                    bg: 'bg-green-50',
                    line: 'bg-green-200'
                };
            case 'RUNNING':
                return {
                    border: 'border-blue-500',
                    bg: 'bg-blue-50',
                    line: 'bg-blue-200'
                };
            case 'FAILED':
                return {
                    border: 'border-red-500',
                    bg: 'bg-red-50',
                    line: 'bg-red-200'
                };
            default:
                return {
                    border: 'border-gray-300',
                    bg: 'bg-gray-50',
                    line: 'bg-gray-200'
                };
        }
    };

    return (
        <Card>
            <CardContent className="pt-6">
                <div className="relative space-y-6">
                    {instanceData.stages.map((stage, index) => {
                        const colors = getStatusColor(stage.status);
                        const duration = stage.startTime && stage.endTime
                            ? dayjs(stage.endTime).diff(dayjs(stage.startTime), 'second')
                            : null;

                        return (
                            <div key={stage.id || index} className="flex gap-6 relative">
                                {/* 时间线左侧 */}
                                <div className="flex flex-col items-center w-16">
                                    {/* 时间轴圆点 */}
                                    <div 
                                        className={`
                                            flex items-center justify-center 
                                            w-10 h-10 rounded-full border-2 ${colors.border} ${colors.bg}
                                            shadow-md transition-all duration-200
                                            hover:scale-110 hover:shadow-lg
                                            z-10
                                        `}
                                    >
                                        {getStatusIcon(stage.status)}
                                    </div>
                                    
                                    {/* 连接线 */}
                                    {index < instanceData.stages.length - 1 && (
                                        <div className={`w-0.5 flex-1 ${colors.line} mt-2`} />
                                    )}
                                </div>

                                {/* 时间线内容 */}
                                <div className="flex-1 pb-6">
                                    <Card className="shadow-sm hover:shadow-md transition-shadow duration-200">
                                        <CardContent className="pt-4">
                                            {/* 节点名称和类型 */}
                                            <div className="flex items-start justify-between mb-3">
                                                <div>
                                                    <h4 className="font-semibold text-base mb-1">
                                                        {stage.nodeName}
                                                    </h4>
                                                    <p className="text-sm text-muted-foreground">
                                                        {getNodeTypeText(stage.nodeType)}
                                                    </p>
                                                </div>
                                                <div>
                                                    {getStatusBadge(stage.status)}
                                                </div>
                                            </div>

                                            {/* 时间信息 */}
                                            <div className="space-y-2">
                                                {stage.startTime && (
                                                    <div className="flex items-center gap-2 text-sm">
                                                        <Clock className="h-4 w-4 text-muted-foreground" />
                                                        <span className="text-muted-foreground">开始：</span>
                                                        <span className="font-mono">
                                                            {dayjs(stage.startTime).format('YYYY-MM-DD HH:mm:ss')}
                                                        </span>
                                                    </div>
                                                )}
                                                
                                                {stage.endTime && (
                                                    <div className="flex items-center gap-2 text-sm">
                                                        <Clock className="h-4 w-4 text-muted-foreground" />
                                                        <span className="text-muted-foreground">结束：</span>
                                                        <span className="font-mono">
                                                            {dayjs(stage.endTime).format('YYYY-MM-DD HH:mm:ss')}
                                                        </span>
                                                    </div>
                                                )}

                                                {duration !== null && (
                                                    <div className="flex items-center gap-2 text-sm">
                                                        <span className="text-muted-foreground">耗时：</span>
                                                        <span className="font-semibold text-primary">
                                                            {duration < 60 
                                                                ? `${duration}秒` 
                                                                : `${Math.floor(duration / 60)}分${duration % 60}秒`
                                                            }
                                                        </span>
                                                    </div>
                                                )}
                                            </div>
                                        </CardContent>
                                    </Card>
                                </div>
                            </div>
                        );
                    })}
                </div>

                {/* 空状态 */}
                {instanceData.stages.length === 0 && (
                    <div className="text-center py-12 text-muted-foreground">
                        <AlertCircle className="h-12 w-12 mx-auto mb-4 opacity-50" />
                        <p>暂无执行记录</p>
                    </div>
                )}
            </CardContent>
        </Card>
    );
};

export default TimelineTab;

