import { ControlParamItem } from "../sd";
import { IconButton } from "../button";
import styles from "./bg-removal-panel.module.scss";
import { useState } from "react";
import { message } from "antd";
import type { LocalData, FileProps } from "@/app/types/zuotang";
import { ApiPath } from "@/app/constant";
import { useAccessStore } from "@/app/store";
import Locale from "@/app/locales";
import LoadingIcon from "@/app/icons/three-dots.svg";
import WriteIcon from "@/app/icons/write.svg";
import { useChatStore } from "@/app/store";
import { getBgPrompt } from "@/app/utils/prompt";

// 错误消息映射函数
const getErrorMessage = (state: number): string => {
  const errorMap: { [key: number]: string } = {
    [-8]: "处理超时，最长处理时间30秒",
    [-7]: "无效图片文件（可能已损坏或格式错误）",
    [-5]: "图片大小超过15MB限制",
    [-3]: "服务器下载图片失败，请检查URL有效性",
    [-2]: "处理结果上传失败",
    [-1]: "任务处理失败",
  };
  return errorMap[state] || `未知错误（状态码：${state}）`;
};

// 图片URL转Blob方法
const urlToBlob = async (url: string): Promise<Blob> => {
  const response = await fetch(url);
  if (!response.ok) throw new Error(Locale.BgRemoval.error.imgLoadingErr);
  return await response.blob();
};

// 通用轮询函数
const useTaskPoller = () => {
  const pollTask = async (
    taskId: string,
    endpoint: string,
    onSuccess: (data: any) => void,
    onError: (message: string) => void,
  ) => {
    const pollInterval = 1000;
    const maxAttempts = 60;
    let attempts = 0;
    const intervalId = setInterval(async () => {
      try {
        attempts++;
        if (attempts > maxAttempts) {
          clearInterval(intervalId);
          onError(Locale.BgRemoval.error.timeoutErr);
          return;
        }
        const result = await fetch(`${ApiPath.ZuoTang}/${endpoint}/${taskId}`);
        if (!result.ok) {
          const errorData = await result.json();
          throw new Error(errorData.message || Locale.BgRemoval.error.statuErr);
        }
        const taskResult = await result.json();
        // 根据 state 字段处理状态
        switch (taskResult.data?.state) {
          case 1: // 任务成功
            clearInterval(intervalId);
            onSuccess(taskResult.data);
            break;
          case 0: // 队列中
          case 2: // 准备中
          case 3: // 等待中
          case 4: // 处理中
            // 保持轮询不做操作
            break;
          default: // 处理错误状态
            clearInterval(intervalId);
            if (taskResult.data?.state < 0) {
              // 所有负数状态均为错误
              onError(getErrorMessage(taskResult.data.state));
            } else {
              onError("未知任务状态");
            }
        }
      } catch (error) {
        clearInterval(intervalId);
        onError(
          error instanceof Error
            ? error.message
            : Locale.BgRemoval.error.reqErr,
        );
      }
    }, pollInterval);

    return () => clearInterval(intervalId);
  };

  return { pollTask };
};

// 日期处理工具
export const useDateUtils = () => {
  const getFormattedToday = (): string => {
    const today = new Date();
    return today.toISOString().split("T")[0].replace(/-/g, "");
  };

  const isToday = (dateStr: string): boolean => {
    return dateStr === getFormattedToday();
  };

  return { getFormattedToday, isToday };
};

// 本地存储管理
export const useLocalStorage = () => {
  const { getFormattedToday, isToday } = useDateUtils();
  const getLocalData = (accessCode: string): LocalData => {
    try {
      const data = localStorage.getItem(accessCode);
      if (!data) return defaultLocalData();

      const parsed = JSON.parse(data);
      if (!isToday(parsed.date)) return defaultLocalData();

      return {
        date: parsed.date || getFormattedToday(),
        maxDailyUses: parsed.maxDailyUses || "first",
        pptMaxUses: parsed.pptMsxUses || "first",
      };
    } catch (e) {
      return defaultLocalData();
    }
  };

  const updateLocalUsage = (
    accessCode: string,
    maxDailyUses?: number,
    pptMaxUses?: number,
  ) => {
    const existingData = getLocalData(accessCode);
    // 检查现有数据的日期是否是今天
    const isNewDay = !isToday(existingData.date);
    // 创建新的数据对象
    const newData: LocalData = {
      date: getFormattedToday(),
      maxDailyUses:
        maxDailyUses !== undefined
          ? maxDailyUses.toString()
          : isNewDay
          ? "first"
          : existingData.maxDailyUses,
      pptMaxUses:
        pptMaxUses !== undefined
          ? pptMaxUses.toString()
          : isNewDay
          ? "first"
          : existingData.pptMaxUses,
    };
    localStorage.setItem(accessCode, JSON.stringify(newData));
  };

  const defaultLocalData = (): LocalData => ({
    date: getFormattedToday(),
    maxDailyUses: "first",
    pptMaxUses: "first",
  });
  return { getLocalData, updateLocalUsage };
};

