import { Button, Form, Input } from "antd";
import axios from "axios";
import { t } from "i18next";
import { useState } from "react";
import { useNavigate } from "react-router-dom";

import { feedbackToast } from "@/utils/common";
import { setIMProfile } from "@/utils/storage";

interface LoginResult {
  code: number;
  msg: string;
  data?: {
    userID: string;
    nickname: string;
    imToken: string;
    expireTimeSeconds?: number;
  };
}

const LoginForm = () => {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: { staffNo: string; password: string }) => {
    setLoading(true);
    try {
      const { data: res } = await axios.post<LoginResult>(
        `${import.meta.env.VITE_ACCOUNT_URL}/api/login`,
        {
          staffNo: values.staffNo.trim(),
          password: values.password,
          platformID: window.electronAPI?.getPlatform() ?? 5,
        },
      );
      if (res.code !== 0 || !res.data) {
        feedbackToast({
          msg: res.msg || t("toast.accessFailed"),
          error: res.msg || "login failed",
        });
        return;
      }
      const { userID, imToken } = res.data;
      setIMProfile({ chatToken: imToken, imToken, userID });
      navigate("/chat");
    } catch (error) {
      feedbackToast({ msg: "登录失败，请检查网络后重试", error });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="flex flex-row items-center justify-between">
        <div className="text-xl font-medium">{t("placeholder.welcome")}</div>
      </div>
      <Form
        className="mt-8"
        layout="vertical"
        onFinish={onFinish}
        autoComplete="off"
        labelCol={{ prefixCls: "custom-form-item" }}
      >
        <Form.Item
          label={t("placeholder.staffNo")}
          name="staffNo"
          rules={[{ required: true, message: t("toast.inputStaffNo") }]}
        >
          <Input allowClear placeholder={t("toast.inputStaffNo")} />
        </Form.Item>

        <Form.Item
          label={t("placeholder.password")}
          name="password"
          rules={[{ required: true, message: t("toast.inputPassword") }]}
        >
          <Input.Password allowClear placeholder={t("toast.inputPassword")} />
        </Form.Item>

        <Form.Item className="mb-4 mt-10">
          <Button type="primary" htmlType="submit" block loading={loading}>
            {t("placeholder.login")}
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default LoginForm;
