house-plan-maker/apps/client/src/components/editor/projection/ProjectionElectrical.tsx

import { Group, Circle, Line, Rect, Text } from 'react-konva';
import type { ProjectedElectrical } from '../utils/projectionMapping';
import { projectionToPixel } from '../utils/projectionMapping';

interface ProjectionElectricalProps {
  readonly projected: ProjectedElectrical;
  readonly wallHeight: number;
  readonly scale: number;
  readonly padding: number;
  readonly isSelected: boolean;
  readonly isDragging?: boolean;
  readonly dragFromFloor?: number;
  readonly dragAlongWall?: number;
  readonly onClick: () => void;
  readonly onDragStart?: (itemId: string, evt: MouseEvent) => void;
}

const SYMBOL_SIZE = 12;

/** Render a wall-mounted electrical item in wall elevation view. */
export function ProjectionElectrical({
  projected,
  wallHeight,
  scale,
  padding,
  isSelected,
  isDragging = false,
  dragFromFloor,
  dragAlongWall,
  onClick,
  onDragStart,
}: ProjectionElectricalProps) {
  const { position, item } = projected;

  const displayFromFloor = isDragging && dragFromFloor != null ? dragFromFloor : position.fromFloor;
  const displayAlongWall = isDragging && dragAlongWall != null ? dragAlongWall : position.alongWall;

  const center = projectionToPixel(
    displayAlongWall,
    displayFromFloor,
    wallHeight,
    scale,
    padding,
  );

  const strokeColor = isSelected ? '#2563eb' : '#64748b';
  const fillColor = isSelected ? '#dbeafe' : '#f1f5f9';
  const half = SYMBOL_SIZE / 2;

  return (
    <Group
      onClick={onClick}
      onMouseDown={(e) => {
        if (onDragStart && e.evt.button === 0) {
          onDragStart(item.id, e.evt);
        }
      }}
      style={{ cursor: onDragStart ? 'grab' : 'default' }}
    >
      {/* Drag ghost outline */}
      {isDragging && (
        <Rect
          x={center.x - half - 2}
          y={center.y - half - 2}
          width={SYMBOL_SIZE + 4}
          height={SYMBOL_SIZE + 4}
          stroke="#2563eb"
          strokeWidth={1}
          dash={[3, 3]}
          fill="transparent"
        />
      )}
      {item.type === 'OUTLET' && (
        <>
          {/* IEC outlet symbol: circle with two horizontal lines */}
          <Circle
            x={center.x}
            y={center.y}
            radius={half}
            fill={fillColor}
            stroke={strokeColor}
            strokeWidth={1.5}
          />
          <Line
            points={[center.x - 3, center.y - 2, center.x + 3, center.y - 2]}
            stroke={strokeColor}
            strokeWidth={1.5}
          />
          <Line
            points={[center.x - 3, center.y + 2, center.x + 3, center.y + 2]}
            stroke={strokeColor}
            strokeWidth={1.5}
          />
        </>
      )}
      {item.type === 'SWITCH' && (
        <>
          {/* IEC switch symbol: circle with diagonal line */}
          <Circle
            x={center.x}
            y={center.y}
            radius={half}
            fill={fillColor}
            stroke={strokeColor}
            strokeWidth={1.5}
          />
          <Line
            points={[
              center.x - half + 2,
              center.y + half - 2,
              center.x + half - 2,
              center.y - half + 2,
            ]}
            stroke={strokeColor}
            strokeWidth={1.5}
          />
        </>
      )}
      {item.type === 'LIGHT_WALL' && (
        <>
          {/* Wall light: semicircle shape */}
          <Circle
            x={center.x}
            y={center.y}
            radius={half}
            fill="#fef9c3"
            stroke={strokeColor}
            strokeWidth={1.5}
          />
          <Line
            points={[
              center.x - half, center.y,
              center.x - half * 1.3, center.y + half * 0.8,
            ]}
            stroke="#eab308"
            strokeWidth={1}
          />
          <Line
            points={[
              center.x + half, center.y,
              center.x + half * 1.3, center.y + half * 0.8,
            ]}
            stroke="#eab308"
            strokeWidth={1}
          />
        </>
      )}
      {/* Fallback for other wall-mounted types */}
      {item.type !== 'OUTLET' && item.type !== 'SWITCH' && item.type !== 'LIGHT_WALL' && (
        <Rect
          x={center.x - half}
          y={center.y - half}
          width={SYMBOL_SIZE}
          height={SYMBOL_SIZE}
          fill={fillColor}
          stroke={strokeColor}
          strokeWidth={1.5}
        />
      )}
      {/* Type label below symbol */}
      <Text
        x={center.x - 20}
        y={center.y + half + 2}
        width={40}
        text={item.type === 'OUTLET' ? 'OUT' : item.type === 'SWITCH' ? 'SW' : 'WL'}
        align="center"
        fontSize={8}
        fill="#94a3b8"
      />
    </Group>
  );
}