import {
  FormEvent,
  useMemo,
  useState,
} from "react";
import { useStream } from "@langchain/langgraph-sdk/react";

type Message = {
  id?: string;
  type?: string;
  role?: string;
  content?: unknown;
  tool_calls?: Array<{
    id?: string;
    name: string;
    args: unknown;
  }>;
};

type Todo = {
  id?: string;
  content?: string;
  task?: string;
  status?: "pending" | "in_progress" | "completed" | string;
};

type AgentState = {
  messages: Message[];
  todos?: Todo[];
};

type ProgressEvent = {
  type: "subagent_progress";
  agent: string;
  stage: string;
  message: string;
  completed: number;
  total: number;
};

type InterruptValue = {
  action_requests?: Array<{
    name: string;
    args: Record<string, unknown>;
    description?: string;
  }>;
  review_configs?: Array<{
    action_name: string;
    allowed_decisions: string[];
  }>;
};

const API_URL =
  import.meta.env.VITE_LANGGRAPH_API_URL ?? "http://localhost:2024";
const ASSISTANT_ID = "research_assistant";

function textContent(content: unknown): string {
  if (typeof content === "string") return content;
  if (!Array.isArray(content)) return JSON.stringify(content ?? "");

  return content
    .map((block) => {
      if (typeof block === "string") return block;
      if (
        block &&
        typeof block === "object" &&
        "text" in block &&
        typeof block.text === "string"
      ) {
        return block.text;
      }
      return "";
    })
    .join("");
}

function messageRole(message: Message): string {
  return message.role ?? message.type ?? "unknown";
}

function MessageCard({ message }: { message: Message }) {
  const calls = message.tool_calls ?? [];

  return (
    <article className={`message message--${messageRole(message)}`}>
      <div className="message__role">{messageRole(message)}</div>
      <div className="message__content">{textContent(message.content)}</div>

      {calls.map((call, index) => (
        <details className="tool-call" key={call.id ?? `${call.name}-${index}`}>
          <summary>工具调用：{call.name}</summary>
          <pre>{JSON.stringify(call.args, null, 2)}</pre>
        </details>
      ))}
    </article>
  );
}

function TodoPanel({ todos }: { todos: Todo[] }) {
  if (todos.length === 0) return null;

  return (
    <aside className="panel">
      <h2>任务计划</h2>
      <ol>
        {todos.map((todo, index) => (
          <li key={todo.id ?? index} data-status={todo.status ?? "pending"}>
            <span>{todo.content ?? todo.task ?? `任务 ${index + 1}`}</span>
            <small>{todo.status ?? "pending"}</small>
          </li>
        ))}
      </ol>
    </aside>
  );
}

function SubagentPanel({
  events,
}: {
  events: Record<string, ProgressEvent>;
}) {
  const rows = Object.values(events);
  if (rows.length === 0) return null;

  return (
    <aside className="panel">
      <h2>子代理进度</h2>
      {rows.map((event) => {
        const percent =
          event.total > 0
            ? Math.round((event.completed / event.total) * 100)
            : 0;

        return (
          <div className="agent-progress" key={event.agent}>
            <div>
              <strong>{event.agent}</strong>
              <span>{event.message}</span>
            </div>
            <progress value={event.completed} max={event.total || 1} />
            <small>
              {event.stage} · {percent}%
            </small>
          </div>
        );
      })}
    </aside>
  );
}

function InterruptPanel({
  value,
  onDecision,
}: {
  value: InterruptValue;
  onDecision: (
    decision: "approve" | "reject" | "edit",
    editedArgs?: Record<string, unknown>,
  ) => void;
}) {
  const request = value.action_requests?.[0];
  const [editedText, setEditedText] = useState(
    JSON.stringify(request?.args ?? {}, null, 2),
  );

  if (!request) return null;

  const submitEdit = () => {
    try {
      onDecision("edit", JSON.parse(editedText));
    } catch {
      window.alert("修改后的参数必须是合法 JSON");
    }
  };

  return (
    <section className="interrupt">
      <h2>需要人工确认</h2>
      <p>{request.description ?? `Agent 请求执行 ${request.name}`}</p>
      <textarea
        aria-label="工具参数"
        rows={8}
        value={editedText}
        onChange={(event) => setEditedText(event.target.value)}
      />
      <div className="interrupt__actions">
        <button onClick={() => onDecision("approve")}>批准</button>
        <button onClick={submitEdit}>修改后执行</button>
        <button onClick={() => onDecision("reject")}>拒绝</button>
      </div>
    </section>
  );
}

