import { View } from "@tarojs/components";
import RoundedLabel from "../RoundedLabel";
import IconFilterFeeds from "@/components/icon/IconFilterFeeds";
import IconFilterBatch from "@/components/icon/IconFilterBatch";
import IconFilterList from "@/components/icon/IconFilterList";

import EmptyData from "@/components/empty-data";
import Popup from "@/components/popup/popup";
import WemetaSwitch from "@/components/WemetaSwitch";
import { useState } from "react";

import ViewStyleChatEnt from "../view-style/ViewStyleChatEnt";
import ViewStyleListEnt from "../view-style/ViewStyleListEnt";

import PickerSingleColumn from "@/components/Picker/PickerSingleColumn";
import IconArrowDownRounded from "@/components/icon/IconArrowDownRounded";
import { useKnowledgeEntStore } from "@/store/knowledgeEnt";
import { useUserStore } from "@/store/userStore";
import { useAgentStore } from "@/store/agentStore";

type TListStyle = "chat" | "list";

const Index = () => {
  const ents = useUserStore((state) => state.entList);
  const [checked, setChecked] = useState(false);
  const [showPopup, setShowPopup] = useState(false);
  const [listStyle, setListStyle] = useState<TListStyle>("chat");
  const { ent, setEnt, total, listTotalCount } = useKnowledgeEntStore();
  // const agents = useAgentStore((state) => state.agents);

  const handleListStyleChange = (listStyle: TListStyle) => {
    setListStyle(listStyle);
  };

  // 如果没有当前企业，则默认第一个
  if (!ent) {
    setEnt(ents[0]);
  }

  const renderTabContent = () => {
    if (!ents.length) {
      return (
        <View className="flex-center pt-40">
          <EmptyData type={7}>
            <View className="text-center text-14 leading-28 text-gray-45 mb-44 w-172">
              <View className="text-center text-16 leading-24 font-medium text-black">
                绑定企业，知识自动到位
              </View>
              <View>访问公司统一知识内容</View>
              <View>一键同步到你的智能体</View>
              <View>提升回复效率与专业度</View>
              <View
                className="button-rounded button-primary-light button-border-primary button-inline-flex mt-24"
                onClick={() =>
                  Taro.navigateTo({ url: "/pages/contact-us/index" })
                }
              >
                联系我们
              </View>
            </View>
          </EmptyData>
        </View>
      );
    }

    return (
      <>
        <View className="px-16 pb-20">
          <View className="pb-8">
            <PickerSingleColumn
              options={options}
              selected={selected}
              onChange={handleChange}
              showPicker={showPicker}
              setShowPicker={setShowPicker}
            >
              <View
                className="flex items-center gap-2 bg-gray-3 rounded-12 p-12 mb-16"
                onClick={() => setShowPicker(true)}
              >
                <View className="flex-1 text-14 leading-22 text-gray-45">
                  {selected}
                </View>
                <View className="flex-center">
                  <IconArrowDownRounded />
                </View>
              </View>
            </PickerSingleColumn>
          </View>
          <View className="flex items-center">
            <View className="flex-1 text-12 leading-20 text-gray-45">
              共 {listStyle === "chat" ? total : listTotalCount} 个文件
            </View>
            <View className="flex items-center">
              {listStyle === "chat" ? (
                <RoundedLabel
                  onClick={() => setShowPopup(true)}
                  text="信息流"
                  icon={IconFilterFeeds}
                ></RoundedLabel>
              ) : (
                <>
                  <RoundedLabel
                    onClick={() => {
                      console.log("batch");
                    }}
                    text="批量"
                    icon={IconFilterBatch}
                  ></RoundedLabel>
                  <RoundedLabel
                    text="列表"
                    onClick={() => {
                      setShowPopup(true);
                    }}
                    icon={IconFilterList}
                  ></RoundedLabel>
                </>
              )}
            </View>
          </View>
        </View>
        <View className="px-16 h-full">{renderContent()}</View>
      </>
    );
  };

  // 当前选中的值
  const options = ents.map((item) => item.entName);
  // 是否显示选择器
  const [showPicker, setShowPicker] = useState(false);

  // 当前选中的值
  const [selected, setSelected] = useState(options[0]);

  const handleChange = (value: string) => {
    setSelected(value);
    const ent = ents.find((item) => item.entName === value);
    if (ent) {
      setEnt(ent);
    }
  };

  const renderContent = () => {
    if (!ent?.entId) {
      return <></>;
    }
    if (listStyle === "chat") {
      return <ViewStyleChatEnt entId={ent.entId} />;
    }
    return <ViewStyleListEnt entId={ent.entId} />;
  };

  return (
    <>
      <View className="pt-12 h-full">
        <View className="rounded-container-header"></View>
        {renderTabContent()}
      </View>

      <Popup setShow={setShowPopup} show={showPopup} title="展示样式">
        <View
          className={`rounded-card ${
            listStyle === "chat" ? "rounded-card-actived" : ""
          }`}
          onClick={() => {
            handleListStyleChange("chat");
          }}
        >
          <View className="border-bottom1-gray mb-12">
            <View className="mb-8 text-14 font-medium leading-22">
              对话信息流
            </View>
            <View className="mb-12 text-12 leading-20 text-gray-45">
              以对话形式展示，模拟自然的对话流程。
            </View>
          </View>
          <View className="flex items-center">
            <View className="flex-1 text-14 font-medium leading-22">
              仅显示 AI 助手信息
            </View>
            <WemetaSwitch
              checked={checked}
              onChange={(checked) => setChecked(checked)}
            ></WemetaSwitch>
          </View>
        </View>
        <View
          className={`rounded-card ${
            listStyle === "list" ? "rounded-card-actived" : ""
          }`}
          onClick={() => {
            handleListStyleChange("list");
          }}
        >
          <View className="mb-8 text-14 font-medium leading-22">列表形式</View>
          <View className="mb-12 text-12 leading-20 text-gray-45">
            将知识点以简洁列表呈现，清晰快速地提供信息。
          </View>
        </View>
      </Popup>
    </>
  );
};

export default Index;