// 专家注册
import React, { useState } from 'react';
import { useIntl, history } from 'umi';
import { Form, Input, Button, message, Card, Select, Row, Col } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  MobileOutlined,
  IdcardOutlined,
  HomeOutlined,
} from '@ant-design/icons';
import './register.less';

const { Option } = Select;

const ExpertRegister: React.FC = () => {
  const [form] = Form.useForm();
  const intl = useIntl();
  const [loading, setLoading] = useState(false);
  const [countdown, setCountdown] = useState(0);

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

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

  const onFinish = (values: any) => {
    setLoading(true);
    console.log('专家注册信息:', values);
    // 这里添加注册逻辑
    setTimeout(() => {
      setLoading(false);
      message.success('注册成功，请登录');
      history.push('/login');
    }, 1000);
  };

  return (
    <div className="register-page">
      <div className="register-container">
        <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.expert.title' })}</div>

        <Form
          form={form}
          name="expert_register"
          onFinish={onFinish}
          layout="horizontal"
          labelAlign="right"
          size='large'
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 19 }}
        >
          <Form.Item
            name="username"
            label={intl.formatMessage({ id: 'register.username.label' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.username.required' }),
              },
              { min: 4, message: intl.formatMessage({ id: 'register.username.min' }) },
            ]}
          >
            <Input
              prefix={<UserOutlined />}
              placeholder={intl.formatMessage({ id: 'register.username.placeholder' })}
            />
          </Form.Item>

          <Form.Item
            name="phone"
            label={intl.formatMessage({ id: 'register.phone.label' })}
            rules={[
              { required: true, message: intl.formatMessage({ id: 'register.phone.required' }) },
              {
                pattern: /^1[3-9]\d{9}$/,
                message: intl.formatMessage({ id: 'register.phone.invalid' }),
              },
            ]}
          >
            <Input
              prefix={<MobileOutlined />}
              placeholder={intl.formatMessage({ id: 'register.phone.placeholder' })}
            />
          </Form.Item>

          <Form.Item
            name="idType"
            label={intl.formatMessage({ id: 'register.expert.idType.label' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.expert.idType.required' }),
              },
            ]}
          >
            <Select
              placeholder={intl.formatMessage({ id: 'register.expert.idType.placeholder' })}
              className="custom-select"
              dropdownMatchSelectWidth={false}
            >
              <Option value="idcard">居民身份证</Option>
              <Option value="foreignid">外国人居留证</Option>
              <Option value="tempid">临时身份证</Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="idCard"
            label={intl.formatMessage({ id: 'register.expert.idCard.label' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.expert.idCard.required' }),
              },
            ]}
          >
            <Input
              prefix={<IdcardOutlined />}
              placeholder={intl.formatMessage({ id: 'register.expert.idCard.placeholder' })}
            />
          </Form.Item>

          <Form.Item
            name="password"
            label={intl.formatMessage({ id: 'register.password.label' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.password.required' }),
              },
              { min: 6, message: intl.formatMessage({ id: 'register.password.min' }) },
              {
                pattern: /^[a-zA-Z0-9]{6,16}$/,
                message: intl.formatMessage({ id: 'register.password.pattern' }),
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder={intl.formatMessage({ id: 'register.password.placeholder' })}
            />
          </Form.Item>

          <Form.Item
            name="confirmPassword"
            label={intl.formatMessage({ id: 'register.confirmPassword.label' })}
            dependencies={['password']}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.confirmPassword.required' }),
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue('password') === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(
                    new Error(intl.formatMessage({ id: 'register.confirmPassword.notMatch' })),
                  );
                },
              }),
            ]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder={intl.formatMessage({ id: 'register.confirmPassword.placeholder' })}
            />
          </Form.Item>

          <Form.Item
            name="captcha"
            label={intl.formatMessage({ id: 'register.captcha.label' })}
            rules={[
              {
                required: true,
                message: intl.formatMessage({ id: 'register.captcha.required' }),
              },
            ]}
          >
            <Row gutter={8}>
              <Col span={16}>
                <Input placeholder={intl.formatMessage({ id: 'register.captcha.placeholder' })} />
              </Col>
              <Col span={8}>
                <Button
                  type="primary"
                  style={{ marginTop: 0 }}
                  disabled={countdown > 0}
                  onClick={handleGetCaptcha}
                >
                  {countdown > 0
                    ? `${countdown}s`
                    : intl.formatMessage({ id: 'register.captcha.get' })}
                </Button>
              </Col>
            </Row>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 12 }}>
            <Button type="primary" htmlType="submit" block loading={loading}>
              {intl.formatMessage({ id: 'register.submit' })}
            </Button>
            <div style={{ marginTop: 16, textAlign: 'center' }}>
              {intl.formatMessage({ id: 'register.hasAccount' })}
              <a onClick={() => history.push('/login')} style={{ marginLeft: 8 }}>
                {intl.formatMessage({ id: 'register.login' })}
              </a>
            </div>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default ExpertRegister;
