'use client';

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

interface RichTextEditorProps {
  value: string;
  onChange: (html: string) => void;
  placeholder?: string;
  height?: number;
}

/**
 * Self-hosted TinyMCE editor (served from /public/tinymce — no cloud API key needed).
 * Uses the GPL license mode so it works fully offline.
 */
export default function RichTextEditor({
  value,
  onChange,
  placeholder = 'Write here…',
  height = 300,
}: RichTextEditorProps) {
  return (
    <Editor
      // Load the self-hosted bundle copied into public/ by the postinstall script.
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      licenseKey="gpl"
      value={value}
      onEditorChange={(content) => onChange(content)}
      init={{
        height,
        menubar: false,
        branding: false,
        promotion: false,
        placeholder,
        // All resources are bundled locally.
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        plugins: [
          'advlist', 'autolink', 'lists', 'link', 'charmap',
          'searchreplace', 'visualblocks', 'code', 'fullscreen',
          'insertdatetime', 'table', 'wordcount',
        ],
        toolbar:
          'undo redo | blocks | bold italic underline forecolor | ' +
          'alignleft aligncenter alignright | bullist numlist outdent indent | ' +
          'link table | removeformat | code fullscreen',
        content_style:
          "body { font-family: 'Poppins', -apple-system, sans-serif; font-size: 14px; }",
      }}
    />
  );
}