import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Checkbox, Tabs, message } from 'antd';
import { UserOutlined, LockOutlined, EyeInvisibleOutlined, EyeTwoTone, HomeOutlined } from '@ant-design/icons';
import { history, useIntl } from 'umi';
import './login.less';
import { getCaptcha, supplierLogin } from '@/servers/api/login';

import { encryptWithRsa } from '@/utils/encryptWithRsa'
import Password from 'antd/lib/input/Password';

const { TabPane } = Tabs;

const LoginPage: React.FC = () => {
  const [activeKey, setActiveKey] = useState('supplier');
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [captchaImg, setCaptchaImg] = useState<string>('');
  const [captchaKey, setCaptchaKey] = useState<string>('');

  const intl = useIntl();

  useEffect(() => {
    fetchCaptcha();
  }, [activeKey]);

  const onFinish = async (values: any) => {
    setLoading(true);
    try {
      const params = {
        ...values,
        password: encryptWithRsa(values.password, false),
        encryptValue: encryptWithRsa(values.identifying)
      };
      const loginRes = await supplierLogin(params);
      if (loginRes.code === 200) {
        sessionStorage.setItem('token', loginRes.data.token);
        sessionStorage.setItem('currentUser', JSON.stringify(loginRes.data));
        sessionStorage.setItem('userId', loginRes.data.supplierUser.userId);
        message.success('登录成功');
        history.push('/index');
      } else {
        message.error(loginRes.message || '登录失败');
      }
    } finally {
      setLoading(false);
    }
  };
  

  const fetchCaptcha = async () => {
    const res = await getCaptcha();
    if (res.code === 200) {
      setCaptchaImg(res.data.base64Image);
      setCaptchaKey(res.data.code);
    }
  };

  const handleTabChange = (key: string) => {
    setActiveKey(key);
    form.resetFields();
  };

  // 根据当前选中的Tab决定跳转到哪个注册页面
  const handleRegister = () => {
    switch(activeKey) {
      case 'supplier':
        history.push('/register/supplier');
        break;
      case 'expert':
        history.push('/register/expert');
        break;
      default:
        // 招标代理不提供注册功能
        break;
    }
  };

  // 渲染注册链接（只在供应商和专家Tab下显示）
  const renderRegisterLink = () => {
    if (activeKey === 'agent') {
      return null; // 招标代理不显示注册链接
    }

    return (
      <div className="register-link">
        {intl.formatMessage({ id: 'login.register.tip' })}
        <a onClick={handleRegister}>
          {intl.formatMessage({ id: 'login.register.action' })}
        </a>
      </div>
    );
  };

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

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

        {/* <div className="login-tab-container">
          <Tabs activeKey={activeKey} onChange={handleTabChange} className='login-tabs'>
            <TabPane tab={intl.formatMessage({ id: 'login.tab.supplier' })} key="supplier" />
            <TabPane tab={intl.formatMessage({ id: 'login.tab.expert' })} key="expert" />
            <TabPane tab={intl.formatMessage({ id: 'login.tab.agent' })} key="agent" />
          </Tabs>
        </div> */}

        <Form
          form={form}
          name="login"
          className='login-form'
          initialValues={{ remember: false }}
          onFinish={onFinish}
        >
          <Form.Item
            name="account"
            rules={[{ required: true, message: intl.formatMessage({ id: 'login.username.placeholder' }) + '!' }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder={intl.formatMessage({ id: 'login.username.placeholder' })}
              size="large"
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: intl.formatMessage({ id: 'login.password.placeholder' }) + '!' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder={intl.formatMessage({ id: 'login.password.placeholder' })}
              iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
              size="large"
            />
          </Form.Item>
          <Form.Item
            name="identifying"
            rules={[{ required: true, message: intl.formatMessage({ id: 'login.captcha.placeholder' }) + '!' }]}
          >
            <Input
              placeholder={intl.formatMessage({ id: 'login.captcha.placeholder' })}
              size="large"
              maxLength={6}
              autoComplete="off"
              prefix={null}
              suffix={
                <img
                src={`data:image/png;base64,${captchaImg}`}
                  alt="验证码"
                  style={{ cursor: 'pointer', height: 32, verticalAlign: 'middle' }}
                  onClick={fetchCaptcha}
                />
              }
            />
          </Form.Item> 

          <Form.Item>
            <div className='login-options'>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>{intl.formatMessage({ id: 'login.remember' })}</Checkbox>
              </Form.Item>
              <a className="login-form-forgot" href="">
                {intl.formatMessage({ id: 'login.forgot' })}
              </a>
            </div>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button" loading={loading} size="large">
              {intl.formatMessage({ id: 'login.button' })}
            </Button>
            {renderRegisterLink()}
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default LoginPage;