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";
import Locale from "@/app/locales";

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(Locale.BgRemoval.error.prompt);
    setIsLoading(true);
    try {
      const prompt = getMindPrompt(inputValue, false);
      console.log("请求------------");
      const response = await chatStore.directLlmInvoke(prompt, "gpt-4o-mini");
      console.log(response);
      const cleanedContent = response.replace(/^```json|```$/g, "");
      console.log(cleanedContent);
      const parsedData: MindElixirData = JSON.parse(cleanedContent);
      console.log("-----" + parsedData);
      setData(parsedData);
    } catch (error) {
      console.log(error);
      message.error(Locale.BgRemoval.error.reqErr);
    } 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>
    </>
  );
}