HarborForge.Frontend/src/components/KnowledgeBaseTree.tsx

import { useState } from 'react'
import api from '@/services/api'
import type { KnowledgeBaseTree as Tree, KnowledgeTopicNode, KnowledgeCategoryNode, KnowledgeFact } from '@/types'

type Reload = () => void | Promise<void>

function errMsg(err: any, fallback: string): string {
  return err?.response?.data?.detail || fallback
}

/** A toggle button that reveals a single-line input with save/cancel. */
function InlineForm({ label, placeholder, onSubmit }: {
  label: string
  placeholder: string
  onSubmit: (value: string) => Promise<void>
}) {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState('')
  const [busy, setBusy] = useState(false)

  if (!open) {
    return <button className="kb-mini-btn" onClick={() => { setValue(''); setOpen(true) }}>{label}</button>
  }
  const save = async () => {
    if (!value.trim()) return
    setBusy(true)
    try { await onSubmit(value.trim()); setOpen(false) }
    finally { setBusy(false) }
  }
  return (
    <span className="kb-inline-form">
      <input
        autoFocus
        placeholder={placeholder}
        value={value}
        disabled={busy}
        onChange={(e) => setValue(e.target.value)}
        onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setOpen(false) }}
      />
      <button className="kb-mini-btn" disabled={busy} onClick={save}>✓</button>
      <button className="kb-mini-btn" disabled={busy} onClick={() => setOpen(false)}>✕</button>
    </span>
  )
}

/** Inline editor for a node's name + description (used by topics & categories). */
function NodeEditForm({ initialName, initialDesc, namePlaceholder, onSave, onCancel }: {
  initialName: string
  initialDesc: string
  namePlaceholder: string
  onSave: (name: string, description: string) => Promise<void>
  onCancel: () => void
}) {
  const [name, setName] = useState(initialName)
  const [desc, setDesc] = useState(initialDesc)
  const [busy, setBusy] = useState(false)

  const save = async () => {
    if (!name.trim()) return
    setBusy(true)
    try { await onSave(name.trim(), desc) } finally { setBusy(false) }
  }
  return (
    <div className="kb-edit-form">
      <input
        autoFocus
        placeholder={namePlaceholder}
        value={name}
        disabled={busy}
        onChange={(e) => setName(e.target.value)}
        onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') onCancel() }}
      />
      <textarea
        placeholder="Description (optional)"
        rows={2}
        value={desc}
        disabled={busy}
        onChange={(e) => setDesc(e.target.value)}
      />
      <span className="kb-row-actions">
        <button className="kb-mini-btn" disabled={busy} onClick={save}>save</button>
        <button className="kb-mini-btn" disabled={busy} onClick={onCancel}>cancel</button>
      </span>
    </div>
  )
}

