import { Handle, Position } from "@xyflow/react";
import type { NodeProps } from "@xyflow/react";
import type { DiagramNode } from "../graph";
import { HIDDEN_HANDLE } from "../architecture/constants";
import { SEQ_SIZES } from "./constants";

export function SeqParticipantNode({ data }: NodeProps) {
  const d = data as unknown as DiagramNode & {
    label: string;
    lifelineHeight?: number;
    activations?: { y: number; height: number }[];
  };
  const icon = d.icon || "👤";
  const lifelineHeight = d.lifelineHeight ?? 400;
  const activations = d.activations ?? [];

  return (
    <div className="seq-participant" style={{ height: lifelineHeight }}>
      <div className="seq-participant-box">
        <span className="seq-participant-icon">{icon}</span>
        <span className="seq-participant-label">{d.label}</span>
      </div>
      <div
        className="seq-lifeline"
        style={{ height: lifelineHeight - SEQ_SIZES.participant.h }}
      />
      {activations.map((act, i) => (
        <div
          key={i}
          className="seq-activation"
          style={{ top: act.y, height: act.height }}
        />
      ))}
      <Handle type="target" position={Position.Top} style={HIDDEN_HANDLE} />
      <Handle type="source" position={Position.Bottom} style={HIDDEN_HANDLE} />
      <Handle type="target" position={Position.Left} id="left" style={HIDDEN_HANDLE} />
      <Handle type="source" position={Position.Right} id="right" style={HIDDEN_HANDLE} />
    </div>
  );
}
