import { Badge } from "antd";
import clsx from "clsx";
import { UserAddOutlined, UserOutlined, TeamOutlined } from "@ant-design/icons";
import i18n, { t } from "i18next";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

import FlexibleSider from "@/components/FlexibleSider";
import AddColleague from "@/pages/common/AddColleague";
import { useContactStore } from "@/store";

type LinkItem = {
  label: string;
  icon: React.ReactNode;
  path?: string;
  modal?: boolean;
};

// 通讯录功能入口：按视觉规范 v1 固定顺序 ①新的同事 ②添加同事 ③我的群聊，
// 全部用「20px 线性图标 + 36×36 浅蓝图标块 + 文字」，行高 44。
const buildLinks = (): LinkItem[] => [
  {
    label: t("placeholder.newFriends"),
    icon: <UserAddOutlined />,
    path: "/contact/newFriends",
  },
  {
    label: t("placeholder.addColleague"),
    icon: <UserOutlined />,
    modal: true,
  },
  {
    label: t("placeholder.myGroup"),
    icon: <TeamOutlined />,
    path: "/contact/myGroups",
  },
];

i18n.on("languageChanged", () => {
  // buildLinks 每次渲染时都会重新读取文案，无需缓存更新
});

const ContactSider = () => {
  const [selectIndex, setSelectIndex] = useState(-1);
  const [addColleagueOpen, setAddColleagueOpen] = useState(false);
  const unHandleFriendApplicationCount = useContactStore(
    (state) => state.unHandleFriendApplicationCount,
  );
  const unHandleGroupApplicationCount = useContactStore(
    (state) => state.unHandleGroupApplicationCount,
  );
  const navigate = useNavigate();
  const Links = buildLinks();

  useEffect(() => {
    if (location.hash.includes("/contact/newFriends")) {
      setSelectIndex(0);
    }
    if (location.hash.includes("/contact/myGroups")) {
      setSelectIndex(2);
    }
  }, []);

  const getBadge = (index: number) => {
    if (index === 0) {
      return unHandleFriendApplicationCount;
    }
    return index === 2 ? unHandleGroupApplicationCount : 0;
  };

  const onClick = (item: LinkItem, index: number) => {
    if (item.modal) {
      setAddColleagueOpen(true);
      return;
    }
    setSelectIndex(index);
    if (item.path) navigate(item.path);
  };

  return (
    <FlexibleSider
      needHidden={true}
      wrapClassName="flex flex-col border-r border-[var(--gap-text)] bg-white"
    >
      <div className="app-drag px-4 pt-4">
        <div className="pb-3 text-base font-bold">{t("placeholder.contact")}</div>
      </div>
      <div className="h-full flex-1 overflow-y-auto bg-white">
        <ul>
          {Links.map((item, index) => {
            return (
              <li
                key={item.label}
                className={clsx(
                  "mx-2 flex h-11 cursor-pointer items-center rounded-lg px-3",
                  index === selectIndex
                    ? "bg-[var(--primary-active)]"
                    : "hover:bg-[var(--chat-bg)]",
                )}
                onClick={() => onClick(item, index)}
              >
                <Badge size="small" count={getBadge(index)}>
                  <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--primary-active)] text-[20px] leading-none text-[var(--primary)]">
                    {item.icon}
                  </span>
                </Badge>
                <div className="ml-3 text-[15px] text-[var(--base-black)]">{item.label}</div>
              </li>
            );
          })}
        </ul>
      </div>
      <AddColleague open={addColleagueOpen} onClose={() => setAddColleagueOpen(false)} />
    </FlexibleSider>
  );
};
export default ContactSider;

