import { Link } from 'react-router-dom'
import { EMAIL_TEMPLATE_REGISTRY, type EmailTemplateSlug } from './emailTemplatesRegistry'

const SLUGS = Object.keys(EMAIL_TEMPLATE_REGISTRY) as EmailTemplateSlug[]

export function EmailTemplatesIndexPage() {
  return (
    <div className="container-fluid py-3">
      <h2 className="h4 mb-3">Email templates (preview)</h2>
      <p className="text-muted small mb-4">
        React previews matching the current PHP email templates. Laravel should render the same HTML
        for outgoing mail; this UI is for QA and copy review.
      </p>
      <div className="mb-3">
        <Link to="/app/administrator/parent-email-extractor" className="btn btn-outline-primary btn-sm">
          Parent email extractor tool
        </Link>
      </div>
      <div className="table-responsive">
        <table className="table table-sm table-striped align-middle">
          <thead>
            <tr>
              <th>Template</th>
              <th>Source template</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {SLUGS.sort().map((slug) => {
              const row = EMAIL_TEMPLATE_REGISTRY[slug]
              return (
                <tr key={slug}>
                  <td>{row.title}</td>
                  <td>
                    <code className="small">{row.sourceTemplatePath}</code>
                  </td>
                  <td className="text-end">
                    <Link className="btn btn-sm btn-outline-secondary" to={
                      '/app/administrator/email-templates/' + slug
                    }>
                      Preview
                    </Link>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}
