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

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

const ActivityEdit = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [pageLoading, setPageLoading] = useState(true);
  const navigate = useNavigate();
  const { id } = useParams();
  const [currentActivity, setCurrentActivity] = useState(null);

  // 获取活动详情
  const fetchActivityDetail = async () => {
    try {
      setPageLoading(true);
      const response = await activityAPI.getActivityById(id);
      if (response.code === 0) {
        const activity = response.data;
        setCurrentActivity(activity);
        // 分类映射（从name到value）
        const categoryValueMap = {
          '党的建设': '1',
          '经济发展': '2',
          '平安法治': '3',
          '民生服务': '4',
          '失信违法': '5'
        };
        
        form.setFieldsValue({
          ...activity,
          category: categoryValueMap[activity.categoryDesc] || activity.category, // 映射分类值
          maxParticipants: activity.maxParticipants || activity.maxVolunteers, // 兼容字段名
          startTime: dayjs(activity.startTime),
          endTime: dayjs(activity.endTime),
          deadline: dayjs(activity.deadline),
        });
      } else {
        message.error('获取活动详情失败');
        navigate('/activities');
      }
    } catch (error) {
      console.error('获取活动详情失败:', error);
      message.error('获取活动详情失败');
      navigate('/activities');
    } finally {
      setPageLoading(false);
    }
  };

  useEffect(() => {
    if (id) {
      fetchActivityDetail();
    }
  }, [id]);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      
      // 活动分类映射
      const categoryMap = {
        '1': '党的建设',
        '2': '经济发展', 
        '3': '平安法治',
        '4': '民生服务',
        '5': '失信违法'
      };
      
      const activityData = {
        ...currentActivity,
        ...values,
        categoryDesc: categoryMap[values.category] || values.category, // 添加categoryDesc字段
        startTime: values.startTime.toISOString(),
        endTime: values.endTime.toISOString(),
        deadline: values.deadline.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 handleCancel = () => {
    navigate('/activities');
  };

  if (pageLoading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
        <div style={{ marginTop: '16px' }}>加载中...</div>
      </div>
    );
  }

  if (!currentActivity) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <div>活动不存在</div>
        <Button type="primary" onClick={() => navigate('/activities')} style={{ marginTop: '16px' }}>
          返回活动列表
        </Button>
      </div>
    );
  }

  return (
    <div>
      <div className="page-header">
        <h1 className="page-title">编辑活动</h1>
        <p className="page-description">修改活动信息，确保信息准确完整</p>
      </div>

      <Card>
        <Form
          className="form-container"
          form={form}
          layout="vertical"
          onFinish={onFinish}
          initialValues={{
            category: '4',
            maxParticipants: 30,
            points: 10,
          }}
        >
          <div className="form-row">
            <h3>基本信息</h3>
            <Row gutter={[32, 24]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="title"
                  label="活动名称"
                  rules={[{ required: true, message: '请输入活动名称' }]}
                >
                  <Input 
                    size="large" 
                    placeholder="请输入活动名称" 
                    style={{ borderRadius: '6px' }}
                  />
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="category"
                  label="活动分类"
                  rules={[{ required: true, message: '请选择活动分类' }]}
                >
                  <Select 
                    size="large" 
                    placeholder="请选择活动分类"
                    style={{ borderRadius: '6px' }}
                  >
                    <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>
          </div>

          <div className="form-row">
            <h3>时间安排</h3>
            <Row gutter={[32, 24]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="startTime"
                  label="活动开始时间"
                  rules={[{ required: true, message: '请选择活动开始时间' }]}
                >
                  <DatePicker
                    showTime
                    format="YYYY-MM-DD HH:mm"
                    size="large"
                    style={{ width: '100%', borderRadius: '6px' }}
                    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"
                    size="large"
                    style={{ width: '100%', borderRadius: '6px' }}
                    placeholder="请选择活动结束时间"
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[32, 24]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="location"
                  label="活动地点"
                  rules={[{ required: true, message: '请输入活动地点' }]}
                >
                  <Input 
                    size="large" 
                    placeholder="请输入活动地点" 
                    style={{ borderRadius: '6px' }}
                  />
                </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"
                    size="large"
                    style={{ width: '100%', borderRadius: '6px' }}
                    placeholder="请选择报名截止时间"
                  />
                </Form.Item>
              </Col>
            </Row>
          </div>

          <div className="form-row">
            <h3>活动设置</h3>
            <Row gutter={[32, 24]}>
              <Col xs={24} md={8}>
                <Form.Item
                  name="maxParticipants"
                  label="最大志愿者人数"
                  rules={[{ required: true, message: '请输入最大志愿者人数' }]}
                >
                  <InputNumber
                    min={1}
                    size="large"
                    style={{ width: '100%', borderRadius: '6px' }}
                    placeholder="请输入最大志愿者人数"
                  />
                </Form.Item>
              </Col>
              <Col xs={24} md={8}>
                <Form.Item
                  name="points"
                  label="活动积分"
                  rules={[{ required: true, message: '请输入活动积分' }]}
                >
                  <InputNumber
                    min={0}
                    size="large"
                    style={{ width: '100%', borderRadius: '6px' }}
                    placeholder="请输入活动积分"
                  />
                </Form.Item>
              </Col>
              <Col xs={24} md={8}>
                <Form.Item name="placeholder" label="">
                  <div className="tip-box">
                    <div className="tip-content">
                      <div className="tip-title">提示</div>
                      <div className="tip-text"></div>
                    </div>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </div>

          <div className="form-row">
            <h3>活动内容</h3>
            <Form.Item
              name="content"
              label="活动内容"
              rules={[{ required: true, message: '请输入活动内容' }]}
            >
              <TextArea
                rows={6}
                placeholder="请详细描述活动内容、要求、注意事项等"
                showCount
                maxLength={500}
                style={{ borderRadius: '6px' }}
              />
            </Form.Item>
          </div>

          <div className="form-row">
            <h3>活动封面</h3>
            <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>

          <div className="form-actions">
            <Button 
              onClick={handleCancel}
              size="large"
              style={{ 
                borderRadius: '6px',
                padding: '8px 24px',
                marginRight: '16px'
              }}
            >
              取消
            </Button>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              size="large"
              style={{ 
                borderRadius: '6px',
                padding: '8px 24px'
              }}
            >
              更新活动
            </Button>
          </div>
        </Form>
      </Card>
    </div>
  );
};

export default ActivityEdit;