import { IMSDK } from "@/layout/MainContentWrap";
import { useContactStore } from "@/store";
import { feedbackToast } from "@/utils/common";
import { Input, Modal } from "antd";
import { t } from "i18next";
import { useEffect, useState } from "react";

interface IAddColleagueProps {
  open: boolean;
  onClose: () => void;
}

const AddColleague = ({ open, onClose }: IAddColleagueProps) => {
  const [staffNo, setStaffNo] = useState("");
  const [verifyMsg, setVerifyMsg] = useState(t("placeholder.addColleagueDefaultMsg"));
  const [error, setError] = useState("");
  const [sending, setSending] = useState(false);

  useEffect(() => {
    if (open) {
      setStaffNo("");
      setVerifyMsg(t("placeholder.addColleagueDefaultMsg"));
      setError("");
      setSending(false);
    }
  }, [open]);

  const send = async () => {
    const id = staffNo.trim();
    if (!id) {
      setError(t("toast.inputPeerStaffNo"));
      return;
    }
    setSending(true);
    try {
      await IMSDK.addFriend({
        toUserID: id,
        reqMsg: verifyMsg.trim() || t("placeholder.addColleagueDefaultMsg"),
      });
      useContactStore.getState().getRecvFriendApplicationListByReq();
      feedbackToast({ msg: t("toast.addColleagueSent"), duration: 2 });
      window.setTimeout(onClose, 500);
    } catch (error) {
      setError(t("toast.addColleagueFailed"));
      feedbackToast({ error, msg: t("toast.addColleagueFailed") });
    } finally {
      setSending(false);
    }
  };

  return (
    <Modal
      title={t("placeholder.addColleague")}
      open={open}
      onCancel={sending ? undefined : onClose}
      footer={null}
      width={400}
      centered
      maskClosable={!sending}
      destroyOnClose
      styles={{
        content: { borderRadius: 12 },
      }}
    >
      <div className="pt-2">
        <div className="mb-1.5 text-sm text-[var(--base-black)]">
          {t("placeholder.colleagueStaffNo")}
        </div>
        <Input
          value={staffNo}
          onChange={(e) => {
            setStaffNo(e.target.value);
            if (error) setError("");
          }}
          placeholder={t("toast.inputPeerStaffNo")}
          status={error ? "error" : undefined}
          style={{ height: 36, borderRadius: 8, backgroundColor: "var(--search-bg)" }}
          disabled={sending}
          onPressEnter={send}
        />
        {error ? (
          <div className="mt-1 text-xs text-[var(--warn-text)]">{error}</div>
        ) : null}
        <div className="mb-1.5 mt-4 text-sm text-[var(--base-black)]">
          {t("placeholder.verifyMessageOptional")}
        </div>
        <Input.TextArea
          value={verifyMsg}
          onChange={(e) => setVerifyMsg(e.target.value)}
          placeholder={t("placeholder.addColleagueDefaultMsg")}
          autoSize={{ minRows: 2, maxRows: 4 }}
          disabled={sending}
          style={{
            height: 72,
            minHeight: 72,
            borderRadius: 8,
            backgroundColor: "var(--search-bg)",
          }}
        />
        <button
          className="mt-5 flex h-9 w-full cursor-pointer items-center justify-center rounded-lg border-none bg-[var(--primary)] text-white disabled:cursor-not-allowed disabled:opacity-60"
          disabled={sending}
          onClick={send}
        >
          {sending ? (
            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-white" />
          ) : (
            t("placeholder.sendApplication")
          )}
        </button>
      </div>
    </Modal>
  );
};

export default AddColleague;