function FactRow({ fact, onChange }: { fact: KnowledgeFact; onChange: Reload }) {
  const [editing, setEditing] = useState(false)
  const [value, setValue] = useState(fact.fact)

  const save = async () => {
    try {
      await api.patch(`/knowledge-facts/${fact.id}`, { fact: value })
      setEditing(false)
      await onChange()
    } catch (err) { alert(errMsg(err, 'Failed to update fact')) }
  }
  const remove = async () => {
    if (!confirm('Delete this fact?')) return
    try { await api.delete(`/knowledge-facts/${fact.id}`); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to delete fact')) }
  }

  return (
    <div className="kb-fact">
      <span className="kb-bullet">•</span>
      {editing ? (
        <span className="kb-inline-form kb-inline-grow">
          <input autoFocus value={value} onChange={(e) => setValue(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter') save(); if (e.key === 'Escape') setEditing(false) }} />
          <button className="kb-mini-btn" onClick={save}>✓</button>
          <button className="kb-mini-btn" onClick={() => { setValue(fact.fact); setEditing(false) }}>✕</button>
        </span>
      ) : (
        <>
          <span className="kb-fact-text">{fact.fact}</span>
          <span className="kb-row-actions">
            <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
            <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
          </span>
        </>
      )}
    </div>
  )
}

function CategoryNode({ cat, onChange }: { cat: KnowledgeCategoryNode; onChange: Reload }) {
  const [editing, setEditing] = useState(false)

  const saveEdit = async (name: string, description: string) => {
    try {
      await api.patch(`/knowledge-categories/${cat.id}`, { name, description: description || null })
      setEditing(false)
      await onChange()
    } catch (err) { alert(errMsg(err, 'Failed to update category')) }
  }
  const remove = async () => {
    if (!confirm('Delete this category and everything under it?')) return
    try { await api.delete(`/knowledge-categories/${cat.id}`); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to delete category')) }
  }
  const addSubcategory = async (value: string) => {
    try { await api.post('/knowledge-categories', { topic_id: cat.topic_id, parent: cat.id, name: value }); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to add category')) }
  }
  const addFact = async (value: string) => {
    try { await api.post('/knowledge-facts', { topic_id: cat.topic_id, category_id: cat.id, fact: value }); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to add fact')) }
  }

  return (
    <div className="kb-node kb-category">
      {editing ? (
        <div className="kb-node-header">
          <NodeEditForm
            initialName={cat.name}
            initialDesc={cat.description || ''}
            namePlaceholder="Category name"
            onSave={saveEdit}
            onCancel={() => setEditing(false)}
          />
        </div>
      ) : (
        <>
          <div className="kb-node-header">
            <span className="kb-node-title">📂 {cat.name}</span>
            <span className="kb-row-actions">
              <InlineForm label="+ category" placeholder="Category name" onSubmit={addSubcategory} />
              <InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
              <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
              <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
            </span>
          </div>
          {cat.description && <div className="kb-node-desc">{cat.description}</div>}
        </>
      )}
      <div className="kb-children">
        {cat.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
        {cat.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
      </div>
    </div>
  )
}

function TopicNode({ topic, onChange }: { topic: KnowledgeTopicNode; onChange: Reload }) {
  const [editing, setEditing] = useState(false)

  const saveEdit = async (name: string, description: string) => {
    try {
      await api.patch(`/knowledge-topics/${topic.id}`, { topic: name, description: description || null })
      setEditing(false)
      await onChange()
    } catch (err) { alert(errMsg(err, 'Failed to update topic')) }
  }
  const remove = async () => {
    if (!confirm('Delete this topic and everything under it?')) return
    try { await api.delete(`/knowledge-topics/${topic.id}`); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to delete topic')) }
  }
  const addCategory = async (value: string) => {
    try { await api.post('/knowledge-categories', { topic_id: topic.id, name: value }); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to add category')) }
  }
  const addFact = async (value: string) => {
    try { await api.post('/knowledge-facts', { topic_id: topic.id, fact: value }); await onChange() }
    catch (err) { alert(errMsg(err, 'Failed to add fact')) }
  }

  return (
    <div className="kb-node kb-topic">
      {editing ? (
        <div className="kb-node-header">
          <NodeEditForm
            initialName={topic.topic}
            initialDesc={topic.description || ''}
            namePlaceholder="Topic name"
            onSave={saveEdit}
            onCancel={() => setEditing(false)}
          />
        </div>
      ) : (
        <>
          <div className="kb-node-header">
            <span className="kb-node-title kb-topic-title"># {topic.topic}</span>
            <span className="kb-row-actions">
              <InlineForm label="+ category" placeholder="Category name" onSubmit={addCategory} />
              <InlineForm label="+ fact" placeholder="Fact" onSubmit={addFact} />
              <button className="kb-mini-btn" onClick={() => setEditing(true)}>edit</button>
              <button className="kb-mini-btn kb-danger" onClick={remove}>del</button>
            </span>
          </div>
          {topic.description && <div className="kb-node-desc">{topic.description}</div>}
        </>
      )}
      <div className="kb-children">
        {topic.facts.map((f) => <FactRow key={f.id} fact={f} onChange={onChange} />)}
        {topic.categories.map((c) => <CategoryNode key={c.id} cat={c} onChange={onChange} />)}
      </div>
    </div>
  )
}

export default function KnowledgeBaseTree({ tree, onChange }: { tree: Tree; onChange: Reload }) {
  const [addingTopic, setAddingTopic] = useState(false)
  const [topicName, setTopicName] = useState('')

  const addTopic = async () => {
    if (!topicName.trim()) return
    try {
      await api.post(`/knowledge-bases/${tree.id}/topics`, { topic: topicName.trim() })
      setTopicName(''); setAddingTopic(false)
      await onChange()
    } catch (err) { alert(errMsg(err, 'Failed to add topic')) }
  }

  return (
    <div className="kb-tree">
      <div className="kb-tree-toolbar">
        {addingTopic ? (
          <span className="kb-inline-form">
            <input autoFocus placeholder="Topic name" value={topicName} onChange={(e) => setTopicName(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter') addTopic(); if (e.key === 'Escape') setAddingTopic(false) }} />
            <button className="kb-mini-btn" onClick={addTopic}>✓</button>
            <button className="kb-mini-btn" onClick={() => setAddingTopic(false)}>✕</button>
          </span>
        ) : (
          <button className="btn-secondary" onClick={() => setAddingTopic(true)}>+ Add topic</button>
        )}
      </div>
      {tree.topics.length === 0 && <p className="empty">No topics yet. Add one above.</p>}
      {tree.topics.map((t) => <TopicNode key={t.id} topic={t} onChange={onChange} />)}
    </div>
  )
}