import React, { useEffect, useRef, useState } from "react";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

export type HierarchyKind =
  | "server"
  | "tool"
  | "custom"
  | "customCreate"
  | "default";

export interface HierarchyItem {
  label: string;
  kind?: HierarchyKind;
}

export interface HierarchyPaletteEntry {
  bg: string; // Tailwind bg-*
  text: string; // Tailwind text-*
  icon?: string; // Tailwind text-* to color the icon
}

export type HierarchyPalette = Record<HierarchyKind, HierarchyPaletteEntry>;

interface TruncatableTextProps {
  children: string;
  className: string;
}

const TruncatableText: React.FC<TruncatableTextProps> = ({
  children,
  className,
}) => {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [isTruncated, setIsTruncated] = useState(false);

  useEffect(() => {
    const checkTruncation = () => {
      if (spanRef.current) {
        const { scrollWidth, clientWidth } = spanRef.current;
        setIsTruncated(scrollWidth > clientWidth);
      }
    };

    // Check immediately and on window resize
    checkTruncation();
    window.addEventListener("resize", checkTruncation);
    return () => window.removeEventListener("resize", checkTruncation);
  }, [children]);

  const spanElement = (
    <span ref={spanRef} className={className}>
      {children}
    </span>
  );

  if (isTruncated) {
    return (
      <Tooltip>
        <TooltipTrigger asChild>{spanElement}</TooltipTrigger>
        <TooltipContent>
          <p>{children}</p>
        </TooltipContent>
      </Tooltip>
    );
  }

  return spanElement;
};

export interface HierarchyBadgeProps {
  serverName: string;
  toolName?: string;
  className?: string;
}

export const HierarchyBadge: React.FC<HierarchyBadgeProps> = ({
  serverName,
  toolName,
  className = "",
}) => {
  return (
    <div className={`flex items-center text-sm text-gray-700 ${className}`}>
      <TruncatableText className="font-medium opacity-50 text-gray-900 truncate max-w-[250px] inline-block">
        {serverName}
      </TruncatableText>

      {toolName && (
        <>
          <span className="mx-2 text-gray-400">→</span>
          <TruncatableText className="font-medium text-gray-900 truncate max-w-[250px] inline-block">
            {toolName}
          </TruncatableText>
        </>
      )}
    </div>
  );
};

export default HierarchyBadge;
