import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, message, Upload, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { createTopic, updateTopic, uploadMedia, getMyPaidItems } from '../api';
import MDEditor from '@uiw/react-md-editor';
import rehypeKatex from 'rehype-katex';
import remarkMath from 'remark-math';
import 'katex/dist/katex.css';

const { Option } = Select;

const CreateTopicModal = ({ visible, onClose, onSuccess, initialValues, isEditMode, topicId }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [paidItems, setPaidItems] = useState({ configs: [], courses: [], services: [] });
  const [uploading, setUploading] = useState(false);
  const [mediaIds, setMediaIds] = useState([]);
  // eslint-disable-next-line no-unused-vars
  const [mediaList, setMediaList] = useState([]); // Store uploaded media details for preview
  const [content, setContent] = useState("");

  useEffect(() => {
    if (visible) {
        fetchPaidItems();
        if (isEditMode && initialValues) {
            // Edit Mode: Populate form with initial values
            form.setFieldsValue({
                title: initialValues.title,
                category: initialValues.category,
            });
            setContent(initialValues.content);
            form.setFieldValue('content', initialValues.content);

            // Handle related item
            let relatedVal = null;
            if (initialValues.related_product) relatedVal = `config_${initialValues.related_product.id || initialValues.related_product}`;
            else if (initialValues.related_course) relatedVal = `course_${initialValues.related_course.id || initialValues.related_course}`;
            else if (initialValues.related_service) relatedVal = `service_${initialValues.related_service.id || initialValues.related_service}`;
            
            if (relatedVal) form.setFieldValue('related_item', relatedVal);
            
            // Note: We start with empty *new* media IDs. 
            // Existing media is embedded in content or stored in DB, we don't need to re-upload or track them here unless we want to delete them (which is complex).
            // For now, we just allow adding NEW media.
            setMediaIds([]); 
            setMediaList([]);
        } else {
            // Create Mode: Reset form
            setMediaIds([]); 
            setMediaList([]);
            setContent("");
            form.resetFields(); 
            form.setFieldsValue({ content: "", category: 'discussion' });
        }
    }
  }, [visible, isEditMode, initialValues, form]);

  const fetchPaidItems = async () => {
      try {
          const res = await getMyPaidItems();
          setPaidItems(res.data);
      } catch (error) {
          console.error("Failed to fetch paid items", error);
      }
  };

  const handleUpload = async (file) => {
      const formData = new FormData();
      formData.append('file', file);
      // 默认为 image，如果需要支持视频需根据 file.type 判断
      formData.append('media_type', file.type.startsWith('video') ? 'video' : 'image');

      setUploading(true);
      try {
          const res = await uploadMedia(formData);
          // 记录上传的媒体 ID
          if (res.data.id) {
            setMediaIds(prev => [...prev, res.data.id]);
          }

          // 确保 URL 是完整的
          // 由于后端现在是转发到外部OSS，返回的URL通常是完整的，但也可能是相对的，这里统一处理
          let url = res.data.file; 
          
          // 处理反斜杠问题（防止 Windows 路径风格影响 URL）
          if (url) {
              url = url.replace(/\\/g, '/');
          }

          if (url && !url.startsWith('http')) {
              // 如果返回的是相对路径，拼接 API URL 或 Base URL
              const baseURL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
              // 移除 baseURL 末尾的 /api 或 /
              const host = baseURL.replace(/\/api\/?$/, '');
              // 确保 url 以 / 开头
              if (!url.startsWith('/')) url = '/' + url;
              url = `${host}${url}`;
          }
          
          // 清理 URL 中的双斜杠 (除协议头外)
          url = url.replace(/([^:]\/)\/+/g, '$1');

          // Add to media list for preview
          setMediaList(prev => [...prev, {
              id: res.data.id,
              url: url,
              type: file.type.startsWith('video') ? 'video' : 'image',
              name: file.name
          }]);
          
          // 插入到编辑器
          const insertText = file.type.startsWith('video') 
              ? `\n<video src="${url}" controls width="100%"></video>\n` 
              : `\n![${file.name}](${url})\n`;
          
          const newContent = content + insertText;
          setContent(newContent);
          form.setFieldsValue({ content: newContent });

          message.success('上传成功');
      } catch (error) {
          console.error(error);
          message.error('上传失败');
      } finally {
          setUploading(false);
      }
      return false; // 阻止默认上传行为
  };

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      // 处理关联项目 ID (select value format: "type_id")
      const relatedValue = values.related_item;
      // Use content state instead of form value to ensure consistency
      const payload = { ...values, content: content, media_ids: mediaIds };
      delete payload.related_item;

      if (relatedValue) {
          const [type, id] = relatedValue.split('_');
          if (type === 'config') payload.related_product = id;
          if (type === 'course') payload.related_course = id;
          if (type === 'service') payload.related_service = id;
      } else {
          // If cleared, set to null
          payload.related_product = null;
          payload.related_course = null;
          payload.related_service = null;
      }

      if (isEditMode && topicId) {
          await updateTopic(topicId, payload);
          message.success('修改成功');
      } else {
          await createTopic(payload);
          message.success('发布成功');
      }
      
      form.resetFields();
      if (onSuccess) onSuccess();
      onClose();
    } catch (error) {
      console.error(error);
      message.error((isEditMode ? '修改' : '发布') + '失败: ' + (error.response?.data?.detail || '网络错误'));
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title={isEditMode ? "编辑帖子" : "发布新帖"}
      open={visible}
      onCancel={onClose}
      footer={null}
      destroyOnHidden
      width={1000}
      centered
      maskClosable={false}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={{ category: 'discussion' }}
      >
        <Form.Item
          name="title"
          label="标题"
          rules={[{ required: true, message: '请输入标题' }, { max: 100, message: '标题最多100字' }]}
        >
          <Input placeholder="请输入清晰的问题或讨论标题" size="large" />
        </Form.Item>

        <div style={{ display: 'flex', gap: 20 }}>
            <Form.Item
            name="category"
            label="分类"
            style={{ width: 200 }}
            rules={[{ required: true, message: '请选择分类' }]}
            >
            <Select>
                <Option value="discussion">技术讨论</Option>
                <Option value="help">求助问答</Option>
                <Option value="share">经验分享</Option>
            </Select>
            </Form.Item>
            
            <Form.Item
                name="related_item"
                label="关联已购项目 (可选)"
                style={{ flex: 1 }}
                tooltip="关联已购项目可获得“认证用户”标识"
            >
                <Select placeholder="选择关联项目..." allowClear>
                    <Select.OptGroup label="硬件产品">
                        {paidItems.configs.map(i => (
                            <Option key={`config_${i.id}`} value={`config_${i.id}`}>{i.name}</Option>
                        ))}
                    </Select.OptGroup>
                    <Select.OptGroup label="VC 课程">
                        {paidItems.courses.map(i => (
                            <Option key={`course_${i.id}`} value={`course_${i.id}`}>{i.title}</Option>
                        ))}
                    </Select.OptGroup>
                     <Select.OptGroup label="AI 服务">
                        {paidItems.services.map(i => (
                            <Option key={`service_${i.id}`} value={`service_${i.id}`}>{i.title}</Option>
                        ))}
                    </Select.OptGroup>
                </Select>
            </Form.Item>
        </div>

        <Form.Item
          name="content"
          label="内容 (支持 Markdown 与 LaTeX 公式)"
          rules={[{ required: true, message: '请输入内容' }]}
        >
            <div data-color-mode="light">
                <div style={{ marginBottom: 10 }}>
                    <Upload 
                        beforeUpload={handleUpload} 
                        showUploadList={false} 
                        accept="image/*,video/*"
                    >
                        <Button icon={<UploadOutlined />} loading={uploading} size="small">
                            插入图片/视频
                        </Button>
                    </Upload>
                </div>

                <MDEditor
                    value={content}
                    onChange={(val) => {
                        setContent(val);
                        form.setFieldsValue({ content: val });
                    }}
                    height={400}
                    previewOptions={{
                        rehypePlugins: [[rehypeKatex]],
                        remarkPlugins: [[remarkMath]],
                    }}
                />
            </div>
        </Form.Item>

        <Form.Item>
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
            <Button onClick={onClose}>取消</Button>
            <Button type="primary" htmlType="submit" loading={loading} size="large">
              {isEditMode ? "保存修改" : "立即发布"}
            </Button>
          </div>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateTopicModal;