import React, { useState, useRef, useEffect } from "react";

interface TooltipProps {
  content: React.ReactNode;
  children: React.ReactNode;
  position?: "top" | "bottom" | "left" | "right";
  delay?: number;
  className?: string;
  style?: React.CSSProperties;
}

export const Tooltip: React.FC<TooltipProps> = ({
  content,
  children,
  position = "top",
  delay = 200,
  className = "",
  style = {},
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const [showTooltip, setShowTooltip] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const tooltipRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLDivElement>(null);

  const handleMouseEnter = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    timeoutRef.current = setTimeout(() => {
      setShowTooltip(true);
      // Small delay for entrance animation
      setTimeout(() => setIsVisible(true), 10);
    }, delay);
  };

  const handleMouseLeave = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    setIsVisible(false);
    // Hide after animation completes
    setTimeout(() => setShowTooltip(false), 150);
  };

  const getTooltipPosition = () => {
    const baseStyles: React.CSSProperties = {
      position: "absolute",
      zIndex: 10000,
      pointerEvents: "none",
      transform: isVisible ? "scale(1)" : "scale(0.95)",
      opacity: isVisible ? 1 : 0,
      transition: "all 0.15s cubic-bezier(0.16, 1, 0.3, 1)",
    };

    switch (position) {
      case "top":
        return {
          ...baseStyles,
          bottom: "100%",
          left: "50%",
          transform: `translateX(-50%) scale(${isVisible ? 1 : 0.95})`,
          marginBottom: 8,
        };
      case "bottom":
        return {
          ...baseStyles,
          top: "100%",
          left: "50%",
          transform: `translateX(-50%) scale(${isVisible ? 1 : 0.95})`,
          marginTop: 8,
        };
      case "left":
        return {
          ...baseStyles,
          right: "100%",
          top: "50%",
          transform: `translateY(-50%) scale(${isVisible ? 1 : 0.95})`,
          marginRight: 8,
        };
      case "right":
        return {
          ...baseStyles,
          left: "100%",
          top: "50%",
          transform: `translateY(-50%) scale(${isVisible ? 1 : 0.95})`,
          marginLeft: 8,
        };
      default:
        return baseStyles;
    }
  };

  const getArrowStyles = () => {
    const arrowSize = 6;
    const baseArrowStyles: React.CSSProperties = {
      position: "absolute",
      width: 0,
      height: 0,
      borderStyle: "solid",
    };

    switch (position) {
      case "top":
        return {
          ...baseArrowStyles,
          top: "100%",
          left: "50%",
          marginLeft: -arrowSize,
          borderWidth: `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`,
          borderColor: "#1a1a1a transparent transparent transparent",
        };
      case "bottom":
        return {
          ...baseArrowStyles,
          bottom: "100%",
          left: "50%",
          marginLeft: -arrowSize,
          borderWidth: `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`,
          borderColor: "transparent transparent #1a1a1a transparent",
        };
      case "left":
        return {
          ...baseArrowStyles,
          left: "100%",
          top: "50%",
          marginTop: -arrowSize,
          borderWidth: `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`,
          borderColor: "transparent transparent transparent #1a1a1a",
        };
      case "right":
        return {
          ...baseArrowStyles,
          right: "100%",
          top: "50%",
          marginTop: -arrowSize,
          borderWidth: `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`,
          borderColor: "transparent #1a1a1a transparent transparent",
        };
      default:
        return baseArrowStyles;
    }
  };

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return (
    <div
      ref={triggerRef}
      style={{ position: "relative", display: "inline-block", ...style }}
      className={className}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {showTooltip && (
        <div ref={tooltipRef} style={getTooltipPosition()}>
          <div
            style={{
              background: "#1a1a1a",
              color: "#ffffff",
              padding: "6px 10px",
              borderRadius: 6,
              fontSize: 12,
              fontWeight: 500,
              fontFamily:
                "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
              whiteSpace: "nowrap",
              boxShadow:
                "0 8px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1)",
              border: "1px solid rgba(255, 255, 255, 0.1)",
            }}
          >
            {content}
          </div>
          <div style={getArrowStyles()} />
        </div>
      )}
    </div>
  );
};

export default Tooltip;