// MNote debug /tree shell icon templates and small DOM factories.

export const TREE_SHELL_ICONS = {
  add: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  `,
  more: `
    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
      <circle cx="4" cy="8" r="1.2"/>
      <circle cx="8" cy="8" r="1.2"/>
      <circle cx="12" cy="8" r="1.2"/>
    </svg>
  `,
  edit: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3.4 11.8 3 13l1.2-.4 6.6-6.6-1.4-1.4-6 6.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
      <path d="m9.9 4.6 1.5-1.5a1 1 0 0 1 1.4 0l.6.6a1 1 0 0 1 0 1.4l-1.5 1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
    </svg>
  `,
  up: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M8 12.6V4.2M8 4.2 5.4 6.8M8 4.2l2.6 2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
  page: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M9.2 2.8v2.8H12" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
    </svg>
  `,
  index: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M6 7h4M6 9h4M6 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
    </svg>
  `,
  mindmap: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <circle cx="8" cy="8" r="1.6" fill="currentColor"/>
      <circle cx="4" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
      <circle cx="12" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
      <circle cx="12" cy="11.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
      <path d="M6.8 7 4.9 5.4M9.2 7l1.9-1.6M9.1 9l2 1.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
    </svg>
  `,
  table: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="3.2" y="3.2" width="9.6" height="9.6" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
      <path d="M3.8 6.6h8.4M6.6 3.8v8.4M9.4 3.8v8.4" stroke="currentColor" stroke-width="1.1"/>
    </svg>
  `,
  pdf: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M6 10.8V6.5h1.5a1.2 1.2 0 1 1 0 2.4H6m3.2-2.4v4.3m0 0c1.1 0 1.8-.8 1.8-2.1 0-1.3-.7-2.2-1.8-2.2m-1.7 4.3h1.7" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
  book: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4.2 3.2h6.2a1.6 1.6 0 0 1 1.6 1.6v7.4H5.4a1.2 1.2 0 0 0-1.2 1.2V4.4a1.2 1.2 0 0 1 1.2-1.2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M5.4 12.2V4.1M7 6h3.1M7 8.2h3.1" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
    </svg>
  `,
  image: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="3" y="3" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
      <circle cx="6.2" cy="6.2" r="1.1" stroke="currentColor" stroke-width="1"/>
      <path d="M4.5 11 7.1 8.6l1.8 1.7 1.7-1.5L12 11" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  `,
  video: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <rect x="3" y="3.4" width="7.8" height="9.2" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
      <path d="m9.8 7 2.8-1.7v5.4L9.8 9" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
    </svg>
  `,
  audio: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M6.4 4.2v7.6a1.5 1.5 0 1 1-1-1.4V5.6l5.2-1.2v5.2a1.5 1.5 0 1 1-1-1.4V3.5L6.4 4.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
    </svg>
  `,
  file: `
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
      <path d="M6 8.2h4M6 10.4h2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
    </svg>
  `,
};

export function createTreeShellKindBadge(kind) {
  const badge = document.createElement("span");
  badge.className = "tree-kind-badge";
  badge.dataset.kind = kind;
  badge.innerHTML =
    kind === "mindmap"
      ? TREE_SHELL_ICONS.mindmap
      : kind === "table"
        ? TREE_SHELL_ICONS.table
        : kind === "pdf"
          ? TREE_SHELL_ICONS.pdf
          : kind === "book"
            ? TREE_SHELL_ICONS.book
            : kind === "image"
              ? TREE_SHELL_ICONS.image
              : kind === "video"
                ? TREE_SHELL_ICONS.video
                : kind === "audio"
                  ? TREE_SHELL_ICONS.audio
                  : kind === "index"
                    ? TREE_SHELL_ICONS.index
                    : kind === "page"
                      ? TREE_SHELL_ICONS.page
                      : TREE_SHELL_ICONS.file;
  return badge;
}

export function createTreeShellActionButton(icon, testId, title, onClick, disabled, busy) {
  const button = document.createElement("button");
  button.type = "button";
  button.className = "tree-action";
  button.dataset.testid = testId;
  button.title = title;
  button.setAttribute("aria-label", title);
  button.innerHTML = icon;
  button.disabled = disabled || busy;
  button.addEventListener("click", (event) => {
    event.stopPropagation();
    onClick(button);
  });
  return button;
}
