import styles from "./powerpoint.module.scss";
import chatStyles from "@/app/components/chat.module.scss";
import clsx from "clsx";

import { IconButton } from "../button";
import Locale from "@/app/locales";
import { useNavigate, useLocation } from "react-router-dom";
import { useMobileScreen } from "@/app/utils";
import { Path } from "@/app/constant";
import { useRef, useEffect, useMemo } from "react";
import { CreatorType, DocmeeUI } from "@docmee/sdk-ui";
import { getClientConfig } from "@/app/config/client";
import { useAppConfig, useAccessStore } from "@/app/store";
import type { generateError, generateOutline } from "@/app/types/docmee";
import type { LocalData } from "@/app/types/zuotang";
import { useLocalStorage } from "../bgRemoval";
import axios from "axios";

import ReturnIcon from "@/app/icons/return.svg";
import MinIcon from "@/app/icons/min.svg";
import MaxIcon from "@/app/icons/max.svg";
import { message } from "antd";

export function PowerPoint() {
  const accessStore = useAccessStore();
  const containerRef = useRef<HTMLDivElement>(null);
  const isPowerpoint = location.pathname === Path.Powerpoint;
  const isMobileScreen = useMobileScreen();
  const navigate = useNavigate();
  const clientConfig = useMemo(() => getClientConfig(), []);
  const showMaxIcon = !isMobileScreen && !clientConfig?.isApp;
  const config = useAppConfig();
  const scrollRef = useRef<HTMLDivElement>(null);
  const { updateLocalUsage, getLocalData } = useLocalStorage();
  const query = useLocation(); //获取路由参数
  const { msg, pptMessage } = query.state || {}; //获取路由参数

  const localData: LocalData = getLocalData(accessStore.accessCode); //获取限制次数
  const localDataRef = useRef(localData);
  const getToken = async () => {
    if (!accessStore.accessCode) {
      return navigate(Path.Auth);
    }
    const res = await fetch("/api/ppt/createApiToken", {
      method: "POST",
      body: JSON.stringify({
        accessCode: accessStore.accessCode,
        max_use: localData.pptMaxUses,
      }),
    });
    const data = await res.json();
    if (data.status == 200) {
      return data.data.data.token;
    } else {
      message.error(data.error || "获取 token 失败");
    }
    return "";
  };
  useEffect(() => {
    const initializeDocmee = async () => {
      let token = localStorage.getItem("token");
      // 如果本地没有token，则获取新token
      if (!token) {
        token = await getToken();
        if (!token) {
          message.error("无效token请检查登录密码！");
          return navigate(Path.Auth);
        }
        localStorage.setItem("token", token);
      }

      if (!containerRef.current) {
        throw new Error("Container element not found");
      }

      const docmee = new DocmeeUI({
        container: containerRef.current,
        page: "creator-v2",
        token: token,
        mode: config.theme as "dark" | "light",
        lang: "zh",
        isMobile: isMobileScreen,
        creatorData: {
          type: CreatorType.AI_GEN,
          subject: "Ai行业未来10年的发展预测",
        },
      });

      docmee.on("beforeGenerate", (msg: generateOutline) => {
        //生成大纲事件
        if (localDataRef.current.pptMaxUses == "0") {
          message.error("你的免费次数已用完");
          return false;
        }
        axios.post("https://docmee.cn/api/ppt/v2/generateContent", msg, {
          headers: { token: token },
        });
      });

      docmee.on("mounted", (str: string) => {
        if (msg) {
          if (localDataRef.current.pptMaxUses == "0") {
            message.error("你的免费次数已用完");
            return false;
          }
          docmee.changeCreatorData({ text: pptMessage }, true);
        }
      });

      docmee.on("charge", (msg: string) => {
        //PPT生成后扣费
        // 解析 pptMaxUses 为数字
        let max_use = parseInt(localData.pptMaxUses, 10);
        // 校验解析结果是否为有效数字
        if (isNaN(max_use)) {
          max_use = 0; // 如果解析失败，设置默认值为 0
        }
        max_use = max_use - 1;
        if (max_use < 0) {
          max_use = 0;
        }
        updateLocalUsage(accessStore.accessCode, undefined, max_use);
      });

      docmee.on("error", async (msg: generateError) => {
        //请求错误事件
        if (msg.data.code == 98) {
          // message.error('token失效，请重试')
          const token = await getToken();
          localStorage.setItem("token", token);
          docmee.updateToken(token);
          if (msg) {
            if (localDataRef.current.pptMaxUses == "0") {
              message.error("你的免费次数已用完");
              return false;
            }
            docmee.changeCreatorData({ text: pptMessage }, true);
            return;
          }
        }
        message.error(
          msg.data.code == 403 ? "请检查登录密码或网络" : msg.data.message,
        );
      });
    };
    initializeDocmee();
  }, [
    navigate,
    isMobileScreen,
    pptMessage,
    config.theme,
    accessStore.accessCode,
  ]);

  useEffect(() => {
    localDataRef.current = localData;
  }, [localData]);

  return (
    <>
      <div style={{ width: "100%", height: "100%" }}>
        <div className={chatStyles.chat} key={"1"}>
          <div className="window-header" data-tauri-drag-region>
            <div
              className={clsx(
                "window-header-title",
                chatStyles["chat-body-title"],
              )}
            >
              <div className={`window-header-main-title`}>PPT制作</div>
            </div>
            <div className={chatStyles["chat-message-actions"]}>
              <div className={chatStyles["chat-input-actions"]}></div>
            </div>
            <div className="window-actions">
              <IconButton
                aria="返回首页"
                icon={<ReturnIcon />}
                bordered
                title={Locale.Chat.Actions.ChatList}
                onClick={() => navigate(Path.Chat)}
              />
              {showMaxIcon && (
                <div className="window-action-button">
                  <IconButton
                    aria={Locale.Chat.Actions.FullScreen}
                    icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
                    bordered
                    onClick={() => {
                      config.update(
                        (config) => (config.tightBorder = !config.tightBorder),
                      );
                    }}
                  />
                </div>
              )}
            </div>
          </div>
          <div className={chatStyles["chat-body"]} ref={scrollRef}>
            <div ref={containerRef} className={styles["container"]}></div>
          </div>
        </div>
      </div>
    </>
  );
}