import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { View } from "@tarojs/components";
import { CustomTabBar, Icon, IconNames } from "@/components";
import workbench from "@/constant/workbench";
import Taro, { useShareAppMessage } from "@tarojs/taro";
import { buildUrl } from "@/utils";
import { useEffect, useState } from "react";
import { business } from "@/services";

export default hocAuth(function Page(props: CommonComponent) {
  const { userRoleVO } = props;
  const { slug } = userRoleVO;
  const [reviewCards, setReviewCards] = useState(
    workbench.reviewCardMap[slug] || [],
  );

  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: workbench.roleSlugMap[slug] + "工作台",
    });

    setReviewCards(workbench.reviewCardMap[slug] || []);
    // 获取草稿数量
    if (
      (slug === "origin-entry" || slug === "market-buyer") &&
      reviewCards.some((card) => card.id === "draftPurchase")
    ) {
      business.purchaseOrder
        .countPurchaseOrderByState({
          purchaseOrderCountQry: {
            state: "DRAFT",
          },
        })
        .then((res) => {
          if (res.data.success) {
            const count = res.data.data || 0;
            setReviewCards((prev) =>
              prev.map((card) =>
                card.id === "draftPurchase" ? { ...card, count } : card,
              ),
            );
          }
        });
    }
  }, [userRoleVO.roleId]);

  useShareAppMessage((payload) => {
    console.log("useShareAppMessage1", payload);
    return {
      title: "新发雷盛西瓜系统",
      path: buildUrl("/pages/main/index/index"),
      imageUrl: "https://img.qilincloud168.com/assets/images/logo.png",
    };
  });

  return (
    <>
      <View className="flex flex-1 flex-col gap-2.5 p-2.5">
        {/* 新建采购单按钮 */}
        {slug === "origin-entry" && (
          <View>
            <View
              className="bg-primary flex w-full flex-col items-center justify-center space-y-2 rounded-xl py-2.5 text-white"
              onClick={() => {
                Taro.navigateTo({
                  url: buildUrl("/pages/purchase/enter/create"),
                });
              }}
            >
              <View
                className={
                  "flex size-6 items-center justify-center rounded-full bg-white"
                }
              >
                <Icon name="plus" size={18} />
              </View>
              <View className="text-base font-bold">新建采购单</View>
            </View>
          </View>
        )}
        {slug === "market-buyer" && (
          <View>
            <View
              className="bg-primary flex w-full flex-col items-center justify-center space-y-2 rounded-xl py-2.5 text-white"
              onClick={() => {
                Taro.navigateTo({
                  url: buildUrl("/pages/transfer/enter/create"),
                });
              }}
            >
              <View
                className={
                  "flex size-6 items-center justify-center rounded-full bg-white"
                }
              >
                <Icon name="plus" size={18} />
              </View>
              <View className="text-base font-bold">新建调货单</View>
            </View>
          </View>
        )}

        {/* 快捷功能入口 */}
        {workbench.quickActionMap?.[slug]?.length > 0 && (
          <View>
            <View className="grid grid-cols-4 gap-3">
              {/* 循环渲染快捷功能 */}
              {workbench.quickActionMap[slug].map((action) => (
                <View
                  key={action.id}
                  className="rounded-xl bg-white p-3 text-center shadow-sm"
                  onClick={() => {
                    Taro.navigateTo({
                      url: buildUrl(action.path!),
                    });
                  }}
                >
                  <View
                    className={`icon-container mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-lg ${action.bgColorClass}`}
                  >
                    <Icon
                      name={action.icon as IconNames}
                      color={action.iconColor}
                    ></Icon>
                  </View>
                  <View className={`text-xs text-gray-700`}>
                    {action.title}
                  </View>
                </View>
              ))}
            </View>
          </View>
        )}
      </View>
      <CustomTabBar userRoleVO={userRoleVO} />
    </>
  );
});