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 {
  id?: string
  name?: string
  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 => {
    if (!json) return { nodes: [], edges: [] }
    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,
      label: n.label,
      file: n.file,
      frontmatter: n.frontmatter,
      state: n.state || 'pending',
      priority: n.priority,
      assigned_to: n.assigned_to,
      alarm: n.alarm,
      script_id: n.script_id,
      prompt: n.prompt,
      url: n.url,
      method: n.method,
      repo: n.repo,
      branch: n.branch,
      message: n.message,
      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 { 
      id: json.id,
      name: json.name,
      nodes, 
      edges 
    }
  }

  const getAuthHeaders = (): Record<string, string> => {
    const auth = useAuth()
    const token = auth.token?.value
    return token ? { Authorization: `Bearer ${token}` } : {}
  }

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

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

  return {
    renderMarkdown,
    parseCanvasJson,
    loadCanvas,
    updateNodeState
  }
}