// Custom edge that renders association / composition / constraint variants.
// - association: solid line with arrow
// - composition: solid line with diamond marker at the source side
// - constraint: dashed line, no arrow

"use client";

import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from "@xyflow/react";
import type { AssociationKind } from "../../../lib/sysml/model";

export interface SysmlEdgeData extends Record<string, unknown> {
  label?: string;
  kind: AssociationKind;
}

export function SysmlEdge(props: EdgeProps) {
  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, markerStart } = props;
  const d = (data ?? {}) as SysmlEdgeData;
  const kind = d.kind ?? "association";

  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX, sourceY,
    sourcePosition,
    targetX, targetY,
    targetPosition,
    curvature: 0.25,
  });

  const isConstraint = kind === "constraintApplies";

  return (
    <>
      <BaseEdge
        id={props.id}
        path={edgePath}
        style={{
          stroke: "var(--edge)",
          strokeWidth: 1,
          strokeDasharray: isConstraint ? "4 4" : undefined,
          opacity: 0.85,
        }}
        markerEnd={markerEnd}
        markerStart={markerStart}
      />

      {d.label && (
        <EdgeLabelRenderer>
          <div
            className="sysml-edge-label"
            style={{
              position: "absolute",
              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
            }}
          >
            {d.label}
          </div>
        </EdgeLabelRenderer>
      )}
    </>
  );
}