import { Billboard, Text } from "@react-three/drei";
import type { ThreeEvent } from "@react-three/fiber";
import { PoiApproachShip } from "./PoiApproachShip";
import { StarSystemContents } from "./StarSystemContents";
import type { GalaxySystem, PoiNavigationStatus, PoiNavigationTarget, SystemPointOfInterest } from "./types";

type StarSystemNodeProps = {
  system: GalaxySystem;
  position: [number, number, number];
  selected?: boolean;
  hovered?: boolean;
  current?: boolean;
  destination?: boolean;
  waypoint?: boolean;
  selectedPoiId?: string | null;
  poiNavigationTarget?: PoiNavigationTarget | null;
  onPoiNavigationStatusChange?: (status: PoiNavigationStatus) => void;
  onClick?: (system: GalaxySystem, event: ThreeEvent<MouseEvent>) => void;
  onDoubleClick?: (system: GalaxySystem, event: ThreeEvent<MouseEvent>) => void;
  onContextMenu?: (system: GalaxySystem, event: ThreeEvent<MouseEvent>) => void;
  onPoiSelect?: (system: GalaxySystem, poi: SystemPointOfInterest, event: ThreeEvent<MouseEvent>) => void;
  onPointerOver?: (system: GalaxySystem, event: ThreeEvent<PointerEvent>) => void;
  onPointerOut?: (system: GalaxySystem, event: ThreeEvent<PointerEvent>) => void;
};

export function StarSystemNode({
  system,
  position,
  selected,
  hovered,
  current,
  destination,
  waypoint,
  selectedPoiId,
  poiNavigationTarget,
  onPoiNavigationStatusChange,
  onClick,
  onDoubleClick,
  onContextMenu,
  onPoiSelect,
  onPointerOver,
  onPointerOut,
}: StarSystemNodeProps) {
  const color = destination ? "#22d3ee" : selected ? "#f0a030" : waypoint ? "#a78bfa" : current ? "#22c55e" : system.color;
  const size = selected ? 2.4 : hovered || destination || current ? 1.9 : 1.35;
  const showLabel = selected || hovered || destination || current || waypoint;
  const expanded = !!(selected || hovered);
  const contentScale = expanded ? 1.1 : 0.72;
  return (
    <group position={position}>
      <StarSystemContents
        systemId={system.id}
        systemName={system.name}
        starColor={color}
        planets={system.planets}
        pointsOfInterest={system.pointsOfInterest}
        selectedPoiId={selectedPoiId}
        expanded={expanded}
        scale={contentScale}
        onPoiSelect={(poi, event) => onPoiSelect?.(system, poi, event)}
      />
      {poiNavigationTarget && poiNavigationTarget.systemId === system.id && (
        <PoiApproachShip
          system={system}
          poiId={poiNavigationTarget.poiId}
          scale={contentScale}
          expanded={expanded}
          onStatusChange={onPoiNavigationStatusChange}
        />
      )}
      <mesh
        onClick={(event) => onClick?.(system, event)}
        onDoubleClick={(event) => onDoubleClick?.(system, event)}
        onContextMenu={(event) => onContextMenu?.(system, event)}
        onPointerOver={(event) => onPointerOver?.(system, event)}
        onPointerOut={(event) => onPointerOut?.(system, event)}
      >
        <sphereGeometry args={[size, 24, 24]} />
        <meshBasicMaterial color={color} />
      </mesh>
      <mesh scale={size * 2.2}>
        <sphereGeometry args={[1, 24, 24]} />
        <meshBasicMaterial color={color} transparent opacity={0.12} depthWrite={false} />
      </mesh>
      {showLabel && (
        <Billboard position={[0, 4.2, 0]}>
          <Text color={color} fontSize={2.2} anchorX="center" anchorY="middle" outlineColor="#040810" outlineWidth={0.08}>
            {system.name}
          </Text>
        </Billboard>
      )}
    </group>
  );
}
