import { Link, useParams } from 'react-router-dom'
import { EmailPreviewLayout } from './EmailPreviewLayout'
import { EMAIL_TEMPLATE_REGISTRY, isEmailTemplateSlug } from './emailTemplatesRegistry'

export function EmailTemplatePreviewPage() {
  const { templateId } = useParams<{ templateId: string }>()
  const slug = templateId ?? ''

  if (!isEmailTemplateSlug(slug)) {
    return (
      <div className="container py-4">
        <div className="alert alert-warning">Unknown template: {slug}</div>
        <Link to="/app/administrator/email-templates">Back to list</Link>
      </div>
    )
  }

  const entry = EMAIL_TEMPLATE_REGISTRY[slug]

  return (
    <div className="container-fluid py-3">
      <div className="d-flex flex-wrap align-items-center gap-2 mb-3">
        <Link to="/app/administrator/email-templates" className="btn btn-sm btn-outline-secondary">
          ← All templates
        </Link>
        <h2 className="h5 mb-0">{entry.title}</h2>
      </div>
      <p className="small text-muted mb-3">
        Source template: <code>{entry.sourceTemplatePath}</code>
      </p>
      <EmailPreviewLayout>{entry.render()}</EmailPreviewLayout>
    </div>
  )
}