/**
 * CollapsibleMessage - Collapsible message with arrow and char count
 * Used for system messages
 */

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

const { Text } = Typography;

interface CollapsibleMessageProps {
  label: string;
  content?: string;
  defaultExpanded?: boolean;
}

export function CollapsibleMessage({ label, content, defaultExpanded = false }: CollapsibleMessageProps) {
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
  const [isHovered, setIsHovered] = useState(false);
  const charCount = content?.length || 0;

  if (!content || charCount === 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" }}>
          {label}
        </Text>
        <Text type="secondary" style={{ fontSize: 10 }}>
          ({charCount.toLocaleString()} chars)
        </Text>
      </div>

      {/* 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,
            fontSize: 13,
            lineHeight: 1.7,
            color: "#262626",
            borderLeft: "1px solid #f0f0f0",
            whiteSpace: "pre-wrap",
            wordBreak: "break-word",
          }}
        >
          {content}
        </div>
      </div>
    </div>
  );
}
