import { View } from "@tarojs/components";
import style from "./index.module.less";
import TagCertificated from "@/components/tag-certificated";

import IconPlusBlue from "@/components/icon/icon-plus-blue";
import Popup from "@/components/popup/popup";
import WemetaTabs from "@/components/wemeta-tabs/index";
import { useAgentStore, useAgentStoreActions } from "@/store/agentStore";
import { TAgent } from "@/types/agent";
import Taro from "@tarojs/taro";
import ContactIcon from "@/components/ContactIcon";
import { useEffect } from "react";
import EmptyData, { EmptyDataSubInfo, EmptyDataTitle } from "@/components/EmptyData";
interface IProps {
  show: boolean;
  setShow: (show: boolean) => void;
}
export default ({ show, setShow }: IProps) => {
  const agents = useAgentStore((state) => state.agents);
  const { setDefaultAgent, fetchAgents, clearEditAgent, fetchDefaultNewAgentInfo } = useAgentStoreActions();
  let loading = false;
  const personalAgents = agents.filter((item) => !item.isEnt);
  const entAgents = agents.filter((item) => item.isEnt);




  const handleClick = async (item: TAgent) => {
    if (loading) {
      return;
    }
    loading = true;
    Taro.showLoading({ title: "加载中" });
    const result = await setDefaultAgent(item.agentId);

    if (result) {
      await fetchAgents();
    }
    loading = false;
    Taro.hideLoading();
    setShow(false)

  };

  const handleCreate = async ()=> {
    Taro.showTabBar().catch(()=> {});
    if (loading) {
      return;
    }
    loading = true;
    try{
      clearEditAgent()
      await fetchDefaultNewAgentInfo();
      Taro.navigateTo({ url: `/pages/agent/index`});
      loading = false;
      setShow(false)
    }catch(e:any){
      loading = false;
    }
  }

  useEffect(()=> {
    fetchAgents()
  }, [show])

  const renderCard = (item: TAgent, isEnt: boolean) => {
    return (
      <View className={item.isDefault ? style.cardActive : style.card} onClick={() => handleClick(item)}>
        <View
          className="flex items-start mb-24"
        >
          <View className="flex flex-col flex-1 truncate">
            <View className="flex items-end gap-8 text-gray-5 truncate">
              <View className="text-20 font-medium leading-28 text-black truncate">
                {item.name}
              </View>
              <View className="text-12 leading-20">
                {item.position ?? "暂无职位信息"}
              </View>
            </View>
            <View className="flex items-center gap-2">
              <View className="text-12 leading-20 truncate max-w-[188px]">
                {item.entName ?? "暂无公司信息"}
              </View>
              {isEnt && <TagCertificated />}
            </View>
          </View>
        </View>
        <View className={style.icons}>
          <ContactIcon type="phone" actived={!!item?.mobile}></ContactIcon>
          <ContactIcon type="mail" actived={!!item?.email}></ContactIcon>
          <ContactIcon type="location" actived={!!item?.address}></ContactIcon>
          <ContactIcon type="qrcode" actived={!!item?.qrCodeUrl}></ContactIcon>
        </View>
      </View>
    );
  };

  const renderPersonalAgents = () => {
    if(personalAgents.length <= 0){
      return <EmptyData type='search' className="mt-44"></EmptyData>
    }
    return personalAgents.map((item) => {
      return renderCard(item, false);
    });
  };

  const renderEntAgents = () => {
    if (entAgents.length) {
      return entAgents.map((item) => {
        return renderCard(item, true);
      });
    }
    return (
      <View className={`${style.card} h-full`}>
        <EmptyData type='box'>
          <EmptyDataTitle>你还没有加入任何企业</EmptyDataTitle>
          <EmptyDataSubInfo>访问公司统一知识内容，提升回复效率与专业度</EmptyDataSubInfo>
          <View
              className="button-rounded button-primary-light button-border-primary button-inline-flex mt-20"
              onClick={() => Taro.navigateTo({ url: "/pages/contact-us/index" })}
            >
              联系我们
          </View>
        </EmptyData>
      </View>
    );
  };

  const tabList = [
    {
      key: "1",
      label: "个人",
      children: (
        <>
          <View className="pt-12 relative">
            <View className={style.tabContainer}>
              <View className="pb-66">
                {renderPersonalAgents()}
              </View>
            </View>
            <View className="absolute left-0 right-0 bottom-0 z-10 bg-white pt-14" onClick={handleCreate}>
              <View className="button-rounded button-primary-light gap-8 mb-15">
                <IconPlusBlue />
                <View>创建新的智能体</View>
              </View>
            </View>
          </View>
        </>
      ),
    },
    {
      key: "2",
      label: "企业",
      children: (
        <>
          <View className="pt-12">
            <View className={style.tabContainer}>{renderEntAgents()}</View>
          </View>
        </>
      ),
    },
  ];
  return (
    <View className="relative">
      <Popup setShow={setShow} show={show} title="小蓝本">
        <WemetaTabs current="1" list={tabList}></WemetaTabs>
      </Popup>
    </View>
  );
};
