resolutionflow/frontend/src/components/kb-accelerator/NodeCard.tsx

import { useState } from 'react'
import { Check, X, Pencil, Trash2, RotateCcw, Plus, ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { KBImportNode, KBNodeEditRequest } from '@/types/kbAccelerator'

interface NodeCardProps {
  node: KBImportNode
  onEdit: (nodeId: string, data: KBNodeEditRequest) => Promise<void>
  onHighlight: (excerpt: string | null) => void
}

function confidenceColor(score: number): string {
  if (score >= 0.85) return 'border-emerald-400/40'
  if (score >= 0.65) return 'border-amber-400/40'
  return 'border-rose-500/40'
}

function confidenceLabel(score: number): string {
  if (score >= 0.85) return 'High'
  if (score >= 0.65) return 'Medium'
  return 'Low'
}

function confidenceTextColor(score: number): string {
  if (score >= 0.85) return 'text-emerald-400'
  if (score >= 0.65) return 'text-amber-400'
  return 'text-rose-500'
}

export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
  const [expanded, setExpanded] = useState(false)
  const [editMode, setEditMode] = useState(false)
  const [editContent, setEditContent] = useState('')
  const [busy, setBusy] = useState(false)

  const question = (node.content?.question as string) ?? ''
  const options = (node.content?.options as Array<{ label: string; next_node_id?: string }>) ?? []
  const stepContent = (node.content?.content as string) ?? question

  const handleAction = async (operation: KBNodeEditRequest['operation'], extra?: Partial<KBNodeEditRequest>) => {
    setBusy(true)
    try {
      await onEdit(node.id, { operation, ...extra })
      if (operation === 'edit') setEditMode(false)
    } finally {
      setBusy(false)
    }
  }

  const startEdit = () => {
    setEditContent(stepContent || question)
    setEditMode(true)
  }

  return (
    <div
      className={cn(
        'card-flat border-l-4 p-4 transition-all',
        confidenceColor(node.confidence_score),
        node.user_approved && 'opacity-75',
      )}
      onMouseEnter={() => onHighlight(node.source_excerpt)}
      onMouseLeave={() => onHighlight(null)}
    >
      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
              {node.node_type}
            </span>
            <span className={cn('font-sans text-xs text-[0.625rem]', confidenceTextColor(node.confidence_score))}>
              {confidenceLabel(node.confidence_score)} ({Math.round(node.confidence_score * 100)}%)
            </span>
            {node.user_approved && (
              <span className="font-sans text-xs text-[0.625rem] text-emerald-400">Approved</span>
            )}
            {node.user_edited && (
              <span className="font-sans text-xs text-[0.625rem] text-blue-400">Edited</span>
            )}
          </div>

          {editMode ? (
            <div className="space-y-2">
              <textarea
                value={editContent}
                onChange={e => setEditContent(e.target.value)}
                className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary/30 focus:outline-hidden"
                rows={3}
              />
              <div className="flex gap-2">
                <button
                  onClick={() => handleAction('edit', { content: { ...node.content, question: editContent, content: editContent } })}
                  disabled={busy}
                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-white hover:brightness-110"
                >
                  Save
                </button>
                <button
                  onClick={() => setEditMode(false)}
                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground"
                >
                  Cancel
                </button>
              </div>
            </div>
          ) : (
            <p className="text-sm text-foreground">{stepContent || question}</p>
          )}
        </div>

        {/* Actions */}
        {!editMode && (
          <div className="flex items-center gap-1 shrink-0">
            {!node.user_approved && (
              <button
                onClick={() => handleAction('approve')}
                disabled={busy}
                className="p-1.5 rounded-md text-muted-foreground hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
                title="Approve"
              >
                <Check size={14} />
              </button>
            )}
            {node.user_approved && (
              <button
                onClick={() => handleAction('reject')}
                disabled={busy}
                className="p-1.5 rounded-md text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
                title="Unapprove"
              >
                <X size={14} />
              </button>
            )}
            <button
              onClick={startEdit}
              disabled={busy}
              className="p-1.5 rounded-md text-muted-foreground hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
              title="Edit"
            >
              <Pencil size={14} />
            </button>
            <button
              onClick={() => handleAction('regenerate')}
              disabled={busy}
              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-accent-dim transition-colors"
              title="Regenerate"
            >
              <RotateCcw size={14} />
            </button>
            <button
              onClick={() => handleAction('insert_after', { content: { question: 'New node', type: node.node_type } })}
              disabled={busy}
              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-accent-dim transition-colors"
              title="Insert after"
            >
              <Plus size={14} />
            </button>
            <button
              onClick={() => handleAction('delete')}
              disabled={busy}
              className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
              title="Delete"
            >
              <Trash2 size={14} />
            </button>
          </div>
        )}
      </div>

      {/* Options (troubleshooting) */}
      {options.length > 0 && (
        <div className="mt-3">
          <button
            onClick={() => setExpanded(!expanded)}
            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
          >
            {expanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
            {options.length} option{options.length !== 1 ? 's' : ''}
          </button>
          {expanded && (
            <div className="mt-2 space-y-1 pl-3 border-l border-border">
              {options.map((opt, i) => (
                <p key={i} className="text-xs text-muted-foreground">
                  {opt.label} {opt.next_node_id && <span className="text-text-muted">→ {opt.next_node_id}</span>}
                </p>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Source excerpt */}
      {node.source_excerpt && (
        <p className="mt-2 text-xs text-text-muted italic truncate" title={node.source_excerpt}>
          Source: {node.source_excerpt}
        </p>
      )}
    </div>
  )
}