import type { Goal } from "../../types/goal";
import type { Edge, Message } from "../../types/message";
import styles from "./DetailPanel.module.css";

interface DetailPanelProps {
  node: Goal | null;
  edge: Edge | null;
  messages?: Message[];
  onClose: () => void;
}

export const DetailPanel = ({ node, edge, messages = [], onClose }: DetailPanelProps) => {
  const title = node ? "节点详情" : edge ? "连线详情" : "详情";

  const renderMessageContent = (content: Message["content"]) => {
    if (!content) return "";
    if (typeof content === "string") return content;

    // 如果有 text，优先显示 text
    if (content.text) return content.text;

    // 如果有 tool_calls，展示 tool_calls 信息
    if (content.tool_calls && content.tool_calls.length > 0) {
      return (
        <div className={styles.toolCalls}>
          {content.tool_calls.map((call) => (
            <div
              key={call.id}
              className={styles.toolCall}
            >
              <div className={styles.toolName}>工具调用: {call.name}</div>
              <pre className={styles.toolArgs}>{JSON.stringify(call.arguments, null, 2)}</pre>
            </div>
          ))}
        </div>
      );
    }

    return JSON.stringify(content);
  };

  return (
    <aside className={styles.panel}>
      <div className={styles.header}>
        <div className={styles.title}>{title}</div>
        <button
          className={styles.close}
          onClick={onClose}
          aria-label="关闭"
        >
          ×
        </button>
      </div>
      <div className={styles.content}>
        {node && (
          <>
            <div className={styles.sectionTitle}>节点</div>
            <div className={styles.section}>
              <div className={styles.label}>ID</div>
              <div className={styles.value}>{node.id}</div>
            </div>
            <div className={styles.section}>
              <div className={styles.label}>目标描述</div>
              <div className={styles.value}>{node.description}</div>
            </div>
            {node.reason && (
              <div className={styles.section}>
                <div className={styles.label}>创建理由</div>
                <div className={styles.value}>{node.reason}</div>
              </div>
            )}
            {node.summary && (
              <div className={styles.section}>
                <div className={styles.label}>总结</div>
                <div className={styles.value}>{node.summary}</div>
              </div>
            )}
            <div className={styles.section}>
              <div className={styles.label}>状态</div>
              <div className={styles.value}>{node.status}</div>
            </div>
          </>
        )}
        {messages && messages.length > 0 && (
          <div className={styles.messages}>
            <div className={styles.sectionTitle}>边</div>
            <div className={styles.messageList}>
              {messages.map((msg, idx) => (
                <div
                  key={msg.id || idx}
                  className={styles.messageItem}
                >
                  <div className={styles.section}>
                    <div className={styles.label}>描述</div>
                    <div className={styles.value}>{msg.description || "-"}</div>
                  </div>
                  <div className={styles.section}>
                    <div className={styles.label}>内容</div>
                    <div className={styles.value}>{renderMessageContent(msg.content)}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </aside>
  );
};
