import React, { useState } 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';

const { TabPane } = Tabs;

const LoginPage: React.FC = () => {
  const [activeKey, setActiveKey] = useState('supplier');
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const intl = useIntl();

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

  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="username"
            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>
            <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;