import React from "react";
import type { ArrowLayerSpec, ViewportTransform } from "./types";

interface ArrowLayerProps {
  arrows?: ArrowLayerSpec[];
  viewport: ViewportTransform;
}

export const ArrowLayer: React.FC<ArrowLayerProps> = ({ arrows, viewport }) => {
  if (!arrows || arrows.length === 0) return null;

  return (
    <g className="arrow-layer">
      {arrows.map((arrow) => {
        const x1 = viewport.toScreenX(arrow.from.x);
        const y1 = viewport.toScreenY(arrow.from.y);
        const x2 = viewport.toScreenX(arrow.to.x);
        const y2 = viewport.toScreenY(arrow.to.y);

        const dx = x2 - x1;
        const dy = y2 - y1;
        const dist = Math.hypot(dx, dy);

        if (dist < 14) return null;

        const shortenStart = dist > 28 ? 11 : 5;
        const shortenEnd = dist > 28 ? 13 : 7;

        const ux = dx / dist;
        const uy = dy / dist;

        const sx1 = x1 + ux * shortenStart;
        const sy1 = y1 + uy * shortenStart;
        const sx2 = x2 - ux * shortenEnd;
        const sy2 = y2 - uy * shortenEnd;

        const markerId = `arrowhead-${arrow.id}`;

        return (
          <g key={arrow.id} id={`arrow-${arrow.id}`}>
            <defs>
              <marker
                id={markerId}
                viewBox="0 0 10 10"
                refX="7"
                refY="5"
                markerWidth="6"
                markerHeight="6"
                orient="auto"
              >
                <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill={arrow.color} />
              </marker>
            </defs>
            <line
              x1={sx1}
              y1={sy1}
              x2={sx2}
              y2={sy2}
              stroke={arrow.color}
              strokeWidth={2}
              strokeDasharray={arrow.dashed ? "4,3" : undefined}
              markerEnd={`url(#${markerId})`}
            />
          </g>
        );
      })}
    </g>
  );
};