import BraftEditorCom from '@/components/BraftEditor';
import { sendRequest } from '@/utils/antdUtils';
import {
  buildExistingUploadFileItem,
  buildUploadFileItem,
  getFileAccessUrl,
  getUploadFilePath,
  getUploadResponsePath,
} from '@/utils/file';
import { customRequest } from '@/utils/utils';
import { uploadFile } from '@/utils/service';
import { PlusOutlined } from '@ant-design/icons';
import {
  PageContainer,
  ProForm,
  ProFormText,
  ProFormDigit,
} from '@ant-design/pro-components';
import { history, useSearchParams } from '@umijs/max';
import { Button, Card, Form, message, Upload, Tabs } from 'antd';
import { useEffect, useState } from 'react';
import { addStrategy, editStrategy, getStrategyDetail } from './service';

const AddAndEdit = () => {
  const [form] = Form.useForm();
  const [searchParams] = useSearchParams();
  const [loading, setLoading] = useState(false);
  const [coverImageList, setCoverImageList] = useState([]);
  const [detailImageList, setDetailImageList] = useState([]);
  const [detailVideoList, setDetailVideoList] = useState([]);
  const [detailTabActiveKey, setDetailTabActiveKey] = useState('image');
  const [strategyContent, setStrategyContent] = useState({ content: '' });
  const id = searchParams.get('id');
  const mode = searchParams.get('mode') || 'add'; // add, edit, detail
  const isReadOnly = mode === 'detail';
  // 兼容纯文本换行，避免预览和小程序详情里被浏览器当成普通空白折叠
  const formatRichTextPreviewContent = (html) => {
    const content = String(html || '');
    if (!content) {
      return '';
    }
    if (/<[^>]+>/.test(content)) {
      return content;
    }
    return content.replace(/\r\n|\r|\n/g, '<br />');
  };

  // 上传前验证 - 图片
  const beforeUploadImage = (file) => {
    const isJpgOrPng =
      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
    if (!isJpgOrPng) {
      message.error('只能上传 JPG/PNG 格式的图片!');
      return Upload.LIST_IGNORE;
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
      message.error('图片大小不能超过 10MB!');
      return Upload.LIST_IGNORE;
    }
    return true;
  };

  // 上传前验证 - 视频
  const beforeUploadVideo = (file) => {
    const isVideo = file.type.startsWith('video/');
    if (!isVideo) {
      message.error('只能上传视频文件!');
      return Upload.LIST_IGNORE;
    }
    const isLt100M = file.size / 1024 / 1024 < 100;
    if (!isLt100M) {
      message.error('视频大小不能超过 100MB!');
      return Upload.LIST_IGNORE;
    }
    return true;
  };

  // 上传按钮
  const uploadButton = (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100%',
      }}
    >
      <PlusOutlined style={{ fontSize: 24, color: '#8c8c8c' }} />
    </div>
  );

  // 加载详情数据
  useEffect(() => {
    if (id) {
      getStrategyDetail(id).then((res) => {
        if (res.code === 200 && res.data) {
          const data = res.data;
          form.setFieldsValue({
            title: data.title,
            coverImage: data.coverImage,
            lookNum: data.lookNum,
            sortOrder: data.sort || 45,
            detailImages: data.detailImages,
            detailVideos: data.detailVideos,
          });

          // 设置封面图
          if (data.coverImage) {
            setCoverImageList([
              buildExistingUploadFileItem(data.coverImage, {
                uid: '-1',
                name: 'coverImage.jpg',
              }),
            ]);
          } else {
            setCoverImageList([]);
          }

          // 根据type字段判断是图片还是视频，设置详情图/视频
          if (data.type === 1) {
            // 类型为图片
            if (data.detailImages) {
              const imageArray = Array.isArray(data.detailImages)
                ? data.detailImages
                : data.detailImages.split(',').filter(Boolean);
              const fileList = imageArray.map((url, index) =>
                buildExistingUploadFileItem(url, {
                  uid: `image-${index}`,
                  name: `image-${index}.jpg`,
                }),
              );
              setDetailImageList(fileList);
            }
            setDetailTabActiveKey('image');
          } else if (data.type === 2) {
            // 类型为视频
            if (data.detailImages) {
              const videoArray = Array.isArray(data.detailImages)
                ? data.detailImages
                : data.detailImages.split(',').filter(Boolean);
              const fileList = videoArray.map((url, index) =>
                buildExistingUploadFileItem(url, {
                  uid: `video-${index}`,
                  name: `video-${index}.mp4`,
                }),
              );
              setDetailVideoList(fileList);
            }
            setDetailTabActiveKey('video');
          } else {
            // 兼容旧数据：如果type不存在，尝试从detailImages和detailVideos判断
            if (data.detailImages) {
              const imageArray = Array.isArray(data.detailImages)
                ? data.detailImages
                : data.detailImages.split(',').filter(Boolean);
              const fileList = imageArray.map((url, index) =>
                buildExistingUploadFileItem(url, {
                  uid: `image-${index}`,
                  name: `image-${index}.jpg`,
                }),
              );
              setDetailImageList(fileList);
            }

            if (data.detailVideos) {
              const videoArray = Array.isArray(data.detailVideos)
                ? data.detailVideos
                : data.detailVideos.split(',').filter(Boolean);
              const fileList = videoArray.map((url, index) =>
                buildExistingUploadFileItem(url, {
                  uid: `video-${index}`,
                  name: `video-${index}.mp4`,
                }),
              );
              setDetailVideoList(fileList);
            }
          }

          // 设置富文本内容
          if (data.content) {
            let params = strategyContent;
            params.content = data.content;
            setStrategyContent(params);
            form.setFieldsValue({ content: params });
          }
        }
      });
    } else {
      // 新增模式，设置默认排序值
      form.setFieldsValue({ sortOrder: 45 });
    }
  }, [id]);

  // 富文本编辑器内容变化回调
  const handleEditorChange = (html) => {
    let params = strategyContent;
    params.content = html;
    setStrategyContent(params);
    // form.setFieldsValue({ content: params });
  };

  // 处理封面图上传变化
  const handleCoverImageChange = ({ fileList }) => {
    setCoverImageList(fileList);
    // 提取已上传成功的图片URL
    const imagePath = fileList
      .filter((file) => file.status === 'done')
      .map((file) => getUploadFilePath(file))
      .filter(Boolean)[0];
    form.setFieldsValue({ coverImage: imagePath || '' });
  };

  // 处理封面图删除
  const handleCoverImageRemove = (file) => {
    setCoverImageList([]);
    form.setFieldsValue({ coverImage: '' });
    return true;
  };

  // 自定义封面图上传请求
  const customCoverImageRequest = (options) => {
    const { file, onSuccess, onError } = options;
    uploadFile(file)
      .then((ret) => {
        const filePath = getUploadResponsePath(ret);
        if (filePath) {
          onSuccess(buildUploadFileItem(file, filePath));
        } else {
          onError();
        }
      })
      .catch(() => {
        onError();
      });
  };

  // 处理详情图片上传成功
  const handleDetailImageChange = ({ fileList }) => {
    setDetailImageList(fileList);
    const urls = fileList
      .filter((file) => file.status === 'done')
      .map((file) => getUploadFilePath(file))
      .filter(Boolean);
    form.setFieldsValue({ detailImages: urls.join(',') });
  };

  // 处理详情图片删除
  const handleDetailImageRemove = (file) => {
    const newFileList = detailImageList.filter((item) => item.uid !== file.uid);
    setDetailImageList(newFileList);
    const urls = newFileList
      .filter((item) => item.status === 'done')
      .map((item) => getUploadFilePath(item))
      .filter(Boolean);
    form.setFieldsValue({ detailImages: urls.join(',') });
    return true;
  };

  // 自定义详情图片上传请求
  const customDetailImageRequest = (options) => {
    const { file, onSuccess, onError } = options;
    uploadFile(file)
      .then((ret) => {
        const filePath = getUploadResponsePath(ret);
        if (filePath) {
          onSuccess(buildUploadFileItem(file, filePath));
        } else {
          onError();
        }
      })
      .catch(() => {
        onError();
      });
  };

  // 处理详情视频上传成功
  const handleDetailVideoChange = ({ fileList }) => {
    setDetailVideoList(fileList);
    const urls = fileList
      .filter((file) => file.status === 'done')
      .map((file) => getUploadFilePath(file))
      .filter(Boolean);
    form.setFieldsValue({ detailVideos: urls.join(',') });
  };

  // 处理详情视频删除
  const handleDetailVideoRemove = (file) => {
    const newFileList = detailVideoList.filter((item) => item.uid !== file.uid);
    setDetailVideoList(newFileList);
    const urls = newFileList
      .filter((item) => item.status === 'done')
      .map((item) => getUploadFilePath(item))
      .filter(Boolean);
    form.setFieldsValue({ detailVideos: urls.join(',') });
    return true;
  };

  // 自定义详情视频上传请求
  const customDetailVideoRequest = (options) => {
    const { file, onSuccess, onError } = options;
    uploadFile(file)
      .then((ret) => {
        const filePath = getUploadResponsePath(ret);
        if (filePath) {
          onSuccess(buildUploadFileItem(file, filePath));
        } else {
          onError();
        }
      })
      .catch(() => {
        onError();
      });
  };

  // 提交表单
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();

      // 验证封面图
      const coverImage = values.coverImage;
      if (!coverImage) {
        message.error('请上传封面图');
        return;
      }

      // 验证攻略内容
      if (
        !strategyContent ||
        !strategyContent.content ||
        strategyContent.content.trim() === '' ||
        strategyContent.content === '<p></p>'
      ) {
        message.error('请输入攻略内容');
        return;
      }

      // 根据当前选中的tab确定type
      const type = detailTabActiveKey === 'image' ? 1 : 2;

      const coverImageResponse = coverImageList
        .filter((file) => file.status === 'done')
        .map((file) => getUploadFilePath(file))
        .filter(Boolean)[0] || '';

      // detailImages 需要传字符串（逗号分隔）
      const detailImagesStr = type === 1
        ? detailImageList
            .filter((item) => item.status === 'done')
            .map((item) => getUploadFilePath(item))
            .filter(Boolean)
            .join(',')
        : detailVideoList
            .filter((item) => item.status === 'done')
            .map((item) => getUploadFilePath(item))
            .filter(Boolean)
            .join(',');

      // 准备提交数据
      const submitData = {
        title: values.title,
        coverImage: coverImageResponse, // 只取 response（相对路径字符串）
        lookNum: values.lookNum,
        sort: values.sortOrder || 45,
        detailImages: detailImagesStr, // 传字符串（逗号分隔）
        type: type,
        content: formatRichTextPreviewContent(strategyContent.content),
      };

      let success = false;
      setLoading(true);
      if (id) {
        // 编辑模式
        submitData.id = id;
        success = await sendRequest(editStrategy, submitData);
      } else {
        // 新增模式
        success = await sendRequest(addStrategy, submitData);
      }
      if (success) {
        history.back();
      } else {
        setLoading(false);
      }
    } catch (error) {
      console.error('表单验证失败:', error);
      setLoading(false);
    }
  };

  return (
    <PageContainer>
      <Card>
        <ProForm submitter={false} layout="vertical" form={form}>
          {/* 攻略标题 */}
          <ProFormText
            name="title"
            label="攻略标题"
            placeholder="请输入"
            wrapperCol={{ span: 12 }}
            rules={[{ required: true, message: '请输入攻略标题' }]}
            disabled={isReadOnly}
          />
        <ProFormDigit
          name="lookNum"
          label="浏览量"
          placeholder="请输入"
          wrapperCol={{ span: 12 }}
          min={0}
          disabled={isReadOnly}
          fieldProps={{
            precision: 0,
          }}
        />

          {/* 图片上传区域 */}
          <div style={{ display: 'flex', gap: '24px', marginBottom: '24px', flexWrap: 'wrap' }}>
            {/* 封面图 */}
            <Form.Item
              name="coverImage"
              label="封面图"
              rules={[{ required: true, message: '请上传封面图' }]}
            >
              <Upload
                name="coverImage"
                listType="picture-card"
                fileList={coverImageList}
                beforeUpload={beforeUploadImage}
                disabled={loading || isReadOnly}
                customRequest={customCoverImageRequest}
                accept="image/*"
                onChange={handleCoverImageChange}
                onRemove={handleCoverImageRemove}
              >
                {coverImageList.length >= 1 ? null : uploadButton}
              </Upload>
            </Form.Item>

            {/* 详情图/视频 */}
            <Form.Item name="detailImages" label="详情图/视频" style={{ marginBottom: 0 }}>
              <div>
                <Tabs
                  activeKey={detailTabActiveKey}
                  onChange={setDetailTabActiveKey}
                  items={[
                    {
                      key: 'image',
                      label: '图片',
                      children: (
                        <Upload
                          name="detailImages"
                          listType="picture-card"
                          fileList={detailImageList}
                          beforeUpload={beforeUploadImage}
                          disabled={loading || isReadOnly}
                          customRequest={customDetailImageRequest}
                          accept="image/*"
                          onChange={handleDetailImageChange}
                          onRemove={handleDetailImageRemove}
                          multiple
                        >
                          {detailImageList.length >= 9 ? null : uploadButton}
                        </Upload>
                      ),
                    },
                    {
                      key: 'video',
                      label: '视频',
                      children: (
                        <Upload
                          name="detailVideos"
                          listType="picture-card"
                          fileList={detailVideoList}
                          beforeUpload={beforeUploadVideo}
                          disabled={loading || isReadOnly}
                          customRequest={customDetailVideoRequest}
                          accept="video/*"
                          onChange={handleDetailVideoChange}
                          onRemove={handleDetailVideoRemove}
                          multiple
                        >
                          {detailVideoList.length >= 9 ? null : uploadButton}
                        </Upload>
                      ),
                    },
                  ]}
                />
              </div>
            </Form.Item>

            {/* 排序 */}
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <ProFormDigit
                name="sortOrder"
                label="排序:"
                placeholder="请输入"
                min={0}
                disabled={isReadOnly}
                fieldProps={{
                  style: { width: '120px' },
                }}
              />
              <div style={{ fontSize: '12px', color: '#999', marginTop: '4px', marginLeft: '8px' }}>
                数值越大越靠前
              </div>
            </div>
          </div>

          {/* 攻略内容 */}
          <Form.Item
            name="content"
            label="攻略内容"
            wrapperCol={{ span: 24 }}
            // rules={[{ required: true, message: '请输入攻略内容' }]}
          >
            <BraftEditorCom
              data={strategyContent.content || ''}
              resultCallback={handleEditorChange}
              readOnly={isReadOnly}
            />
          </Form.Item>
          <Form.Item label="内容预览">
            <div
              style={{
                width: '100%',
                minHeight: '200px',
                maxHeight: '320px',
                overflowY: 'auto',
                padding: '12px',
                border: '1px solid #f0f0f0',
                borderRadius: '6px',
                background: '#fff',
              }}
              dangerouslySetInnerHTML={{
                __html: formatRichTextPreviewContent(strategyContent.content),
              }}
            />
          </Form.Item>
          {/* 保存按钮 */}
          {!isReadOnly && (
            <div style={{ marginTop: '24px' }}>
              <Button
                type="primary"
                size="middle"
                loading={loading}
                style={{ minWidth: '100px' }}
                onClick={handleSubmit}
              >
                保存
              </Button>
            </div>
          )}
        </ProForm>
      </Card>
    </PageContainer>
  );
};

export default AddAndEdit;