export function formatSliderValue(value, step) {
  if (step >= 1) return Math.round(value).toString();
  if (step >= 0.1) return Number.parseFloat(value).toFixed(1);
  if (step >= 0.01) return Number.parseFloat(value).toFixed(2);
  return Number.parseFloat(value).toFixed(3);
}

function keyframeButton(paramId, active) {
  return `<button class="keyframe-toggle${active ? ' active' : ''}" data-param="${paramId}" title="Toggle keyframing (K)">K</button>`;
}

function vectorRows(idPrefix, values, min, max, step, showKeyframes, isExposed, boundStep) {
  return ['x', 'y', 'z'].map(axis => {
    const id = `${idPrefix}_${axis}`;
    const button = showKeyframes ? keyframeButton(id, isExposed(id)) : '';
    return `<div class="xyz-slider-row"><span class="xyz-axis">${axis.toUpperCase()}</span><input type="number" class="xyz-min" id="${id}_min" value="${min}" step="${boundStep}"><div class="slider-wrapper"><input type="range" id="${id}" value="${values[axis]}" min="${min}" max="${max}" step="${step}" data-parameter-slider="true" title="Double-click the slider handle to enter a value"><div class="slider-thumb-value" id="${id}_thumb">${formatSliderValue(values[axis], step)}</div></div><input type="number" class="xyz-max" id="${id}_max" value="${max}" step="${boundStep}">${button}</div>`;
  }).join('');
}

export function createParameterBuilders({
  isExposed = () => false,
  normalizeColor = color => color,
  isVideoFile = () => false,
} = {}) {
  const createXYZ = (idPrefix, x, y, z, min = -10, max = 10, step = 0.1, showKeyframes = false) => (
    `<div class="param-xyz-sliders">${vectorRows(idPrefix, { x, y, z }, min, max, step, showKeyframes, isExposed, 1)}</div>`
  );
  return {
    createParamRow(label, inputHtml, paramId = null) {
      const button = paramId ? keyframeButton(paramId, isExposed(paramId)) : '';
      return `<div class="param-row"><span class="param-label">${label}</span><div class="param-value">${inputHtml}${button}</div></div>`;
    },
    createTextureSelect(id, currentValue) {
      const displayName = currentValue ? currentValue.split('/').pop() : 'None';
      const hasTexture = !!currentValue;
      const icon = currentValue && isVideoFile(currentValue) ? '🎬' : '';
      return `<div class="texture-select" id="${id}_container">
      <span class="texture-name ${hasTexture ? 'has-texture' : ''}" id="${id}_name">${icon}${displayName}</span>
      <button class="btn texture-btn" id="${id}_btn" title="Choose image or video">📁</button>
      ${hasTexture ? `<button class="btn texture-clear-btn" id="${id}_clear" title="Remove texture">✕</button>` : ''}
    </div>`;
    },
    createSlider(id, value, min, max, step = 0.1) {
      return `<input type="number" class="slider-min" id="${id}_min" value="${min}" step="${step}" title="Min value">
            <div class="slider-wrapper">
              <input type="range" id="${id}" value="${value}" min="${min}" max="${max}" step="${step}" data-parameter-slider="true" title="Double-click the slider handle to enter a value">
              <div class="slider-thumb-value" id="${id}_thumb">${formatSliderValue(value, step)}</div>
            </div>
            <input type="number" class="slider-max" id="${id}_max" value="${max}" step="${step}" title="Max value">`;
    },
    createXYZ,
    createScaleXYZ(idPrefix, x, y, z, min = 0.01, max = 10, step = 0.01, showKeyframes = false) {
      return `<div class="param-scale-container"><div class="scale-lock-row"><label class="scale-lock-label"><input type="checkbox" id="${idPrefix}_lock" checked><span>Uniform</span></label></div><div class="param-xyz-sliders">${vectorRows(idPrefix, { x, y, z }, min, max, step, showKeyframes, isExposed, 0.1)}</div></div>`;
    },
    createRotationXYZ(idPrefix, x, y, z, showKeyframes = false) {
      return `<div class="param-xyz-sliders">${vectorRows(idPrefix, { x, y, z }, -360, 360, 1, showKeyframes, isExposed, 90)}</div>`;
    },
    createColorPicker(id, color) {
      return `<input type="color" id="${id}" value="${normalizeColor(color)}">`;
    },
    formatSliderValue,
  };
}