// 定义组件的 props 类型
interface PromptListProps {
  promptList: string[];
  setPromptList: React.Dispatch<React.SetStateAction<string[]>>;
  setPrompt: React.Dispatch<React.SetStateAction<string>>;
}
const PromptListComponent: React.FC<PromptListProps> = ({
  promptList,
  setPromptList,
  setPrompt,
}) => {
  // 删除处理函数
  const handleDelete = (index: number, e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止冒泡
    setPromptList((prev) => prev.filter((_, i) => i !== index));
  };

  // 响应式样式配置
  const containerStyle: React.CSSProperties = {
    maxWidth: "90%",
    margin: "0 auto",
    padding: "0.6rem",
  };

  const itemStyle: React.CSSProperties = {
    position: "relative",
    backgroundColor: "#f8f9fa",
    padding: "0.5rem",
    margin: "0.5rem 0",
    borderRadius: "12px",
    cursor: "pointer",
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
    transition: "all 0.3s ease",
  };

  const deleteButtonStyle: React.CSSProperties = {
    position: "absolute",
    top: "0.2rem",
    right: "0.5rem",
    width: "15px",
    height: "15px",
    borderRadius: "50%",
    backgroundColor: "#ff4444",
    color: "white",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    cursor: "pointer",
    transition: "all 0.2s ease",
    visibility: "hidden", // 默认隐藏
  };

  return (
    <div style={containerStyle}>
      {promptList.map((item, index) => (
        <div
          key={index}
          style={itemStyle}
          onMouseEnter={(e) => {
            const currentTarget = e.currentTarget as HTMLElement;
            currentTarget.style.transform = "translateY(-3px)";
            currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
            // 显示删除按钮
            const button = currentTarget.querySelector(".delete-btn");
            if (button) {
              (button as HTMLElement).style.visibility = "visible";
            }
          }}
          onMouseLeave={(e) => {
            const currentTarget = e.currentTarget as HTMLElement;
            currentTarget.style.transform = "translateY(0)";
            currentTarget.style.boxShadow = "0 2px 8px rgba(0,0,0,0.1)";
            // 隐藏删除按钮
            const button = currentTarget.querySelector(".delete-btn");
            if (button) {
              (button as HTMLElement).style.visibility = "hidden";
            }
          }}
          onClick={() => setPrompt(item)}
        >
          {/* 删除按钮 */}
          <div
            className="delete-btn"
            style={deleteButtonStyle}
            onClick={(e) => handleDelete(index, e)}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = "#cc0000";
              e.currentTarget.style.transform = "scale(1.1)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = "#ff4444";
              e.currentTarget.style.transform = "scale(1)";
            }}
          >
            ×
          </div>

          {/* 内容区域 */}
          <div
            style={{
              fontSize: "clamp(12px, 2vw, 14px)",
              color: "#343a40",
              lineHeight: 1.6,
              paddingRight: "2rem", // 为删除按钮留出空间
            }}
          >
            {item}
          </div>
        </div>
      ))}
    </div>
  );
};

