import React from 'react';
import { Row, Col, Form, Input, Button, Card, message, Image } from 'antd';
import { useSelector } from 'react-redux';
import { RootState } from '../../states/store';
import { SystemMode } from '../../states/systemModeSlice';
import loginBrand from 'src/assets/imgs/login-brand.jpeg';
import { useDispatch } from 'react-redux';
import { login as loginApi } from '../../API/security/userActions';
import { setUserInfo, type UserInfoState } from '../../states/user_info'; // 同时导入 setUserInfo 和类型 UserInfoState
import handleEmergencyOperation from '../../domain/patient/handleEmergencyOperation';
import { setSystemMode } from '../../states/systemModeSlice';

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const systemMode = useSelector((state: RootState) => state.systemMode.mode);
  const userInfo = useSelector((state: RootState) => state.userInfo);
  console.log(`========${systemMode}`);

  if (systemMode === SystemMode.Emergency) {
    return null;
  }
  //非急诊，但已经登录，不显示login
  if (systemMode === SystemMode.Normal && !!userInfo && userInfo.uid !== 0) {
    return null;
  }

  // 2. 登录请求函数
  const loginRequest = async (values: {
    username: string;
    password: string;
  }) => {
    const res = await loginApi(values.username, values.password);
    return res.data;
  };

  // 3. handleFinish 处理流程
  const handleFinish = async (values: {
    username: string;
    password: string;
  }) => {
    try {
      const result = await loginRequest(values);
      if (result.code === '0x000000') {
        // 4. 转换为 UserInfoState 类型
        const userInfo: UserInfoState = {
          token: result.data.token,
          expire: result.data.expire,
          uid: result.data.uid,
          name: result.data.name,
          avatar: result.data.avatar,
        };
        // 5. 分发 redux action
        dispatch(setUserInfo(userInfo));
        dispatch(setSystemMode(SystemMode.Normal));
        message.success('登录成功'); //todo 更详细的提示与异步过程
      } else {
        message.error(result.description || '登录失败');
      }
    } catch (e) {
      message.error(`网络错误: ${e instanceof Error ? e.message : '未知错误'}`);
    }
  };

  return (
    <Row
      className="fixed inset-0 z-50 bg-white bg-opacity-100 w-full h-full flex items-center justify-center"
      justify="center"
      align="middle"
    >
      <Col
        xs={24}
        sm={24}
        md={14}
        lg={12}
        xl={12}
        className="flex items-center justify-center h-full"
      >
        <Card className="max-w-md shadow-lg w-[480px] max-auto">
          <Form
            form={form}
            layout="vertical"
            onFinish={handleFinish}
            className="space-y-6 "
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input size="large" placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码' }]}
            >
              <Input.Password size="large" placeholder="请输入密码" />
            </Form.Item>
            <Form.Item>
              <Row gutter={16}>
                <Col span={12}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    size="large"
                    className="w-full"
                  >
                    登录
                  </Button>
                </Col>
                <Col span={12}>
                  <Button
                    type="primary"
                    size="large"
                    className="w-full"
                    onClick={handleEmergencyOperation}
                  >
                    急诊
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </Card>
      </Col>
      <Col
        xs={0}
        sm={0}
        md={10}
        lg={12}
        xl={12}
        className="h-full flex items-center justify-center"
      >
        {/* 右侧区域可用于展示插画或品牌信息，当前留空 */}
        <Image
          src={loginBrand}
          alt="Brand Logo"
          className="max-w-full h-auto"
        />
      </Col>
    </Row>
  );
};

export default Login;