export default function AgentChat() {
  const [input, setInput] = useState("");
  const [threadId, setThreadId] = useState<string | undefined>();
  const [progress, setProgress] = useState<
    Record<string, ProgressEvent>
  >({});

  const stream = useStream<AgentState>({
    apiUrl: API_URL,
    assistantId: ASSISTANT_ID,
    threadId,
    onThreadId: setThreadId,
    messagesKey: "messages",
    streamSubgraphs: true,
    onCustomEvent: (event: unknown) => {
      if (
        event &&
        typeof event === "object" &&
        "type" in event &&
        event.type === "subagent_progress"
      ) {
        const item = event as ProgressEvent;
        setProgress((current) => ({
          ...current,
          [item.agent]: item,
        }));
      }
    },
  });

  const messages = stream.messages ?? [];
  const todos = stream.values.todos ?? [];

  // SDK 版本不同，中断可能是单个对象或数组；在一处兼容即可。
  const currentInterrupt = useMemo(() => {
    const raw = stream.interrupt;
    if (!raw) return undefined;
    const first = Array.isArray(raw) ? raw[0] : raw;
    if (
      first &&
      typeof first === "object" &&
      "value" in first
    ) {
      return first.value as InterruptValue;
    }
    return first as InterruptValue;
  }, [stream.interrupt]);

  const send = (event: FormEvent) => {
    event.preventDefault();
    const content = input.trim();
    if (!content || stream.isLoading) return;

    setInput("");
    setProgress({});
    stream.submit({
      messages: [{ role: "user", content }],
    });
  };

  const resume = (
    type: "approve" | "reject" | "edit",
    editedArgs?: Record<string, unknown>,
  ) => {
    const decision =
      type === "approve"
        ? { type: "approve" }
        : type === "reject"
          ? {
              type: "reject",
              message: "用户拒绝执行此操作，请调整方案。",
            }
          : {
              type: "edit",
              edited_action: {
                name:
                  currentInterrupt?.action_requests?.[0]?.name ??
                  "unknown",
                args: editedArgs ?? {},
              },
            };

    stream.submit(
      {},
      {
        command: {
          resume: { decisions: [decision] },
        },
      },
    );
  };

  return (
    <main className="agent-layout">
      <section className="chat">
        <header>
          <h1>研究助手</h1>
          <small>thread: {threadId ?? "尚未创建"}</small>
        </header>

        <div className="messages" aria-live="polite">
          {messages.map((message, index) => (
            <MessageCard
              key={message.id ?? index}
              message={message as Message}
            />
          ))}
        </div>

        {currentInterrupt && (
          <InterruptPanel value={currentInterrupt} onDecision={resume} />
        )}

        {stream.error && (
          <div role="alert">
            请求失败：{String(stream.error)}
          </div>
        )}

        <form onSubmit={send}>
          <textarea
            aria-label="消息"
            value={input}
            onChange={(event) => setInput(event.target.value)}
            placeholder="输入一个研究任务……"
          />
          <button disabled={!input.trim() || stream.isLoading}>
            {stream.isLoading ? "运行中" : "发送"}
          </button>
          {stream.isLoading && (
            <button type="button" onClick={() => stream.stop()}>
              停止
            </button>
          )}
        </form>
      </section>

      <section className="sidebars">
        <TodoPanel todos={todos} />
        <SubagentPanel events={progress} />
      </section>
    </main>
  );
}