import React, { useState } from 'react';
import { Form, Input, Select, DatePicker, InputNumber, Button, Card, message, Row, Col, Upload } from 'antd';
import { useNavigate } from 'react-router-dom';
import { activityAPI } from '../../services/api';
import { UploadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import './ActivityCreate.css';

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

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

  const onFinish = async (values) => {
    try {
      setLoading(true);
      
      // 活动分类映射
      const categoryMap = {
        '1': '党的建设',
        '2': '经济发展', 
        '3': '平安法治',
        '4': '民生服务',
        '5': '失信违法'
      };
      
      // 处理时间格式
      const activityData = {
        ...values,
        categoryDesc: categoryMap[values.category] || values.category, // 添加categoryDesc字段
        startTime: values.startTime.toISOString(),
        endTime: values.endTime.toISOString(),
        deadline: values.deadline.toISOString(),
        currentVolunteers: 0,
        status: '报名中',
        createTime: new Date().toISOString(),
      };

      const response = await activityAPI.saveActivity(activityData);
      if (response.code === 0) {
        message.success('活动发布成功！');
        navigate('/activities');
      } else {
        message.error('发布失败，请检查表单信息');
      }
    } catch (error) {
      console.error('发布活动失败:', error);
      message.error('发布失败，请检查表单信息');
    } finally {
      setLoading(false);
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
    message.error('请检查表单信息');
  };

  const handleCancel = () => {
    navigate('/activities');
  };

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">发布活动</h1>
        <p className="page-description">创建新的志愿者活动，设置活动信息和积分规则</p>
      </div>

      <Card>
        <Form
          form={form}
          layout="vertical"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          initialValues={{
            category: '4',
            maxParticipants: 30,
            points: 10,
          }}
        >
          <Row gutter={[24, 0]}>
            <Col xs={24} md={12}>
              <Form.Item
                name="title"
                label="活动名称"
                rules={[{ required: true, message: '请输入活动名称' }]}
              >
                <Input placeholder="请输入活动名称" />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="category"
                label="活动分类"
                rules={[{ required: true, message: '请选择活动分类' }]}
              >
                <Select placeholder="请选择活动分类">
                  <Option value="1">党的建设</Option>
                  <Option value="2">经济发展</Option>
                  <Option value="3">平安法治</Option>
                  <Option value="4">民生服务</Option>
                  <Option value="5">失信违法</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[24, 0]}>
            <Col xs={24} md={12}>
              <Form.Item
                name="startTime"
                label="活动开始时间"
                rules={[{ required: true, message: '请选择活动开始时间' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm"
                  style={{ width: '100%' }}
                  placeholder="请选择活动开始时间"
                />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="endTime"
                label="活动结束时间"
                rules={[{ required: true, message: '请选择活动结束时间' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm"
                  style={{ width: '100%' }}
                  placeholder="请选择活动结束时间"
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[24, 0]}>
            <Col xs={24} md={12}>
              <Form.Item
                name="location"
                label="活动地点"
                rules={[{ required: true, message: '请输入活动地点' }]}
              >
                <Input placeholder="请输入活动地点" />
              </Form.Item>
            </Col>
            <Col xs={24} md={12}>
              <Form.Item
                name="deadline"
                label="报名截止时间"
                rules={[{ required: true, message: '请选择报名截止时间' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm"
                  style={{ width: '100%' }}
                  placeholder="请选择报名截止时间"
                />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={[24, 0]}>
            <Col xs={24} md={8}>
              <Form.Item
                name="maxParticipants"
                label="最大志愿者人数"
                rules={[{ required: true, message: '请输入最大志愿者人数' }]}
              >
                <InputNumber
                  min={1}
                  style={{ width: '100%' }}
                  placeholder="请输入最大志愿者人数"
                />
              </Form.Item>
            </Col>
            <Col xs={24} md={8}>
              <Form.Item
                name="points"
                label="活动积分"
                rules={[{ required: true, message: '请输入活动积分' }]}
              >
                <InputNumber
                  min={0}
                  style={{ width: '100%' }}
                  placeholder="请输入活动积分"
                />
              </Form.Item>
            </Col>
                         <Col xs={24} md={8}>
               <Form.Item
                 name="placeholder"
                 label=""
               >
                                   <div className="tip-box">
                  </div>
               </Form.Item>
             </Col>
          </Row>

          <Form.Item
            name="content"
            label="活动内容"
            rules={[{ required: true, message: '请输入活动内容' }]}
          >
            <TextArea
              rows={6}
              placeholder="请详细描述活动内容、要求、注意事项等"
            />
          </Form.Item>

          <Form.Item
            name="cover"
            label="活动封面"
          >
            <Upload
              name="cover"
              listType="picture-card"
              maxCount={5}
              beforeUpload={() => false}
              multiple
            >
                               <div className="upload-button">
                   <UploadOutlined className="upload-icon" />
                   <div className="upload-text">上传封面</div>
                 </div>
            </Upload>
          </Form.Item>

          <div className="form-actions">
            <Button onClick={handleCancel}>
              取消
            </Button>
            <Button type="primary" htmlType="submit" loading={loading}>
              发布活动
            </Button>
          </div>
        </Form>
      </Card>
    </div>
  );
};

export default ActivityCreate;