import { useState } from 'react';
import { Tabs } from 'antd';
import { PartitionOutlined, FileSearchOutlined, CheckSquareOutlined, MonitorOutlined } from '@ant-design/icons';
import ProcessDefinitions from './workflow/ProcessDefinitions';
import PendingTasks from './workflow/PendingTasks';
import CompletedTasks from './workflow/CompletedTasks';
import InstanceMonitor from './workflow/InstanceMonitor';

export default function Workflow() {
  const [activeKey, setActiveKey] = useState('definitions');

  return (
    <div>
      <div className="erp-page-header" style={{ borderBottom: 'none', marginBottom: 0, paddingBottom: 8 }}>
        <div>
          <h4>工作流引擎</h4>
          <div className="erp-page-subtitle">管理流程定义、审批任务和流程监控</div>
        </div>
      </div>

      <Tabs
        activeKey={activeKey}
        onChange={setActiveKey}
        style={{ marginTop: 8 }}
        items={[
          {
            key: 'definitions',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <PartitionOutlined style={{ fontSize: 14 }} />
                流程定义
              </span>
            ),
            children: <ProcessDefinitions />,
          },
          {
            key: 'pending',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <FileSearchOutlined style={{ fontSize: 14 }} />
                我的待办
              </span>
            ),
            children: <PendingTasks />,
          },
          {
            key: 'completed',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <CheckSquareOutlined style={{ fontSize: 14 }} />
                我的已办
              </span>
            ),
            children: <CompletedTasks />,
          },
          {
            key: 'instances',
            label: (
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <MonitorOutlined style={{ fontSize: 14 }} />
                流程监控
              </span>
            ),
            children: <InstanceMonitor />,
          },
        ]}
      />
    </div>
  );
}