import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form, Switch, InputNumber, Radio, Image} from '@nutui/nutui-react-taro'
import {Edit, Upload as UploadIcon} from '@nutui/icons-react-taro'
import Taro from '@tarojs/taro'
import {View} from '@tarojs/components'
import {ShopArticle} from "@/api/shop/shopArticle/model";
import {getShopArticle, addShopArticle, updateShopArticle} from "@/api/shop/shopArticle";
import FixedButton from "@/components/FixedButton";

const AddShopArticle = () => {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(true)
  const [formData, setFormData] = useState<ShopArticle>({
    type: 0, // 默认常规文章
    status: 0, // 默认已发布
    permission: 0, // 默认所有人可见
    recommend: 0, // 默认不推荐
    showType: 10, // 默认小图展示
    virtualViews: 0, // 默认虚拟阅读量
    actualViews: 0, // 默认实际阅读量
    sortNumber: 0 // 默认排序
  })
  const formRef = useRef<any>(null)

  // 判断是编辑还是新增模式
  const isEditMode = !!params.id
  const articleId = params.id ? Number(params.id) : undefined

  // 文章类型选项
  const typeOptions = [
    { text: '常规文章', value: 0 },
    { text: '视频文章', value: 1 }
  ]

  // 状态选项
  const statusOptions = [
    { text: '已发布', value: 0 },
    { text: '待审核', value: 1 },
    { text: '已驳回', value: 2 },
    { text: '违规内容', value: 3 }
  ]

  // 可见性选项
  const permissionOptions = [
    { text: '所有人可见', value: 0 },
    { text: '登录可见', value: 1 },
    { text: '密码可见', value: 2 }
  ]

  // 显示方式选项
  const showTypeOptions = [
    { text: '小图展示', value: 10 },
    { text: '大图展示', value: 20 }
  ]

  const reload = async () => {
    // 如果是编辑模式，加载文章数据
    if (isEditMode && articleId) {
      try {
        const article = await getShopArticle(articleId)
        setFormData(article)
        // 更新表单值
        if (formRef.current) {
          formRef.current.setFieldsValue(article)
        }
      } catch (error) {
        console.error('加载文章失败:', error)
        Taro.showToast({
          title: '加载文章失败',
          icon: 'error'
        });
      }
    }
  }

  // 图片上传处理
  const handleImageUpload = async () => {
    try {
      const res = await Taro.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera']
      });

      if (res.tempFilePaths && res.tempFilePaths.length > 0) {
        // 这里应该调用上传接口，暂时使用本地路径
        const imagePath = res.tempFilePaths[0];
        setFormData({
          ...formData,
          image: imagePath
        });

        Taro.showToast({
          title: '图片选择成功',
          icon: 'success'
        });
      }
    } catch (error) {
      Taro.showToast({
        title: '图片选择失败',
        icon: 'error'
      });
    }
  };

  // 提交表单
  const submitSucceed = async (values: any) => {
    try {
      // 准备提交的数据
      const submitData = {
        ...formData,
        ...values,
      };

      // 如果是编辑模式，添加id
      if (isEditMode && articleId) {
        submitData.articleId = articleId;
      }

      // 执行新增或更新操作
      if (isEditMode) {
        await updateShopArticle(submitData);
      } else {
        await addShopArticle(submitData);
      }

      Taro.showToast({
        title: `${isEditMode ? '更新' : '保存'}成功`,
        icon: 'success'
      });

      setTimeout(() => {
        Taro.navigateBack();
      }, 1000);

    } catch (error) {
      console.error('保存失败:', error);
      Taro.showToast({
        title: `${isEditMode ? '更新' : '保存'}失败`,
        icon: 'error'
      });
    }
  }

  const submitFailed = (error: any) => {
    console.log(error, 'err...')
  }

  useEffect(() => {
    // 动态设置页面标题
    Taro.setNavigationBarTitle({
      title: isEditMode ? '编辑文章' : '新增文章'
    });

    reload().then(() => {
      setLoading(false)
    })
  }, [isEditMode]);

  if (loading) {
    return <Loading className={'px-2'}>加载中</Loading>
  }

  return (
    <>
      <Form
        ref={formRef}
        divider
        initialValues={formData}
        labelPosition="left"
        onFinish={(values) => submitSucceed(values)}
        onFinishFailed={(errors) => submitFailed(errors)}
      >
        {/* 基本信息 */}
        <CellGroup title="基本信息">
          <Form.Item
            name="title"
            label="文章标题"
            required
            rules={[{ required: true, message: '请输入文章标题' }]}
            initialValue={formData.title}
          >
            <Input placeholder="请输入文章标题" maxLength={100}/>
          </Form.Item>

          <Form.Item name="overview" label="文章概述" initialValue={formData.overview}>
            <TextArea placeholder="请输入文章概述，用于列表展示" maxLength={200} rows={3}/>
          </Form.Item>

          <Form.Item
            name="detail"
            label="文章内容"
            required
            rules={[{ required: true, message: '请输入文章内容' }]}
            initialValue={formData.detail}
          >
            <TextArea placeholder="请输入文章内容" maxLength={10000} rows={8}/>
          </Form.Item>

          <Form.Item name="author" label="作者" initialValue={formData.author}>
            <Input placeholder="请输入作者名称" maxLength={50}/>
          </Form.Item>

          <Form.Item name="source" label="来源" initialValue={formData.source}>
            <Input placeholder="请输入文章来源" maxLength={100}/>
          </Form.Item>
        </CellGroup>

        {/* 文章设置 */}
        <CellGroup title="文章设置">
          <Form.Item name="type" label="文章类型" initialValue={formData.type}>
            <Radio.Group direction="horizontal" value={formData.type}>
              {typeOptions.map(option => (
                <Radio key={option.value} value={option.value}>
                  {option.text}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item name="status" label="发布状态" initialValue={formData.status}>
            <Radio.Group direction="horizontal" value={formData.status}>
              {statusOptions.map(option => (
                <Radio key={option.value} value={option.value}>
                  {option.text}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item name="permission" label="可见性" initialValue={formData.permission}>
            <Radio.Group direction="horizontal" value={formData.permission}>
              {permissionOptions.map(option => (
                <Radio key={option.value} value={option.value}>
                  {option.text}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item name="showType" label="显示方式" initialValue={formData.showType}>
            <Radio.Group direction="horizontal" value={formData.showType}>
              {showTypeOptions.map(option => (
                <Radio key={option.value} value={option.value}>
                  {option.text}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>
        </CellGroup>

        {/* 高级设置 */}
        <CellGroup title="高级设置">
          <Form.Item name="recommend" label="推荐文章" initialValue={formData.recommend}>
            <Switch
              checked={formData.recommend === 1}
              onChange={(checked) =>
                setFormData({...formData, recommend: checked ? 1 : 0})
              }
            />
          </Form.Item>

          <Form.Item name="price" label="付费金额" initialValue={formData.price}>
            <Input placeholder="0.00" type="number"/>
            <View className="text-xs text-gray-500 mt-1">单位：元</View>
          </Form.Item>

          <Form.Item name="virtualViews" label="虚拟阅读量" initialValue={formData.virtualViews}>
            <InputNumber min={0} defaultValue={formData.virtualViews || 0}/>
          </Form.Item>

          <Form.Item name="actualViews" label="实际阅读量" initialValue={formData.actualViews}>
            <InputNumber min={0} defaultValue={formData.actualViews || 0}/>
          </Form.Item>

          <Form.Item name="sortNumber" label="排序" initialValue={formData.sortNumber}>
            <InputNumber min={0} defaultValue={formData.sortNumber || 0}/>
            <View className="text-xs text-gray-500 mt-1">数字越小越靠前</View>
          </Form.Item>

          <Form.Item name="tags" label="标签" initialValue={formData.tags}>
            <Input placeholder="请输入标签，多个标签用逗号分隔" maxLength={200}/>
          </Form.Item>

          <Form.Item name="topic" label="话题" initialValue={formData.topic}>
            <Input placeholder="请输入话题" maxLength={100}/>
          </Form.Item>
        </CellGroup>

        {/* 图片上传 */}
        <CellGroup title="文章图片">
          <Form.Item name="image" label="封面图片" initialValue={formData.image}>
            <View className="flex items-center gap-3">
              {formData.image && (
                <Image
                  src={formData.image}
                  width="80"
                  height="80"
                  radius="8"
                />
              )}
              <Button
                size="small"
                type="primary"
                fill="outline"
                icon={<UploadIcon />}
                onClick={handleImageUpload}
              >
                {formData.image ? '更换图片' : '上传图片'}
              </Button>
            </View>
          </Form.Item>
        </CellGroup>

        {/* 提交按钮 */}
        <FixedButton text={isEditMode ? '更新文章' : '发布文章'} onClick={() => submitSucceed} icon={<Edit />} />
      </Form>
    </>
  );
};

export default AddShopArticle;