import React from 'react';
import { Card, Typography, Button, Table, Tag, Space, Select, DatePicker, Input } from 'antd';
import { DownloadOutlined, DeleteOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;
const { RangePicker } = DatePicker;

const SystemLogsPage: React.FC = () => {
  const [loading] = React.useState(false);

  const columns = [
    { title: '日志ID', dataIndex: 'id', key: 'id', width: 80 },
    { title: '时间', dataIndex: 'timestamp', key: 'timestamp', width: 180 },
    { 
      title: '级别', 
      dataIndex: 'level', 
      key: 'level', 
      width: 100,
      render: (v: string) => {
        const colors: Record<string, string> = { 'info': 'blue', 'warning': 'orange', 'error': 'red', 'success': 'green' };
        return <Tag color={colors[v]}>{v.toUpperCase()}</Tag>;
      }
    },
    { title: '模块', dataIndex: 'module', key: 'module', width: 120 },
    { title: '操作人', dataIndex: 'operator', key: 'operator', width: 120 },
    { title: '操作', dataIndex: 'action', key: 'action' },
    { title: 'IP地址', dataIndex: 'ip', key: 'ip', width: 130 },
    { title: '详情', dataIndex: 'detail', key: 'detail', ellipsis: true },
  ];

  const data = [
    { key: '1', id: 1001, timestamp: '2026-03-18 17:15:30', level: 'info', module: '用户管理', operator: 'admin', action: '用户登录', ip: '192.168.1.100', detail: '用户 admin 成功登录系统' },
    { key: '2', id: 1002, timestamp: '2026-03-18 17:14:25', level: 'info', module: '项目管理', operator: 'manager', action: '创建项目', ip: '192.168.1.101', detail: '创建新项目: 博纳斯线路改造' },
    { key: '3', id: 1003, timestamp: '2026-03-18 17:13:10', level: 'warning', module: '财务管理', operator: 'admin', action: '审批预支', ip: '192.168.1.100', detail: '预支申请单 ADV20260318001 审批通过' },
    { key: '4', id: 1004, timestamp: '2026-03-18 17:12:05', level: 'success', module: '系统', operator: 'system', action: '数据备份', ip: '127.0.0.1', detail: '自动备份完成，耗时 45 秒' },
    { key: '5', id: 1005, timestamp: '2026-03-18 17:10:00', level: 'error', module: 'API', operator: 'anonymous', action: '接口访问', ip: '10.0.0.55', detail: '无效的 API Token 访问尝试' },
    { key: '6', id: 1006, timestamp: '2026-03-18 17:09:30', level: 'info', module: '采购管理', operator: 'pm1', action: '创建采购', ip: '192.168.1.102', detail: '创建采购申请: PO20260318002' },
    { key: '7', id: 1007, timestamp: '2026-03-18 17:08:15', level: 'info', module: '用户管理', operator: 'admin', action: '修改角色', ip: '192.168.1.100', detail: '修改用户 zhang 的角色为项目经理' },
  ];

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={3} style={{ marginBottom: 0 }}>系统日志</Title>
          <Paragraph type="secondary">查看系统操作记录和审计日志</Paragraph>
        </div>
        <Space>
          <Select placeholder="日志级别" style={{ width: 120 }} allowClear options={[
            { value: 'info', label: 'Info' },
            { value: 'warning', label: 'Warning' },
            { value: 'error', label: 'Error' },
            { value: 'success', label: 'Success' }
          ]} />
          <Select placeholder="模块" style={{ width: 150 }} allowClear options={[
            { value: 'user', label: '用户管理' },
            { value: 'project', label: '项目管理' },
            { value: 'finance', label: '财务管理' },
            { value: 'system', label: '系统' }
          ]} />
          <RangePicker placeholder={['开始日期', '结束日期']} />
          <Input.Search placeholder="搜索日志内容" style={{ width: 200 }} />
          <Button icon={<DownloadOutlined />}>导出</Button>
          <Button icon={<DeleteOutlined />} danger>清理</Button>
        </Space>
      </div>

      <Card>
        <Table columns={columns} dataSource={data} loading={loading} pagination={{ pageSize: 15 }} scroll={{ x: 1400 }} />
      </Card>
    </div>
  );
};

export default SystemLogsPage;
