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

/** Editing UI for `table` blocks — a JSON textarea with live validation. */
export const tableEditor: BlockEditor = (container, raw, _attrs, onCommit, onCancel) => {
  const input = document.createElement("textarea");
  input.classList.add("edit-input", "code-editor");
  try {
    input.value = JSON.stringify(JSON.parse(raw), null, 2);
  } catch {
    input.value = raw;
  }

  const status = document.createElement("div");
  status.style.fontSize = "0.8em";

  const copyBtn = document.createElement("button");
  copyBtn.type = "button";
  copyBtn.classList.add("copy-json");
  copyBtn.textContent = "Copy JSON";

  const footer = document.createElement("div");
  footer.style.display = "flex";
  footer.style.alignItems = "center";
  footer.style.justifyContent = "space-between";
  footer.style.gap = "8px";
  footer.style.marginTop = "4px";
  footer.appendChild(status);
  footer.appendChild(copyBtn);

  const validate = () => {
    try {
      const data = JSON.parse(input.value);
      if (!data.head && !data.body) {
        status.textContent = 'Needs "head" or "body"';
        status.style.color = "";
        return false;
      }
      status.textContent = "Valid";
      status.style.color = "";
      return true;
    } catch (e) {
      status.textContent = e instanceof Error ? e.message : "Invalid JSON";
      status.style.color = "";
      return false;
    }
  };

  input.addEventListener("input", validate);

  copyBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    navigator.clipboard.writeText(input.value).then(
      () => {
        status.textContent = "Copied";
      },
      () => {
        status.textContent = "Copy failed";
      },
    );
  });

  input.addEventListener("keydown", (e) => {
    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      if (validate()) onCommit(input.value);
    }
    if (e.key === "Escape") {
      e.preventDefault();
      onCancel();
    }
  });

  container.innerHTML = "";
  container.appendChild(input);
  container.appendChild(footer);
  validate();
  input.focus();
};