export const measureTextWidth = (text, options = {}) => {
  const {
    fontSize = 16,
    fontFamily = 'sans-serif',
    fontWeight = 400,
    letterSpacing = 0,
  } = options;

  if (!text || text.length === 0) return 0;

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
  
  const baseWidth = ctx.measureText(text).width;
  const spacingWidth = letterSpacing * text.length;
  
  return baseWidth + spacingWidth;
};

export const calculateMinWidthForFit = (text, attributes) => {
  if (!text || text.length === 0) return 0;

  const plainText = text.replace(/<[^>]*>/g, '');
  if (!plainText || plainText.length === 0) return 0;

  const fontSizeV2 = attributes.fontSizeV2;
  let fontSize = 16;
  if (fontSizeV2?.pc) {
    const { preset, custom } = fontSizeV2.pc;
    if (preset === 'custom' && custom) {
      fontSize = parseFloat(custom) || 16;
    } else if (preset && preset !== 'custom') {
      fontSize = parseFloat(preset) || 16;
    }
  }

  // fontWeightV2から取得
  let fontWeight = 400;
  const fontWeightV2 = attributes.fontWeightV2;
  if (fontWeightV2?.pc) {
    const { preset, custom } = fontWeightV2.pc;
    if (preset === 'custom' && custom) {
      fontWeight = custom;
    } else if (preset && preset !== 'custom') {
      fontWeight = preset;
    }
  }

  // letterSpacingV2から取得
  let letterSpacing = 0;
  const letterSpacingV2 = attributes.letterSpacingV2;
  if (letterSpacingV2?.pc) {
    const { preset, custom } = letterSpacingV2.pc;
    if (preset === 'custom' && custom) {
      letterSpacing = parseFloat(custom) || 0;
    } else if (preset && preset !== 'custom') {
      letterSpacing = parseFloat(preset) || 0;
    }
  }

  const fontFamily = attributes.fontFamily || 'sans-serif';

  const textWidth = measureTextWidth(plainText, {
    fontSize,
    fontFamily,
    fontWeight,
    letterSpacing,
  });

  // パディングの単位をピクセルに変換するヘルパー
  const convertToPixels = (value, unit) => {
    const numValue = parseFloat(value) || 0;
    switch (unit) {
      case '%':
      case 'vw':
      case 'vh':
        return 0; // 親要素/ビューポート依存なので0として扱う
      case 'px':
      default:
        return numValue;
    }
  };

  const paddingData = attributes.paddingV2;
  let paddingLeft = 0;
  let paddingRight = 0;
  if (paddingData?.pc) {
    const pcPadding = paddingData.pc;
    if (pcPadding.useIndividual) {
      const leftUnit = pcPadding.leftUnit || 'px';
      const rightUnit = pcPadding.rightUnit || 'px';
      paddingLeft = convertToPixels(pcPadding.left, leftUnit);
      paddingRight = convertToPixels(pcPadding.right, rightUnit);
    } else {
      const bulkUnit = pcPadding.bulkUnit || 'px';
      const bulk = convertToPixels(pcPadding.bulk, bulkUnit);
      paddingLeft = bulk;
      paddingRight = bulk;
    }
  }

  let iconWidth = 0;
  if (attributes.icon && attributes.icon !== '') {
    const iconSizeV2 = attributes.iconSizeV2;
    if (iconSizeV2?.pc?.value) {
      iconWidth = parseFloat(iconSizeV2.pc.value) || 25;
    } else {
      iconWidth = 25;
    }
    const iconGap = parseFloat(attributes.iconGapPC || attributes.iconGap || 8) || 8;
    iconWidth += iconGap;
  }

  const totalWidth = textWidth + paddingLeft + paddingRight + iconWidth;

  return Math.ceil(totalWidth);
};
