// compact-fields.js — MGC-only output-format icon picker.
//
// Logger toggle/level and physical-position visuals now live in the shared
// generalFunctions/src/menu/iconHelpers.js (auto-injected by MenuManager), so
// the only MGC-local visuals left are the two output-format dropdowns
// (processOutputFormat, dbaseOutputFormat) — those fields aren't part of any
// shared menu.

(function () {
  const editor = window.EVOLV?.nodes?.machineGroupControl?.editor;
  if (!editor) return;

  const BLUE = '#1F4E79';
  const STEEL = '#607484';

  // MGC-only SVGs (output formats only — logger/position SVGs come from
  // window.EVOLV.iconHelpers.SVG).
  const SVG = {
    process: `
      <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <rect x="10" y="14" width="20" height="30" rx="2" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
        <rect x="50" y="14" width="20" height="30" rx="2" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
        <line x1="30" y1="29" x2="46" y2="29" stroke="${BLUE}" stroke-width="3" stroke-linecap="round"/>
        <path d="M42 24 L48 29 L42 34" fill="none" stroke="${BLUE}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`,
    json: `
      <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <g fill="none" stroke="${BLUE}" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round">
          <path d="M30 14 C22 16 22 26 27 29 C22 32 22 42 30 44"/>
          <path d="M50 14 C58 16 58 26 53 29 C58 32 58 42 50 44"/>
        </g>
        <g fill="${STEEL}">
          <circle cx="36" cy="29" r="2.2"/>
          <circle cx="44" cy="29" r="2.2"/>
        </g>
      </svg>`,
    csv: `
      <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <rect x="12" y="12" width="56" height="34" rx="2" fill="#fff" stroke="${STEEL}" stroke-width="2.4"/>
        <line x1="12" y1="22" x2="68" y2="22" stroke="${STEEL}" stroke-width="2"/>
        <g stroke="${STEEL}" stroke-width="1.6">
          <line x1="12" y1="34" x2="68" y2="34"/>
          <line x1="31" y1="12" x2="31" y2="46"/>
          <line x1="49" y1="12" x2="49" y2="46"/>
        </g>
      </svg>`,
    influxdb: `
      <svg viewBox="0 0 80 58" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <ellipse cx="40" cy="15" rx="22" ry="6" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
        <path d="M18 15 V42 C18 46 28 49 40 49 C52 49 62 46 62 42 V15" fill="#f7fafc" stroke="${STEEL}" stroke-width="2.4"/>
        <path d="M18 28 C26 32 54 32 62 28" fill="none" stroke="${STEEL}" stroke-width="1.6" opacity="0.6"/>
        <path d="M22 39 L30 32 L38 41 L46 34 L54 38" fill="none" stroke="${BLUE}" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>`,
  };

  const outputIcons = {
    process: SVG.process,
    json: SVG.json,
    csv: SVG.csv,
    influxdb: SVG.influxdb,
  };

  const outputLabels = {
    process: 'Process',
    json: 'JSON',
    csv: 'CSV',
    influxdb: 'Influx',
  };

  function initOutputFormats() {
    const helpers = window.EVOLV?.iconHelpers;
    if (!helpers) return;

    const processSelect = document.getElementById('node-input-processOutputFormat');
    const processHolder = document.getElementById('mgc-process-output-picker');
    if (processSelect && processHolder) {
      helpers.renderSelectPicker(processSelect, processHolder, outputIcons, outputLabels);
    }

    const dbaseSelect = document.getElementById('node-input-dbaseOutputFormat');
    const dbaseHolder = document.getElementById('mgc-dbase-output-picker');
    if (dbaseSelect && dbaseHolder) {
      helpers.renderSelectPicker(dbaseSelect, dbaseHolder, outputIcons, outputLabels);
    }
  }

  function init() {
    initOutputFormats();
  }

  editor.compactFields = { init };
})();