export function BgPanel(props: FileProps) {
  const [prompt, setPrompt] = useState(""); //背景提示词
  const [promptList, setPromptList] = useState<string[]>([]); //背景提示词优化列表
  const [isGenerate, setIsGenerate] = useState(false);
  const [sceneTypeList, setSceneTypeList] = useState([]);
  const chatStore = useChatStore();
  const [loading, setLoading] = useState(false); //是否优化文案
  const {
    previewUrl,
    setPreviewUrl,
    fileData,
    setFileData,
    isLoading,
    setIsLoading,
  } = props;
  const accessStore = useAccessStore();
  const { pollTask } = useTaskPoller();
  const { updateLocalUsage, getLocalData } = useLocalStorage();

  const handleGenerateImg = async () => {
    if (!prompt.trim()) {
      return message.error("请先输入提示词");
    }
    setIsLoading(true);
    try {
      const res = await fetch(`${ApiPath.OpenAiImg}/generations`, {
        method: "POST",
        body: JSON.stringify(prompt),
      });
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || Locale.BgRemoval.error.reqErr);
      }
      const responseData = await res.json();
      // 获取新图片的Blob
      const newBlob = await urlToBlob(responseData.data.data[0].url);
      // 创建新的对象URL
      const newUrl = URL.createObjectURL(newBlob);
      // 同步更新所有相关状态
      setPreviewUrl(newUrl);
      setFileData(newBlob);
    } catch (error) {
      message.error(Locale.BgRemoval.error.reqErr);
    } finally {
      setIsLoading(false);
    }
  };

  const handleApiRequest = async (endpoint: string) => {
    if (!previewUrl) {
      message.error(Locale.BgRemoval.error.selectImg);
      throw new Error(`VALIDATION_ERROR: ${Locale.BgRemoval.error.selectImg}`);
    }
    if (!accessStore.accessCode) {
      message.error(Locale.BgRemoval.error.code);
      throw new Error(`VALIDATION_ERROR: ${Locale.BgRemoval.error.code}`);
    }
    if (endpoint === "visual/r-background" && !prompt.trim()) {
      message.error(Locale.BgRemoval.error.prompt);
      setIsLoading(false);
      throw new Error(`VALIDATION_ERROR: ${Locale.BgRemoval.error.prompt}`);
    }
    try {
      const formData = new FormData();
      const localData = getLocalData(accessStore.accessCode); // 获取本地数据
      formData.append("accessCode", accessStore.accessCode);
      formData.append("localData", JSON.stringify(localData));
      formData.append("image_file", fileData as Blob);
      if (endpoint === "visual/r-background") {
        formData.append("prompt", prompt);
      } //生成背景添加提示词
      const res = await fetch(`${ApiPath.ZuoTang}/${endpoint}`, {
        method: "POST",
        body: formData,
      });
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.message || Locale.BgRemoval.error.reqErr);
      }
      const responseData = await res.json();
      if (responseData.status >= 400) {
        if (responseData.status === 429) {
          updateLocalUsage(accessStore.accessCode, 0);
        }
        throw new Error(responseData.message);
      }
      return responseData;
    } finally {
    }
  };

  const handleProcessImage = async (endpoint: string) => {
    setIsLoading(true);
    try {
      const responseData = await handleApiRequest(endpoint);
      updateLocalUsage(accessStore.accessCode, responseData.maxDailyUses);

      pollTask(
        responseData.data.task_id,
        endpoint,
        async (data) => {
          try {
            // 获取新图片的Blob
            const newBlob = await urlToBlob(data.image || data.image_1);
            // 创建新的对象URL
            const newUrl = URL.createObjectURL(newBlob);
            // 同步更新所有相关状态
            setPreviewUrl(newUrl);
            setFileData(newBlob);
            message.success(Locale.BgRemoval.success);
          } catch (error) {
            message.error(Locale.BgRemoval.error.resultErr);
          } finally {
            setIsLoading(false);
          }
        },
        (errorMsg) => {
          message.error(errorMsg);
          setIsLoading(false);
        },
      );
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : "";
      if (!errorMessage.startsWith("VALIDATION_ERROR:")) {
        message.error(Locale.BgRemoval.error.reqErr);
      }
      setIsLoading(false);
    }
  };

  const handleDownload = () => {
    if (!previewUrl) return message.error(Locale.BgRemoval.error.downLoadErr);
    const link = document.createElement("a");
    link.href = previewUrl;
    link.download = `processed-${Date.now()}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const optimizePrompt = async () => {
    try {
      if (!prompt.trim()) {
        return message.error(Locale.BgRemoval.error.prompt);
      }
      const input = getBgPrompt(prompt);
      setLoading(true);
      const response = await chatStore.directLlmInvoke(input, "gpt-4o-mini");
      const items = response.split("'").filter((item) => item.trim() !== "");
      setPromptList(items);
    } catch (error) {
      message.error("优化失败，请重试");
    } finally {
      setLoading(false);
    }
  };
  return (
    <>
      <ControlParamItem title={Locale.BgRemoval.subTitle}>
        <div className={styles["ai-models"]}>
          <IconButton
            text={Locale.BgRemoval.generateImg}
            type="primary"
            shadow
            onClick={handleGenerateImg}
            disabled={isLoading}
          />
          <IconButton
            text={Locale.BgRemoval.bgRemoveBtn}
            type="primary"
            shadow
            onClick={() => handleProcessImage("visual/segmentation")}
            disabled={isLoading}
          />
          <IconButton
            text={Locale.BgRemoval.downloadImg}
            type="primary"
            shadow
            onClick={handleDownload}
            disabled={!previewUrl}
          />
          <IconButton
            text={Locale.BgRemoval.generateBg}
            type="primary"
            shadow
            onClick={() => handleProcessImage("visual/r-background")}
            disabled={isLoading}
          />
        </div>
      </ControlParamItem>
      <ControlParamItem title={Locale.BgRemoval.promptTitle} required={true}>
        <div className={styles["prompt"]}>
          <textarea
            rows={3}
            className={styles["tx"]}
            placeholder={Locale.BgRemoval.error.prompt}
            onChange={(e) => {
              setPrompt(e.target.value);
            }}
            value={prompt}
          ></textarea>
          <div
            className={styles["ai-prompt"]}
            onClick={(e) => {
              if (loading) {
                e.stopPropagation();
                return;
              }
              optimizePrompt();
            }}
          >
            <WriteIcon />
            AI优化文案
          </div>
        </div>
        {loading ? (
          <div className={styles["loading-content"]}>
            <LoadingIcon />
          </div>
        ) : (
          <PromptListComponent
            promptList={promptList}
            setPromptList={setPromptList}
            setPrompt={setPrompt}
          />
        )}
      </ControlParamItem>
    </>
  );
}