import type { BlockEditor } from "./editor.type.js";

export const codeBlockEditor: BlockEditor = (container, raw, attrs, onCommit, onCancel) => {
  container.innerHTML = "";

  // --- Meta row: language + filepath ---
  const meta = document.createElement("div");
  meta.classList.add("code-meta");

  const langInput = document.createElement("input");
  langInput.type = "text";
  langInput.classList.add("edit-input", "code-meta-input");
  langInput.placeholder = "language";
  langInput.value = attrs.language ?? "";

  const pathInput = document.createElement("input");
  pathInput.type = "text";
  pathInput.classList.add("edit-input", "code-meta-input");
  pathInput.placeholder = "filepath (optional)";
  pathInput.value = attrs.filepath ?? "";

  meta.appendChild(langInput);
  meta.appendChild(pathInput);
  container.appendChild(meta);

  // --- Code textarea ---
  const input = document.createElement("textarea");
  input.classList.add("edit-input", "code-editor");
  input.value = raw;
  container.appendChild(input);

  const commit = () => {
    const newAttrs: Record<string, string> = { ...attrs };
    const lang = langInput.value.trim();
    if (lang) {
      newAttrs.language = lang;
    } else {
      delete newAttrs.language;
    }
    const fp = pathInput.value.trim();
    if (fp) {
      newAttrs.filepath = fp;
    } else {
      delete newAttrs.filepath;
    }
    onCommit(input.value, newAttrs);
  };

  const onKey = (e: KeyboardEvent) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      commit();
    }
    if (e.key === "Escape") {
      e.preventDefault();
      onCancel();
    }
  };

  langInput.addEventListener("keydown", onKey);
  pathInput.addEventListener("keydown", onKey);
  input.addEventListener("keydown", onKey);
  input.focus();
};