/**
 * Flow diagram type definitions
 * @countermeasure/web-components/visualization/flow-diagram
 */

export interface FlowNode {
  /** Stable identifier referenced by `FlowEdge.source`/`target`. */
  id: string
  /** Display label rendered inside the node. */
  label: string
  /**
   * Visual node shape/role used by the layout engine.
   * @default 'process'
   */
  type?: 'start' | 'end' | 'process' | 'decision' | 'io'
  /** Optional explicit X coordinate (skips auto-layout). */
  x?: number
  /** Optional explicit Y coordinate (skips auto-layout). */
  y?: number
  /** Override node width in pixels. */
  width?: number
  /** Override node height in pixels. */
  height?: number
  /** CSS color for the node fill. */
  color?: string
  /** Inline SVG/HTML icon rendered to the left of the label. */
  icon?: string
  /** Free-form metadata tag map. */
  data?: Record<string, string>
}

export interface FlowEdge {
  /** Stable identifier (used for click events and React-style keys). */
  id: string
  /** `FlowNode.id` of the edge's source node. */
  source: string
  /** `FlowNode.id` of the edge's target node. */
  target: string
  /** Optional label rendered along the edge. */
  label?: string
  /**
   * Stroke style applied to the edge path.
   * @default 'solid'
   */
  type?: 'solid' | 'dashed' | 'dotted'
  /** CSS color used for the edge stroke. */
  color?: string
  /**
   * Animate the edge with a moving dash pattern.
   * @default false
   */
  animated?: boolean
}

export interface FlowDiagramConfig {
  /** Container element (or selector) the diagram is mounted into. */
  container: HTMLElement | string
  /** Nodes laid out by the auto-layout engine. */
  nodes: FlowNode[]
  /** Edges connecting nodes by id. */
  edges: FlowEdge[]
  /**
   * Layout direction — top-to-bottom or left-to-right.
   * @default 'TB'
   */
  direction?: 'TB' | 'LR'
  /**
   * Enable mouse-wheel zoom.
   * @default false
   */
  zoomable?: boolean
  /**
   * Enable click-and-drag pan.
   * @default false
   */
  pannable?: boolean
  /** Fired when a node is clicked. */
  onNodeClick?: (node: FlowNode) => void
  /** Fired when an edge is clicked. */
  onEdgeClick?: (edge: FlowEdge) => void
  /** Additional CSS class names. */
  className?: string
}
