resolutionflow/frontend/src/components/editor-ai/NodeSummary.tsx

import { HelpCircle, Zap, CheckCircle, FileText, Layout } from 'lucide-react'

interface NodeSummaryProps {
  node?: { id: string; type: string; question?: string; title?: string; description?: string } | null
  flowName?: string
  flowType?: string
  nodeCount?: number
}

const NODE_ICONS: Record<string, typeof HelpCircle> = {
  decision: HelpCircle,
  action: Zap,
  solution: CheckCircle,
}

const NODE_COLORS: Record<string, string> = {
  decision: 'text-blue-400',
  action: 'text-yellow-400',
  solution: 'text-green-400',
}

export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummaryProps) {
  if (!node) {
    return (
      <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
        <div className="flex items-center gap-2">
          <Layout className="h-3.5 w-3.5 text-muted-foreground" />
          <span className="text-xs font-medium text-foreground truncate">
            {flowName || 'Untitled Flow'}
          </span>
        </div>
        <div className="mt-1 flex items-center gap-3 font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
          <span>{flowType || 'flow'}</span>
          {nodeCount !== undefined && <span>{nodeCount} nodes</span>}
        </div>
      </div>
    )
  }

  const Icon = NODE_ICONS[node.type] || FileText
  const colorClass = NODE_COLORS[node.type] || 'text-muted-foreground'

  return (
    <div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
      <div className="flex items-center gap-2">
        <Icon className={`h-3.5 w-3.5 ${colorClass}`} />
        <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
          {node.type}
        </span>
      </div>
      <p className="mt-1 text-sm font-medium text-foreground truncate">
        {node.question || node.title || node.id}
      </p>
      {node.description && (
        <p className="mt-0.5 text-xs text-muted-foreground truncate">{node.description}</p>
      )}
    </div>
  )
}