import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Tabs, message, Button } from 'antd';
import WangEditor from '@/components/WangEidtor/WangEidtor';
import { TopStatus, EnglishSetting } from '@/dicts/noticeManageDict';
import { addNotice, updateNotice, getNoticeDetail } from '@/servers/api/notice';
import styles from './noticeManage.less';

const { TabPane } = Tabs;

interface NoticeManageFormProps {
  id?: string;
  isEdit: boolean;
  onSuccess: () => void;
}

const NoticeManageForm: React.FC<NoticeManageFormProps> = ({ id, isEdit, onSuccess }) => {
  const [form] = Form.useForm();
  const [activeTabKey, setActiveTabKey] = useState<string>('zh');
  const [loading, setLoading] = useState<boolean>(false);

  // 获取详情数据
  useEffect(() => {
    const fetchNoticeDetail = async (noticeId: string) => {
      setLoading(true);
      try {
        const response = await getNoticeDetail(noticeId);
        if (response && response.success) {
          const detail = response.data;
          form.setFieldsValue({
            isTop: detail.isTop === TopStatus.YES,
            titleZh: detail.title,
            titleEn: detail.titleEn,
            contentZh: detail.content,
            contentEn: detail.contentEn,
            settingEn: detail.settingEn === '1',
          });
        } else {
          message.error(response.message || '获取详情失败');
        }
      } catch (error) {
        console.error('获取通知详情失败:', error);
        message.error('获取详情失败');
      } finally {
        setLoading(false);
      }
    };

    if (isEdit && id) {
      fetchNoticeDetail(id);
    }
  }, [isEdit, id, form]);

  // 处理Tab切换
  const handleTabChange = (key: string) => {
    setActiveTabKey(key);
  };

  // 提交表单
  const handleSubmit = async () => {
    setLoading(true);
    try {
      // 一次性验证所有表单项
      try {
        await form.validateFields();
      } catch (error: any) {
        console.log(error);
        // 如果有验证错误，自动切换到相应Tab
        if (error.errorFields && error.errorFields.length > 0) {
          // 获取第一个错误字段
          const firstError = error.errorFields[0];
          const fieldName = firstError.name[0];

          // 根据字段名判断应该切换到哪个Tab
          if (fieldName === 'titleZh' || fieldName === 'contentZh') {
            setActiveTabKey('zh');
          } else if (fieldName === 'titleEn' || fieldName === 'contentEn') {
            setActiveTabKey('en');
          }
        }

        throw error;
      }

      // 获取所有表单值
      const values = form.getFieldsValue();

      // 转换表单数据为API需要的格式
      const requestData = {
        title: values.titleZh,
        titleEn: values.titleEn || '',
        content: values.contentZh,
        contentEn: values.contentEn || '',
        isTop: values.isTop ? TopStatus.YES : TopStatus.NO,
        settingEn: values.settingEn ? EnglishSetting.YES : EnglishSetting.NO,
      };

      let response;
      if (isEdit && id) {
        response = await updateNotice(id, requestData);
      } else {
        response = await addNotice(requestData);
      }

      if (response && response.success) {
        message.success(isEdit ? '更新成功' : '添加成功');
        onSuccess(); // 回调父组件
      } else {
        message.error(response.message || (isEdit ? '更新失败' : '添加失败'));
      }
    } catch (error: any) {
      console.error('表单验证或提交失败:', error);
      // 错误已在前面处理
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Form form={form} layout="vertical" name="noticeForm" preserve={false}>
        <Form.Item name="isTop" label="是否置顶" valuePropName="checked">
          <Switch />
        </Form.Item>

        <Form.Item name="settingEn" label="是否设置英文内容" valuePropName="checked">
          <Switch />
        </Form.Item>

        <Tabs activeKey={activeTabKey} onChange={handleTabChange}>
          <TabPane tab="中文版" key="zh" forceRender={true}>
            <Form.Item
              name="titleZh"
              label="标题（中文）"
              rules={[{ required: true, message: '请输入中文标题' }]}
            >
              <Input placeholder="请输入中文标题" />
            </Form.Item>

            <Form.Item
              name="contentZh"
              label="内容（中文）"
              rules={[{ required: true, message: '请输入中文内容' }]}
            >
              <WangEditor language="zh-CN" height="300px" placeholder="请输入通知内容..." />
            </Form.Item>
          </TabPane>
          <TabPane tab="英文版" key="en" forceRender={true}>
            <Form.Item
              name="titleEn"
              label="标题（英文）"
              rules={[{ required: form.getFieldValue('settingEn'), message: 'Please enter title in English' }]}
            >
              <Input placeholder="Please enter title in English" />
            </Form.Item>

            <Form.Item
              name="contentEn"
              label="内容（英文）"
              rules={[{ required: form.getFieldValue('settingEn'), message: 'Please enter content in English' }]}
            >
              <WangEditor
                language="en"
                height="300px"
                placeholder="Please enter notice content..."
              />
            </Form.Item>
          </TabPane>
        </Tabs>
      </Form>
      <div className={styles.formActions}>
        <Button onClick={() => onSuccess()}>取消</Button>
        <Button
          type="primary"
          loading={loading}
          onClick={handleSubmit}
        >
          提交
        </Button>
      </div>
    </div>
  );
};

export default NoticeManageForm;
