"use client";

import { BaseEdge, Handle, Position, getBezierPath, type EdgeProps, type NodeProps } from "@xyflow/react";
import type { ProjectionNode } from "@/lib/canvas-bindings/projection";
import type { CanvasEdgeModel } from "@/lib/canvas-v2";
import styles from "./canvas.module.css";
const positions={top:Position.Top,right:Position.Right,bottom:Position.Bottom,left:Position.Left};

/** Render only the known envelope and derived endpoints, never interpret opaque payload fields. */
export function UnsupportedNode({data,selected}:NodeProps<ProjectionNode>){
  const fallback=data.__headlessFallback;
  return <div className={`${styles.node} ${selected?styles.selectedNode:""}`} style={{width:"100%",height:"100%",padding:14,transform:`rotate(${data.rotation||0}deg)`}} role="note" aria-label="暂不支持编辑的元素">
    <span>{data.title}</span><small style={{display:"block"}}>此元素需要兼容的组件版本才能编辑</small>
    <small title={fallback?`${fallback.componentId} · v${fallback.dataVersion}`:undefined}>{fallback?.reason==='renderer-unavailable'?'当前视图暂无此类型的编辑器':'原始内容已保留'}</small>
    {fallback?.handles.map(handle=><Handle key={handle.id} id={handle.id} type="source" position={positions[handle.side]} className={styles.centerHandle} isConnectable={false} isConnectableStart={false} isConnectableEnd={false} aria-hidden />)}
  </div>;
}
export function UnsupportedEdge(props:EdgeProps<CanvasEdgeModel>){
  const [path]=getBezierPath(props);
  return <g role="img" aria-label="暂不支持编辑的连线"><title>原始连线内容已保留</title><BaseEdge id={props.id} path={path} style={{stroke:'#aa968b',strokeWidth:1.5}} /></g>;
}