import React from 'react';
import {Card, Row, Col, Statistic, Table, Tag, Space} from 'antd';
import {PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend} from 'recharts';

// Mock 数据
const mockStatistics = {
    totalInstances: 1256,
    runningInstances: 23,
    completedToday: 156,
    failedToday: 5
};

const mockStatusDistribution = [
    {name: '运行中', value: 23, color: '#1890ff', percent: '1.8%'},
    {name: '已完成', value: 892, color: '#52c41a', percent: '71.0%'},
    {name: '失败', value: 45, color: '#ff4d4f', percent: '3.6%'},
    {name: '已终止', value: 296, color: '#faad14', percent: '23.6%'}
];

const mockRecentExecutions = [
    {
        id: 1,
        name: '数据同步流程',
        businessKey: 'SYNC_20241217001',
        startTime: '2024-12-17 20:35:18',
        status: 'RUNNING',
        progress: 45
    },
    {
        id: 2,
        name: '订单处理流程',
        businessKey: 'ORDER_20241217002',
        startTime: '2024-12-17 20:30:00',
        status: 'COMPLETED',
        progress: 100
    },
    {
        id: 3,
        name: '数据备份流程',
        businessKey: 'BACKUP_20241217003',
        startTime: '2024-12-17 20:25:00',
        status: 'FAILED',
        progress: 75
    }
];

const WorkflowMonitor: React.FC = () => {
    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: '已终止'}
        };
        const statusInfo = statusMap[status] || {color: 'default', text: status};
        return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
    };

    const columns = [
        {
            title: '流程名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '业务标识',
            dataIndex: 'businessKey',
            key: 'businessKey'
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            key: 'startTime'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: string) => getStatusTag(status)
        },
        {
            title: '操作',
            key: 'action',
            render: (record: any) => (
                <Space size="middle">
                    <a onClick={() => console.log('查看详情', record)}>查看详情</a>
                    {record.status === 'RUNNING' && (
                        <a onClick={() => console.log('终止流程', record)}>终止流程</a>
                    )}
                </Space>
            )
        }
    ];

    const CustomTooltip = ({active, payload}: any) => {
        if (active && payload && payload.length) {
            const data = payload[0].payload;
            return (
                <div className="bg-white p-2 border border-gray-200 rounded shadow-sm">
                    <p className="font-medium">{data.name}</p>
                    <p className="text-gray-600">数量: {data.value}</p>
                    <p className="text-gray-600">占比: {data.percent}</p>
                </div>
            );
        }
        return null;
    };

    return (
        <div className="p-6">
            {/* 统计卡片 */}
            <Row gutter={16} className="mb-6">
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="总流程实例"
                            value={mockStatistics.totalInstances}
                            valueStyle={{color: '#1890ff'}}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="运行中实例"
                            value={mockStatistics.runningInstances}
                            valueStyle={{color: '#52c41a'}}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="今日完成"
                            value={mockStatistics.completedToday}
                            valueStyle={{color: '#1890ff'}}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="今日失败"
                            value={mockStatistics.failedToday}
                            valueStyle={{color: '#ff4d4f'}}
                        />
                    </Card>
                </Col>
            </Row>

            {/* 状态分布和实时执行 */}
            <Row gutter={16}>
                <Col span={8}>
                    <Card title="状态分布">
                        <div style={{height: 300}}>
                            <ResponsiveContainer width="100%" height="100%">
                                <PieChart>
                                    <Pie
                                        data={mockStatusDistribution}
                                        cx="50%"
                                        cy="50%"
                                        innerRadius={60}
                                        outerRadius={80}
                                        paddingAngle={5}
                                        dataKey="value"
                                        label={({name, percent}) => `${name} ${(percent * 100).toFixed(1)}%`}
                                        labelLine={true}
                                    >
                                        {mockStatusDistribution.map((entry, index) => (
                                            <Cell key={index} fill={entry.color}/>
                                        ))}
                                    </Pie>
                                    <Tooltip content={<CustomTooltip/>}/>
                                    <Legend/>
                                </PieChart>
                            </ResponsiveContainer>
                        </div>
                    </Card>
                </Col>
                <Col span={16}>
                    <Card title="实时执行列表" extra={<a href="#">查看更多</a>}>
                        <Table
                            columns={columns}
                            dataSource={mockRecentExecutions}
                            rowKey="id"
                            pagination={false}
                        />
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default WorkflowMonitor; 