// Transform Obsidian canvas to Vue Flow elements
export const transformToFlowElements = (canvasData: any) => {
  const nodes = (canvasData.nodes || []).map((node: any) => ({
    id: node.id,
    type: node.type === 'file' ? 'file' : node.type === 'ai' ? 'ai' : node.type === 'git' ? 'git' : node.type === 'task' ? 'task' : node.type === 'webhook' ? 'webhook' : 'text',
    position: { x: Number(node.x) || 0, y: Number(node.y) || 0 },
    data: {
      ...node,
      width: node.width || 300,
      height: node.height || 200,
      label: node.label || node.text?.slice(0, 20) || node.file || 'Node',
      // Ensure specific fields exist so the properties panel shows them
      ...(node.type === 'task' && {
        text: node.text ?? '',
        state: node.state ?? 'todo',
        priority: node.priority ?? 'medium',
        assigned_to: node.assigned_to ?? '',
        start_date: node.start_date ?? '',
        alarm: node.alarm ?? '',
        script_id: node.script_id ?? ''
      }),
      ...(node.type === 'text' && { text: node.text ?? '' }),
      ...(node.type === 'file' && { file: node.file ?? '' }),
      ...(node.type === 'ai' && { prompt: node.prompt ?? '' }),
      ...(node.type === 'webhook' && { 
        script_id: node.script_id ?? '',
        url: node.url ?? '',
        method: node.method ?? 'POST'
      }),
      ...(node.type === 'git' && {
        repo: node.repo ?? '',
        branch: node.branch ?? 'main',
        message: node.message ?? ''
      })
    },
    style: {
      width: `${node.width || 300}px`,
      height: `${node.height || 200}px`,
      background: node.style?.background || '#1e293b',
      border: `1px solid ${node.style?.border || '#334155'}`,
      borderRadius: '8px'
    }
  }))

  const edges = (canvasData.edges || []).map((edge: any) => ({
    id: edge.id,
    source: edge.fromNode,
    target: edge.toNode,
    sourceHandle: edge.fromSide,
    targetHandle: edge.toSide,
    animated: true,
    style: { stroke: '#475569', strokeWidth: 2 }
  }))

  return [...nodes, ...edges]
}

// Transform Vue Flow elements back to Obsidian canvas
export const transformToObsidianCanvas = (flowElements: any[]) => {
  const nodes = flowElements.filter(el => el.position !== undefined).map(node => ({
    id: node.id,
    type: node.type === 'file' ? 'file' : node.type === 'task' ? 'task' : node.type === 'ai' ? 'ai' : node.type === 'webhook' ? 'webhook' : node.type === 'git' ? 'git' : 'text',
    x: Math.round(Number(node.position.x) || 0),
    y: Math.round(Number(node.position.y) || 0),
    width: node.data.width || 300,
    height: node.data.height || 200,
    text: node.data.text,
    label: node.data.label,
    file: node.data.file,
    state: node.data.state,
    priority: node.data.priority,
    assigned_to: node.data.assigned_to,
    start_date: node.data.start_date,
    alarm: node.data.alarm,
    script_id: node.data.script_id,
    prompt: node.data.prompt,
    url: node.data.url,
    method: node.data.method,
    repo: node.data.repo,
    branch: node.data.branch,
    message: node.data.message,
    style: {
      background: node.style?.background || '#1e293b',
      border: node.style?.border?.replace('1px solid ', '') || '#334155'
    }
  }))

  const edges = flowElements.filter(el => el.source && el.target).map(edge => ({
    id: edge.id,
    fromNode: edge.source,
    fromSide: edge.sourceHandle || 'right',
    toNode: edge.target,
    toSide: edge.targetHandle || 'left'
  }))

  return { nodes, edges }
}