import React, { useState } from 'react';
import { Card, Row, Col, Form, Input, Button, Select, Switch, Slider, Tag, Alert, InputNumber, Radio, Space, Divider } from 'antd';
import { SettingOutlined, SlidersOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons';
import './Config.css';

const { Option } = Select;
const { Item } = Form;

const Config = () => {
  const [form] = Form.useForm();

  // 系统配置参数
  const systemParams = {
    refreshInterval: 30, // 秒
    alertThreshold: 70, // %
    maxPositionSize: 50, // %
    backtestDays: 90 // 天
  };

  const [params, setParams] = useState(systemParams);

  // 处理系统参数变更
  const handleParamChange = (key, value) => {
    setParams(prev => ({ ...prev, [key]: value }));
  };

  // 处理表单提交
  const handleSubmit = (values) => {
    console.log('配置保存:', values);
    // 模拟保存操作
    Alert.success('配置已保存');
  };

  return (
    <div className="config">
      <h2>配置管理</h2>

      {/* 系统配置 */}
      <Card 
        title={<span><SlidersOutlined /> 系统配置</span>} 
        className="config-card"
      >
        <Form form={form} layout="vertical" onFinish={handleSubmit}>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <div className="param-item">
                <label>数据刷新间隔: {params.refreshInterval}秒</label>
                <Slider 
                  min={10} 
                  max={300} 
                  step={10}
                  value={params.refreshInterval} 
                  onChange={(value) => handleParamChange('refreshInterval', value)}
                  marks={{
                    10: '10s',
                    300: '5m'
                  }}
                />
              </div>
            </Col>
            <Col span={12}>
              <div className="param-item">
                <label>预警阈值: {params.alertThreshold}%</label>
                <Slider 
                  min={50} 
                  max={90} 
                  step={5}
                  value={params.alertThreshold} 
                  onChange={(value) => handleParamChange('alertThreshold', value)}
                  marks={{
                    50: '50%',
                    90: '90%'
                  }}
                />
              </div>
            </Col>
            <Col span={12}>
              <div className="param-item">
                <label>最大仓位比例: {params.maxPositionSize}%</label>
                <Slider 
                  min={10} 
                  max={100} 
                  step={5}
                  value={params.maxPositionSize} 
                  onChange={(value) => handleParamChange('maxPositionSize', value)}
                  marks={{
                    10: '10%',
                    100: '100%'
                  }}
                />
              </div>
            </Col>
            <Col span={12}>
              <div className="param-item">
                <label>回测天数: {params.backtestDays}天</label>
                <Slider 
                  min={30} 
                  max={365} 
                  step={30}
                  value={params.backtestDays} 
                  onChange={(value) => handleParamChange('backtestDays', value)}
                  marks={{
                    30: '30天',
                    365: '1年'
                  }}
                />
              </div>
            </Col>
          </Row>
          
          {/* 其他系统设置 */}
          <Card title="其他设置" style={{ marginTop: 24 }}>
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Item label="自动复盘">
                  <Switch defaultChecked />
                </Item>
              </Col>
              <Col span={8}>
                <Item label="邮件通知">
                  <Switch />
                </Item>
              </Col>
              <Col span={8}>
                <Item label="短信通知">
                  <Switch />
                </Item>
              </Col>
            </Row>
          </Card>

          {/* 消息推送配置 */}
          <Card title="消息推送配置" style={{ marginTop: 24 }}>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Item label="推送方式">
                  <div className="push-methods">
                    <Row gutter={[16, 8]}>
                      <Col span={12}>
                        <Item label="邮箱" name="emailNotification" valuePropName="checked">
                          <Switch />
                        </Item>
                      </Col>
                      <Col span={12}>
                        <Item label="微信" name="wechatNotification" valuePropName="checked">
                          <Switch />
                        </Item>
                      </Col>
                      <Col span={12}>
                        <Item label="钉钉" name="dingtalkNotification" valuePropName="checked">
                          <Switch />
                        </Item>
                      </Col>
                      <Col span={12}>
                        <Item label="企业微信" name="qywechatNotification" valuePropName="checked">
                          <Switch />
                        </Item>
                      </Col>
                    </Row>
                  </div>
                </Item>
              </Col>
              <Col span={12}>
                <Item label="通知级别">
                  <Select defaultValue="medium">
                    <Option value="low">低 (仅重要通知)</Option>
                    <Option value="medium">中 (常规通知)</Option>
                    <Option value="high">高 (所有通知)</Option>
                  </Select>
                </Item>
              </Col>
              <Col span={24}>
                <Item label="邮箱地址" name="emailAddress">
                  <Input placeholder="请输入邮箱地址" />
                </Item>
              </Col>
              <Col span={12}>
                <Item label="微信Token" name="wechatToken">
                  <Input.Password placeholder="请输入微信Token" />
                </Item>
              </Col>
              <Col span={12}>
                <Item label="钉钉Webhook" name="dingtalkWebhook">
                  <Input.Password placeholder="请输入钉钉Webhook" />
                </Item>
              </Col>
            </Row>
            
            {/* 推送内容配置 */}
            <Card title="推送内容" style={{ marginTop: 16 }}>
              <Row gutter={[16, 8]}>
                <Col span={8}>
                  <Item label="行情提醒" name="marketAlert" valuePropName="checked">
                    <Switch defaultChecked />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="交易信号" name="tradeSignal" valuePropName="checked">
                    <Switch defaultChecked />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="风险预警" name="riskAlert" valuePropName="checked">
                    <Switch defaultChecked />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="系统通知" name="systemNotice" valuePropName="checked">
                    <Switch />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="AI分析结果" name="aiAnalysis" valuePropName="checked">
                    <Switch />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="每日复盘" name="dailyReview" valuePropName="checked">
                    <Switch />
                  </Item>
                </Col>
              </Row>
            </Card>
          </Card>
          
          <div className="config-actions">
            <Button type="default" style={{ marginRight: 8 }}>
              恢复默认
            </Button>
            <Button type="primary" htmlType="submit">
              保存配置
            </Button>
          </div>
        </Form>
      </Card>


    </div>
  );
};

export default Config;
