'use client'

import { Editor } from '@tinymce/tinymce-react'

/**
 * Editor TinyMCE del foro (community, self-hosted desde /tinymce — ver
 * scripts/copy-tinymce.mjs). Mismo editor que el foro original de FusionCMS, con su
 * skin oscura y su lista de plugins, adaptado a React como componente controlado:
 * el HTML vive en el estado del padre (value/onChange) y se envía por fetch, en vez
 * del `tinyMCE.triggerSave()` + jQuery del forum.js original.
 *
 * `licenseKey: 'gpl'` deja claro que es la edición community (GPL), no la de nube.
 * El HTML que produce se sanea SIEMPRE en el servidor con nh3 (lib/forum-sanitize),
 * nunca se confía en el cliente.
 */
export function ForumEditor({
  value,
  onChange,
  height = 400,
}: {
  value: string
  onChange: (html: string) => void
  height?: number
}) {
  return (
    <Editor
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      licenseKey="gpl"
      value={value}
      onEditorChange={(content) => onChange(content)}
      init={{
        height,
        menubar: false,
        statusbar: false,
        skin: 'oxide-dark',
        content_css: 'dark',
        branding: false,
        promotion: false,
        mobile: { menubar: true },
        plugins:
          'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount emoticons',
        toolbar:
          'bold italic strikethrough forecolor backcolor emoticons | link image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
        image_advtab: true,
      }}
    />
  )
}