import { useParams, useNavigate, useLocation } from 'react-router-dom'
import { useAppPath } from '@core/hooks/useAppPath'
import { KBArticleEditor } from '@core/components/kb/KBArticleEditor'

const DEFAULT_NEW_TYPE_SLUG = 'kb-spine-internal'

export default function KBArticleEditorPage() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const appPath = useAppPath()
  const location = useLocation()
  const path = location.pathname

  const isNew = !id || id === 'new' || path.endsWith('/new')
  const isEdit = !isNew && path.endsWith('/edit')
  const mode = isNew ? 'new' : isEdit ? 'edit' : 'view'

  return (
    <div className="h-full min-h-0">
      <KBArticleEditor
        typeSlug={DEFAULT_NEW_TYPE_SLUG}
        mode={mode}
        articleId={isNew ? null : id}
        onBack={() => navigate(appPath('/knowledge/dashboard'))}
        onSave={(record) => navigate(appPath(`/knowledge/articles/${record?.id || id}`))}
        onEdit={(articleId) => navigate(appPath(`/knowledge/articles/${articleId}/edit`))}
        onCancel={() => navigate(appPath('/knowledge/dashboard'))}
        onDelete={() => navigate(appPath('/knowledge/dashboard'))}
      />
    </div>
  )
}