import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { 
    FileText, Hash, Key, Calendar, Clock, Activity, 
    CheckCircle, List, Timer 
} from 'lucide-react';
import dayjs from 'dayjs';
import { WorkflowHistoricalInstance } from '../../types';

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

const DetailInfoTab: React.FC<DetailInfoTabProps> = ({
    instanceData,
    getStatusBadge
}) => {
    // 信息项组件
    const InfoItem = ({ 
        icon: Icon, 
        label, 
        value, 
        valueClass = '' 
    }: { 
        icon: any; 
        label: string; 
        value: React.ReactNode; 
        valueClass?: string;
    }) => (
        <div className="flex items-start py-3 px-4 rounded-lg hover:bg-accent/50 transition-colors">
            <div className="flex items-center gap-3 w-48 flex-shrink-0">
                <Icon className="h-4 w-4 text-muted-foreground" />
                <span className="text-sm font-medium text-muted-foreground">{label}</span>
            </div>
            <div className={`flex-1 text-sm ${valueClass}`}>
                {value}
            </div>
        </div>
    );

    // 计算总耗时
    const totalDuration = instanceData.startTime && instanceData.endTime
        ? dayjs(instanceData.endTime).diff(dayjs(instanceData.startTime), 'second')
        : null;

    // 格式化耗时
    const formatDuration = (seconds: number) => {
        if (seconds < 60) return `${seconds}秒`;
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = seconds % 60;
        if (minutes < 60) return `${minutes}分${remainingSeconds}秒`;
        const hours = Math.floor(minutes / 60);
        const remainingMinutes = minutes % 60;
        return `${hours}小时${remainingMinutes}分${remainingSeconds}秒`;
    };

    return (
        <div className="space-y-4">
            {/* 基本信息 */}
            <Card>
                <CardContent className="pt-6">
                    <div className="flex items-center gap-2 mb-4 pb-2 border-b">
                        <FileText className="h-5 w-5 text-primary" />
                        <h3 className="font-semibold text-lg">基本信息</h3>
                    </div>
                    <div className="space-y-1">
                        <InfoItem 
                            icon={Hash}
                            label="流程实例ID" 
                            value={
                                <span className="font-mono text-xs break-all">
                                    {instanceData.processInstanceId}
                                </span>
                            }
                        />
                        <InfoItem 
                            icon={Hash}
                            label="流程定义ID" 
                            value={
                                <span className="font-mono text-xs break-all">
                                    {instanceData.processDefinitionId}
                                </span>
                            }
                        />
                        <InfoItem 
                            icon={Key}
                            label="业务标识" 
                            value={
                                <span className="font-mono font-semibold">
                                    {instanceData.businessKey}
                                </span>
                            }
                        />
                        <InfoItem 
                            icon={CheckCircle}
                            label="执行状态" 
                            value={getStatusBadge(instanceData.status)}
                        />
                    </div>
                </CardContent>
            </Card>

            {/* 时间信息 */}
            <Card>
                <CardContent className="pt-6">
                    <div className="flex items-center gap-2 mb-4 pb-2 border-b">
                        <Clock className="h-5 w-5 text-primary" />
                        <h3 className="font-semibold text-lg">时间信息</h3>
                    </div>
                    <div className="space-y-1">
                        <InfoItem 
                            icon={Calendar}
                            label="开始时间" 
                            value={
                                <span className="font-mono">
                                    {dayjs(instanceData.startTime).format('YYYY-MM-DD HH:mm:ss')}
                                </span>
                            }
                        />
                        <InfoItem 
                            icon={Calendar}
                            label="结束时间" 
                            value={
                                instanceData.endTime ? (
                                    <span className="font-mono">
                                        {dayjs(instanceData.endTime).format('YYYY-MM-DD HH:mm:ss')}
                                    </span>
                                ) : (
                                    <span className="text-blue-500 font-medium flex items-center gap-2">
                                        <Activity className="h-4 w-4 animate-pulse" />
                                        进行中...
                                    </span>
                                )
                            }
                        />
                        {totalDuration !== null && (
                            <InfoItem 
                                icon={Timer}
                                label="总耗时" 
                                value={
                                    <span className="font-semibold text-primary text-base">
                                        {formatDuration(totalDuration)}
                                    </span>
                                }
                            />
                        )}
                    </div>
                </CardContent>
            </Card>

            {/* 执行统计 */}
            <Card>
                <CardContent className="pt-6">
                    <div className="flex items-center gap-2 mb-4 pb-2 border-b">
                        <List className="h-5 w-5 text-primary" />
                        <h3 className="font-semibold text-lg">执行统计</h3>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        {/* 总节点数 */}
                        <div className="p-4 rounded-lg bg-blue-50 border border-blue-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <p className="text-xs text-blue-600 mb-1">执行节点数</p>
                                    <p className="text-2xl font-bold text-blue-700">
                                        {instanceData.stages.length}
                                    </p>
                                </div>
                                <List className="h-8 w-8 text-blue-300" />
                            </div>
                        </div>

                        {/* 已完成节点 */}
                        <div className="p-4 rounded-lg bg-green-50 border border-green-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <p className="text-xs text-green-600 mb-1">已完成节点</p>
                                    <p className="text-2xl font-bold text-green-700">
                                        {instanceData.stages.filter(s => s.status === 'COMPLETED').length}
                                    </p>
                                </div>
                                <CheckCircle className="h-8 w-8 text-green-300" />
                            </div>
                        </div>

                        {/* 运行中节点 */}
                        <div className="p-4 rounded-lg bg-orange-50 border border-orange-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <p className="text-xs text-orange-600 mb-1">运行中节点</p>
                                    <p className="text-2xl font-bold text-orange-700">
                                        {instanceData.stages.filter(s => s.status === 'RUNNING').length}
                                    </p>
                                </div>
                                <Activity className="h-8 w-8 text-orange-300 animate-pulse" />
                            </div>
                        </div>

                        {/* 失败节点 */}
                        <div className="p-4 rounded-lg bg-red-50 border border-red-200">
                            <div className="flex items-center justify-between">
                                <div>
                                    <p className="text-xs text-red-600 mb-1">失败节点</p>
                                    <p className="text-2xl font-bold text-red-700">
                                        {instanceData.stages.filter(s => s.status === 'FAILED').length}
                                    </p>
                                </div>
                                <activity className="h-8 w-8 text-red-300" />
                            </div>
                        </div>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
};

export default DetailInfoTab;

