import React from "react";
import { createRoot } from "react-dom/client";
import Editor from "./Editor";

/**
 * Mount the Koenig editor into the given DOM element.
 *
 * @param {string} elementId  - ID of the container element
 * @param {object} opts
 * @param {string} [opts.initialJson]     - Serialised Lexical JSON (from Ghost)
 * @param {string} [opts.csrfToken]       - CSRF token for API calls
 * @param {object} [opts.uploadUrls]      - { image, media, file } upload endpoint URLs
 * @param {string} [opts.oembedUrl]       - oEmbed proxy endpoint URL
 * @param {string} [opts.unsplashApiKey]  - Unsplash API key for image search
 */
window.mountEditor = function mountEditor(elementId, opts = {}) {
  const container = document.getElementById(elementId);
  if (!container) {
    console.error(`[editor] Element #${elementId} not found`);
    return;
  }

  let currentJson = opts.initialJson || null;

  function handleChange(json) {
    currentJson = json;
    // Stash the latest JSON in a hidden input for form submission
    const hidden = document.getElementById("lexical-json-input");
    if (hidden) hidden.value = json;
  }

  const root = createRoot(container);
  root.render(
    <Editor
      initialState={opts.initialJson || null}
      onChange={handleChange}
      csrfToken={opts.csrfToken || ""}
      uploadUrls={opts.uploadUrls || ""}
      oembedUrl={opts.oembedUrl || "/editor-api/oembed/"}
      unsplashApiKey={opts.unsplashApiKey || ""}
      snippetsUrl={opts.snippetsUrl || ""}
    />
  );

  // Return handle for programmatic access
  return {
    getJson: () => currentJson,
  };
};