import React, { useState } from 'react';
import { Card, Form, Input, Button, Switch, InputNumber, Select, Row, Col, message, Divider } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

const SystemSettings = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      console.log('保存设置:', values);
      message.success('设置保存成功！');
    } catch (error) {
      message.error('保存失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('已重置为默认设置');
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">系统设置</h1>
        <p className="page-description">配置系统基本参数和功能设置</p>
      </div>

      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          systemName: '志愿者服务管理系统',
          systemVersion: 'v1.0.0',
          maxFileSize: 10,
          enableEmailNotification: true,
          enableSMSNotification: false,
          pointsExpireDays: 365,
          maxActivitiesPerDay: 5,
          enableAutoApproval: false,
          systemDescription: '志愿者服务管理系统，提供积分管理、活动发布、志愿者管理等功能。',
        }}
      >
        <Row gutter={[24, 0]}>
          <Col xs={24} lg={12}>
            <Card title="基本设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="systemName"
                label="系统名称"
                rules={[{ required: true, message: '请输入系统名称' }]}
              >
                <Input placeholder="请输入系统名称" />
              </Form.Item>

              <Form.Item
                name="systemVersion"
                label="系统版本"
                rules={[{ required: true, message: '请输入系统版本' }]}
              >
                <Input placeholder="请输入系统版本" />
              </Form.Item>

              <Form.Item
                name="systemDescription"
                label="系统描述"
              >
                <TextArea rows={4} placeholder="请输入系统描述" />
              </Form.Item>

              <Form.Item
                name="adminEmail"
                label="管理员邮箱"
                rules={[
                  { required: true, message: '请输入管理员邮箱' },
                  { type: 'email', message: '请输入正确的邮箱地址' }
                ]}
              >
                <Input placeholder="请输入管理员邮箱" />
              </Form.Item>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="功能设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="enableEmailNotification"
                label="启用邮件通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableSMSNotification"
                label="启用短信通知"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enableAutoApproval"
                label="启用自动审核"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>

              <Form.Item
                name="enablePointsExpire"
                label="启用积分过期"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Card>
          </Col>
        </Row>

        <Row gutter={[24, 0]}>
          <Col xs={24} lg={12}>
            <Card title="积分设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="pointsExpireDays"
                label="积分过期天数"
                rules={[{ required: true, message: '请输入积分过期天数' }]}
              >
                <InputNumber
                  min={0}
                  max={3650}
                  style={{ width: '100%' }}
                  placeholder="请输入积分过期天数"
                />
              </Form.Item>

              <Form.Item
                name="maxPointsPerActivity"
                label="单次活动最大积分"
                rules={[{ required: true, message: '请输入单次活动最大积分' }]}
              >
                <InputNumber
                  min={1}
                  max={1000}
                  style={{ width: '100%' }}
                  placeholder="请输入单次活动最大积分"
                />
              </Form.Item>

              <Form.Item
                name="minPointsForRedemption"
                label="积分兑换最低限额"
                rules={[{ required: true, message: '请输入积分兑换最低限额' }]}
              >
                <InputNumber
                  min={1}
                  style={{ width: '100%' }}
                  placeholder="请输入积分兑换最低限额"
                />
              </Form.Item>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="活动设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="maxActivitiesPerDay"
                label="每日最大活动数"
                rules={[{ required: true, message: '请输入每日最大活动数' }]}
              >
                <InputNumber
                  min={1}
                  max={50}
                  style={{ width: '100%' }}
                  placeholder="请输入每日最大活动数"
                />
              </Form.Item>

              <Form.Item
                name="maxParticipantsPerActivity"
                label="单次活动最大参与人数"
                rules={[{ required: true, message: '请输入单次活动最大参与人数' }]}
              >
                <InputNumber
                  min={1}
                  max={1000}
                  style={{ width: '100%' }}
                  placeholder="请输入单次活动最大参与人数"
                />
              </Form.Item>

              <Form.Item
                name="activityRegistrationDeadline"
                label="活动报名截止时间（小时）"
                rules={[{ required: true, message: '请输入活动报名截止时间' }]}
              >
                <InputNumber
                  min={1}
                  max={168}
                  style={{ width: '100%' }}
                  placeholder="请输入活动报名截止时间"
                />
              </Form.Item>
            </Card>
          </Col>
        </Row>

        <Row gutter={[24, 0]}>
          <Col xs={24} lg={12}>
            <Card title="文件设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="maxFileSize"
                label="最大文件大小（MB）"
                rules={[{ required: true, message: '请输入最大文件大小' }]}
              >
                <InputNumber
                  min={1}
                  max={100}
                  style={{ width: '100%' }}
                  placeholder="请输入最大文件大小"
                />
              </Form.Item>

              <Form.Item
                name="allowedFileTypes"
                label="允许的文件类型"
                rules={[{ required: true, message: '请选择允许的文件类型' }]}
              >
                <Select
                  mode="multiple"
                  placeholder="请选择允许的文件类型"
                  style={{ width: '100%' }}
                >
                  <Option value="jpg">JPG</Option>
                  <Option value="png">PNG</Option>
                  <Option value="gif">GIF</Option>
                  <Option value="pdf">PDF</Option>
                  <Option value="doc">DOC</Option>
                  <Option value="docx">DOCX</Option>
                  <Option value="xls">XLS</Option>
                  <Option value="xlsx">XLSX</Option>
                </Select>
              </Form.Item>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="安全设置" style={{ marginBottom: 24 }}>
              <Form.Item
                name="passwordMinLength"
                label="密码最小长度"
                rules={[{ required: true, message: '请输入密码最小长度' }]}
              >
                <InputNumber
                  min={6}
                  max={20}
                  style={{ width: '100%' }}
                  placeholder="请输入密码最小长度"
                />
              </Form.Item>

              <Form.Item
                name="sessionTimeout"
                label="会话超时时间（分钟）"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <InputNumber
                  min={10}
                  max={1440}
                  style={{ width: '100%' }}
                  placeholder="请输入会话超时时间"
                />
              </Form.Item>

              <Form.Item
                name="maxLoginAttempts"
                label="最大登录尝试次数"
                rules={[{ required: true, message: '请输入最大登录尝试次数' }]}
              >
                <InputNumber
                  min={3}
                  max={10}
                  style={{ width: '100%' }}
                  placeholder="请输入最大登录尝试次数"
                />
              </Form.Item>
            </Card>
          </Col>
        </Row>

        <Card>
          <div style={{ textAlign: 'center' }}>
            <Button
              type="primary"
              htmlType="submit"
              icon={<SaveOutlined />}
              loading={loading}
              size="large"
              style={{ marginRight: 16 }}
            >
              保存设置
            </Button>
            <Button
              icon={<ReloadOutlined />}
              onClick={handleReset}
              size="large"
            >
              重置设置
            </Button>
          </div>
        </Card>
      </Form>
    </div>
  );
};

export default SystemSettings;