/**
 * MCP Integration: UI Generation
 *
 * Shows how an MCP server uses the GHL catalog to have Claude generate
 * UI JSON trees from GHL API data, then renders them to single-file HTML
 * for serving via registerAppResource.
 *
 * Flow:
 *   json-render catalog → Claude generates JSON tree → render to HTML
 *   → serve via registerAppResource → host renders in iframe
 *   → UI receives data via ontoolresult handler
 */

import { generateCatalogPrompt } from '@json-render/core'
import { ghlCatalog } from '@/catalog/ghl-catalog'

/**
 * Generate the system prompt that constrains Claude to our component catalog.
 * This is sent as a system message so Claude knows what components it can use.
 */
export function getGHLSystemPrompt(): string {
  const catalogPrompt = generateCatalogPrompt(ghlCatalog)

  return `You are a UI generator for GoHighLevel (GHL) CRM applications.
You generate JSON UI trees using the component catalog below. Your output MUST be valid JSON
matching the UITree schema (with "root" and "elements" keys).

## RULES
1. Only use components defined in the catalog below
2. Every element must have a unique "key", a "type" (matching a catalog component), and "props"
3. Parent elements list children by key in their "children" array
4. Actions use the catalog's action definitions — use "name" and "params"
5. Keep layouts information-dense and professional
6. Use realistic data that matches GHL CRM patterns
7. Prefer the flat UITree format: { root: "key", elements: { "key": { ... } } }

## COMPONENT CATALOG
${catalogPrompt}

## RESPONSE FORMAT
Respond with ONLY the JSON UITree. No markdown, no explanation.`
}

/**
 * Generate a contact grid UI prompt from GHL API contact data.
 */
export function generateContactGridPrompt(contacts: Array<Record<string, unknown>>): string {
  return `Generate a contact grid UI showing the following ${contacts.length} contacts.

Include:
- A PageHeader with the title "Contacts" and count stats
- A SearchBar for filtering
- FilterChips for common segments (All, Customers, Leads, VIP)
- A DataTable with columns: Name (avatar format), Email, Phone, Tags, Last Activity, Source
- Enable row selection and sorting

Contact data:
${JSON.stringify(contacts, null, 2)}`
}

/**
 * Generate a pipeline board prompt from GHL API opportunity data.
 */
export function generatePipelinePrompt(
  opportunities: Array<Record<string, unknown>>,
  stages: string[]
): string {
  return `Generate a pipeline board showing ${opportunities.length} opportunities across these stages: ${stages.join(', ')}.

Include:
- A PageHeader with gradient=true showing total count, total value, avg deal size, and win rate
- A KanbanBoard with one column per stage, each with the relevant opportunity cards
- Cards should show: title, contact name, deal value, status, and date

Opportunity data:
${JSON.stringify(opportunities, null, 2)}`
}

/**
 * Generate an invoice preview prompt from GHL API invoice data.
 */
export function generateInvoicePrompt(invoice: Record<string, unknown>): string {
  return `Generate an invoice preview for this invoice:

Include:
- DetailHeader with invoice number and status badge
- Dates section (issue date, due date, terms)
- SplitLayout with From/To InfoBlocks
- LineItemsTable for line items
- KeyValueList for totals (subtotal, discount, tax, total, amount due)
- ActionBar with Download PDF, Send Invoice, and Mark Paid buttons

Invoice data:
${JSON.stringify(invoice, null, 2)}`
}
