import MarkdownIt from 'markdown-it'

export interface CanvasNode {
  id: string
  type: string
  x: number
  y: number
  width: number
  height: number
  text?: string
  file?: string
  frontmatter?: Record<string, any>
  state?: 'pending' | 'in_progress' | 'completed'
  style?: Record<string, string>
}

export interface CanvasEdge {
  id: string
  fromNode: string
  fromSide: string
  toNode: string
  toSide: string
}

export interface CanvasData {
  nodes: CanvasNode[]
  edges: CanvasEdge[]
}

export const useCanvas = () => {
  const md = new MarkdownIt({
    html: false,
    linkify: true,
    typographer: true
  })

  const renderMarkdown = (text: string): string => {
    return md.render(text || '')
  }

  const parseCanvasJson = (json: any): CanvasData => {
    const nodes = (json.nodes || []).map((n: any) => ({
      id: n.id,
      type: n.type,
      x: n.x,
      y: n.y,
      width: n.width || 300,
      height: n.height || 200,
      text: n.text,
      file: n.file,
      frontmatter: n.frontmatter,
      state: n.state || 'pending',
      style: n.style || {}
    }))

    const edges = (json.edges || []).map((e: any) => ({
      id: e.id,
      fromNode: e.fromNode || e.source,
      fromSide: e.fromSide || 'right',
      toNode: e.toNode || e.target,
      toSide: e.toSide || 'left'
    }))

    return { nodes, edges }
  }

  const loadCanvas = async (id: string): Promise<CanvasData> => {
    const data = await $fetch(`/api/canvas/${id}`)
    return parseCanvasJson(data)
  }

  const updateNodeState = async (nodeId: string, state: string) => {
    return await $fetch(`/api/nodes/${nodeId}`, {
      method: 'PUT',
      body: { state }
    })
  }

  return {
    renderMarkdown,
    parseCanvasJson,
    loadCanvas,
    updateNodeState
  }
}