import { TemplateEditor } from '@/component/TemplateManager/TemplateEditor'
import { useTemplateContext } from '@/entity/template/model/TemplateContext'
import { useSafeNavigation } from '@/hook/useSafeNavigation'
import { useNavigate, useParams } from 'react-router-dom'

export const TemplateEditPage = () => {
  const { templateId } = useParams<{ templateId: string }>()
  const { templates } = useTemplateContext()
  const navigate = useNavigate()

  const { safeNavigate } = useSafeNavigation({
    hasUnsavedChanges: false,
    isSaving: false,
  })

  const template = templates.find(t => t.id === templateId)
  if (!template) {
    navigate('/templates', { replace: true })
    return null
  }

  return <TemplateEditor template={template} onBack={() => safeNavigate(-1)} />
}
