// ─────────────────────────────────────────────
// DO_Fields_Display.jsx
// TextField — static text and formula display objects
// Requires: DO_Shared.jsx (S)
// ─────────────────────────────────────────────

// ─────────────────────────────────────────────
// TEXT / DISPLAY OBJECT
// Renders static content or formula with field substitution
// Not editable by the user — display only
// Formula: "Hello {f1}, your balance is {f3}"
//   → substitutes field values from current record
// ─────────────────────────────────────────────
function TextField({ obj, record }) {
  // Substitute {f1}, {f2} etc. in both content and formula fields
  function substitute(str) {
    if (!str) return '';
    return str.replace(/\{(\w+)\}/g, (_, f) => record?.[f] ?? '');
  }

  const raw     = obj.formula || obj.content || obj.label || '';
  const display = substitute(raw);

  const bg      = obj.bg_color || obj.bgcolor  || 'transparent';
  const color   = obj.color                    || '#374151';
  const bold    = obj.bold || (obj.fontWeight && obj.fontWeight >= 600) || false;
  const fs      = obj.fontsize || obj.fontSize || null;
  const align   = obj.textalign || obj.textAlign || 'left';
  const rounded = obj.rounded ? '8px' : '4px';

  return (
    <div className="do-text" style={{
      backgroundColor: bg !== 'transparent' && bg ? bg : undefined,
      borderRadius:    rounded,
      color,
      fontWeight:  bold ? 700 : 400,
      fontSize:    fs ? `${fs}px` : undefined,
      textAlign:   align,
    }}
      dangerouslySetInnerHTML={{ __html: display }}
    />
  );
}

// ─────────────────────────────────────────────
// SKELETON LOADER
// Shows while record data is loading
// ─────────────────────────────────────────────
function Skeleton() {
  return (
    <div className="do-text" style={S.skeletonWrap}>
      {[1,2,3].map(i => (
        <div key={i} style={S.skeletonRow}>
          {[1,2].map(j => (
            <div key={j} style={{ ...S.skeletonCol, flex: 1 }}>
              <div style={S.skeletonLabel} />
              <div style={S.skeletonInput} />
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}