/**
 * HistoryTree - Collapsible tree view for message history
 * Shows arrow indicator and message count
 */

import { useState } from "react";
import { Typography } from "antd";
import { DownOutlined, RightOutlined } from "@ant-design/icons";
import { ParsedMessage } from "./prettyMessagesTypes";
import { SimpleMessageBlock } from "./SimpleMessageBlock";

const { Text } = Typography;

interface HistoryTreeProps {
  messages: ParsedMessage[];
}

export function HistoryTree({ messages }: HistoryTreeProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  if (messages.length === 0) {
    return null;
  }

  return (
    <div style={{ marginBottom: 8 }}>
      {/* Clickable Header with hover state */}
      <div
        onClick={() => setIsExpanded(!isExpanded)}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 6,
          cursor: "pointer",
          padding: "4px 0",
          borderRadius: 4,
          background: isHovered ? "#f5f5f5" : "transparent",
          transition: "background 0.15s ease",
          marginBottom: isExpanded ? 4 : 0,
        }}
      >
        {isExpanded ? (
          <DownOutlined style={{ fontSize: 10, color: "#8c8c8c" }} />
        ) : (
          <RightOutlined style={{ fontSize: 10, color: "#8c8c8c" }} />
        )}
        <Text type="secondary" style={{ fontSize: 10, letterSpacing: "0.5px", textTransform: "uppercase" }}>
          HISTORY ({messages.length} message{messages.length !== 1 ? "s" : ""})
        </Text>
      </div>

      {/* Expanded Tree Content with smooth animation */}
      <div
        style={{
          maxHeight: isExpanded ? "2000px" : "0px",
          overflow: "hidden",
          transition: "max-height 0.2s ease-out, opacity 0.2s ease-out",
          opacity: isExpanded ? 1 : 0,
        }}
      >
        <div
          style={{
            paddingLeft: 16,
            borderLeft: "1px solid #f0f0f0",
          }}
        >
          {messages.map((msg, index) => (
            <SimpleMessageBlock
              key={index}
              label={msg.role.toUpperCase()}
              content={msg.content}
              toolCalls={msg.toolCalls}
              isCompact={true}
            />
          ))}
        </div>
      </div>
    </div>
  );
}
