'use client'

import { Renderer, DataProvider, ActionProvider, VisibilityProvider } from '@json-render/react'
import type { UITree } from '@json-render/core'
import { ghlRegistry } from '@/components/registry'

/**
 * Action handlers that log to console (demo mode).
 * In production these would call GHL APIs.
 */
const demoActionHandlers: Record<string, (params: Record<string, unknown>) => void> = {
  view_contact: (p) => console.log('🔍 View contact:', p),
  edit_contact: (p) => console.log('✏️ Edit contact:', p),
  delete_contact: (p) => console.log('🗑️ Delete contact:', p),
  move_opportunity: (p) => console.log('📦 Move opportunity:', p),
  send_invoice: (p) => console.log('📧 Send invoice:', p),
  mark_paid: (p) => console.log('✅ Mark paid:', p),
  void_invoice: (p) => console.log('❌ Void invoice:', p),
  download_pdf: (p) => console.log('📄 Download PDF:', p),
  pause_campaign: (p) => console.log('⏸️ Pause campaign:', p),
  resume_campaign: (p) => console.log('▶️ Resume campaign:', p),
  export_data: (p) => console.log('📊 Export data:', p),
  refresh_data: () => console.log('🔄 Refresh data'),
}

interface GHLRendererProps {
  tree: UITree
  data?: Record<string, unknown>
}

export function GHLRenderer({ tree, data = {} }: GHLRendererProps) {
  return (
    <DataProvider initialData={data}>
      <VisibilityProvider>
        <ActionProvider handlers={demoActionHandlers}>
          <Renderer tree={tree} registry={ghlRegistry} />
        </ActionProvider>
      </VisibilityProvider>
    </DataProvider>
  )
}
