import React, { useState } from 'react';
import { getSecurityColor } from '../utils/securityColors';

interface MapNodeProps {
  id: string;
  name: string;
  position: { x: number; y: number };
  onClick: () => void;
  type: 'region' | 'system';
  security?: number;
}

export const MapNode: React.FC<MapNodeProps> = ({
  id,
  name,
  position,
  onClick,
  type,
  security
}) => {
  const [isHovered, setIsHovered] = useState(false);
  
  // Use security-based color for both systems and regions
  const nodeColor = security !== undefined
    ? getSecurityColor(security)
    : '#a855f7'; // fallback purple color

  if (type === 'region') {
    // Reduce region size to prevent overlap
    const pillWidth = Math.max(name.length * 8, 60); // Reduced from 12 to 8, min from 80 to 60
    const pillHeight = 24; // Reduced from 32 to 24
    
    return (
      <g
        transform={`translate(${position.x}, ${position.y})`}
        className="cursor-pointer select-none"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onClick={(e) => {
          e.stopPropagation();
          onClick();
        }}
      >
        {/* Glow effect */}
        <rect
          x={-pillWidth/2 - 3}
          y={-pillHeight/2 - 3}
          width={pillWidth + 6}
          height={pillHeight + 6}
          rx={(pillHeight + 6) / 2}
          fill={nodeColor}
          opacity={isHovered ? 0.3 : 0.1}
          filter="url(#glow)"
          className="transition-all duration-300"
        />
        
        {/* Main pill */}
        <rect
          x={-pillWidth/2}
          y={-pillHeight/2}
          width={pillWidth}
          height={pillHeight}
          rx={pillHeight / 2}
          fill={nodeColor}
          stroke="#ffffff"
          strokeWidth="1.5"
          filter="url(#glow)"
          className={`transition-all duration-300 ${
            isHovered ? 'drop-shadow-lg' : ''
          }`}
        />
        
        {/* Text inside pill */}
        <text
          x="0"
          y="4"
          textAnchor="middle"
          fill="#ffffff"
          fontSize="11"
          fontWeight="bold"
          className="transition-all duration-300 pointer-events-none select-none"
          style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
        >
          {name}
        </text>
      </g>
    );
  } else {
    // Render system as a dot with external label
    const nodeSize = 6;
    const textOffset = 18; // Position text below the dot
    
    return (
      <g
        transform={`translate(${position.x}, ${position.y})`}
        className="cursor-pointer select-none"
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
        onClick={(e) => {
          e.stopPropagation();
          onClick();
        }}
      >
        {/* Node glow effect */}
        <circle
          r={nodeSize + 4}
          fill={nodeColor}
          opacity={isHovered ? 0.3 : 0.1}
          filter="url(#glow)"
          className="transition-all duration-300"
        />
        
        {/* Main node - removed stroke to eliminate white border */}
        <circle
          r={nodeSize}
          fill={nodeColor}
          filter="url(#glow)"
          className={`transition-all duration-300 ${
            isHovered ? 'drop-shadow-lg' : ''
          }`}
        />
        
        {/* Inner core */}
        <circle
          r={nodeSize - 3}
          fill={isHovered ? '#ffffff' : nodeColor}
          opacity={0.8}
          className="transition-all duration-300"
        />
        
        {/* Node label */}
        <text
          x="0"
          y={textOffset}
          textAnchor="middle"
          fill="#ffffff"
          fontSize="10"
          fontWeight="bold"
          className={`transition-all duration-300 ${
            isHovered ? 'fill-purple-200' : 'fill-white'
          } pointer-events-none select-none`}
          style={{ textShadow: '2px 2px 4px rgba(0,0,0,0.8)' }}
        >
          {name}
        </text>
      </g>
    );
  }
};