import React from 'react';
import type { CanvasActionMode } from './ElementActionToolbar';

interface ElementHandlesProps {
  isSelected: boolean;
  activeAction: CanvasActionMode;
  currentScale: number;
  onScaleDrag: (e: React.PointerEvent) => void;
  onRotateDrag: (e: React.PointerEvent) => void;
}

export const ElementHandles: React.FC<ElementHandlesProps> = ({
  isSelected,
  activeAction,
  currentScale,
  onScaleDrag,
  onRotateDrag,
}) => {
  if (!isSelected) return null;
  
  return (
    <>
      {/* ═══ Scale Handles — only in Scale mode ═══ */}
      {activeAction === 'scale' && (
        <>
          {(['top-left', 'top-right', 'bottom-left', 'bottom-right'] as const).map((corner) => {
            const isTop = corner.includes('top');
            const isLeft = corner.includes('left');
            const cursorH = (isTop === isLeft) ? 'nwse-resize' : 'nesw-resize';
            return (
              <div
                key={corner}
                style={{
                  position: 'absolute',
                  [isTop ? 'top' : 'bottom']: -7 / currentScale,
                  [isLeft ? 'left' : 'right']: -7 / currentScale,
                  width: 14 / currentScale,
                  height: 14 / currentScale,
                  background: '#fff',
                  border: `${Math.max(1, 2 / currentScale)}px solid #8b5cf6`,
                  borderRadius: 3 / currentScale,
                  cursor: cursorH,
                  pointerEvents: 'auto',
                  zIndex: 10,
                  boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
                }}
                onPointerDown={onScaleDrag}
                title="Redimensionar"
              />
            );
          })}
        </>
      )}

      {/* ═══ Rotate Handle — only in Rotate mode ═══ */}
      {activeAction === 'rotate' && (
        <>
          {/* Connector line from element bottom to rotate handle */}
          <div
            style={{
              position: 'absolute', bottom: -24 / currentScale, left: '50%',
              transform: `translateX(-50%) scaleY(${1 / currentScale})`,
              transformOrigin: 'top center',
              width: 1, height: 20,
              background: '#8b5cf6',
              pointerEvents: 'none',
              zIndex: 9,
            }}
          />
          {/* Rotate handle circle */}
          <div 
            style={{
              position: 'absolute', bottom: -38 / currentScale, left: '50%',
              transform: `translateX(-50%) scale(${1 / currentScale})`,
              transformOrigin: 'top center',
              width: 22, height: 22,
              background: '#fff', border: '2px solid #8b5cf6',
              borderRadius: '50%', cursor: 'grab',
              pointerEvents: 'auto',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              zIndex: 51,
              boxShadow: '0 2px 8px rgba(0,0,0,0.4)',
            }}
            onPointerDown={onRotateDrag}
            title="Arrastra para rotar"
          >
            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="3"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.59-9.21l5.67-4.24"/></svg>
          </div>
        </>
      )}
    </>
  );
};
