import React, { useState } from 'react';
import { Card, Typography, Table, Button, Form, Input, Select, Modal, message, Tabs } from 'antd';
import { SettingOutlined, LogoutOutlined, UserOutlined, KeyOutlined, BellOutlined } from '@ant-design/icons';
import { Link } from 'umi';

const { Title, Text } = Typography;
const { Option } = Select;
const { Item } = Form;
const { TabPane } = Tabs;

interface SystemConfig {
  id: string;
  key: string;
  value: string;
  description: string;
  category: string;
  updatedAt: string;
}

interface SystemLog {
  id: string;
  type: string;
  message: string;
  operator: string;
  ip: string;
  createdAt: string;
}

const SystemManagement: React.FC = () => {
  const [systemConfigs, setSystemConfigs] = useState<SystemConfig[]>([
    {
      id: '1',
      key: 'SYSTEM_NAME',
      value: 'Crawful Hub',
      description: '系统名称',
      category: '基础配置',
      updatedAt: '2026-03-01',
    },
    {
      id: '2',
      key: 'SYSTEM_VERSION',
      value: '1.0.0',
      description: '系统版本',
      category: '基础配置',
      updatedAt: '2026-03-01',
    },
    {
      id: '3',
      key: 'MAX_UPLOAD_SIZE',
      value: '10485760',
      description: '最大上传文件大小（字节）',
      category: '文件配置',
      updatedAt: '2026-03-02',
    },
    {
      id: '4',
      key: 'ALLOWED_FILE_TYPES',
      value: 'jpg,png,gif,pdf,doc,docx,xls,xlsx',
      description: '允许上传的文件类型',
      category: '文件配置',
      updatedAt: '2026-03-02',
    },
  ]);

  const [systemLogs, setSystemLogs] = useState<SystemLog[]>([
    {
      id: '1',
      type: 'login',
      message: '用户 admin 登录系统',
      operator: 'admin',
      ip: '192.168.1.100',
      createdAt: '2026-03-18 10:30:00',
    },
    {
      id: '2',
      type: 'operation',
      message: '用户 admin 修改了系统配置',
      operator: 'admin',
      ip: '192.168.1.100',
      createdAt: '2026-03-18 09:15:00',
    },
    {
      id: '3',
      type: 'logout',
      message: '用户 operator 退出系统',
      operator: 'operator',
      ip: '192.168.1.101',
      createdAt: '2026-03-17 16:45:00',
    },
  ]);

  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [editingConfig, setEditingConfig] = useState<SystemConfig | null>(null);
  const [form] = Form.useForm();

  const handleEditConfig = (config: SystemConfig) => {
    setEditingConfig(config);
    form.setFieldsValue(config);
    setIsModalVisible(true);
  };

  const handleSaveConfig = () => {
    form.validateFields().then(values => {
      if (editingConfig) {
        const updatedConfigs = systemConfigs.map(config => 
          config.id === editingConfig.id ? { ...config, ...values, updatedAt: new Date().toISOString().split('T')[0] } : config
        );
        setSystemConfigs(updatedConfigs);
        message.success('系统配置已更新');
      }
      setIsModalVisible(false);
    });
  };

  const configColumns = [
    {
      title: '配置键',
      dataIndex: 'key',
      key: 'key',
    },
    {
      title: '配置值',
      dataIndex: 'value',
      key: 'value',
    },
    {
      title: '描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: SystemConfig) => (
        <Button 
          type="primary" 
          size="small"
          onClick={() => handleEditConfig(record)}
        >
          编辑
        </Button>
      ),
    },
  ];

  const logColumns = [
    {
      title: '日志ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => (
        <span>
          {type === 'login' ? '登录' : 
           type === 'logout' ? '退出' : 
           type === 'operation' ? '操作' : 
           type === 'error' ? '错误' : type}
        </span>
      ),
    },
    {
      title: '消息',
      dataIndex: 'message',
      key: 'message',
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      key: 'operator',
    },
    {
      title: 'IP地址',
      dataIndex: 'ip',
      key: 'ip',
    },
    {
      title: '操作时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
  ];

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <Title level={4}>系统管理</Title>
      </div>

      <Tabs defaultActiveKey="config" style={{ marginBottom: 24 }}>
        <TabPane tab="系统配置" key="config">
          <Card>
            <Table 
              columns={configColumns} 
              dataSource={systemConfigs} 
              rowKey="id"
              pagination={{ pageSize: 10 }}
            />
          </Card>
        </TabPane>
        <TabPane tab="系统日志" key="logs">
          <Card>
            <Table 
              columns={logColumns} 
              dataSource={systemLogs} 
              rowKey="id"
              pagination={{ pageSize: 10 }}
            />
          </Card>
        </TabPane>
        <TabPane tab="系统信息" key="info">
          <Card>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, padding: 24 }}>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>系统名称：</Text>
                <Text>Crawful Hub</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>系统版本：</Text>
                <Text>1.0.0</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>运行环境：</Text>
                <Text>development</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>Node.js版本：</Text>
                <Text>v18.17.0</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>Umi版本：</Text>
                <Text>4.6.31</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>Ant Design版本：</Text>
                <Text>5.12.8</Text>
              </div>
              <div>
                <Text strong style={{ fontSize: 16, marginRight: 12 }}>最后更新：</Text>
                <Text>2026-03-18</Text>
              </div>
            </div>
          </Card>
        </TabPane>
      </Tabs>

      {/* 配置编辑模态框 */}
      <Modal
        title="编辑系统配置"
        open={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        onOk={handleSaveConfig}
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Item label="配置键" name="key" disabled>
            <Input placeholder="输入配置键" />
          </Item>
          <Item label="配置值" name="value" rules={[{ required: true, message: '请输入配置值' }]}>
            <Input placeholder="输入配置值" />
          </Item>
          <Item label="描述" name="description">
            <Input.TextArea placeholder="输入配置描述" />
          </Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SystemManagement;