import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { WorldGeo } from "./components/world-geo";
import Web3BoxPng from "@/assets/image/home/web3-box.png";
import Web3Box2Png from "@/assets/image/home/web3-box2.png";
import web3BoxGif from "@/assets/gif/web3-box-bg.gif";
import VectorSlideSvg from "@/assets/svg/home/vector-solide.svg?react";

import { Apps, CONST_TOOLTIP_TYPE } from "@/pages/anti-forensics-forwarding";
import { cn } from "@/lib/utils";
import { commands } from "@/bindings";

import type { AppDispatch, RootState } from "@/store";
import "./index.scss";
import {
  getPassAuthentication,
  getTrafficObfuscation,
  getNestedEncryption,
  getDynamicRouteGeneration,
  getApplicationDiversion,
} from "@/api/flying-line";
import { errorToast } from "@/components/GlobalToast";
import { toast } from "@/components/ui/use-toast";
import { disableProxy, enableProxy } from "@/store/serviceSlice";

export const DIALOGTYPE = {
  ADDNode: {
    title: "添加节点",
    desc: "",
    successText: "添加",
  },
  AddNetwork: {
    title: "构建网络",
    desc: "",
    successText: "构建",
  },
};

export const NODEDIALOGTYPE = {
  ClearFailNode: {
    title: "清除掉线节点",
    desc: "",
    successText: "清除",
  },
  ClearWargingNode: {
    title: "恶意节点",
    desc: "",
    successText: "清除",
  },
};
const NewHome = () => {
  const dispatch = useDispatch<AppDispatch>();
  const { web3List, web3List2 } = useSelector(
    (state: RootState) => state.web3Reducer
  );
  const { isProxyEnabled, isCoreRunning } = useSelector(
    (state: RootState) => state.serviceReducer
  );
  const [isProxyLoading, setIsProxyLoading] = useState(false);

  const [selectedApp, setSelectedApp] = useState<any>(null);

  const [tooltipClosed, setTooltipClosed] = useState(true);

  const [tooltipType, setTooltipType] = useState(
    CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type
  );

  // 模拟日志数据
  const [nestedEncryptionLogs, setNestedEncryptionLogs] = useState<string[]>(
    []
  );

  const [trafficObfuscationLogs, setTrafficObfuscationLogs] = useState<
    string[]
  >([]);

  const newWeb3List = useMemo(() => {
    // 展示最新的6个节点
    return web3List.slice(-6);
  }, [web3List]);

  const handleClickApp = (item: any) => {
    setSelectedApp(item);
  };

  const [dataInfo, setDataInfo] = useState<any>({
    passAuthentication: {
      type: "PASS_AUTHENTICATION",
      name: "通信认证",
      startPoint: "GL",
      endPoint: "CA",
      authenticationPoint: [
        [-103.346771, 54.130366],
        [-120.346771, 52.130366],
        [-108.346771, 48.130366],
        [-98.346771, 46.130366],
        [-106.346771, 48.450366],
        [-101.346771, 53.130366],
        [-123.346771, 58.130366],
        [-111.346771, 65.443366],
        [-108.346771, 54.130366],
        [-116.346771, 59.130366],
        [-97.346771, 61.130366],
        [-95.346771, 63.130366],
        [-113.346771, 58.840366],
        [-99.346771, 59.130366],
        [-102.346771, 68.130366],
      ],
      data: [
        {
          country_code: "gl",
          ingress_country_code: "dz",
        },
        {
          country_code: "br",
          ingress_country_code: "dz",
        },
        {
          country_code: "dz",
          ingress_country_code: "ru",
        },
        {
          country_code: "dz",
          ingress_country_code: "cn",
        },
        {
          country_code: "ru",
          ingress_country_code: "za",
        },
      ],
      isLine: true,
    },
    trafficObfuscation: [],
    nestedEncryption: [],
    dynamicRouteGeneration: [],
    applicationDiversion: [],
  });

  const appDiversion = useMemo(() => {
    return Apps.map((item) => {
      const findApp = dataInfo.applicationDiversion.find(
        (appItem: any) => item.name === appItem.name
      );
      return {
        ...item,
        ...findApp,
      };
    });
  }, [dataInfo.applicationDiversion]);

  // 处理代理开关
  const handleProxyToggle = useCallback(
    async (isProxyEnabled: boolean, isCoreRunning: boolean) => {
      // console.log(isProxyLoading, "isProxyLoadingisProxyLoading");
      if (isProxyLoading) return;
      try {
        // 如果核心未运行，先启动核心
        if (!isCoreRunning) {
          await commands.startCore();
        }

        setIsProxyLoading(true);
        // 切换代理状态
        await dispatch(isProxyEnabled ? disableProxy() : enableProxy()).unwrap();
        setIsProxyLoading(false);
        console.log(`Proxy ${isProxyEnabled ? "关闭成功" : "开启成功"}`);
      } catch (error) {
        const errorMessage = isProxyEnabled
          ? "关闭代理失败!"
          : "开启代理失败，请检查节点配置、或重新尝试开启";
        errorToast(errorMessage, toast);
        console.error("Proxy toggle failed:", error);
      } finally {
        setIsProxyLoading(false);
      }
    },
    [dispatch, isProxyLoading, isCoreRunning, isProxyEnabled]
  );
  const initData = async () => {
    const passAuthentication = await getPassAuthentication();
    const trafficObfuscation = await getTrafficObfuscation();
    const nestedEncryption = await getNestedEncryption();
    const applicationDiversion = await getApplicationDiversion();
    const dynamicRouteGeneration = await getDynamicRouteGeneration();
    setNestedEncryptionLogs(nestedEncryption.logs);
    setTrafficObfuscationLogs(trafficObfuscation.logs);
    setDataInfo({
      passAuthentication: passAuthentication.data,
      trafficObfuscation: [trafficObfuscation.data],
      nestedEncryption: [nestedEncryption.data],
      applicationDiversion: applicationDiversion.data,
      dynamicRouteGeneration: dynamicRouteGeneration.data,
    });
  };
  useEffect(() => {
    initData();
  }, []);

  // useEffect(() => {
  //   console.log(dataInfo, "awaidataInfodataInfotawait");
  // }, [dataInfo]);

  return (
    <div className="decentralized w-full h-full flex flex-col  relative">
      <div className="box"></div>
      <div className="w-full flex items-center justify-center relative">
        {/* <img
                    className="w-[1693px] h-[271px] absolute top-[160px] left-[50%] translate-x-[-50%] z-10"
                    src={linePng}
                    alt=""
                /> */}
        {/* <div className="w-[90%] absolute top-0 left-0"></div> */}
        <div className="w-[1693px] h-full flex items-center justify-center ">
          <div className="w-[795px] flex items-center justify-end gap-10 z-[99]">
            <div className="carousel-container !justify-end ">
              {newWeb3List.map((item, index) => {
                // 随机0-10的整数
                const randomDelay = Math.floor(Math.random() * 35) * 1;
                return (
                  <div
                    className="w-[105px] relative carousel-item"
                    key={`${item.id}-${index}`}
                    style={{
                      viewTransitionName: `web3-item-1-${index}`,
                    }}
                  >
                    <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
                      <img
                        className={cn(
                          "!max-w-[186px] h-[160px] relative opacity-50 mix-blend-soft-light z-10"
                        )}
                        style={{
                          left: `${-30 - randomDelay}px`,
                          top: `${-30 - randomDelay}px`,
                        }}
                        src={web3BoxGif}
                      />
                    </div>
                    <img src={Web3Box2Png} className="w-full h-full" />
                    {/* <div className="absolute bottom-[-170px] left-[55px] h-[160px] w-[2px] bg-gradient-to-bl  to-[#4820C9]/0 from-[#7D82FF] web3-line"></div> */}
                    <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5 z-20">
                      {/* <div className="justify-start text-pink-600 text-2xl font-normal font-['Oswald'] absolute top-[-34px] left-[50%] translate-x-[-50%]">
                                                {item.transactions}
                                            </div> */}
                      {/* <div className="!text-xs">{item?.balanceToFixed} SOL</div> */}
                      <div className="!text-xs my-[6px]">#{item.height}</div>
                      <div className="!text-xs opacity-60 mb-[6px]">
                        {item.timerstamp}
                      </div>
                      <div className="!text-xs opacity-60">
                        {item.txs.length}次记录
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="w-fit mt-6 mx-[20px] flex-shrink-0">
            <VectorSlideSvg />
          </div>
          <div className="w-[795px] h-full flex items-center justify-start gap-10 ">
            <div className="carousel-container justify-start">
              {web3List2.map((item, index) => {
                const randomDelay = Math.floor(Math.random() * 35) * 1;
                return (
                  <div
                    key={`${item.id}-${index}`}
                    className="w-[105px] relative carousel-item"
                    style={{
                      viewTransitionName: `web3-item-2-${index}`,
                    }}
                  >
                    <div className="w-[calc(100%-10px)] h-[calc(100%-10px)] absolute top-[6px] left-[8px] overflow-hidden">
                      <img
                        className="!max-w-[186px] h-[160px] relative left-[-30px] top-[-30px]  opacity-50 mix-blend-soft-light z-10"
                        src={web3BoxGif}
                      />
                    </div>
                    <img
                      src={Web3BoxPng}
                      style={{
                        left: `${-30 - randomDelay}px`,
                        top: `${-30 - randomDelay}px`,
                      }}
                      className="w-full h-full"
                    />
                    <div className="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center text-white pl-1.5">
                      <div className="!text-xs my-[6px]">#{item.height}</div>
                      <div className="!text-xs opacity-60 mb-[6px]">
                        {item.timerstamp}
                      </div>
                      <div className="!text-xs opacity-60">
                        {item.numberTransactions}次记录
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
      <div className="mt-2 w-full h-full flex-1">
        <WorldGeo
          dataInfo={dataInfo}
          nestedEncryptionLogs={nestedEncryptionLogs}
          trafficObfuscationLogs={trafficObfuscationLogs}
          selectedApp={selectedApp}
          tooltipType={tooltipType}
          tooltipClosed={tooltipClosed}
          setTooltipClosed={setTooltipClosed}
        />
      </div>
      <div className="absolute bottom-[10px] left-[50%] translate-x-[-50%] w-[calc(100%-51px)] p-6  inline-flex justify-start items-center gap-10">
        <div
          className="flex items-center justify-center w-[193px] h-[80px] cursor-pointer bg-[#1448F5] rounded-[40px] text-white text-lg font-medium"
          onClick={() => {
            handleProxyToggle(isProxyEnabled, isCoreRunning);
          }}
        >
          {isProxyEnabled ? "关闭匿名服务" : "开启匿名服务"}
        </div>
        {/* <div
                    className="bt1 cursor-pointer"
                    onClick={() => {
                        setTooltipType(
                            CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type
                        );
                        setTooltipClosed(true);
                    }}
                >
                    嵌套加密
                </div>
                <div
                    className="bt1 cursor-pointer"
                    onClick={() => {
                        setTooltipType(
                            CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type
                        );
                        setTooltipClosed(true);
                    }}
                >
                    流量混淆
                </div> */}
        {appDiversion.map((item) => {
          return (
            <div
              key={item.name}
              className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
              onClick={() => handleClickApp(item)}
            >
              {selectedApp?.name === item?.name ? (
                <item.activeIcon />
              ) : (
                <item.icon />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default NewHome;