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;
  signatures?: number;
}

export const MapNode: React.FC<MapNodeProps> = ({
  id,
  name,
  position,
  onClick,
  type,
  security,
  signatures
}) => {
  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') {
    // Further reduce region size to prevent overlap - made even smaller
    const pillWidth = Math.max(name.length * 5, 40); // Reduced from 8 to 5, min from 60 to 40
    const pillHeight = 18; // Reduced from 24 to 18

    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 - made smaller */}
        <text
          x="0"
          y="3"
          textAnchor="middle"
          fill="#ffffff"
          fontSize="8"
          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 = 20; // Position text below the dot - moved down more

    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} {security !== undefined && (
            <tspan fill={getSecurityColor(security)}>{security.toFixed(1)}</tspan>
          )}
        </text>
        <text
          x="0"
          y={textOffset + 15}
          textAnchor="middle"
          fill="#a3a3a3"
          fontSize="12"
          className="pointer-events-none select-none"
          style={{ textShadow: '1px 1px 2px rgba(0,0,0,0.8)' }}
        >
          {signatures !== undefined && `📡 ${signatures}`}
        </text>
      </g>
    );
  }
};