import { memo, useState } from 'react';

interface ExpertKeywordNodeProps {
  data: {
    label: string;
    expertName: string;
    expertId: string;
    color: string;
    isDark: boolean;
  };
}

export const ExpertKeywordNode = memo(({ data }: ExpertKeywordNodeProps) => {
  const { label, expertName, color, isDark } = data;
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        gap: 6,
        padding: '10px 16px',
        paddingRight: '40px',
        marginTop: 20,
        borderRadius: 12,
        background: isDark
          ? 'linear-gradient(135deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.05) 100%)'
          : 'linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(255, 255, 255, 0.8) 100%)',
        border: `1px solid ${color}44`,
        boxShadow: isHovered
          ? `0 8px 20px ${color}33`
          : `0 4px 12px ${color}1a`,
        color: isDark ? '#fff' : '#1f1f1f',
        fontSize: '14px',
        fontWeight: 500,
        textAlign: 'left',
        cursor: 'pointer',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
        whiteSpace: 'nowrap',
        userSelect: 'none',
        transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
        backdropFilter: 'blur(4px)',
      }}
    >
      {/* Expert Badge - positioned above the node */}
      <div
        style={{
          position: 'absolute',
          top: -20,
          left: 0,
          padding: '2px 8px',
          borderRadius: 12,
          background: color,
          color: '#fff',
          fontSize: '11px',
          fontWeight: 600,
          whiteSpace: 'nowrap',
          boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
        }}
      >
        {expertName}
      </div>

      {/* Keyword Label */}
      <div style={{ lineHeight: 1.4 }}>{label}</div>

      {/* NEW Badge - positioned inside */}
      <span
        style={{
          position: 'absolute',
          top: 10,
          right: 10,
          padding: '2px 6px',
          borderRadius: 4,
          background: 'rgba(82, 196, 26, 0.15)',
          color: '#52c41a',
          border: '1px solid rgba(82, 196, 26, 0.3)',
          fontSize: '10px',
          fontWeight: 700,
        }}
      >
        NEW
      </span>
    </div>
  );
});

ExpertKeywordNode.displayName = 'ExpertKeywordNode';
