import { useState } from "react";
import { ControlParamItem } from "../sd";
import { SideBarTail } from "@/app/components/sidebar";
import { IconButton } from "../button";
import { getMindPrompt } from "@/app/utils/prompt";
import { useChatStore } from "@/app/store";
import { type MindElixirData } from "mind-elixir";
import { message } from "antd";

export interface MindPanelProps {
  setData: React.Dispatch<React.SetStateAction<MindElixirData>>;
  isLoading: boolean;
  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
}

export function MindPanel(props: MindPanelProps) {
  const { setData, isLoading, setIsLoading } = props;
  const [inputValue, setInputValue] = useState("");
  const [loading, setLoading] = useState(false);
  const chatStore = useChatStore();
  const submit = async () => {
    if (!inputValue.trim()) return message.error("请输入提示词！");
    setIsLoading(true);
    try {
      const prompt = getMindPrompt(inputValue, false);
      const response = await chatStore.directLlmInvoke(prompt, "gpt-4o-mini");
      console.log("原始响应:", response);
      let cleanedContent = response.startsWith("```json")
        ? response.substring(8)
        : response;
      if (cleanedContent.endsWith("```")) {
        cleanedContent = cleanedContent.substring(0, cleanedContent.length - 4);
      }
      const parsedData: MindElixirData = JSON.parse(response);
      console.log("解析后响应:", parsedData);
      // 增强校验逻辑
      if (
        !parsedData?.nodeData?.id ||
        !Array.isArray(parsedData.nodeData.children)
      ) {
        throw new Error("数据结构不完整");
      }
      setData(parsedData);
    } catch (error) {
      console.log(error);
      message.error("请求失败，请重试");
    } finally {
      setIsLoading(false); // 确保关闭加载状态‌:ml-citation{ref="2,5" data="citationList"}
    }
  };
  return (
    <>
      <div>
        <ControlParamItem title="提示词" required={true}>
          <textarea
            rows={3}
            style={{ maxWidth: "100%", width: "100%", padding: "10px" }}
            placeholder="请输入"
            value={inputValue}
            onChange={(e) => {
              setInputValue(e.target.value);
            }}
          ></textarea>
        </ControlParamItem>
        <SideBarTail
          secondaryAction={
            <IconButton
              text="提交生成"
              type="primary"
              shadow
              onClick={submit}
              disabled={isLoading}
            ></IconButton>
          }
        />
      </div>
    </>
  );
}