import type { Metadata } from 'next'
import { getTranslations, setRequestLocale } from 'next-intl/server'
import { getContentCreator } from '@/lib/content-creator'
import { cleanPostHtml } from '@/lib/forum-sanitize'

export const dynamic = 'force-dynamic'

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params
  const t = await getTranslations({ locale, namespace: 'Misc' })
  return { title: t('creators.pageTitle') }
}

/**
 * Creadores de contenido (el menú VIDEOS) — réplica del partial Django
 * `partials/videos.html`. Enseña el primer creador de `contentcreator`, y
 * si no hay ninguno, el mismo aviso que Django.
 */
export default async function ContentCreatorsPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params
  setRequestLocale(locale)
  const t = await getTranslations('Misc')
  const cc = await getContentCreator()

  return (
    <div className="main-page">
      <div className="middle-content">
        <div className="body-content">
          {/* El título va SIEMPRE, haya creadores o no: Django lo metía dentro
              del `if` y sin datos la página quedaba con un <p> suelto, sin
              cabecera ni caja. Sin creador se usa el título de la sección. */}
          <div className="title-content">
            <h1>{cc ? cc.title : t('creators.pageTitle')}</h1>
          </div>
          {!cc ? (
            <div className="box-content">
              <div className="body-box-content centered">
                <br />
                <p className="second-brown">{t('creators.empty')}</p>
                <br />
              </div>
            </div>
          ) : (
            <>
              <div className="box-content">
                <div className="body-box-content justified">
                  {/* La descripción es HTML de CKEditor (lo edita un admin): se
                      sanea con la misma allowlist que los mensajes del foro. */}
                  <div dangerouslySetInnerHTML={{ __html: cleanPostHtml(cc.description) }} />
                  <br />
                  <br />

                  {(cc.youtubeVideoUrl || cc.avatarImageUrl) && (
                    <div className="cc-box cc-youtube">
                      <div className="cc-text">
                        {cc.avatarImageUrl && (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img className="cc-avatar" src={cc.avatarImageUrl} alt="Avatar" />
                        )}
                        {cc.youtubeVideoUrl && (
                          <iframe
                            src={cc.youtubeVideoUrl}
                            height="168"
                            width="300"
                            title="YouTube video player"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowFullScreen
                            data-cookieconsent="ignore"
                          />
                        )}
                        <p className="cc-name">{cc.subtitle}</p>
                        <br />
                        <p className="second-brown">{t('creators.contentType')}:</p>
                        <p>{cc.contentType}</p>
                        <br />
                        <p className="second-brown">{t('creators.media')}:</p>
                        <ul>
                          {cc.youtubeChannelUrl && (
                            <li>
                              <i className="fab fa-youtube" />{' '}
                              <a href={cc.youtubeChannelUrl} target="_blank" rel="noopener noreferrer">
                                YouTube
                              </a>
                            </li>
                          )}
                          {cc.facebookPageUrl && (
                            <li>
                              <i className="fab fa-facebook" />{' '}
                              <a href={cc.facebookPageUrl} target="_blank" rel="noopener noreferrer">
                                Facebook
                              </a>
                            </li>
                          )}
                        </ul>
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  )
}