// 供应商注册
import React, { useState, useEffect } from 'react';
import { useIntl, history } from 'umi';
import { Form, Button, message, Radio, Checkbox, Modal, Spin } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import DomesticForm from './supplier/DomesticForm';
import ForeignForm from './supplier/ForeignForm';
import { coscoSupplierBaseAdd, fetchSurveyQuestions } from '@/servers/api/register';
import './register.less';

const SupplierRegister: React.FC = () => {
  const [form] = Form.useForm();
  const intl = useIntl();
  const [supplierType, setSupplierType] = useState<string>('dvs');
  const [loading, setLoading] = useState(false);
  const [countdown, setCountdown] = useState(0);
  const [modalVisible, setModalVisible] = useState(false);
  const [surveyQuestions, setSurveyQuestions] = useState<API.SurveyQuestionResponse>([]);
  const [fetchingQuestions, setFetchingQuestions] = useState(false);

  // 获取问卷列表
  useEffect(() => {
    const fetchQuestions = async () => {
      setFetchingQuestions(true);
      try {
        const response = await fetchSurveyQuestions();
        if (response.success) {
          setSurveyQuestions(response.data || []);
        } else {
          message.error(response.message || '获取问卷列表失败');
        }
      } catch (error) {
        console.error('获取问卷列表出错:', error);
        message.error('获取问卷列表出错');
      } finally {
        setFetchingQuestions(false);
      }
    };

    fetchQuestions();
  }, []);

  // 获取短信验证码
  const handleGetCaptcha = () => {
    form
      .validateFields(['contactPhone'])
      .then((values) => {
        message.success(`验证码已发送至 ${values.contactPhone}`);
        let count = 60;
        setCountdown(count);

        const timer = setInterval(() => {
          count--;
          setCountdown(count);
          if (count === 0) {
            clearInterval(timer);
          }
        }, 1000);
      })
      .catch((errorInfo) => {
        message.error('请先输入正确的手机号');
      });
  };

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      // 确保供应商类型添加到表单值中
      values.coscoSupplierBase = values.coscoSupplierBase || {};
      values.coscoSupplierBase.supplierType = supplierType;

      console.log('供应商注册信息:', values);

      // 直接调用API
      const response = await coscoSupplierBaseAdd(values);

      if (response.success) {
        message.success('注册成功，请登录');
        history.push('/login');
      } else {
        message.error(response.message || '注册失败，请重试');
      }
    } catch (error) {
      console.error('注册出错:', error);
      message.error('注册失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const handleSupplierTypeChange = (e: any) => {
    form.resetFields();
    setSupplierType(e.target.value);
  };

  return (
    <div className="register-page ">
      <div className="register-container large-width">
        <div className="back-home">
          <a onClick={() => history.push('/index')}>
            <HomeOutlined /> {intl.formatMessage({ id: 'login.back.home' })}
          </a>
        </div>

        <div className="register-title">
          {intl.formatMessage({ id: 'register.supplier.title' })}
        </div>

        <Spin spinning={fetchingQuestions}>
          <Form
            form={form}
            name="supplier_register"
            className="register-form"
            onFinish={onFinish}
            layout="horizontal"
            labelAlign="right"
            size="large"
            labelCol={{ span: 7 }}
            wrapperCol={{ span: 17 }}
          >
            <Form.Item label="企业类型" labelCol={{ span: 2 }} wrapperCol={{ span: 19 }}>
              <Radio.Group onChange={handleSupplierTypeChange} buttonStyle="solid" value={supplierType}>
                <Radio.Button value="dvs">境内企业/机构</Radio.Button>
                <Radio.Button value="ovs">境外企业</Radio.Button>
              </Radio.Group>
            </Form.Item>

            {supplierType === 'dvs' ? (
              <DomesticForm
                form={form}
                countdown={countdown}
                surveyQuestions={surveyQuestions}
                handleGetCaptcha={handleGetCaptcha}
              />
            ) : (
              <ForeignForm
                form={form}
                countdown={countdown}
                handleGetCaptcha={handleGetCaptcha}
                surveyQuestions={surveyQuestions}
              />
            )}
            <Form.Item
              name="agreement"
              valuePropName="checked"
              labelCol={{ span: 2 }}
              wrapperCol={{ span: 19 }}
              rules={[
                {
                  validator: (_, value) =>
                    value
                      ? Promise.resolve()
                      : Promise.reject(new Error('请阅读并同意注册信息承诺书')),
                },
              ]}
            >
              <Checkbox>
                我已阅读并同意
                <Button
                  type="link"
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setModalVisible(true);
                  }}
                >
                  《注册信息承诺书》
                </Button>
              </Checkbox>
            </Form.Item>
            <Form.Item wrapperCol={{ span: 24 }}>
              <div style={{ textAlign: 'center' }}>
                <Button type="primary" htmlType="submit" loading={loading}>
                  {intl.formatMessage({ id: 'register.submit' })}
                </Button>
              </div>
            </Form.Item>
          </Form>
        </Spin>
      </div>

      {/* 注册信息承诺书弹窗 */}
      <Modal
        title="注册信息承诺书"
        visible={modalVisible}
        onOk={() => {
          console.log('点击了确定按钮');
          setModalVisible(false);
        }}
        onCancel={() => {
          console.log('点击了取消按钮');
          setModalVisible(false);
        }}
        width={700}
        okText="我知道了"
        cancelButtonProps={{ style: { display: 'none' } }}
        destroyOnClose
        // maskClosable={false}
      >
        <div style={{ maxHeight: '60vh', overflow: 'auto' }}>
          <p>尊敬的用户：</p>
          <p>感谢您注册使用我们的平台。请您仔细阅读以下承诺内容：</p>
          <ol>
            <li>
              本人/单位承诺所提供的注册信息真实、准确、完整，不存在虚假记载、误导性陈述或重大遗漏。
            </li>
            <li>本人/单位承诺遵守平台的各项规则和要求，不从事任何违法违规活动。</li>
            <li>
              本人/单位了解并同意，如提供虚假信息或违反平台规则，平台有权终止服务并追究相关责任。
            </li>
            <li>本人/单位承诺妥善保管账号和密码，对账号下的所有操作和行为负责。</li>
            <li>本人/单位同意平台在必要范围内合法使用所提供的信息，用于提供服务和改善用户体验。</li>
            <li>
              本人/单位承诺遵守国家法律法规和行业规范，恪守商业道德，不从事任何损害平台或其他用户利益的行为。
            </li>
            <li>本人/单位承诺所上传的资质文件和证明材料真实有效，并对其真实性和合法性负责。</li>
            <li>本人/单位了解并同意，平台有权根据业务需要对用户资料进行审核，并保留最终解释权。</li>
          </ol>
          <p>特此承诺！</p>
        </div>
      </Modal>
    </div>
  );
};

export default SupplierRegister;
