import React, { useMemo } from 'react';
import { EdgeLabelRenderer, EdgeProps } from 'reactflow';
import { useEdgePath } from '../../hooks/useEdgePath';
import { useControlPointDrag } from '../../hooks/useControlPointDrag';
import EdgeOrderBadge from './EdgeOrderBadge';
import Annotation from "../Annotation";
import type { BaseEdgeData } from '../../types/settings';

interface AnnotationEdgeData extends BaseEdgeData {
  annotation?: string;
  isAnnotationVisible?: boolean;
  onToggleAnnotation?: () => void;
}

interface AnnotationEdgeProps extends EdgeProps {
  data?: AnnotationEdgeData;
}

const AnnotationEdge: React.FC<AnnotationEdgeProps> = ({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  data,
  style = {},
  markerEnd,
  selected,
}) => {
  // Get selected state from either prop or data
  const isEdgeSelected = selected || data?.isSelected || false;

  // Get control point offset from data (stored as absolute offset from center)
  const controlOffset = useMemo(() => data?.controlOffset || { x: 0, y: 0 }, [data?.controlOffset]);

  // Calculate edge center
  const edgeCenterX = (sourceX + targetX) / 2;
  const edgeCenterY = (sourceY + targetY) / 2;

  const controlPointX = edgeCenterX + controlOffset.x;
  const controlPointY = edgeCenterY + controlOffset.y;

  // Use extracted path calculation hook
  const [edgePath, labelX, labelY] = useEdgePath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    controlOffset,
  });

  const replayHighlight = data?.replayHighlight;
  const isLocked = data?.isLocked || data?.locked;

  // Use extracted control point drag hook
  const { isDragging, handleControlPointDrag } = useControlPointDrag({
    id,
    edgeCenterX,
    edgeCenterY,
    isLocked: !!isLocked,
    hasCondition: false,
    label: undefined,
    controlOffset,
    onEdgeUpdate: data?.onEdgeUpdate,
  });

  // Apply replay highlight if present
  const edgeStyle = replayHighlight ? {
    ...style,
    stroke: replayHighlight,
    strokeWidth: 3
  } : style;

  return (
    <>
      {replayHighlight ? (
        <g style={{ stroke: replayHighlight, strokeWidth: 3 }}>
          <path
            id={id}
            style={{ fill: 'none' }}
            className="react-flow__edge-path replay-highlighted"
            d={edgePath}
            markerEnd={markerEnd}
            stroke={replayHighlight}
            strokeWidth={3}
          />
        </g>
      ) : (
        <>
          <path
            id={id}
            style={edgeStyle}
            className={`react-flow__edge-path ${selected ? 'selected' : ''}`}
            d={edgePath}
            markerEnd={markerEnd}
          />
          {isEdgeSelected && (controlOffset.x !== 0 || controlOffset.y !== 0) && (
            <line
              className="edge-guide-line"
              x1={edgeCenterX}
              y1={edgeCenterY}
              x2={controlPointX}
              y2={controlPointY}
            />
          )}
        </>
      )}
      {/* Render control point and annotations in EdgeLabelRenderer for proper z-index */}
      {(data?.annotation || isEdgeSelected || (data?.edgeOrdersVisible && data?.edgeOrderInfo)) && (
        <EdgeLabelRenderer>
          <div
            className="edge-label-container nodrag nopan"
            style={{
              transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            }}
          >
            {data?.annotation && (
              <Annotation
                annotation={data.annotation}
                isVisible={data?.isAnnotationVisible}
                onToggle={data?.onToggleAnnotation}
              />
            )}
          </div>

          {/* Add draggable control point when edge is selected */}
          {isEdgeSelected && (
            <div
              className={`edge-control-point-wrapper ${isDragging ? 'dragging' : ''}`}
              onMouseDown={handleControlPointDrag}
              style={{
                transform: `translate(-50%, -50%) translate(${controlPointX}px,${controlPointY}px)`,
                cursor: isDragging ? 'grabbing' : 'grab',
              }}
            >
              <svg width="24" height="24">
                <circle className="control-point-outer" cx={12} cy={12} r={12} />
                <circle className="control-point-inner" cx={12} cy={12} r={6} />
              </svg>
            </div>
          )}

          {/* Edge Order Number Badge — visible even in read-only/locked mode,
              but drag-reorder is disabled when any lock is active. */}
          {data?.edgeOrdersVisible && data?.edgeOrderInfo && (
            <EdgeOrderBadge
              edgeId={id}
              edgeOrderInfo={data.edgeOrderInfo}
              isLocked={!!isLocked || !!data?.globalLocked}
              onReorderEdge={data.onReorderEdge}
            />
          )}
        </EdgeLabelRenderer>
      )}
    </>
  );
};

export default AnnotationEdge;
